一：使用XHR
XMLHttpRequest (XHR)对象：XHR为发送服务器请求和获取响应提供了合理的接口。这个接口可以实现异步从服务器获取额外数据，意味着用户点击不用页面刷新也可以获取数据。通过XHR对象获取数据后，可以使用DOM方法把数据插入网页。
1、open() 方法
open方法的三个参数：
1、第一个参数：请求类型（"get"、"post"等）
2、第二个参数：请求的URL（只可以请求同源URL，域名相同、端口相同、协议相同）
3、第三个参数：请求是否异步的布尔值
***调用open()方法不会实际发送请求，只是为发送请求做好准备
2、send() 方法
send方法接收一个参数，是作为请求体发送的数据，如果不需要请求体则必须传null。
*** 调用send()以后,请求就会发送到服务器
因为这个请求是
同步的（open的第三个参数为false），所以JS代码会等待服务器响应之后再继续执行。收到响应后，XHR对象的以下属性会被填充上数据：
1、responseText:作为响应体返回的文本
2、responseXML:如果响应的内容类型是“text/xml” 或 “application/xml”，那就是包含响应数据的XML DOM文档（对于非XML数据则为null）
3、status:响应的HTTP状态
4、statusText:响应的HTTP状态描述
3、readyState属性
表示当前处在
请求/响应过程的哪个阶段,这个属性有如下可能的值：
1、0:未初始化。尚未调用open()方法
2、1:已打开。已调用open()方法，但是尚未调用send()方法
3、2:已发送。已调用send()方法，但是尚未收到响应
4、3:接收中。已经收到部分响应
5、4:完成。已经收到所有响应，可以使用
*** 每次readyState从一个值变成另一个值，都会触发readystatechange事件。可以借此机会检查readyState的值
4、abort() 方法
abort()方法，在收到响应之前可以取消异步请求
*** 调用这个方法后，XHR对象会停止触发事件，并阻止访问这个对象上任何与响应相关的属性。中断请求后，应该取消对xhr对象的引用
let xhr = new XMLHttpRequest()
xhr.onreadystatechange = function(){
if(xhr.readyState == 4) {
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
alert(xhr.responseText)
} else {
alert("Request was unsuccessful: " + xhr.status)
}
}
}
xhr.open("get", "example.php", false)
xhr.send(null)
二：HTTP
1、http头部
Accept:浏览器可以处理的内容类型
Accept-Charset：浏览器可以显示的字符集
Accept-Encoding：浏览器可以处理的压缩编码类型
Accept-Language：浏览器使用的语言
Connection:浏览器与服务器的连接类型
Cookie：页面中设置的Cookie
Host：发送请求的页面所在的域
Referer：发送请求的页面的URL
User-agent：浏览器的用户代理字符串
2、setRequestHeader(): 发送自定义请求头 或 重写默认头部
setRequestHeader()方法有两个参数：
1、第一个参数：头部字段的名称
2、第二个参数：头部字段的值
*** 为保证请求头部被发送，必须在open()之后。send()之前调用setRequestHeader()
let xhr = new XMLHttpRequest()
xhr.open('get', 'example.php', true)
xhr.setRequestHeader('MyHeader', 'MyValue')
xhr.send(null)
3、getResponseHeader(): 从XHR对象获取响应头部
let myHeader = xhr.getResponseHeader('MyHeader') // 获取名称为 “MyHeader” 响应头
let allHeaders = xhr.getAllResponseHeaders() //获取所有的响应头
4、GET请求
查询用到的参数必须正确编码后添加到
URL后面，然后再传给open()方法
参数中的每个名和值都必须使用encodeURIComponent()编码
xhr.open('get', "example.php?name1=value1&name2=value2", true)
**可以使用以下函数将参数拼接
function addURLParam(url, name, value) {
url += (url.indexOf("?") == -1) ? "?" : "&";
url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
return url
}
//使用方式
let url = example.php;
// 添加参数
url = addURLParam(url, "name1", value1);
url = addURLParam(url, "name2," value2)
xhr.open("get", url, true) //初始化参数
5、POST请求
每个POST请求都应该在请求体中携带提交的数据
请求体可以包含非常多的数据，而且数据可以是任意格式。Content-Type设置相关
xhr.send(“请求体数据”)
点击查看POST与GET请求的区别
POST请求相比GET请求要占用更多的资源，从性能方面说，发送相同数量的数据，GET请求比POST请求要快两倍
6、FormData类型
FormDate类型：便于表单序列化，也便于创建与表单类似格式的数据
使用FormData 不需要给XHR对象显式设置任何请求头部了
append() 接收两个参数：键和值，相当于表单字段名称和该字段的值
let data = new FormData()
data.append('name', 'value')
直接给FormData构造函数传入一个表单元素，也可以将表单中的数据作为键/值对填充
let data = new FormData(document.forms[0])
通过xhr发送数据
let xhr = new XMLHttpRequest()
xhr.open("post", "example.php", true);
let form1 = document.getElementById('form')
xhr.send(new FormData(form1))
三：进度事件
onload、onprocess必须在调用open()之前添加
loadstart: 在接收到响应的第一个字节时触发
progress：在接收响应期间反复触发
error：在请求出错时触发
abort：在调用abort()终止连接触发时触发
load：在成功接收完响应时触发（无论返回的什么状态码200、404、500等都会触发该事件）
loadend：在通信完成时，且在load、abort、error之后触发
1、进度条实现
onprogress事件处理程序都会收到event对象
额外包含了三个属性：lengthComputable、position和totalSize。
lengthComputable：进度信息是否可用
position：接收到的字节数
totalSize：响应content-type 头部定义的总字节数。
有了这些信息就可以提供进度条了
let xhr = new XMLHttpRequest()
xhr.onload = function(event){
if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
alert(xhr.responseText)
} else {
alert("请求失败,返回状态值为：" + xhr.status)
}
}
xhr.onprogress = function(event){
if(event.lengthComputable){ // 布尔值： 代表进度信息是否可用
console.log('根据需求做一些业务处理')
}
}
xhr.open('get', 'example.php', 'true')
xhr.send(null)
四：跨源资源共享
跨域资源共享( CROS )：默认情况下，XHR只访问与发起请求的页面在同一个域内的资源
服务器会通过在响应中发送如下头部与浏览器沟通这些信息：
Access-Control-Allow-Origin: 与简单请求相同
Access-Control-Allow-Methods: 允许的方法（逗号分割的列表）
Access-Control-Allow-Headers：服务器允许的头部（逗号分割列表）
Access-Control-Max-Age：缓存预检请求的秒数
1、XHR通过以下方式向不同域的源发送请求
使用标准的XHR对象并给open()方法传入一个绝对的URL
xhr.open('get', 'http://www.someWhere.com/page/', true)
网友评论