ajax基础入门

Posted 2020-07-20 取一个响当当的名字很重要

在上家公司，我自认为我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或者其他浏览器使用 new XMLHttpRequest() 就能创建了一个 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已经把所有的步骤都封装好，让技术员指需要关注成功与否，但很多时候了解其中的原理，处理问题会让人更加灵活并且得心应手。