JS和JQ中的Ajax机制

JS和JQ中的Ajax机制

什么是Ajax?

AJAX = 异步 JavaScript 和 XML。

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

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

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

有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

1、js中的Ajax

js的Ajax有两种类型:

• get类型： get即是获取，一般不需要传输数据
• post类型：post即是发送，一般需要传输数据

接下来我们来看看这两种类型的实现方式：

/**
 * get的实现
 */
// 1、创建一个XMLHttpRequest对象;
let xhr = new XMLHttpRequest();
// 2、通过open()方法建立连接
// open(method, url, async);
// 其中，method有两种状态------->get和post
// async有两个值，true和false,分别为异步和同步
xhr.open('get', '1.txt');
// 3、将请求发送到服务器：send()
xhr.send();
//4、等待响应---> 因为客户端不知道服务端何时才会返回我们需要的响应
//需要采取事件的机制来通知
xhr.onreadystatechange = function () {
    //判断连接的状态
    /**
     * 各个状态的表示
     * 0: 请求未初始化
     * 1: 服务器连接已建立
     * 2: 请求已接收
     * 3: 请求处理中
     * 4: 请求已完成，且响应已就绪
     */
    if (this.readyState === 4) {
        //responseText获取的是返回的对象， string类型
        console.log(this.responseText);
        //status返回的是状态码
        console.log(this.status)
    }
}

/**
 * post的实现
 */
// 1、创建一个XMLHttpRequest对象;
let xhr = new XMLHttpRequest();
// 2、通过open()方法建立连接
// open(method, url, async);
// 其中，method有两种状态------->get和post
// async有两个值，true和false,分别为异步和同步
xhr.open('post', '1.txt');
// 3、设置请求头
xhr.setRequestHeader('Content-type', "text/html");
// 3、将请求发送到服务器：send()
xhr.send("fname=Henry&lname=Ford");
//4、等待响应---> 因为客户端不知道服务端何时才会返回我们需要的响应
//需要采取事件的机制来通知
xhr.onreadystatechange = function () {
    //判断连接的状态
    /**
     * 各个状态的表示
     * 0: 请求未初始化
     * 1: 服务器连接已建立
     * 2: 请求已接收
     * 3: 请求处理中
     * 4: 请求已完成，且响应已就绪
     */
    if (this.readyState === 4) {
        //responseText获取的是返回的对象， string类型
        console.log(this.responseText);
        //status返回的是状态码
        console.log(this.status)
    }
}

在此我们可以看到，get和post方法的区别了，便是post一般情况下会比get方法设置请求头和请求体。

2、jq下的Ajax

jq下的ajax有四种方法，分别为load()，get()，post()，ajax();接下来我们来逐一介绍：

//load()
$(seletor).load("1.txt", {name: '张三'}, function(res, status){
    console,log(res); //输出的是请求对象
    console.log(status); //输出的请求状态
});

//get()
$.get("1.txt", function(res, status) {
    console,log(res); //输出的是请求对象
    console.log(status); //输出的请求状态
});

//post()
$.post("1.txt", {name: '张三'}, function(res, status) {
    console,log(res); //输出的是请求对象
    console.log(status); //输出的请求状态
});

//ajax()
$.ajax({
    url: '1.txt', //请求地址
    type: "post", //请求方式
    data: { //请求数据
        name: '张三'，
        age: 18
    },
    success: function (res) { //请求成功执行
        console.log(res);
    },
    error: function (res) { //请求失败执行
        console.log(res);
    },
    beforeSend: function (res) { //请求前执行
        console.log("你好")
    }
});