AJAX入门

1-创建AJAX对象
var xhr=new XMLHttpRequest();
2-请求方式
xhr.open(“get”,“http://localhost:3000/ajax”)
3-发送请求
xhr.send()
4-获取服务器端响应到客户端的数据
xhr.οnlοad=function(){
console.log(xhr.responseText)
}
app.get(“ajax”,(res,req)=>{
res.send(字符串，或者对象)
返回的都是json字符串
})

JSON.parse() json字符串转换为JSON对象

请求参数传递
get参数传递
var btn=document.getElementById(btn)
btn.οnclick=function()
{
var xhr=new XMLHttpRequest()
拼接请求
var params=“usernama=”+111+"＆age="+15
xhr.open(get,地址？params)
xhr.send()
xhr.οnlοad=function()
{
xhr.responseText
}

}
post请求
xhr.send(params)
xhr.setRequestHeader(“Content-type”,'application/x-www-form-urlencoded’)

请求参数的格式
json
通过请求头的参数告诉我们发送的数据类型
xhr
xhr.setRequestHeader(“Content-type”,“application/json”)
xhr.send(JSON.stringify({name:“lisi”,age:50}))
get 不能提交json对象数据格式

获取服务器端的响应 了解即可
状态码
0 请求未初始化
1 未请求
2 请求已经发送
3 已经接受到服务端的部分数据
4 响应已经完成
xhr.onreadystatechange=function()
{
xhr.readyState
}
onreadystatechange事件 兼容IE低版本，但是效率低

Ajax错误处理

服务器端
app.get("",(req,res)=>{
res.state(400).send(“not ok”)
})
xhr对象的status获取https属性
if(xhr.state==400)
{

}
网络断开触发事件
xhr.οnerrοr=function()
{

}
AJAX状态码
HTTP状态码是服务器端返回的

低版本的IE浏览器的缓存问题 地址后面加上随机参数
xhr.open(“get”,url+Math.randon())

ajax封装
function ajax(options)
{

var params=”;

for(var attr in options.data)
{
params +=attr +"="+options.data[attr]+"＆"
}
params=params.substr(0,params.length-1)
判断请求参数
if(options.type==“get”)
{
options.url=option.url+"?"+params
}
配置ajax对象
xhr.open(options.type,option.url)
创建对象
var.xhr=new XMLHttpRequest()

if(options.type==“post”)
{
设置一下请求格式类型，报头
xhr.send(params)
}else
{
xhr.send();
}

xhr.οnlοad=function()
{
console.log(xhr.responseText)
options.success(xhr.responseText)
}

}

ajax({
type:“get”,
url:“url”,
data:
{
name:张三
age:15
},
header{
}
success:function(data)
{
console.log(“这里是success函数”+data)
}
})
application/x-www-form-urlencoded
name=zhangsan＆age=20
application/json
对象类型转换为字符串更为方便

总代码:
function ajax(options)
{
//存储对象默认值
var defaults={
type:‘get’,
url:’’,
data:{},
header:{
‘Content-Type’:‘application/x-www-form-urlencoded’
},success:function()
{
},
error:function()
{
}
}
//使用assign复制对象,assign会影响原来的值
Object.assign(defaults,options)
//创建ajax对象
var xhr=new XMLHttpRequest();
//创建变量接收参数
let params=’’;
//循环参数转换为字符串
for(var attr in defaults.data)
{
params += attr + ‘=’ + defaults.data[attr] + ‘&’;
}
//将截取的结果重新赋值给params变量
params = params.substr(0, params.length - 1);
if(defaults.type==‘get’)
{
defaults.url=defaults.url + ‘?’ + params;
}
xhr.open(defaults.type,defaults.url)
if(defaults.type==‘post’)
{
var contentType= defaults.header[‘Content-Type’];
// 设置请求参数格式的类型（post请求必须要设置）
xhr.setRequestHeader(‘Content-Type’,contentType);
if(contentType==‘application/json’)
{
xhr.send(JSON.stringify(defaults.data))
}else
{
xhr.send(params)
}
}else
{
xhr.send()
}
//配置ajax对象
//监听xhr对象下的onload事件
//当xhr对象接受完响应对象后触发
xhr.οnlοad=function()
{
// 服务器端返回的数据
var responseText=xhr.responseText;
// xhr.getResponseHeader()
// 获取响应头中的数据
const contentType=xhr.getResponseHeader(‘Content-Type’);
if(contentType.includes(‘application/json’))
{
responseText=JSON.parse(responseText)
}
if(xhr.status=200)
{
options.success(responseText,xhr)
console.log(responseText)
}else
{
options.error(responseText,xhr)
}
// options.success(responseText)
}
}