JavaScript进阶之浅谈原生Ajax

什么是Ajax

Ajax 全称(Asynchronous JavaScript And XML)中文名阿贾克斯
Ajax 异步 JavaScript 和 XML
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

如何创建Ajax请求

GET请求

//1.创建ajax对象
var ajax = new XMLHttpRequest();
//2.连接服务器
//第一个参数为请求方式常用的get/post 第二个参数为请求的接口地址url 第三参数为同步或异步默认为true异步
ajax.open('GET', 'login.php?key='+value, true); 
//3.发送请求 GET请求的参数跟在url后面
ajax.send();
//监听响应状态
ajax.onreadystatechange = function () {
	if (xhr.readyState == 4) {  //判断请求是否完成
         if(xhr.status == 200){	//判断请求是否成功
         	//根据返回的数据类型获取responseXML或者xhr.responseText
			var res = ajax.responseXML?ajax.responseXML:ajax.responseText;
			console.log(res)
		}
     }
}

POST请求

//1.创建ajax对象
var ajax = new XMLHttpRequest();
//2.连接服务器
//第一个参数为请求方式常用的get/post 第二个参数为请求的接口地址url 第三参数为同步或异步默认为true异步
ajax.open('post', 'login.php', true); 
//3.设置请求头信息 POST请求需要加请求头
ajax.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
//4.发送请求
ajax.send('key=' + value);
//监听响应状态
ajax.onreadystatechange = function () {
	if (xhr.readyState == 4) {  //判断请求是否完成
         if(xhr.status == 200){	//判断请求是否成功
         	//根据返回的数据类型获取responseXML或者xhr.responseText
			var res = ajax.responseXML?ajax.responseXML:ajax.responseText;
			console.log(res)
		}
     }
}

GET请求缓存问题

浏览器机制决定了当发送GET请求时url地址没有发生变化将会直接从缓存获取数据而不向服务器发送请求
这就导致了当服务器数据发生变化时请求不到最新的数据
解决方法是在get请求的url后面追加一个时间戳

ajax.open('get', 'login.php?key='+value+"&_t="+new Date().getTime(), true); //解决GET缓存问题 

对原生Ajax进行封装

原生Ajax请求的步骤比较繁琐如果不把它封装起来会导致代码的冗余也降低了开发效率
可以封装一个ajax方法来方便后期的开发

//封装Ajax请求
function ajax(params) {
    params.method = params.method ? params.method.toLowerCase() : "get";  //get或者post请求不传默认get
    params.sync = params.sync == undefined ? true : params.sync; //是否异步不传默认异步
    params.cache = params.cache ? params.cache : false; //是否使用浏览器缓存不传默认不使用缓存
    params.url = params.cache || params.method == 'post' ? params.url : params.url + "?&t=" + new Date().getTime();//拼接url地址主要是为了解决缓存问题
    if (params.data) {  //判断data是否传入
        var str = "";   //拼接date字符串
        for (const key in params.data) { //循环data对象
            str += key + "=" + params.data[key] + "&";//拼接data
        }
        params.data = str.substring(0, str.length - 1);//把str重新赋值给data这里并去掉最后一个&
    } else {
        params.data = null;//如果data没有传入设为null
    }
    var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(); //构建请求对象
    xhr.open(params.method, params.url, params.sync);   //设置连接
    if (params.method == "post") {    //判断是否为post请求
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');//为post请求设置请求头
    }
    xhr.send(params.data);//发送请求
    xhr.onreadystatechange = function () {  //监听请求状态
        if (xhr.readyState == 4) {  //判断请求是否完成
            switch (xhr.status) {   //判断返回状态码
                case 200:   //如果为200表示请求成功
                    //调用success回调函数并传入相应的数据
                    params.success && params.success(xhr.responseXML?xhr.responseXML:xhr.responseText);
                    break;
                default:    //不为200表示请求失败
                    params.fail && params.fail(xhr.status);
                    break;
            }
            //无论成功或者失败都会调用
            params.complete && params.complete(xhr);
        }
    }
}

请求示例

// 请求示例get(不带参数)
ajax({
    url: "data/test3.json",
    success(res) {
        console.log(JSON.parse(res));
    }
})
//  请求示例get(带参数)
ajax({
    url: "data/form.php?user=laowang&pass=12345",
    success(res) {
        console.log(res);
    }
})
// 请求示例get(xml)
ajax({
    url: "data/test4.xml",
    success(res) {
        console.log(res);
    }
})
// 请求示例post(不带参数)
ajax({
    method: 'post',
    url: "data/test3.json",
    success(res) {
        console.log(JSON.parse(res));
    },
    complete:function(xhr){
        console.log(xhr);
        
    }
})
//请求示例post(带参数)
ajax({
    method: 'post',
    url: "data/post.php",
    data: { age: 18, sex: 'nan' },
    success(res) {
        console.log(res);
    }
})

Ajax是前端开发工作非常重要也非常常用的,市面上也有很多第三方封装的Ajax例如jQuery的$.ajax或者是vue的axios但无论是哪一个它的底层都是原生的Ajax所有学习原生的Ajax有利于加深对各种第三方ajax的理解