认识 AJAX 请求 访问 数据
程序员文章站
2022-03-07 12:44:12
AJAX一、什么是Ajax?利用ajax技术,通过前后端数据交互,从而改变页面内容同时页面不用刷新,提高了用户体验二、Ajax的运行AJAX必须依赖服务执行,即使用http/https协议来运行。三、创建Ajax核心对象// W3C标准:var xhr = new XMLHttpRequest();// IE标准: var xhr = new ActiveXObject("Microsoft.XMLHTTP");// 兼容处理var xhr;if(window.XMLHttpReq...
AJAX
一、什么是Ajax?
利用ajax技术,通过前后端数据交互,从而改变页面内容同时页面不用刷新,提高了用户体验
二、Ajax的运行
AJAX必须依赖服务执行,即使用http/https协议来运行。
三、创建Ajax核心对象
// W3C标准:
var xhr = new XMLHttpRequest();
// IE标准:
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
// 兼容处理
var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
四、建立连接
// 语法:
xhr.open(type, url, true);
open() 方法中:
- 第1个参数指请求的发送方式,值为get或post。
- 第2个参数指请求的url路径。
- 第3个参数指请求是异步还是同步,如果写true表示异步(默认true),写false表示同步。
五、发送请求
// 语法:
xhr.send();
如果是get方式发送请求,send()命令中不用写任何参数
如果是post方式发送请求,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
六、接收响应
// 就绪状态变化的事件函数
xhr.onreadystatechange = function(){
// 如果就绪状态为 4 , 即:请求已完成,且响应已就绪
// status 状态码为 200 即: “OK”
if(xhr.readyState == 4 && xhr.status == 200){
// 一般用 responseText 获取后端传回的数据
alert(xhr.responseText);
}
}
本文地址:https://blog.csdn.net/hs1219462412/article/details/114002230