Ajax-实现Ajax异步交互的具体步骤
程序员文章站
2022-05-02 19:02:54
...
Ajax
实现Ajax异步交互
1.实现Ajax的执行步骤
实现Ajax异步交互需要服务器端逻辑进行配合，而作为客户端的HTML页面需要完成以下步骤:
1. 创建 Ajax的核心对象XMLHttpRequest对象
- 通过XMLHttpRequest对象的open(方法与服务器端建立连接
- 构建请求所需的数据内容，井通过XMLHttpRequest对象的send(方法发送给服务器端
- 通过XMLHttpRequest 对象提供的onreadystatechange事件监听服务器端的通信状态
- 接收并处理服务器端向客户端响应的数据结果
- 将处理结果 更新到HTML页面中
2.创建Ajax的核心对象
虽然XMLHttpRequest对象目前由W3C组织进行标准化，但在不同浏览器中，创建的方式略有不同。
创建 Ajax的核心对象XMLHttpRequest对象的代码：
function createXMLHttpRequest(){
var httpRequest;
if (window.XMLHttpRequest){
// 适用于chrome，Firefox，Safari，....
httpRequest = new XMLHttpRequest();
}else if (window.ActiveXObject){// 适用于IE浏览器
try{
httpRequest = new ActiveXObject("Msxml2.XMLHTTP");// IE 7+
}catch(e){
try{
httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); // IE 6-
}catch(e){}
}
}
return httpRequest;
}
3.实现Ajax异步交互的代码及效果
代码：
<button id="btn">按钮</button>
<script src="./js/ccreatXMLHttpRequest.js"></script>
<script>
var btn = document.getElementById('btn');
btn.addEventListener('click',function(){
// 实现Ajax的异步交互
// 1.创建XMLHttpRequest对象
var xhr = createXMLHttpRequest();
/*
2. 调用XMLHttpResquest对象
* 作用 - 与服务器端建立连接
open(method,url)方法
* method - 表示当前的请求方式
* 常见的请求方式为GET和POST
* url - 表示当前请求的服务器端地址链接
*/
xhr.open('get',"http://127.0.0.1:5500/01-%E6%B5%8B%E8%AF%95XMLHttpRequest.html");
/* 3. 调用XMLHttpResquest对象的send()方法
*作用 - 将客户端页面的数据发送给服务器端
send() 方法
* 如果不传递任何数据内容时 - 向该方法传递null
*/
xhr.send(null);
/* 4.利用XMLHttpequest对象的onreadystatecahnge事件
* 作用 - 用于监听服务器端的通信状态
* 服务器端的通信状态中 - 存在着处理完毕（信号）
* 接收服务器端返回的处理结果
*/
xhr.onreadystatechange = function(){ // 监听服务器端的通信状态
/*
XMLHttpRequest对象的readyState属性
* 作用 - 表示服务器的通信状态
* 值
* 0 - 未初始化
* 1 - open() 方法被调用
* 2 - send() 方法被调用
* 3 - 正在响应
* 4 - 响应已完毕
*/
if(xhr.readyState === 4 ){
/*
接收服务器端返回的处理结果
XMLHttpRequest 对象的responseText属性
* 作用 - 用于接收服务器端的相应结果
*/
console.log(xhr.responseText);
}
}
// 5. 将接受到的结果更新到HTML页面
});
</script>
注解：输出获取的请求到的数据
效果：
4. readyState 属性
（1）XMLHttpRequest 对象的 readyState 属性
- 作用 - 表示服务器的通信状态
- 值
0 - 未初始化
1 - open() 方法被调用
2 - send() 方法被调用
3 - 正在响应
4 - 响应已完毕
（2）XMLHttpRequest对象的status属性
- 作用 - 得到当前请求之后的响应状态码
- 200 - 表示请求成功
- 304 - 表示请求的资源未变化(转向获取本地缓存)
- 404 - 表示服务器端地址未找到
（3）接收服务器端响应的结果
- responText属性 - 专门接收字符串类型的结果内容
- responseXML属性 - 专门接收XML数据格式的结果内容
<script>
var btn = document.getElementById('btn');
btn.addEventListener('click',function(){
// 实现Ajax的异步交互
// 1.创建XMLHttpRequest对象
var xhr = createXMLHttpRequest();
/*
4.利用XMLHttpequest对象的onreadystatecahnge事件
*/
xhr.onreadystatechange = function(){ // 监听服务器端的通信状态
/*
XMLHttpRequest对象的readyState属性
* 作用 - 表示服务器的通信状态
* 值
* 0 - 未初始化
* 1 - open() 方法被调用
* 2 - send() 方法被调用
* 3 - 正在响应
* 4 - 响应已完毕
*/
//console.log(xhr.readyState);
if(xhr.readyState === 4){
/*
保证当前的异步请求一定是正确的
* XMLHttpRequest对象的status属性
* 作用 - 得到当前请求之后的响应状态码
* 200 - 表示请求成功
* 304 - 表示请求的资源未变化(转向获取本地缓存)
* 404 - 表示服务器端地址未找到
*/
console.log(xhr.status);
if(xhr.status === 200){
/*
接收服务器端响应的结果
* responText属性 - 专门接收字符串类型的结果内容
* responseXML属性 - 专门接收XML数据格式的结果内容
*/
console.log(xhr.responseText);
}
}
// if(xhr.readyState === 4 && xhr.status === 200){
// console.log(xhr.responseText);
// }
}
/*
2. 调用XMLHttpResquest对象
*/
xhr.open('get',"http://127.0.0.1:5500/01-%E6%B5%8B%E8%AF%95XMLHttpRequest.html");
/* 3. 调用XMLHttpResquest对象的send()方法
*/
xhr.send(null);
// 5. 将接受到的结果更新到HTML页面
});
</script>
5. send()方法
向服务器端发送请求数据
send(data)方法
-
参数data - 表示要向服务器端发送的请求数据
-
请求方式
- 如果当前的请求方式为GET的话 - send()方法中只能传递null的值
- 将请求数据添加到请求地址链接中
- 两种情况
（1.）发送数据 - ?user=185&pwd=45
请求数据的格式
如果具有多个请求数据的话，之间使用“&”进行分割
每个数据格式 -> name = value
（2.） 不发送数据 - send() 方法中必须传递null值，而不能为空
-
代码
<script> var btn = document.getElementById('btn'); btn.addEventListener('click',function(){ // 实现Ajax的异步交互 // 1.创建XMLHttpRequest对象 var xhr = createXMLHttpRequest(); /* 4.利用XMLHttpequest对象的onreadystatecahnge事件 */ xhr.onreadystatechange = function(){ // 监听服务器端的通信状态 //console.log(xhr.readyState); if(xhr.readyState === 4){ console.log(xhr.status); if(xhr.status === 200){ console.log(xhr.responseText); } } } /* 2. 调用XMLHttpResquest对象 */ xhr.open('get',"http://127.0.0.1:5500/01-%E6%B5%8B%E8%AF%95XMLHttpRequest.html?user=185&pwd=456"); /* 3. 调用XMLHttpResquest对象的send()方法 向服务器端发送请求数据 send(data)方法 * 参数data - 表示要向服务器端发送的请求数据 * 请求方式 * 如果当前的请求方式为GET的话 - send()方法中只能传递null的值 * 将请求数据添加到请求地址链接中 * 两种情况 * 发送数据 - ?user=185&pwd=456 * 请求数据的格式 1. 如果具有多个请求数据的话，之间使用“&”进行分割 2. 每个数据格式 -> name = value * 不发送数据 - send() 方法中必须传递null值，而不能为空 */ // 人为方式获取当前的数据，构建成指定的数据格式 xhr.send("null"); // 5. 将接受到的结果更新到HTML页面 }); -
效果图