什么是Ajax?

Ajax的定义

官方是这么定义的：Ajax即Asynchronous Javascript And XML（异步JavaScript和 XML）。是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

Ajax 是一种用于创建快速动态网页的技术。

Ajax 通过在后台与服务器进行少量数据交换，使网页实现异步更新。这意味着可以在不重载整个页面的情况下，对网页的某些部分进行更新。

传统的网页（不使用 Ajax ）如果需要更新内容，必须重载整个页面。

一、原生JS中的Ajax

1、使用ajax发送数据的步骤

第一步：创建异步对象

var xhr;
if (window.XMLHttpRequest) {
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xhr = new XMLHttpRequest();
} else {
    // IE6, IE5 浏览器执行代码
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

第二步：设置 回调函数(可无)

xhr.onreadystatechange = callback
function callback(xhr) {
    // 判断异步对象的状态
    if(xhr.readyState == 4) {
        // 判断交互是否成功
        if(xhr.status == 200) {
            // 获取服务器响应的数据
            var res = xhr.responseText
            // 解析数据
            res = JSON.parse(res)
        }
    }
}

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成，且响应已就绪
status	200: “OK” 404: 未找到页面

第三步：设置 open(请求方式，url)方法与服务器建立连接:

// get请求如果有参数就需要在url后面拼接参数，
// post如果有参数，就在请求体中传递 xhr.open("get","validate.php?username="+name)
xhr.open("post","validate.php",true);
xhr.send();

第四步：设置 请求头:setRequestHeader()（GET方式忽略此步骤）

// 1.get不需要设置
// 2.post需要设置请求头：Content-Type:application/x-www-form-urlencoded
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

第五步：设置 send()服务器发送数据

// 1.get的参数在url拼接了，所以不需要在这个函数中设置
xhr.send(null)
// 2.post的参数在这个函数中设置(如果有参数)
xhr.send("name=hugh&age=18");

第五步：针对不同的响应状态进行处理

方法	描述
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。 method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）
send(string)	将请求发送到服务器。string：仅用于 POST 请求

一个成功的响应有两个条件：

1. 服务器成功响应了 。
2. 异步对象的响应状态为4(数据解析完毕可以使用了)。

ajax请求案例：

//1.注册xhr；
var xhr;
if (window.XMLHttpRequest) {
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xhr = new XMLHttpRequest();
} else {
    // IE6, IE5 浏览器执行代码
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

//2.注入请求方式；
//get请求方式
xhr.open("get","validate.php?username="+name);
xhr.send(null);

//post请求方式
xhr.open("post","validate.php");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("username="+name);

//3.返回结果；
xhr.onreadystatechange = function(){
    if(xhr.status == 200 && xhr.readyState == 4){ 
            console.log(xhr.responseText);
        document.querySelector(".showmsg").innerHTML = xhr.responseText;;
     }
}


//原生js简单封装ajax
function _ajax(obj) {
    let url = obj.url;
    let type = obj.type.toLowerCase(); //为了后续，发送方式一律改为小写
    let data = Boj(obj.data) || {} //这里运用短路运算，判断是否有参数值。有值就执行前面
    function Boj(data) { //定义一个处理参数的函数
        let arr = []; //定义一个空数组用来保存数据
        for (let key in data) { //遍历参数对象 key表示健名
            arr.push(key + '=' + data[key]) //这里需要注意，用拼接方式我们需要将参数转成 name=张三 这样的格式（这是get方式的传参）
        }
        return arr.join('&') //将arr数组拼接成一个字符串 name=张三&age=18 返回到data处
    }

    var xhr; //创建ajax对象
    if (window.XMLHttpRequest) {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xhr = new XMLHttpRequest();
    } else {
        // IE6, IE5 浏览器执行代码
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }

    if (type == "post") {
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    }
    xhr.open(type, url, true); //设置请求方式和请求地址，参数拼接上去
    xhr.send(data); //发送请求

    xhr.onreadystatechange = function(xhr) {
        // 判断异步对象的状态
        if (xhr.readyState == 4) {
            // 判断交互是否成功
            if (xhr.status == 200) {
                // 获取服务器响应的数据
                var res = xhr.responseText
                    // 解析数据
                res = JSON.parse(res)
            }
        }
    }
}

_ajax({
    url: './friends.json', //请求地址
    type: 'GET', //请求方式
    dataType: "jsonp",
    data: {
        name: '张三',
        age: 18
    }, //传参
    async: true, //可选,同步或异步 true为异步,false为同步
    success: function(res) { //成功时的回调用函数
        console.log(res)
    },
    error: function(err) { //失败时的回调函数
        console.log(err)
    }
})

二、jquery中的ajax

//jquery ajax
$.ajax({
    type: "get",// get或者post
    url: "abc.php",// 请求的url地址
    data: {},//请求的参数
    dataType: "json",//json写了jq会帮我们转换成数组或者对象 他已经用JSON.parse弄好了 
    timeout: 3000,//3秒后提示错误
    beforeSend: function () {
        // 发送之前就会进入这个函数
        // return false 这个ajax就停止了不会发 如果没有return false 就会继续
    },
    success: function (data) { // 成功拿到结果放到这个函数 data就是拿到的结果
    },
    error: function () {//失败的函数
    },
    complete: function () {//不管成功还是失败 都会进这个函数
    }
})

// 常用
$.ajax({
    type: "get",
    url: "",
    data: {},
    dataType: "json",
    success: function (data) {
    }
})