Ajax四部曲

原生js创建Ajax对象

let xhr = new XMLHttpRequest();

xhr.open(‘get’,”服务器地址”,true); // get为发送数据的方式,共有四种方法

xhr.send(Data);// Data为发送的数据,可选

xhr.onreadystatechange = function(){

console.log(xhr.readyState);// 获取就绪状态码

console.log(xhr.status);// 获取http状态码

console.log(xhr.responseText);// 获取服务器响应的非XML对象的数据

console.log(xhr.responseXML);// 获取服务器响应的XML对象

}

jQuery的Ajax方法

$.ajax({

key:value,

key:value,

…

})

jQuery的Ajax方法,将参数放在括号中的花括号中,当成一个对象传给Ajax方法,下面为可选的参数,其中url是必选的.

一.ajax的四步曲 - 解决前后端交互问题

ajax对象具有的三个属性：

1.第一步：创建ajax对象

let xhr = new XMLHttpRequest();

2.第二步：open方法：打开接口地址，准备通信（准备给目标地址按照我们规定的请求类型发送请求）

语法：

参1：请求类型，四种：分别对应增删改查

get和post有什么不同：1.语义化不同；2.安全性不同，post更高；3.可传输的数据量不同，post更大；4.get的执行效率更高，是form表单的默认传输方法；5.get表单限制form表单收集的值必须为ASCII字符集，post支持整个ISO 646字符集；6.get会改变地址栏，post不会；7.get有缓存，post没有缓存；

get //—select

post //—insert

put //—update

delete //—delete

(get、post、put 、delete)

参2：接口地址，完整的url地址(地址里面包含数据) - https://www.nowapi.com/ 通过此网址拿到接口地址，进行测试。

参3：是否异步，true异步，false同步

示例：

xhr.open(‘get’, ‘http://api.k780.com/?app=phone.get&phone=13777777777&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json‘, true);

3.第三步：send方法：发送请求

通过就绪状态码确认发送解析是否完成。需要用到 readyState 属性。

ajax的属性：readyState:就绪状态码有五个状态，分别为—0(初始化) 1(请求建立) 2(发送完成) 3(解析) 4(完成)

(0)：请求初始化（还没有调用 open()）。

(1)：请求已经建立，但是还没有发送（还没有调用 send()）。

(2)：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。

(3)：请求在处理中；通常响应中已有部分数据可用，但是服务器还没有完成响应的生成。

(4)：响应已完成；您可以获取并使用服务器的响应了 - 最关键的

xhr.send();

4.第四步：监听第三步，看就绪状态码是否处于完成状态，如果完成，获取服务器的响应。

第四步xhr点后面跟的属性有以下几个：

onreadystatechange 每当readyState 状态码改变时，就会调用该函数；

onload 只有当readyState 状态码为4时，才执行函数

实例：

xhr.onreadystatechange = function() { //只要第三步的就绪状态码发送改变，事件就触发。

    if (xhr.readyState === 4) { //响应已完成
        //获取服务器响应的数据：xhr.responseText属性，返回值都是字符串格式。
        console.log(xhr.responseText);
        console.log(JSON.parse(xhr.responseText));
        console.log(JSON.parse(xhr.responseText).result);
    }
}