【前端】javascript__ajax基础知识入门

文章标题采用BEM命名规范。
因为笔者想重新夯实一下技术,因此翻译了MDN上的ajax介绍。英文原文

Ajax是啥

Ajax全名是Asynchronous javascript and xml,是一种利用xmlhttprequest对象与服务端脚本通信的机制。Ajax可以传输的数据格式包括JSON、XML、HTML和text文件。Ajax对Web应用带来巨大的变革的主要原因是,Ajax支持异步,一个页面可以在不进行整页刷新的情况下进行局部元素刷新,这个机制使得Web应用的交互体验更多的接近桌面应用。

Ajax的两大特性:

  • 不用刷新页面即可向服务器请求数据

  • 可以从服务端请求数据并进行处理

第一步:如何发起HTTP请求

为了能够通过javascript创建一个HTTP请求,你需要一个实现该功能的实体类,也就是XMLHttpRequest。一开始,由IE首先提出了一个叫做XMLHTTP的ActiveX 对象,然后火狐,safari和其他浏览器也开始在浏览器中内置XMLHttpRequest对象来实现XMLHttp的功能。所以,实际上是由微软发明了XMLHttpRequest。

//仅用于表面两者的关系,现在并不需要这样,XMLHTTPRequest已经被所有浏览器支持

if(window.XMLHttpRequest){    
   httpRequest = new XMLHttpRequest();
}
else if(window.ActiveXObject){    
   httpRequest = new ActiveXObject();
}

接下来,你需要决定请求到的数据,怎么处理。此时,你需要告诉XMLHttpRequest对象用什么js函数来处理访问请求。将用于处理请求的函数绑定在xmlhttprequest对象的onreadystatechange事件上即可。

httpRequest.onreadystatechange = function(){ //这里放请求的处理逻辑。 }

现在,你可以开始发起请求了,请求对象的open和send方法可以用于发起请求。

httpRequest.open('Get','http://example.com',true);
httpRequest.send(null);
  • open()是Http请求方法,第一个参数为请求类型,例如GET、POST、HEAD等(为了保证每个浏览器都能识别,这里请使用大写)。更多的Http请求信息请查看W3C specs

  • 第二个元素是与请求的URL地址,切记不可跨域访问。如果的确想跨域,请查看HTTP access control

    • 第三个元素是控制是否是异步请求。TRUE代表异步,FALSE代表同步。

在使用POST请求时,你可以利用send()方法发送数据,格式可以是XML、JSON、SOAP等,也可以是查询字符串:

"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"

在发送请求前,你还需要设置一下请求的MIME类型。

httpRequest.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

第二步 处理服务器返回

上面已经讲了,你可以设置js方法来处理服务器请求。

httpRequest.onreadystatechange = nameOfTheFunction;

首先,这个函数需要跟踪请求的状态变化。如果状态返回值为XMLHTTPRequest.DONE(4),代表服务器响应完成,否则,你需要继续跟踪状态。

if(httpRequest.readyState == XMLHttpRequest.DONE){
  //返回数据接收到的处理流程
}else{
  //请求还在继续
}

状态通过readyState来跟踪,状态的枚举值如下:

  • 0(uninitialized)// 请求对象已经创建,尚未完成初始化(open方法还未调用)

  • 1(loading)//open方法已经调用,send方法还未调用

  • 2(loaded) //send方法已经调用,还没获取到数据返回

  • 3(interactive) //一些数据已经返回,responseText还没完全返回

  • 4(complete) //说有请求数据已经返回

下一个事情,是需要检查HTTP的服务端返回码。使用200 ok来判断请求是否成功。

if(httpRequest.status === 200){
  //成功请求
}else{
  //请求有问题,比如404(请求地址没找到)500(内部服务器错误)
}

所有的服务端返回码请查看W3C site

现在,在你检查完请求状态和HTTP状态码后,你可以开始随心所欲的处理请求数据了。你可以使用下面两种数据模式:

  • httpRequest.responseText -以文本格式返回数据

  • httpRequest.responseXML -以XML对象形式返回数据,后续可以在JS中转化为JS对象

注意:上面说的流程是异步流程,在同步流程中,不用这么麻烦,你可以在send()方法后直接获取请求数据。

第四步 示例

示例项就不翻译了,感兴趣的童鞋可以查看原文示例

    原文作者:守望者
    原文地址: https://segmentfault.com/a/1190000008056036
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞