Javascript中的ajax

  当初面试html5前端工程师，被一家上市软件公司的技术面试官提过一个问题。

  原生js中ajax是基于什么对象？

  我当初用的比较熟练的是jQuery框架，我当时只知道用jquery中的$ajax()方法调用，而真是不知道原生的ajax是基于什么对象，我思考了一会儿，也老实的回答了面试官的问题，我说：“这个我真的不知道，回去我在仔细看看！”

  然后就谦虚的问面试官，ajax是基于什么对象，他也耐心的给我回到了，说是：“xhr:----xmlhttpRequest然后就给我耐心的解释，这个名字我有点印象，当时听得还是有些模糊，后来回去就仔细的看了一下原生js中的ajax到底是什么鬼？(IE5 和 IE6 使用 ActiveXObject)

var xmlhttp;if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest();//也就是要new一个对象，这个是核心，记住。  }else  {// code for IE6, IE5  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }

  后来我还是被这家公司给录用了，这个咋们先不谈，还是先谈谈ajax是什么？

  我想大家应该都知道，弹幕这个概念吧，举个最简单的例子，比如lol直播，上面会弹出好多的用户发表的观点，这就是ajax的异步加载，其目的在于“不刷新、不跳转”页面的情况下通过服务器请求异步完成。

  这样可以降低服务器的负载，减少用户等待时间，加快响应速度。

  而ajax的核心了，xmlhttpRequest,简称xhr(小黄人)，这个东西名字一大堆，到底是个什么鬼呢？

  其实很好理解，咋们把它拆开，xml指的是可扩展标记语言，和json类似，json是一种文件的格式，这个要是你不知道，赶紧去百度。

  http,大家肯定熟悉，等会后面会重点说它。Request,也就是请求。

  ajax就是先是通过http向服务器发送请求，然后得到服务器的响应，然后得到回馈。这句话很重要，请大家记住，接下来说的更重要，请大家也要记住，不懂得就百度。

 一个Http请求一般由四部分组成。

 1、http请求的方法或动作，比如是get还是post

 2、正在请求URL(可以使json文件)总得知道请求的地址是什么吧

 3、请求头，包含一些客户端环境信息，身份验证信息等

 4、请求体，也就是请求正文，请求正文中可以包含客户提交的查询字符串信息，表单信息等等。

 请求完了之后，就会得到http响应，一个http响应一般由三部分组成。

 1、一个数字和父子组成的状态码，用来请求是成功还是失败

 2、响应头也和请求头一样，包含许多有用的信息，例如服务器类型，日期时间，内容类型和长度等。

 3、响应体，也就是响应正文。

 function ajax() {10 11           //先声明一个异步请求对象，判断兼容12           var xmlHttpReg = null;13           if (window.ActiveXObject) {//如果是IE14 15               xmlHttpReg = new ActiveXObject("Microsoft.XMLHTTP");16 17           } else if (window.XMLHttpRequest) {18 19               xmlHttpReg = new XMLHttpRequest(); //实例化一个xmlHttpReg20           }21 22           //如果实例化成功,就调用open()方法,就开始准备向服务器发送请求，23           if (xmlHttpReg != null) {24               xmlHttpReg.open("get", "About.aspx", true);125                xmlHttpReg.send(null);26               xmlHttpReg.onreadystatechange = doResult; //设置回调函数27              //  open()和send()是xhr对象中的一个方法。详细的可以去百度一下28           }29 30           //回调函数31           //一旦readyState的值改变,将会调用这个函数,readyState=4表示完成相应32 33           //设定函数doResult()34           function doResult() {35           // 这段代码可能对于初学者理解起来可能有点困难，可以百度去看下
readyState和status，当它们值等于4和200时，表示执行完成和成功，不懂得可以话可以强行记下来。
36               if (xmlHttpReg.readyState == 4) {//4代表执行完成37                  38                  39                   if (xmlHttpReg.status == 200) {//200代表执行成功40                       //将xmlHttpReg.responseText的值赋给ID为resText的元素41                       document.getElementById("resText").innerHTML = 
xmlHttpReg.responseText;
                   //responseText也是基于对象下的一种方法，获得字符串形成的响应数据。
42                       43 44                   }45               }46 47           }48         49 50       }