ajax原理与底层实现

Ajax是什么

我理解Ajax（Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）） 是一种异步请求数据的一种技术，是在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，对于改善用户的体验和程序的性能很有帮助。

Ajax过程：

（1）、创建XMLHttpResquest对象，也就是创建一个异步调用对象。

（2）、创建一个新的HTTP请求，并确定该HTTP请求的方法（post/get）、URL（文件在服务器上的位置，相对位置或绝对位置）和async（ture异步/false不异步）。

（3）、设置响应`HTTP`请求状态变化的函数。

（4）、发送HTTP请求

（5）、获取异步调用返回的数据

（6）、使用JS和DOM实现页面局部刷新

//创建XMLHttpResquest对象
var xmlHttp = new XMLHttpRequest();   

//创建一个Http请求，（method,url,async)
xmlHttp.open('GET','demo.php','true'); 
    
//发送Http请求 
xmlHttp.send();


//当async为false时数据处理
document.getElementById("mydiv").innerHTML=xmlhttp.responseText;


//异步时，没有得到服务器响应的情况下，防止代码停止的方法。 （同步不需要设置此方法
//当异步时，即async为ture时数据处理，接收到服务端响应时触发
 xmlhttp.onreadystatechange=function () {
      if(xmlhttp.readyState==4&&xmlhttp.status==200){
            document.getElementById("mydiv").innerHTML=xmlhttp.responseText;
       }else{
            //没有响应的代码
       }
 }

PS：

1、open 的参数要牢记，很多面试官爱问这样的细节

• method：请求的类型；GET 或 POST
• url：文件在服务器上的位置，相对位置或绝对位置
• async：true（异步）或 false（同步）

         为什么使用 Async=true ？我们的实例在 open() 的第三个参数中使用了 "true"。该参数规定请求是否异步处理。

        True 表示脚本会在 send() 方法之后继续执行，而不等待来自服务器的响应。所以就需要onreadystatechange 事件来实现在没有得到服务器响应的情况下，防止代码停止的方法。

        若该参数设置为 "false"，可以省去额外的 onreadystatechange 代码，因为我们没有异步处理。如果在请求失败时是否执行其余的代码无关紧要，那么可以使用这个参数

2、post与get的不同

send(string)方法post请求时才使用字符串参数，否则不用带参数

3、post请求一定要设置请求头的格式内容

xmlhttp.open("POST","ajax_test.html",true);
xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Herry&lname=Ford");