轻松上手AJAX

AJAX优缺点

首先在这里简单的阐述一下AJAX的优点和缺点

优点

最大的一点是页面无刷新，用户的体验非常好。

使用异步方式与服务器通信，具有更加迅速的响应能力。

“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器和带宽的负担，节约空间和宽带租用成本。

基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

缺点

ajax不支持浏览器back按钮。

安全问题 AJAX暴露了与服务器交互的细节。

对搜索引擎的支持比较弱。

破坏了程序的异常机制。

不容易调试。

话不多说，还是直接上代码吧

同步使用(不推荐)

let xhr;
//兼容处理
if (window.XMLHttpRequest) {
    //检查浏览器的XMLHttpRequest属性，如果为真则支持XMLHttpRequest
    // IE7+, Firefox, Chrome, Opera, Safari 浏览器支持XMLHttpRequest 
    xhr = new XMLHttpRequest();
} else {
    // IE6, IE5 浏览器使用ActiveXObject
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

//此时请求的地址是一个能够跨域的地址，false表示同步,true表示异步(默认为true)
xhr.open("GET", 'https://api.myjson.com/bins/djdbh', false);
xhr.send();
//接受返回的数据
let data = xhr.responseText;
//sponseText:获得字符串形式的响应数据。包括普通文本、json字符串、html字符串
//responseXML:获得 XML 形式的响应数据并解析成xml的document对象
//response:在不知是什么数据的情况下可以直接使用response
console.log(data)

运行结果

异步使用(推荐)

//第一种异步获取数据的方式
let xhr
let data
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
} else {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

xhr.open("GET", 'https://api.myjson.com/bins/djdbh', true);
//每当readyState状态发生变化时就会调用此函数
//readyState有5个状态 0: 请求未初始化 1: 服务器连接已建立  2: 请求已接收  3: 请求处理中  4: 请求已完成，且响应已就绪
//status有两个状态  200: 请求处理成功  404: 未找到页面
xhr.onreadystatechange = function () {
    //确保再拿取到数据之后再对数据进行处理
    if (xhr.readyState === 4 && xhr.status === 200) {
        data = xhr.responseText;
        console.log(JSON.parse(data))
    }else{
        console.log('change')
    }
}
xhr.send();

//第二种异步获取数据的方式
let xhr
let data
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
} else {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

xhr.open("GET", 'https://api.myjson.com/bins/djdbh', true);
//拿取到数据之后再运行
xhr.onload = function () {
    data = xhr.responseText;
    console.log(JSON.parse(data))
}
xhr.send();

运行结果

POST和GET的使用差异不大，只需在send添加一句 xhr.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
另外可以在send()方法中规定您希望发送的数据，如
send(name=ma&age=18)

AJAX简单封装

//参数为一个对象
function ajax(options) {
    let xhr = null;
    //获取传入的信息，并进行处理
    let params = formsParams(options.data);
    //创建对象，兼容处理
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest()
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    // 连接
    if (options.type == "GET") {
        xhr.open(options.type, options.url + "?" + params, options.async);
        xhr.send(null)
    } else if (options.type == "POST") {
        xhr.open(options.type, options.url, options.async);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(params);
    }
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            options.success(xhr.responseText);
        }
    }
    //将对象处理成形如'name=ma&age=18'的字符串的函数
    function formsParams(data) {
        var arr = [];
        for (var prop in data) {
            arr.push(prop + "=" + data[prop]);
        }
        return arr.join("&");
    }

}
//用法
ajax({
    url: "a.php",  // url---->地址
    type: "POST",   // type ---> 请求方式
    async: true,   // async----> 同步：false，异步：true 
    data: {        //传入信息
        name: "张三",
        age: 18
    },
    success: function (data) {   //返回接受信息
        console.log(data);
    }
})