ajax原理

1、ajax

即“Asynchronous JavaScript and XML”（异步 JavaScript 和 XML），也就是无刷新数据读取。

通俗地讲就是：AJAX 通过在后台与服务器交换少量数据的方式，允许在不重新加载整个页面的情况下，对网页的一部分内容进行数据更新。

2、http 请求

http（超文本传输协议）是一个基于请求与响应模式的、无状态的、应用层的协议。

这里需要了解 http 请求的两个方法：GET方法和 POST方法。

①、GET 用于获取数据。GET 是在 URL 中传递数据，它的安全性低，容量低。

②、POST 用于上传数据。POST 安全性一般，容量几乎无限。

PS：有兴趣的同学可以参考Http协议详解

3、XMLHttpRequest

XMLHttpRequest 是一个用于在后台与服务器交换数据的对象。目前几乎所有浏览器支持该对象。

XMLHttpRequest是ajax技术的核心部分，在javascript中就是利用XMLHttpRequest对象来实现ajax功能，以便给用户带来好的体验，其他的方法实现ajax功能也都是实现此功能。

XMLHttpRequest常用的方法、属性：

①、open()方法：用于向服务器发送一个请求；该方法有3个参数，第一个参数表示发送请求的方式（即连接服务器的方式）即“GET”或“POST”，第二个参数表示要请求的URL地址，第三个参数表示是否以异步方式发出请求，若为true则表示是异步，否则为同步。

②、send()方法：发送请求。

③、onreadystatechange 事件：紧跟其后是一个函数名或是一个匿名函数，发送请求以后XMLHttpRequest对象一直处于等待状态，直到服务器响应后激发 onreadystatechange事件，紧跟其后的方法就是当XMLHttpRequest对象的onreadystatechange事件激发之后的客户端方法。

④、readyState属性：XMLHttpRequest对象的请求状态，返回的是整数（0-4），具体意思如下：

0（未初始化）：还没有调用 open() 方法。

1（载入）：已调用 send() 方法，正在发送请求。

2（载入完成）：send() 方法完成，已收到全部响应内容。

3（解析）：正在解析响应内容。

4（完成）：响应内容解析完成，可以在客户端调用。

⑤、status：请求结果，返回 200 或者 404。

200 => 成功。

404 => 失败。

⑥、responseText：返回内容，即我们所需要读取的数据。注意：responseText 返回的是字符串。

实现例子

1、创建 ajax 对象

在创建对象时，要考虑浏览器兼容性问题，即IE浏览器和非IE浏览器（如firefox、chrome等）：

var ajaxObj=null;
if(window.XMLHttpRequest){
    ajaxObj = new XMLHttpRequest();//IE6以上及非IE浏览器
}else if(window.ActiveXObject){
    ajaxObj = new ActiveXObject('Microsoft.XMLHTTP');//IE6以下的IE浏览器
}else{
    throw new Error('no ajax object available.');
}

2、连接服务器

这里就用上面讲到的open方法。

ajaxObj.open('GET',URL,true);

3、发送请求

ajaxObj.send();

4、接受数据

ajaxObj.onreadystatechange=function(){
    if(ajaxObj.readyState==4){
        if(ajaxObj.status==200){
            funSucc(ajaxObj.responseText);//funSucc是获取成功时处理的函数
        }else{
            if(funFaild){
                funFaild();//funFaild是获取失败时处理的函数
            }
        }
    }
};

将以上代码连起来：

function ajax(url, funSucc, funFaild){
    //1.创建ajax对象
    var ajaxObj = null;
    if(window.XMLHttpRequest){
        ajaxObj = new XMLHttpRequest();
    }else if(window.ActiveObject){
        ajaxObj = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        throw new Error('no ajax object available.')
}
      
    //2.连接服务器  
    ajaxObj.open('GET', URL, true);//open(方法, url, 是否异步)
      
    //3.发送请求  
    ajaxObj.send();
      
    //4.接收返回
    ajaxObj.onreadystatechange = function(){  //OnReadyStateChange事件
        if(ajaxObj.readyState == 4){  //4为完成
            if(ajaxObj.status == 200){    //200为成功
                funSucc(ajaxObj.responseText) 
            }else{
                if(funFaild){
                    funFaild();
                }
            }
        }
    };
}

最后是一个简单实例：

<!DOCTYPE HTML>
<html>
<head>
    <title>ajax基础</title>
</head>
<body>
    点击按钮的时候，读取abc.txt<input id="btn" type="button" value="读取"/><br/>
    <div id="con"></div>
</body>
</html>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
window.onload = function(){
    var oBtn = document.getElementById('btn');
    var oCon = document.getElementById('con');
    oBtn.onclick = function(){
        ajax('abc.txt',function(str){
            oCon.innerHTML = str;
        });
    }
}
</script>

abc.txt 内容：

这是ajax调用的内容1。
这是ajax调用的内容2。
这是ajax调用的内容3。

总结：

利用纯javascript实现ajax效果的主要步骤如下：

1、根据浏览器类型实例化XMLHttpRequest对象

2、利用XMLHttpRequest对象向服务器发出一个动态请求

3、编写XMLHttpRequest对象接收服务器的响应时要执行客户端代码，在客户端做一些设置来响应客户端操作

4、编写服务器方法，用于处理客户端请求并作出响应。

随手记之，积滴水，汇汪洋。

老哥 66：https://www.cnblogs.com/xiesong/p/4667441.html

Ajax基础--JavaScript实现