AJAX原生写法

一、手写AJAX的步骤

　　
　　手写AJAX并没有一个固定的标准的答案，但是AJAX的关键步骤就那么几步，我会先用文字介绍关键步骤，然后给出两个版本的手写AJAX的代码及注释。帮助大家很好地理解和记忆。

　　1.创建XMLHttpRequest对象
　　2.指定响应函数
　　3.打开连接（指定请求）
　　4.发送请求
　　5.创建响应函数

　　注：第三步是使用XMLHttpRequest对象的open（）方法，字面意思open是打开的意思，即打开连接。但是准确的说应该是指定Http请求。因为浏览器在使用AJAX技术与服务通信时，发送的是Http请求，那么就要指定Http的请求方法，url等信息。
　　

二、参考代码（W3C）

//声明一个变量，用来实例化XMLHttpRequest对象var xmlhttp=null;if (window.XMLHttpRequest){    // 新版本的浏览器可以直接创建XMLHttpRequest对象    xmlhttp=new XMLHttpRequest();}else if (window.ActiveXObject) {    // IE5或IE6没有XMLHttpRequest对象，而是用的ActiveXObject对象    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}if (xmlhttp!=null){    //指定响应函数为state_Change    xmlhttp.onreadystatechange=state_Change;    //指定请求，这里要访问在/example/xdom路径下的note.xml文件，true代表的使用的是异步请求    xmlhttp.open("GET","/example/xdom/note.xml",true);    xmlhttp.send(null);//发送请求} else {    alert("Your browser does not support XMLHTTP.");}//创建具体的响应函数state_Changefunction state_Change() {    if (xmlhttp.readyState==4) {        if (xmlhttp.status==200) {            // 这里应该是函数具体的逻辑        } else {            alert("Problem retrieving XML data");        }    }}

　　1.创建XMLHttpRequest对象 （1-10行代码）
　　2.指定响应函数（第15行代码）
　　3.打开连接（指定请求）（第16行代码）
　　4.发送请求（第17行代码）
　　5.创建响应函数（25-38行代码）

　　（排版问题代码行数不对应）

　　这个是W3C上讲解AJAX的代码，比较权威，我做了一些注释，方便大家理解。面试的时候写这段代码应该是没有问题的。
W3C原文链接
　　

三、参考代码（MDN）

<!--html部分，创建一个按钮控件--><span id="ajaxButton" style="cursor: pointer; text-decoration: underline">    Make a request</span>

<script type="text/javascript">(function() {    var httpRequest;//声明一个变量，用来实例化XMLHttpRequest对象    document.getElementById("ajaxButton").onclick = function() {         makeRequest('test.html'); //这里将AJAX操作封装在makeRequest函数中，函数的参数为要请求的url，即根目录下的test.html文件。    };     function makeRequest(url) {        //创建XMLHttpRequest对象        httpRequest = new XMLHttpRequest();        if (!httpRequest) {            alert('Giving up :( Cannot create an XMLHTTP instance');        return false;        }        //指定响应函数为alertContents        httpRequest.onreadystatechange = alertContents;        //指定请求，方法为GET，url为上面的test.html        httpRequest.open('GET', url);         //发送请求        httpRequest.send();    }    //创建响应函数alertContents    function alertContents() {        if (httpRequest.readyState === XMLHttpRequest.DONE) {            if (httpRequest.status === 200) {                alert(httpRequest.responseText);            } else {                alert('There was a problem with the request.');            }        }    }})();//这是一个立即执行函数</script>

　　
　　1.创建XMLHttpRequest对象 （第13行代码）
　　2.指定响应函数（第19行代码）
　　3.打开连接（指定请求）（第21行代码）
　　4.发送请求（第23行代码）
　　5.创建响应函数（29-37行代码）

　　这个是MDN上讲解AJAX的代码，我做了一些注释，方便大家理解。
MDN原文链接
　　

四、总结

　　
　　这篇文章讲解了如何较为规范的手写AJAX，下篇文章我会具体介绍XMLHttpRequest对象的有关知识以及AJAX相关的Http请求的知识。

　　注：转载自知乎的一篇文章，原博主留的链接已经失效，这里留下知乎上的链接： 传送门