ajax 理解

ajax是一种客户端与服务器之间的异步通信技术，可实现页面局部数据刷新（不刷新整个页面）；

1. 同步请求：

在ajax出现之前，前端数据请求使用的同步请求策略，每次请求都会刷新整个页面；

原因：使用同步请求，服务器的响应数据直接被送到浏览器内存中，并覆盖浏览器内存中的原有数据，浏览器收到响应数据后，只能展示服务器返回的数据，无法展示在发送请求之前浏览器中添加的数据。

缺点：浏览器直面面对服务器，也就是浏览器发送请求后，服务器未返回数据时，浏览器处于等待，卡死状态，页面无法进行其他操作；但页面请求数据量较大，回显数据较多时，后台代码编写较困难，增加服务器压力。

优点：

2.异步请求

浏览器将请求交给代理对象（XMLHttpRequest，IE6-：ActiveXObject（“microsoft XMLHTTP”）），有代理对象发送请求，接收、解析响应数据，并把数据更新对应的位置。

手写ajax

// 创建异步请求对象
var xhr = window.XMLHttpRequest? new XMLHttpRequest() : new ActiveXObject（“microsoft XMLHTTP”)；
// 调用 open 函数
xhr.open('GET','http://127.0.0.1:8000/api/blog/detail/id=1',true);
// 调用 send 函数
xhr.send();
// 判断 响应数据是否返回成功 当xhr.readySate变化时，会调用onreadystatechange函数
xhr.onreadystatechange = function () {
    if(xhr.readyState === 4) {
        if(xhr.status === '200' || xhr.status === '304') {
            console.log(xhr.response)
        }
        else {
            console.log(xhr)
        }
    }
}

xhr.readyState	表示状态
0	创建请求对象，未调用open方法
1	调用open方法创建连接成功，未调用send方法
2	调用send方法，服务器已接收请求，未响应
3	服务器已返回部分响应数据，未完全返回
4	服务器返回响应数据完成

jQuery ajax

$.ajax({
    type: "GET",
    url: "http://127.0.0.1:8000/api/blog/detail/id=1",
    dataType: "JSON",
    async: true,
    success: function (data) {
        if(data.success) {
            console.log(data)
        }
        else {
            console.log(data.msg)
        }
    }
    error: function (err) {
        console.error(err)
    }
})

3.GET和POST区别

• get使用url传参、post使用请求实体传参；

• get有长度限制，大致1024字节，post没有长度限制；url是没有长度限制，get的长度限制是因为浏览器对url的长度进行了限制；

• post相对于get更加安全；地址栏看不到数据，浏览器会存储历史url，泄漏信息；

• 一般用get获取服务器数据，用post向服务器传递数据。