原生AJAX实现过程

一、JavaScript异步编程

异步是与同步相对的概念。

同步：不意味着所有步骤同时运行，而是指步骤在一个控制流序列中按顺序执行。

异步：异步过程的执行将不再与原有的序列有顺序关系,从主线程发射一个子线程来完成任务。

简单理解：同步按代码的顺序执行，异步不按照代码的顺序执行，异步的执行效率更高。

二、什么时候用异步编程？

  在前端编程中，我们在处理一些简短、快速的操作时，往往在主线程中就可以完成。主线程作为一个线程，不能够同时接受多方面的请求。所以，当一个事件没有结束时，界面将无法处理其他请求。

  如果我们将一个按钮设置成死循环事件，那么按下这个按钮，页面将会失去响应。此时我们常常用子线程来完成一些消耗足够长时间的事情。因为子线程是独立于主线程，所以即使出现阻塞也不会影响主线程的运行。但是子线程有一个局限：一旦发射了以后就会与主线程失去同步，我们无法确定它的结束，如果处理来自服务器的信息，我们是无法将它合并到主线程中去的。而JS中的异步操作函数往往通过回调函数来实现异步任务的结果处理。

三、实现异步AJAX：

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

<script>
    function loadXMLDoc(){
    
    
        var xmlhttp;
        if(window.XMLHttpRequest){
    
    
            xmlhttp = new XMLHttpRequest();
        }else{
    
    
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.open(method,url,true);
        xmlhttp.send();
        xmlhttp.onreadystatechange = function(){
    
    
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
    
    
                document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
            }
        };
    }
</script>
<div id="myDiv">
    <h2>
        使用AJAX修改改文本内容
    </h2>
</div>
<button type="button" onclick="loadXMLDoc()">点击修改</button>

解析：

1. AJAX创建异步对象XMLHttpRequest,操作XMLHttpRequest对象。

2. 设置请求参数（请求方式，请求页面的相对路径，是否异步）

   open(method,url,async)method请求的类型GET或POST，url文件在服务器上的位置，async:true（异步）false(同步)

3. 设置回调函数,一个处理服务器响应的函数，使用onreadystatechange,类似指针。

4. 获取异步对象的readyState属性：该属性有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。

   响应状态信息从 0 到 4 发生变化。
   0: 请求未初始化
   1: 服务器连接已建立
   2: 请求已接收
   3: 请求处理中
   4: 请求已完成，且响应已就绪

5. 判断响应报文的状态，若为200说明服务器正常运行并返回响应数据。

   200: “OK”
   404: 未找到页面

6. 读取响应数据，可以通过 responseText 属性来取回由服务器返回的数据。