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_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.发送请求(第17行代码)
  5.创建响应函数(25-38行代码)

  (排版问题代码行数不对应)

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

三、参考代码(MDN)


<span id="ajaxButton" style="cursor: pointer; text-decoration: underline">
    Make a request
span>

                    
                    

你可能感兴趣的:(AJAX)