js中手写ajax,AJAX总结（二），手写AJAX

前言

在前端面试的时候经常会有如下情景。AJAX会吗？能不能手写个AJAX？第一个问题可以参见我的另一篇博客，AJAX总结(一)，AJAX概述。这篇博文我们来回答第二个问题，手写AJAX。

一、手写AJAX的步骤

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

创建XMLHttpRequest对象

指定响应函数

打开连接(指定请求)

发送请求

创建响应函数

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

二、参考代码(W3C)

var xmlhttp=null;//声明一个变量，用来实例化XMLHttpRequest对象

if (window.XMLHttpRequest)

{

xmlhttp=new XMLHttpRequest();// 新版本的浏览器可以直接创建XMLHttpRequest对象

}

else if (window.ActiveXObject)

{

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");// IE5或IE6没有XMLHttpRequest对象，而是用的ActiveXObject对象

}

if (xmlhttp!=null)

{

xmlhttp.onreadystatechange=state_Change;//指定响应函数为state_Change

xmlhttp.open("GET","/example/xdom/note.xml",true);//指定请求，这里要访问在/example/xdom路径下的note.xml文件，true代表的使用的是异步请求

xmlhttp.send(null);//发送请求

}

else

{

alert("Your browser does not support XMLHTTP.");

}

//创建具体的响应函数state_Change

function state_Change()

{

if (xmlhttp.readyState==4)

{

if (xmlhttp.status==200)

{

// 这里应该是函数具体的逻辑

}

else

{

alert("Problem retrieving XML data");

}

}

}

创建XMLHttpRequest对象 (1-10行代码)

指定响应函数(第15行代码)

打开连接(指定请求)(第16行代码)

发送请求(第18行代码)

创建响应函数(25-38行代码)

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

W3C原文链接

三、参考代码(MDN)

Make a request

(function() {

var httpRequest;//声明一个变量，用来实例化XMLHttpRequest对象

document.getElementById("ajaxButton").onclick = function() { makeRequest('test.html'); }; //这里将AJAX操作封装在makeRequest函数中，函数的参数为要请求的url，即根目录下的test.html文件。

function makeRequest(url) {

httpRequest = new XMLHttpRequest();//创建XMLHttpRequest对象

if (!httpRequest) {

alert('Giving up :( Cannot create an XMLHTTP instance');

return false;

}

httpRequest.onreadystatechange = alertContents;//指定响应函数为alertContents

httpRequest.open('GET', url); //指定请求，方法为GET，url为上面的test.html

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.');

}

}

}

})();//这是一个立即执行函数

创建XMLHttpRequest对象 (第13行代码)

指定响应函数(第19行代码)

打开连接(指定请求)(第21行代码)

发送请求(第23行代码)

创建响应函数(29-37行代码)

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

MDN原文链接

四、总结

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