Ajax
用途:主要是引用于异步交互,当使用Ajax模型,HTML 页面能够快速地将数据逐步更新显示在用户界面上,不需要重载(刷新)整个页面。这使得HTML页面能成更快速地对用户的操作进行反馈。
Ajax的实现流程
- XMLHttpRequest对象是实现Ajax异步交互的核心
- 创建XMLHttpRequest对象
- 调用XMLHttpRequest对象的open()与服务器端建立连接
- 调用XMLHttpRequest对象的send()方法向服务器传输数据,null代表不传输任何东西
- 利用XMLHttpRequest对象的onreadystatechange事件监听服务器端的通信状态
- 将接收到的结果更新到HTML页面
var xhr = createXMLHttpRequest();
xhr.onreadystatechange = function () {
/*
XMLHttpRequest对象的readyState属性
* 作用 - 表示服务器端的通信状态
* 值
* 0 - 未初始化
* 1 - open()方法被调用
* 2 - send()方法被调用
* 3 - 正在响应
* 4 - 响应已完毕
*/
if (xhr.readyState === 4) {
/*
保证当前的异步请求一定是正确的
* XMLHttpRequest对象的status属性
* 作用 - 得到当前请求之后的响应状态码
* 200 - 表示请求成功
* 304 - 表示请求的资源未变化(转向获取本地缓存)
* 404 - 表示服务器端地址未找到
*/
console.log(xhr.status);
if (xhr.status === 200) {
/*
接收服务器端响应的结果
* responseText属性 - 专门接收字符串类型的结果内容
* responseXML属性 - 专门接收XML数据格式的结果内容
*/
console.log(xhr.responseText);
}
if (xhr.status === 404) {
console.log("服务器端地址未找到");
}
}
};
xhr.open("get", "https://extheor.github.io");
xhr.send(null);
请求方式
首先注意send的注意方法
send(data)方法
* 参数data - 表示要向服务器端发送的请求数据
* 请求方式
* 如果当前的请求方式为GET的话 - send()方法中只能传递null值
* 将请求数据添加到请求地址链接中
*
* 两种情况
* 发送数据 - user=maxiaoyu&pwd=123456
* 请求数据的格式
1. 如果具有多个请求数据的话,之间使用"&"进行分隔
2. 每个数据格式 -> name=value
* 不发送数据 - send()方法中必须传递null值,而不能为空
GET
- get方法注意的事项
- get的send只能是null
- get的参数要写到open中的url中
- get的写法
1. xhr.open("get", "https://extheor.github.io?user=maxiaoyu&pwd=123456");
2. send(null)
POST
- post方法的注意事项
- post要发送的数据就直接写在send的参数中,以字符串的方式传输,但是服务端接受的是字符串
- 如果想在让服务端接受键值类型的数据,就在传递send之前设置请求头信息
Content- Type
:appli cati on / x-www- fofm-urlencoded
- 如果想在让服务端接受键值类型的数据,就在传递send之前设置请求头信息
- post要发送的数据就直接写在send的参数中,以字符串的方式传输,但是服务端接受的是字符串
- post的写法
1. xhr.open("get", "https://extheor.github.io");
2. xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
3. send('user=maxiaoyu&pwd=123456')
- 写没写请求头传输数据的呈现的格式