原生的ajax总结

1. 什么是Ajax？

Ajax（Asynchronous Javascript And XML：异步Javascript和XML）在2005年2月被提出。不过Ajax并不是一种新的语言或技术。实际上，它由几种已知的技术组合而成。
Ajax技术的核心是XMLHttpRequest。

XMLHttpRequest

　　它是整个Ajax技术的灵魂。Ajax技术的核心就是异步发送请求，而XMLHttpRequest则是异步发送请求的对象。
　　最早应用XMLHttp的是微软。在IE5.0中，微软首次使用了一种新技术，这种技术的实现依赖于一个特定的ActiveX对象，即XMLHttp，能够让开发者异步与服务器交互。XMLHTTP大受欢迎，到2000年几乎成了事实上的标准。Mozilla在这一年实现了具有相同接口的原生对象，称为XMLHttpRequest对象。后来各浏览器也相继实现了XMLHttpRequest对象。于是，XMLHttpRequest成了这个技术的正式名称。

Ajax的工作方式

　　异步是Ajax技术的核心。对于传统的web应用，每次用户发送请求，向服务器提交或获得新数据时，浏览器都会完全丢弃当前页面，而重新加载新的页面。而原本页面中很多内容是不需要重新提交的（假设需要获取的仅仅是表格数据），这样不仅会浪费很多服务器资源，更可怕的是，在服务器完全响应之前，用户浏览器一片空白（这时要断网了就尴尬了。。），用户的动作必须中断。而异步指的是用户发送请求后，完全无需等待，请求在后台发送，不会堵塞用户当前活动。用户无需等到第一次请求得到完全响应，就可以再次请求。
整个Ajax应用的工作过程如下：
　　① JS脚本使用XMLHttpRequest对象向服务器发送请求。发送请求时，就可以是get请求，也可以是post请求（一般都是简单请求，相对而言是预请求，后面应该会写在CORS文章中。）
　　② JS使用XMLHttpRequest对象解析服务器响应数据。
　　③ 操作数据，一般用于更新HTML页面。
XMLHttpRequest的属性和方法（以下简称xhr）
XMLHttpRequest的属性
onreadystatechange
该属性用来指定xhr对象状态改变时的事件函数。
readyState
有如下几种状态。
0：xhr对象还没完成初始化。
1：xhr对象开始发送请求。
2：xhr对象的请求发送完成。
3：xhr对象开始读取服务器的相应。
4：xhr对象读取服务器相应结束。
status
并不是说服务器响应完成后就万事大吉了。还需要看服务器的相应码，就是status。
常用的有：
200 OK：服务器响应正常。
304 Not Modified：该资源在上次请求后没有任何修改。通常用于浏览器的缓存（get请求导致的缓存，加一个随机参数可解决，下面会说到）。
400 Bad Request：语义有误，当前请求无法被服务器理解或者请求参数有误。
403 Forbidden：服务器已经理解请求，但是拒绝执行它。
404 Not Found*：请求失败，请求所希望得到的资源未被在服务器上发现。（大家都懂的。。。多少人满心欢喜的打开界面结果见到了这个。。）
500 Internal Server Error*：内部服务器错误。一般来说，这个问题都会在服务器端的源代码出现错误时出现。
504 Gateway Timeout：请求超时。
更详细的请见百度百科HTTP状态码
statusText
见status。
responseText
该属性用于获取服务器的响应文本。
responseXML
该属性用于获取服务器响应的XML文档对象。

XMLHttpRequest的方法

abort()：停止发送当前请求。
getAllResponseHeaders()：获取字符串形式的服务器返回的所有响应头。
getResponseHeader(‘headerLabel’)：根据响应头的名字，获取对应的响应头。
open(‘method’, ‘url’ ,[, asyncFlag[, ‘username’[, ‘password’]]])：建立与服务器url的连接，以及是否使用异步（true/false）。如果远程服务器需要账号密码，则提供对应信息。（反正账号密码我是没用过）
send(content)：发送请求，其中content是参数。
setRequestHeader(‘label’, ‘value’)：在发送请求（send）之前，先设置请求头。

JS原生AJAX
ajax：一种请求数据的方式，不需要刷新整个页面； ajax的技术核心是 XMLHttpRequest 对象； ajax 请求过程：创建 XMLHttpRequest 对象、连接服务器、发送请求、接收响应数据；

ajax({
        url: "./testXhr.php",              //请求地址
        type: "POST",                       //请求方式
        data: { name: "WeideMo", age: 26 },        //请求参数
        dataType: "json",
        success: function (response, xml) {
            // 此处放成功后执行的代码
        },
        fail: function (status) {
            // 此处放失败后执行的代码
        }
    });

    function ajax(options) {
        options = options || {};
        options.type = (options.type || "GET").toUpperCase();
        options.dataType = options.dataType || "json";
        var params = formatParams(options.data);

        //创建 - 非IE6 - 第一步
        if (window.XMLHttpRequest) {
            var xhr = new XMLHttpRequest();
        } else { 
    //IE6及其以下版本浏览器
            var xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }

        //接收 - 第三步
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                var status = xhr.status;
        //此处不判断304，因为增加随机数后，不命中缓存
                if (status >= 200 && status < 300) {
                    options.success && options.success(xhr.responseText, xhr.responseXML);
                } else {
                    options.fail && options.fail(status);
                }
            }
        }

        //连接 和 发送 - 第二步
        if (options.type == "GET") {
            xhr.open("GET", options.url + "?" + params, true);
            xhr.send(null);
        } else if (options.type == "POST") {
            xhr.open("POST", options.url, true);
            //设置表单提交时的内容类型
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send(params);
        }
    }
    //格式化参数
    function formatParams(data) {
        var arr = [];
        for (var name in data) {
            arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
        }
        arr.push(("v=" + Math.random()).replace(".", ""));
        return arr.join("&");
    }

1、创建

1.1、IE7及其以上版本中支持原生的 XHR 对象，因此可以直接用： var oAjax = new XMLHttpRequest();

1.2、IE6及其之前的版本中，XHR对象是通过MSXML库中的一个ActiveX对象实现的。有的书中细化了IE中此类对象的三种不同版本，即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0 和 MSXML2.XMLHttp.6.0；个人感觉太麻烦，可以直接使用下面的语句创建： var oAjax=new ActiveXObject(’Microsoft.XMLHTTP’);

2、连接和发送

2.1、open()函数的三个参数：请求方式、请求地址、是否异步请求(同步请求的情况极少，至今还没用到过)；

2.2、GET 请求方式是通过URL参数将数据提交到服务器的，POST则是通过将数据作为 send 的参数提交到服务器；

2.3、POST 请求中，在发送数据之前，要设置表单提交的内容类型；

2.4、提交到服务器的参数必须经过 encodeURIComponent() 方法进行编码，实际上在参数列表”key=value”的形式中，key 和 value 都需要进行编码，因为会包含特殊字符。每次请求的时候都会在参数列表中拼入一个 “v=xx” 的字符串，这样是为了拒绝缓存，每次都直接请求到服务器上。

encodeURI() ：用于整个 URI 的编码，不会对本身属于 URI 的特殊字符进行编码，如冒号、正斜杠、问号和井号；其对应的解码函数 decodeURI()；
encodeURIComponent() ：用于对 URI 中的某一部分进行编码，会对它发现的任何非标准字符进行编码；其对应的解码函数 decodeURIComponent()；
3、接收

3.1、接收到响应后，响应的数据会自动填充XHR对象，相关属性如下 responseText：响应返回的主体内容，为字符串类型； responseXML：如果响应的内容类型是 “text/xml” 或 “application/xml”，这个属性中将保存着相应的xml 数据，是 XML 对应的 document 类型； status：响应的HTTP状态码； statusText：HTTP状态的说明；

3.2、XHR对象的readyState属性表示请求/响应过程的当前活动阶段，这个属性的值如下 0-未初始化，尚未调用open()方法； 1-启动，调用了open()方法，未调用send()方法； 2-发送，已经调用了send()方法，未接收到响应； 3-接收，已经接收到部分响应数据； 4-完成，已经接收到全部响应数据；

只要 readyState 的值变化，就会调用 readystatechange 事件，(其实为了逻辑上通顺，可以把readystatechange放到send之后，因为send时请求服务器，会进行网络通信，需要时间，在send之后指定readystatechange事件处理程序也是可以的，我一般都是这样用，但为了规范和跨浏览器兼容性，还是在open之前进行指定吧)。

3.3、在readystatechange事件中，先判断响应是否接收完成，然后判断服务器是否成功处理请求，xhr.status 是状态码，状态码以2开头的都是成功，304表示从缓存中获取，上面的代码在每次请求的时候都加入了随机数，所以不会从缓存中取值，故该状态不需判断。

4、注意，ajax请求是不能跨域的！

一直都在用jquery的ajax写法，却忘记原生的ajax写法了，今天复习一遍。。。。//先声明一个异步请求对象  

•             var xmlHttpReg = null;  
•             function ajax() {  
•                 if (window.ActiveXObject) {//如果是IE  
•                    xmlHttpReg = new ActiveXObject(“Microsoft.XMLHTTP”);  
•                 } else if (window.XMLHttpRequest) {  
•                    xmlHttpReg = new XMLHttpRequest(); //实例化一个xmlHttpReg  
•                 }  
•                 //如果实例化成功,就调用open()方法,就开始准备向服务器发送请求  
•                 if (xmlHttpReg != null) {  
•                    xmlHttpReg.open(“get”, “checknumber.php?type=“+gametype+”&round=”+gameroundno, true);  
•                    xmlHttpReg.send();  
•                    xmlHttpReg.onreadystatechange = doResult; //设置回调函数  
•                 }  
•             }  
•            //设定函数doResult()  
•            function doResult() {  
•                 if (xmlHttpReg.readyState == 4 && xmlHttpReg.status == 200) {//4代表执行完成  
•                     document.getElementById(“content”).innerHTML = xmlHttpReg.responseText;  
•                 }  
•            }  

//先声明一个异步请求对象
            var xmlHttpReg = null;
            function ajax() {
                if (window.ActiveXObject) {//如果是IE
                   xmlHttpReg = new ActiveXObject("Microsoft.XMLHTTP");
                } else if (window.XMLHttpRequest) {
                   xmlHttpReg = new XMLHttpRequest(); //实例化一个xmlHttpReg
                }
                //如果实例化成功,就调用open()方法,就开始准备向服务器发送请求
                if (xmlHttpReg != null) {
                   xmlHttpReg.open("get", "checknumber.php?type="+gametype+"&round="+gameroundno, true);
                   xmlHttpReg.send();
                   xmlHttpReg.onreadystatechange = doResult; //设置回调函数
                }
            }
           //设定函数doResult()
           function doResult() {
                if (xmlHttpReg.readyState == 4 && xmlHttpReg.status == 200) {//4代表执行完成
                    document.getElementById("content").innerHTML = xmlHttpReg.responseText;
                }
           }

原生的js的ajax写法主要有三点：

1、创建异步请求对象

异步请求对象要兼顾IE和标准的浏览器

2、发送请求

发送请求主要用了异步请求对象的open方法和send方法，方法和描述如下所示：

方法	描述
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。 method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）
send(string)	将请求发送到服务器。 string：仅用于 POST 请求

需要注意的是：如果open方法用的是get方式，相应的参数要写到url里，此时send方法里参数可为空，而用post方式时要写到send方法里，例：xmlHttp.send(“a=xxxx&b=xxxx”);

3、状态和响应

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: “OK” 404: 未找到页面

当readyState为4且status为200时，此时获得了服务器的回答。

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。