1.需求:手动封装一个ajax请求
2.实现如下:
2.1获取异步请求对象
// 获取异步请求对象
function getXhr(){
var xhr=null;
if(window.XMLHttpRequest){
xhr=new XMLHttprequest();
}else{
// 如果浏览器版本是IE8以下浏览器
xhr=new ActiveXObject('Microsoft.XMLHttp');
}
return xhr;}
2.2.创建ajax函数:
// url:"url路径" type:请求方式 data:请求参数类型 dataType:返回的字符串类型
function ajax({url,type,data,dataType}){
return new Promise(function(resolve,reject){
//1. 创建异步请求对象
var xhr=getXhr();
// 备注:无需通过上面的方式,简单的创建异步请求对象的简化代码如下:
// var xhr = window.XMLHttpRequest ? new XMLHttprequest() : new ActiveXObject('Microsoft.XMLHttp');
//2.绑定监听事件
xhr.onreadystatechange=function(){
// 当异步请求状态变为4时,并且返回的状态码为200,接收响应成功
if(xhr.readyState==4&&xhr.status==200){
// 当返回接收的字符串类型为json串时,自动转换json串
if(dataType!==undefined
&&dataType.toLowerCase()==="json")
var res=JSON.parse(xhr.responseText)
else
// 否则直接获取返回的响应文本中的内容
var res=xhr.responseText
// 通过Promise,将返回的数据向后传递,相当于获取到请求数据将数据return出来
resolve(res);
}
}
// 如果请求方式为get请求,则将请求参数拼接在url后
if(type.toLowerCase()==="get"&&data!==undefined){
url+="?"+data;
}
//3.打开连接
xhr.open(type,url,true);
// 如果请求方式为post请求,则修改请求消息头
if(type.toLowerCase()==="post")
//增加:设置请求消息头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4.发送请求
if(type.toLowerCase()==="post"&&data!==undefined)
xhr.send(data);
else
xhr.send(null);})
2.3调用:引入对应的js文件,然后调用。如下图:
3.jQuery中调用ajax函数获取数据:通过promise中 .then(function(res) {}), 其中res即返回给客户端的数据。或者通过success:function(res){}来获取服务器返回的数据。
如下所示:
3.1通过success:function(res){}来获取服务器返回的数据
$.ajax({
url:"header.html",
success: function(res){
$(res).replaceAll("header");
$(`<link rel="stylesheet" href="css/header.css">`).prependTo("head");
}
})
3.2通过promise中 .then(function(res) {})获取服务器返回的数据
$.ajax({
url: "http://127.0.0.1:3000/index",
type: "get",
dataType: "json"
}).then(function(res) {...}
4.转载请注明出处。