目录
Ajax 通信原理
- Ajax 通信实质上是 JavaScript 创建了一个 XMLHttpRequest 对象,这个对象有个 open() 方法其参数包含 URL,method,callback 等,通过这个方法设置其属性,而后通过 send() 方法向后台发送请求。
1. XMLHttpRequest
a. XMLHttpRequest 对象
- XMLHttpRequest 对象用于在后台与服务器交换数据。
- XMLHttpRequest 对象作用:
- 在不重新加载页面的情况下更新网页。
- 在页面已加载后从服务器请求数据。
- 在页面已加载后从服务器接收数据。
- 在后台向服务器发送数据。
- 创建 XMLHttpRequest 对象:
let xmlHttp = new XMLHttpRequest();
b. XMLHttpRequest 方法
1. 打开与服务器的连接:
open(method,url,async)
参数说明:
method: 表示请求方式,GET或POST。
url: 服务器的访问地址,或者资源的访问路径。
async : 是否执行异步请求,true为异步,false为同步。
举例:
xmlHttp.open("GET","data.txt",true);
2. 将请求送往服务器 :
send()
c. XMLHttpRequest 事件
onreadystatechange 事件
- 当请求对象的准备状态发生改变时,会触发 onreadystatechange 事件。
- 发送请求给服务器,这个状态就会发生变化。
- 服务器响应回来,这个状态也会发生变化
d. XMLHttpRequest 属性
i. readyState 属性
- readyState 表示请求与服务器之间的状态信息。
- 每当 readyState 改变时,onreadystatechange 事件就会被触发。
ii. readyState属性可能的值
状态 | 描述 |
---|---|
0 | 请求未初始化(在调用 open() 之前) |
1 | 请求已提出(调用 send() 之前) |
2 | 请求已发送(这里通常可以从响应得到内容头部) |
3 | 请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应) |
4 | 请求已完成(可以访问服务器响应并使用它) |
iii. status 属性
status 表示服务器响应结果状态码,常见有以下几个状态:
- 200 : 表示响应正确,服务器成功返回。
- 404 : 服务器找不到请求的资源。(通常是 url 地址错误)
- 500 : 服务器异常,无法完成请求。(通常是服务端代码报错)
iv. responseText 属性
- 通过 responseText 属性来取回由服务器返回的数据,数据为文本格式。
2. 前端代码实现
a. 原生 Ajax 方式
//1.创建对象
let xmlHttp = new XMLHttpRequest();
//2.GET方法,异步方式,打开请求
xmlHttp.open("GET","data.txt",true);
//3.发送请求
xmlHttp.send();
//4.监听请求状态改变事件,判断响应是否已完成
xmlHttp.onreadystatechange = function(){
//请求完成,并成功响应
if(xmlHttp.readyState==4 && xmlHttp.status==200) {
//5.从服务器取出响应数据
let data = xmlHttp.responseText;
console.log(data);
}
};
b. 原生 GET 方式
<script>
let xmlHttp = new XMLHttpRequest();
xmlHttp.open("get","http://localhost:8080/check?username=盲僧",true);
xmlHttp.send();
xmlHttp.onreadystatechange = function () {
console.log(xmlHttp.readyState);
if(xmlHttp.readyState==4 && xmlHttp.status==200){
console.log(xmlHttp.responseText);
}
}
</script>
c. 原生 POST 方式
<script>
let xmlHttp = new XMLHttpRequest();
xmlHttp.open("post","http://localhost:8080/check",true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send("username=盲僧");
xmlHttp.onreadystatechange = function () {
console.log(xmlHttp.readyState);
if(xmlHttp.readyState==4 && xmlHttp.status==200){
console.log(xmlHttp.responseText);
}
}
</script>