9

前言

博主博客:Stillwater的博客
知乎专栏:前端汪汪
本文为作者原创转载请注明出处:
http://hiztx.top/2017/01/12/a...


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


一、手写AJAX的步骤

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

  1. 创建XMLHttpRequest对象

  2. 指定响应函数

  3. 打开连接(指定请求)

  4. 发送请求

  5. 创建响应函数


注:第三步是使用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");
    }
  }
}
  1. 创建XMLHttpRequest对象 (1-10行代码)

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

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

  4. 发送请求(第18行代码)

  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) {
    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.');
      }
    }
  }
})();//这是一个立即执行函数
</script>
  1. 创建XMLHttpRequest对象 (第13行代码)

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

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

  4. 发送请求(第23行代码)

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

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


四、总结

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


Stillwater
107 声望8 粉丝