ajax基础

Posted Leo_wlCnBlogs

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ajax基础相关的知识,希望对你有一定的参考价值。

在上家公司,我自认为我ajax用的已经非常6,因为使用jquery的ajax已经能处理各种数据与错误,但感觉只是会用,但是并不能说出它的所以然,也并不能说出它的五个步骤:

  1. 准备发送请求   (调用 new XMLHttpRequest())   (readyState == 0)
  2. 打开一个请求   (调用open方法)   (readyState == 1)
  3. 发送请求 (调用send方法,并且接收到响应头)  (readyState == 2)
  4. 开始接受到请求 (readyState == 3)
  5. 接受完成 (readyState == 4)

所以我打算恶补一下ajax的基础,虽然它可能并没有多么高深,但是我认为以为合格的前端汪,

  • 会看懂js语法会使用js才能算入门,
  • 把语法基础基本弄明白把js的每个细胞研究一遍算初级,
  • 能够思考js算中级

而此时我应该算入门到初级的中间。

Ajax核心对象XMLHttpRequest

这个对象最早在IE中被实现,不过它最早的时候是通过ActiveXObject实现的,如果不需要管兼容的话,IE9或者其他浏览器使用 newXMLHttpRequest() 就能创建了一个 XHR (XMLHttpRequest) 对象,IE中由于存在三个版本的XHR对象,所以如果需要兼容,需要对这三个版本进行处理,从中选出IE浏览器中最新支持对象:

复制代码
var xhr = null;
if (typeof XMLHttpRequest != undefined){
    xhr = new XMLHttpRequest();
}else if(typeof ActiveXObject != undefined){
    xhr = (function(){
      var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"];
      for (var i =0,ilen = versions.length;i<ilen;i++) {
           try{
                  //避免不支持当前版本报错
                  new ActiveXObject[versions[i]];
                  //保存当前支持的版本
                  argument.callee.ActiveXString = versions[i];
            }
           catch (e) {}
      }     
      //返回一个当前浏览器支持的版本的XHR对象
      return new ActiveXObject(argument.callee.ActiveXString);
    })() ;
}
复制代码

上面这段代码就做了第一阶段的事情,初始化一个请求

打开一个请求 open

 xhr.open(); //xhr是通过new XMLHttpRequest()返回的对象 并没有发送请求,它只定义了请求的类型,url,以及是否异步,

  如: xhr.open("get","index.html",false); 

第一个参数:最常见的请求类型有post和get两种方法,

第二个参数:url如果没有指定完整的(带协议前缀的如: http://,https:// )url地址,那么它的地址相对当前执行代码的页面,

第三个参数:Ajax最优秀的地方便是可以异步同步发送请求,第三个参数false代表同步,true代表异步。

post跟get的区别

对于前端,对它能体现对大的区别就是传参不同,get的参数放在url地址后面以 ?abc=1&bcd=2&dd=3&s=4 的形式传递,而post的参数放在请求主体内,通过 xhr.send() 发送, xhr.send("任何想发送给服务器的字符串"); 

url

url相对与执行当前代码的页面。

在页面http://mydomin.com/test/obj/index.html中调用了xhr.send()表示请求在index.html页面发送,那么url响应的地址就是http://mydomin.com/test/obj/我的请求的url地址。

如果是一个完整的地址,那么必须是同域的情况下才允许发送请求,否在会引发安全报错,同域:同端口同协议的url地址

http://baidu.com:80

协议:http

端口:80

同步与异步的区别

同步请求必须接收完(到达第四阶段)响应才会继续往下执行代码,

而异步请求会在发出一个请求继续执行不会阻碍流程,

不管是同步或在异步当接收完完响应之后会调用onreadystatechange方法,当xhr属性的readystate的值为4(第四阶段)的时候表示接受完成 xhr.onreadystatechange = function(e){} ,除了第零阶段,几乎每个阶段都对调用onreadystatechange方法,但取决于浏览器的实现。

 发送一个请求  xhr.send() 

 xhr.send() 阶段才是真真的发起请求阶段,几乎可以用来发送任何数据,在这个阶段,

如果是异步请求,那么调用之后就会直接执行下面的代码,

如果是同步请求,那么需要等到readyState的值为4也就是接收完所有响应之后才会往下执行。

接受响应

xhr对象有四个关于响应的属性

  • responseText    (响应文本)
  • responseXML       (如果响应头是text/xml或在application/xml那么响应数据会添加到这个属性)
  • status     (响应状态码,200,304,404,500等等)
  • statusText   (响应状态说明)

无论响应的是什么样的内容,都会把服务器返回的内容存在 xhr.responseText 中,所以有时候只需关注 xhr.responseText ,

只有响应头的类型是text/xml或在application/xml的时候 xhr.responseXML 才会填充响应数据

status

不同的状态码表示响应的状态,

0 响应失败(老版的opear可能会错误的把204作为0处理)
200 响应成功、缓存没有失效直接使用缓存(from cache)或者服务器响应成功
204 有些浏览器会错误的返回204,响应成功,但是没有数据
304 响应成功,直接读取缓存,与200(from cache)不同的是,304询问了服务器之后,服务器告知浏览器缓存没有失效可以直接使用
404 响应成功,但是没有找到对应的资源
500 响应成功,服务器内部出现错误

statusText:表示对响应状态的说明,不过有时候并不能准确解释状态,如我直接访问一个发起一个跨域的请求的时候,statusText为空,并且每个浏览器对状态的描述并不是所有的都一致。

虽然jQuery已经把所有的步骤都封装好,让技术员指需要关注成功与否,但很多时候了解其中的原理,处理问题会让人更加灵活并且得心应手。

以上是关于ajax基础的主要内容,如果未能解决你的问题,请参考以下文章

基础 | Ajax

JavaScript基础知识——ajax

高性能javascript学习笔记系列 -ajax

AJAX学习笔记2:XHR实现跨域资源共享(CORS)以及和JSONP的对比

AJAX之XHR

Ajax的基础