AJAX请求步骤
什么是AJAX
- 异步的JavaScript和XML
AJAX的使用步骤:
- 创建XMLHttpRequest对象,也就是创建一个异步调用对象.
// 不兼容IE8以下浏览器
let xmlHttpRequest = XMLHTTPRequest()
// 兼容IE8以下浏览器
var xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
- 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
xmlhttp.open(method,url,async);
//method:请求的类型;GET 或 POST,一共有get、post、head、put、delete五种方 法,常用的方法为get和post。
//url:文件在服务器上的位置,相对位置或绝对位置
//async:true(异步)或 false(同步)
- 监听对象状态的改变
xhr.onReadyState()
- 发送HTTP请求.
xhr.send()
- 获取异步调用返回的数据.
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState === 4 & xmlHttp.status === 200){
}
}
- 使用JavaScript和DOM实现局部刷新.
AJAX请求实例
- js实现AJAX
function ajax(url,fnSucc,fnFaild){
// 参数;1.连接服务器的地址 2.成功时函数 3,失败时函数
// 1. 创建xmlhttprequest对象
var xmlHttp = null;
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();//ie6及以下不兼容,针对主流浏览器
}else{ // 针对ie5, ie6
xmlHttp = new ActiveXObject("Microsoft,XMLHTTP");
}
//2. 连接服务器
xmlHttp.open('GET',url,true); //xmlhttp.open(method,url,async)
// method 包含 get 和 post两种方法 url主要是文件或资源的路径,async参数为true(代表异步)或者false(代表同步)
//3.向服务器端发送请求
xmlHttp.send();
//4.接受服务器的返回
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4){ // 判断交互是否成功
if(xmlHttp.status == 200){ //获取服务器返回的数据 获取纯文本数据
//alert('成功:'+xmlHttp.responseText);
fnSucc(xmlHttp.responseText);
}else{
//alert('失败');
if(fnFaild){
fnFaild();
}
}
}
}
}
- jquery请求AJAX
// 这里写的是异步代码;发请求是个异步;
$.ajax({
url:'./data',
dataType:'post',
success: (data)=>{
// 请求成功
// 告诉外界异步执行完毕;执行下一步
resolve(data)
},
error:(errorData)=>{
//请求失败,
// 告诉外界异步执行完毕了;可以执行下一步
reject(errorDatar)
}
})