1、使用xhr发起Get请求:
1)创建Ajax的核心对象XMLHttpRequest对象,通过对XMLHttpRequest对象的open()方法与服务器建立联系
2)构造请求所需的数据内容,并通过XMLHttpRequest对象的send()方法发送给服务器端
3)通过XMLHttpRequest对象提供的 onreadystatechange 事件监听服务器端的通信状态,接收并处理服务器端向客户端响应的数据结果,将处理结果更新在HTML的页面中
a) If( xhr.readyState===4 && xhr.status===200 ) //xhr.status===200 请求得到了正确的值 status--固定的值
b) xhr.responseText 获取服务器响应的数据 ; 请求回来的status
2、XHR详解
1)创建XMLHttpRequest对象:const xhr = new XMLHttpRequest()
通过XMLHttpRequest()构造函数初始化一个XMLHttpRequest实例对象。
2)与服务器建立连接:xhr.open(method, url, [async],[ user],[ password])
通过XMLHttpRequest对象的open()方法与服务器建立连接。open()方法规定请求的类型、URL 以及是否异步处理请求。
method:表示当前的请求方式,常见的是GET、POST。
url:服务器地址。
async:布尔值,表示是否异步执行操作,默认为true。
user:可选的用户名,用于认证用途,默认为null。
password:可选的密码,用于认证用途,默认为null。
3)给服务器发送数据:xhr.send([body])
通过 XMLHttpRequest 对象的 send() 方法,将客户端页面的数据发送给服务端。
body: 在 XHR 请求中要发送的数据体,如果不传递数据则为 null。
如果使用GET请求发送数据的时候,需要注意如下:
a、将请求数据添加到open()方法中的url地址中。
b、发送请求数据中的send()方法中参数设置为null。
4)绑定onreadystatechange事件
用于监听服务器端的通信状态,主要监听的属性为XMLHttpRequest.readyState ,readyState属性的五个状态:
只要 readyState属性值一变化,就会触发一次 readystatechange 事件。XMLHttpRequest.responseText属性用于接收服务器端的响应结果。
3) get请求携带参数的本质:直接将参数以查询字符串的形式拼接到URL地址的后边。
4) url编码和解码:
encodeURL() ----- 编码的函数
decodeURL() ------ 解码函数
5)发起post请求: 放在了请求体中,以键值对形式发送给服务器
1) 创建XHR对象 ------ 一个请求的主体
2) 调用open函数 ------ 开启一个请求(待机状态,暂未发出)
3) 设置 Content-Type 属性
4) 调用send函数 ------- 发出请求
5) 监听onreadystatechange事件
服务器返回的数据的字符串
6)XML---数据的载体。(标签格式)
缺点:格式臃肿,和数据无关的代码多,体积大,传输效率低
在js中解析XML比较麻烦
8)JSON---- 是一个具有数组、对象格式的字符串
本质为字符串 (轻量级的文本数据交换格式)
注意事项:
1)属性名必须使用双引号包裹
2)字符串类型的值必须使用双引号包裹
3) JSON中不允许使用单引号表示字符串
4) JSON不能写注释
5) JSON的最外层必须是对象或者数组格式
6)不能使用undefined或函数作为JSON的值
JSON与js对象之间的转化“:(非序列化)
JSON.parse(待转化的字符串);
JS对象转化为JSON字符串:(序列化)
JSON.stringify();
resolveData()----发送到服务器的数据