传统的AJAX请求
//get请求
var xhr = new XMLHttpRequest();
xhr.open("get","url"+"?"+data,true); //get方法将请求的数据以字符串拼接的方式放在地址后面
xhr.send();
xhr.onreadystatechange = function (){
if(xhr.readyState==4&&xhr.status==200){
var result = xhr.responseText; //result请求的数据
result = JSON.parse(xhr.responseText); //将请求的数据通过json的方法解析
}
}
//post请求
var xhr = new XMLHttpRequest();
xhr.open("get","url",true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//上面这行是发送post请求时所需要的
xhr.send(data); //post请求将数据放在发送行
xhr.onreadystatechange = function (){
if(xhr.readyState==4&&xhr.status==200){
var result = xhr.responseText; //result请求的数据
result = JSON.parse(xhr.responseText); //将请求的数据通过json的方法解析
}
}
我们写的页面 大多有很多次请求,如果每次都这样写的话 就会产生大量的代码冗余,所以就会有ajax的封装,方便我们的使用,提升代码运行效率。
ajax的第一次封装
ajax.js
模拟jQuery方法封装
let $ = {
ajax:function(options = {
}){
//将请求的数据以对象的形式传进来
var {
type = "get",url="",data="",async=true,dataType="text",success}=options;
//将数据解析 默认get方法请求 默认异步操作 默认文本类型text success 回调函数
var xhr = new XMLHttpRequest();
if(typeof data == "object"){