原生Ajax的使用——含开放API接口

Posted learnroad

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了原生Ajax的使用——含开放API接口相关的知识,希望对你有一定的参考价值。

看了两天关于Ajax的使用,总感觉云里雾里的。

故在此总结梳理一下,如果疏漏错误还请纠正支出。

 

Ajax能够在向服务器请求额外的数据时,不必重新加载/卸载整个页面,实现一小块区域性的刷新,也是常说的异步更新。

它的核心是XMLHttpRequest对象(简称XMR对象)。

 

技术图片

 

从对服务器的请求到接受返回来的数据,可以从上图简单先了解一下。

 

第一步,先新建一个XHR对象

//这里新建一个XHR对象

var xhr;

//如果你想兼容IE5的浏览器,那你必须先判断
if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest(); //比较常用的
} else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP"); //兼容IE的写法
}

 

第二步,调用XHR对象的方法open()来初始化

open(); 有三个参数

第一个是method,请求的方式: "POST,GET..." 这两个比较常用

第二个是请求的URL,可以是绝对路径或者相对路径,当要遵循同域原则

第三个是true和false,true表示异步请求,false是同步请求。默认是true; 

 

xhr.open("GET","example.php",true);
//这里只是初始化请求条件!并未发送请求

//这里发送了一次请求。
//send();可以发送数据,但如果不,建议传入null,以便一些浏览器报错;
xhr.send(null);

 

第三步,发送完请求然后呢?判断请求失败了还是成功了。

xhr有这样一个属性;

xhr.status;

存储着响应的HTTP状态

如果它的值是200,表示请求成功。

如果它的值为304 表示请求的资源并没有被修改,可以直接使用浏览器中缓存的版本;

 

xhr.status; 

//因为有的浏览器会错误报告204状态代码
if (xhr.status >= 200 && xhr.status <= 300 || xhr.status == 304) {
  console.log("请求成功");
  alert(xhr.responseText); // 弹出请求到的数据
} else {
  alert(xhr.status); //请求失败,弹出失败的状态
}

 

到此为止,以上是可以成功发送同步请求的。

但问题来了,我们是发送异步请求,让JS代码继续执行不必等待响应。

还有一个属性

XHR对象的readyState;五个值

0:未初始化,未调用open();

1:启动,但并未发送请求;

2:发送,已经发送请求;

3:接受,已经接受到部分响应数据;

4:完成所有数据的接受,并可以在客户端使用了。

只要readyState属性的值变成另外一个值,就会触发readystatechange事件。

 

我们来利用这个事件做操作

xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) { //说明可以使用了
    if (xhr.status >= 200 && xhr.status <= 300 || xhr.status == 304) {
      alert(xhr.responseText);
    } else {
      alert("请求失败了呢");  
    }
  }
}

 

完整代码

var xhr;
//因为有的浏览器会错误报告204状态代码
if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest(); //比较常用的
} else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP"); //兼容IE的写法
}

xhr.onreadystatechange = function() {   if (xhr.readyState == 4) { //说明可以使用了     if (xhr.status >= 200 && xhr.status <= 300 || xhr.status == 304) {       alert(xhr.responseText);     } else {       alert("请求失败了呢");       }   } }

xhr.open("GET","example.php",true);
xhr.send(null);

 

在做Ajax的实验时,找到一个老哥分享的接口,可以拿来练练手;

在此,也感谢这位老哥分享的文章!

 

免费开放接口API-https://blog.csdn.net/c__chao/article/details/78573737

以上是关于原生Ajax的使用——含开放API接口的主要内容,如果未能解决你的问题,请参考以下文章

AJAX相关JS代码片段和部分浏览器模型

新浪短链接/腾讯短链接的API接口分享(含调用代码)

会SQL语句,就能快速开放你的数据接口API

Ajax 提交 数据含特殊字符 出现500错误

ajax如何调用java写的webservices服务

各开放平台API接口通用 SDK 前言