JavaScript前后端数据交互工具ajax使用教程

//1.创建 ajax交互对象 通过XMLHTTPRequest来实例化出来
let ajax = new XMLHttpRequest();
//2.建立前端和服务器之间的连接 ajax对象有一个方法 open 调用即可建立连接
ajax.open("请求方式"，"服务器url地址");
//3.发送请求 ajax对象有一个方法 send 调用即可发送请求
ajax.send();
//4.接收服务器响应数据  ajax中是通过ajax对象的一个事件——onreadystatechange(通信状态码/生命周期 改变事件)
ajax.onreadystatechange = ()=>{
//5.接收响应数据 当通信状态码为4的时候 就可以获取到响应数据了
if(ajax.readyState==4){
if(ajax.status==200||ajax.status==304){
console.log(ajax.responseText)
}
else{
console.log("请求失败")
}
}
}

//1.创建 ajax交互对象 通过XMLHTTPRequest来实例化出来
let ajax = new XMLHttpRequest();
//2.建立前端和服务器之间的连接 ajax对象有一个方法 open 调用即可建立连接
//get请求提交数据 提交在地址后面
ajax.open("get"，"服务器url地址?键名=键值&键名=键值&...");
//3.发送请求 ajax对象有一个方法 send 调用即可发送请求
ajax.send();
//4.接收服务器响应数据  ajax中是通过ajax对象的一个事件——onreadystatechange(通信状态码/生命周期 改变事件)
ajax.onreadystatechange = ()=>{
//5.接收响应数据 当通信状态码为4的时候 就可以获取到响应数据了
if(ajax.readyState==4){
if(ajax.status==200||ajax.status==304){
console.log(ajax.responseText)
}
else{
console.log("请求失败")
}
}
}

//1.创建 ajax交互对象 通过XMLHTTPRequest来实例化出来
let ajax = new XMLHttpRequest();
//2.建立前端和服务器之间的连接 ajax对象有一个方法 open 调用即可建立连接
//get请求提交数据 提交在地址后面
ajax.open("post"，"服务器url地址?键名=键值&键名=键值&...");
//设置请求头
ajax.setRequestHeader("content-type"，"application/x-www-form-urlencoded"/"application/json")
//3.发送请求 ajax对象有一个方法 send 调用即可发送请求
//将要提交的数据 作为实参 传入send方法中
ajax.send("键名=键值&键名=键值&..."/JSON.stringify({}));
//注意：如果设置为 application/json 提交的数据 必须是一个对象格式的json字符串
//4.接收服务器响应数据  ajax中是通过ajax对象的一个事件——onreadystatechange(通信状态码/生命周期 改变事件)
ajax.onreadystatechange = ()=>{
//5.接收响应数据 当通信状态码为4的时候 就可以获取到响应数据了
if(ajax.readyState==4){
if(ajax.status==200||ajax.status==304){
console.log(ajax.responseText)
}
else{
console.log("请求失败")
}
}
}

$(()=>{
//调用ajax方法 实现数据交互
$.ajax({
url:"服务器url地址"，//必传项
type:"请求方式",//可选项 默认值为get
dataType:"数据交互的格式"//可选项 默认值为json 另外还可以选择 xml text jsonp
data:{},//请求提交的数据 可选项 默认不提交数据  如果想提交 在对象中 写入属性即可提交
timeout:数字，//超时时间 可选项 默认为无限 如果设置了具体的超时时间 则会在请求发送后 超过超时                     时间还没接收到响应数据的时候  停止请求 并报错404   单位为ms
beforeSend(){
//这个方法函数 会在ajax发送请求前 执行
}，
success(res){
//这个方法函数 会在ajax发送请求 并成功接收到响应数据的时候 执行 形参会接收到响应数据
}，
error(err){
//这个方法函数 会在ajax接收响应数据失败的时候执行 形参会接收到 失败信息
}，
complete(){
//这个方法函数 会在ajax交互完成的时候 执行
}
})
})

//1.创建 ajax交互对象 通过XMLHTTPRequest来实例化出来
let ajax = new XMLHttpRequest();//同步代码
//2.建立前端和服务器之间的连接 ajax对象有一个方法 open 调用即可建立连接
ajax.open("请求方式"，"服务器url地址");//同步代码
//3.发送请求 ajax对象有一个方法 send 调用即可发送请求
ajax.send();//同步代码
//4.接收服务器响应数据  ajax中是通过ajax对象的一个事件——onreadystatechange(通信状态码/生命周期 改变事件)
ajax.onreadystatechange = ()=>{//ajax的异步 体现在事件上 事件是异步代码
//5.接收响应数据 当通信状态码为4的时候 就可以获取到响应数据了
if(ajax.readyState==4){
if(ajax.status==200||ajax.status==304){
console.log(ajax.responseText)
}
else{
console.log("请求失败")
}
}
}