【从0到1】重识前端之AJAX
简介
AJAX
asynchronized javascript and XML(异步的javascript XML数据)AJAX = 异步 JavaScript 和 XML。
由来:
在ajax发明之初，主要用于请求XML数据，但是随着技术发展，ajax请求传输的数据格式逐渐被JSON格式替代，但是名字还是ajax区别:
ajax是一种前端开发的请求方法，ajax请求和普通的页面请求最大的区别是：1，发起方式不同，普通的页面请求通过点击a标签，表单提交，或直接在地址栏输入url地址回车发起，而ajax请求通过页面中的js代码发起。
2，普通的页面请求，浏览器在收到响应时，会直接在页面中打开响应数据，而ajax请求浏览器在收到响应后，会将收到的数据交给本页面的js代码进行处理，而页面不发生跳转。(所以说ajax请求是非跳转式请求)
//---------------点击页面按钮btn1发送请求------------------------------
const btn1 = document.getElementById("btn1");
btn1.onclick = e=>{
// XMLHttpRequest类，用于发起ajax请求。
// 1，创建xhr对象。
const xhr = new XMLHttpRequest();
// 2, xhr对象的.onreadystatechange事件，当请求状态发生变化时触发。
// xhr对象刚创建成功时处于初始状态。设置了请求地址、请求方式和请求数据时，变为就绪状态。请求发出之后，变为等待状态，收到响应之后，变为完成状态。
xhr.onreadystatechange = e=>{
// xhr对象的readyState属性表示当前请求的状态，为4时是完成状态。
if(e.target.readyState==4){
// xhr的responseText属性表示请求到的数据。
const data = JSON.parse(xhr.responseText);
console.log(data);
}
}
//3,设置请求方式和请求地址
xhr.open("POST","/test");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4，设置请求数据(请求体的数据)并发送。
xhr.send("name=sunhuayu&age=23");
}
第一种方式
// jquery的ajax请求支持promise$.post("/test",{name:"sun",age:11})
.then(res=>{
console.log(res);
})
.catch(err=>{
console.log(err);
});
第二种方式
// $.get用于发起一个请求方式为get的ajax请求。参数和POST请求一样。$.get("/get-test")
.then(res=>{
console.log(res);
});
第三种方式
// $.ajax，用于发起一个可以高度自定义的ajax请求。$.ajax({
method:"POST",
url:"/test",
data:{name:"sun"},
success(res){
console.log(res);
},
error(err){
console.log(err);
}
});
4,ajax全局配置
// ajax全局配置，参数和$.ajax方法的对象一样，通过全局配置设置的内容会作用到页面中所有的ajax请求。$.ajaxSetup({
error(err){
alert("您的网络异常");
}
});
我的个人博客:http://www.eotodo.com
