异步交互
描述
同步交互
- 表示先发送一个请求，等待返回响应，在去发送下一个请求，以此反复
异步交互
- 表示发送一个请求时，不需要等待返回响应，可以随时发送下一个请求
XMLHttpRequest对象
- XMLHttpRequest对象是Ajax的核心对象
- XMLHttpRequest对象是实现异步交互的核心
<body>
<script src="chajian/createXMLHttpRequest.js"></script>
<script>
/*
XMLHttpRequest对象
* XMLHttpRequest对象是Ajax的核心对象
* XMLHttpRequest对象是实现异步交互的核心
*/
/* 通过createXMLHttpRequest()方法来创建一个XMLHttpRequest对象 */
var xhr = createXMLHttpRequest();
console.log( xhr );// 得到一个XMLHttpRequest对象
</script>
</body>实现Ajax的步骤
创建XMLHttpRequest对象
- 通过createXMLHttpRequest()方法来创建XMLHttpRequest对象
调用XMLHttpRequest对象的open()方法
open()方法
- 用于与服务器端建立连接
参数
第一个参数 – 表示当前的请求方式
- 常见的请求方式为 GET 和 POST
- 第二个参数 – 表示当前请求的服务器端地址链接
调用XMLHttpRequest对象的send()方法
send()方法
- 用于将客户端页面的数据发送给服务器端
参数
- 需要传递数据内容时 – 向该方法传递相关的数据内容
- 不需要传递数据内容时 – 向该方法传递null
利用XMLHttpRequest对象的onreadystatechange事件
onreadystatechange事件
- 用于监听服务器端的通信状态
服务器端的通信状态中 – 存在着处理完毕(信号)
- 接收服务器端返回的处理结果
readyState属性
- 表示服务器端的通信状态
属性值
- 0 – 未初始化
- 1 – open()方法被调用
- 2 – send()方法被调用
- 3 – 正在响应
- 4 – 响应已完毕
responseText属性
- 用于接收服务器端的响应结果
将接收到的结果更新到HTML页面
- 通过HTTP协议来完成
示例代码
<body>
<button id="btn">按钮</button>
<script src="chajian/createXMLHttpRequest.js"></script>
<script>
var btn = document.getElementById( 'btn' );
btn.addEventListener( 'click', function () {
/* 实现Ajax异步交互 */
/* 1. 创建XMLHttpRequest对象 */
var xhr = createXMLHttpRequest();
/* 2. 调用XMLHttpRequest对象的open()方法 */
/* 通过open()方法来建立与服务器端的关系 */
xhr.open( 'get', 'http://localhost:63342/学习资料/XMLHttpRequest对象.html' );
/*3. 调用XMLHttpRequest对象的send()方法 */
/* 通过send()方法来向服务器端发送数据 */
xhr.send( null );
/* 4. 利用XMLHttpRequest对象的onreadystatechange事件 */
/* 设置onreadystatechange事件 */
xhr.onreadystatechange = function(){
/* 通过readyState属性来判断服务器端的状态 */
if (xhr.readyState === 4) {
/* 通过responseText属性来获取服务器端的响应结果 */
console.log( xhr.responseText );
}
}
/*
5. 将接收到的结果更新到HTML页面
* 通过HTTP协议来完成
*/
} );
</script>
</body>readyState属性
XMLHttpRequest对象的readyState属性
- 表示服务器端的通信状态
属性值
- 0 – 未初始化
- 1 – open()方法被调用
- 2 – send()方法被调用
- 3 – 正在响应
- 4 – 响应已完毕
XMLHttpRequest对象的status属性
用于得到当前请求之后的响应状态码
- 保证当前的异步请求一定是正确的
属性值
- 200 – 表示请求成功
- 404 – 表示服务器端地址未找到
responseText属性
- 专门接收字符串类型的结果内容
responseXML属性
- 专门接收XML数据格式的结果内容
示例代码
<body>
<button id="btn">按钮</button>
<script src="chajian/createXMLHttpRequest.js"></script>
<script>
var btn = document.getElementById( 'btn' );
btn.addEventListener( 'click', function(){
var xhr = createXMLHttpRequest();
xhr.onreadystatechange = function(){
/* 显示readyState属性 */
console.log( xhr.readyState );
/* 判断当前服务器端的状态 */
if ( xhr.readyState === 4 ) {
/* 显示status属性 */
console.log( xhr.status );
/* 判断当前响应状态 */
if ( xhr.status === 200 ) {
/* 显示responseText属性 */
console.log( xhr.responseText );
}
}
/* 可以同时判断当前服务器端的状态和响应状态 */
if ( xhr.readyState === 4 && xhr.status === 200 ) {
/* 显示responseText属性 */
console.log( xhr.responseText );
}
};
xhr.open( 'get', 'http://localhost:63342/学习资料/XMLHttpRequest对象.html' );
xhr.send( null );
} );
</script>
</body>send()方法
XMLHttpRequest对象的send()方法
- 用于将客户端页面的数据发送给服务器端
参数
- 需要传递数据内容时 – 向该方法传递相关的数据内容
- 不需要传递数据内容时 – 向该方法传递null
注意
send()方法的参数与当前的请求方式有关
如果当前的请求方式为 GET
send()方法中只能传递 null值
- 将请求数据添加到请求地址链接中
如果当前的请求方式为 POST
- 需要先通过setRequestHeader()方法来设置请求头部信息
- send()方法传递请求数据
示例代码
<body>
<button id="btn">按钮</button>
<script src="chajian/createXMLHttpRequest.js"></script>
<script>
var btn = document.getElementById( 'btn' );
btn.addEventListener( 'click',function(){
// 1.创建XMLHttpRequest对象
var xhr = createXMLHttpRequest();
xhr.onreadystatechange = function(){
if ( xhr.readyState === 4 && xhr.status === 200 ) {
console.log( xhr.responseText );
}
};
xhr.open( 'get', 'http://localhost:63342/学习资料/XMLHttpRequest对象.html' );
/* 设置请求头部信息 */
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send( null );
} );
</script>
</body>