AJAX方法详解

AJAX（Asynchronous JavaScript and XML），即异步的JavaScript和XML，AJAX 不是新的编程语言，而是一种使用现有标准的新方法，它是前后端交互的重要手段。

1.AJAX的优缺点

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面，而使用AJAX有以下优势：

• 无刷新加载页面
• 采用异步方式与服务器通信，效率高
• 减轻了服务器和带宽的负担
• 提高了用户体验

但是，AJAX也有很多不尽人意的地方，比如：

• 破坏了浏览器自身的前进、后退功能
• 对搜索引擎支持较弱
• AJAX不能很好支持移动设备
• 浪费性能

2.创建 XMLHttpRequest 对象

XMLHttpRequest是Ajax 的基础，XMLHttpRequest的对象用于客户端和服务器之间的异步通信。
IE7+、Firefox、Chrome、Safari 以及 Opera创建 XMLHttpRequest 对象的语法：

var xhr = new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

var xhr = new ActiveXObject("Microsoft.XMLHTTP");

兼容写法：

var xhr;
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest(); // IE7+, Firefox, Chrome, Opera, Safari
}
else {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");// IE6, IE5
}

3.向服务器发送请求

使用 XMLHttpRequest 对象的open()和send()方法：

xhr.open("GET", "test1.php", true); 
//请求方式，请求地址，是否异步
xhr.send();

open(method, url, async)：规定请求的类型，URL以及是否异步处理请求。
method:请求方式，GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）

send(string) ：将请求发送到服务器
string：仅用于 POST 请求

• 如果通过GET方法发送信息，在URL的"?"后添加信息：

xhr.open("GET", "test1.php?user=admin&pass=123", true);
xhr.send();

• 如果通过POST方法发送信息，需要通过setRequestHeader()设置请求头（固定格式），然后在 send()方法中规定要发送的数据

xhr.open("post", "test1.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("user=admin&pass=123");

GET与POST的区别总结

1. 语义化不一样，GET 倾向于从服务器获取数据，POST 倾向于向服务器提交数据语义化不一样，GET 倾向于从服务器获取数据，POST 倾向于向服务器提交数据
2. 传递参数的方式，GET 请求直接在地址栏后面拼接，POST 请求在请求体里面传递
3. 参数的大小限制，GET 请求一般不大于 2KB，POST 请求理论上没有上限
4. 缓存能力，GET 会被浏览器主动缓存，POST 不会被浏览器主动缓存
5. 安全性能，GET 请求相对安全性比较低，POST 请求相对安全性比较高

4.onreadystatechange 事件

XMLHttpRequest 对象的三个属性：
onreadystatechange：存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState：AJAX状态码。从0 到 4发生变化

• 0：创建 ajax 对象成功
• 1：配置请求信息成功
• 2：响应已经回到浏览器
• 3：浏览器正在解析响应体
• 4：响应体解析完毕可以使用了

status：HTTP响应状态码。

• 100-199：表示连接继续
• 200-299：各种成功
• 300-399：重定向
• 400-499：客户端错误
• 500-599：服务端错误

其中最为常见的有，200表示标准请求成功，404表示服务器找不到请求的 URL
当AJAX状态码readyState === 4且HTTP响应状态码 status === 200的时，
就可以开始处理服务器返回的数据了。

xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            // 服务器返回的数据
        }
    }

5.服务器响应

XMLHttpRequest 对象的 responseText 或 responseXML 属性
responseText：获得字符串形式的响应数据。
responseXML：获得 XML 形式的响应数据。

xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText); 
    }
}

6.jQuery Ajax - ajax()方法

强大的jQuery给我们提供了它封装好了的ajax方法，但是调用前，必须先引入jQuery库，这里以在线jQuery为例

<script crossorigin="anonymous" integrity="sha384-TlQc6091kl7Au04dPgLW7WK3iey+qO8dAi/LdwxaGBbszLxnizZ4xjPyNrEf+aQt" src="https://lib.baomitu.com/jquery/2.2.4/jquery.js"></script>

接下来就一起看看jQuery给我们封装好的ajax方法吧！

$.ajax({
    url:"",    
    type:"",    
    data:{},    
    success:function(){},  
    error:function(){},    
    beforeSend:function(){},    
    timeout:10,       
    dataType:"",     
    jsonp:"",       
    async:true,     
    global:true,    
});

• url：要请求的地址(必传)
• type：请求方式(可选) 默认get
• data：要发送的数据(可选) 默认不发
• success：成功执行的回调函数,可选
• error：失败执行的回调函数,可选
• beforeSend：发送之前执行的回调函数,可选
• timeout：请求超过的时间，可选，默认100
• datatype：接收到的数据类型，可选，默认text
• jsonp：后台要执行的函数所在的字段名，如百度的cb
• async：默认true，异步
• global：是否执行钩子函数，默认true

小结：

AJAX可以请求正常的资源，但是不支持未经允许的跨域请求。如果跨域请求则需使用 jsonp。关于jsonp，会在下篇博客与大家共享。
最后，逆战加油！