AJAX总结（二），手写AJAX

2024年5月16日 321次阅读 来源: Stillwater

媒介

博主博客：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
    原文地址: https://segmentfault.com/a/1190000008097712
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞