什么是Ajax，Ajax的原理是什么？-阿里云开发者社区

什么是Ajax，Ajax的原理是什么？

2023-08-28 76

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： AJAX全称(Async Javascript and XML)，即异步的JavaScript 和XML，是一种创建交互式网页应用的网页开发技术。

一、什么是Ajax？

AJAX全称(Async Javascript and XML)，即异步的JavaScript 和XML，是一种创建交互式网页应用的网页开发技术。

特点：异步发送请求；无需重新刷新当前页面，采用部分刷新。

二、Ajax的原理是什么？

相当于在用户和服务器之间加了一个中间层，使用户操作和服务器响应异步化，并不是所有的用户请求都提交给服务器，像一些数据处理可以交给Ajax引擎来做，只有确定需要从服务器读取新数据时再由Ajax引擎代为服务器提交请求。

三、Ajax是怎样实现的？

（1）创建 Ajax的核心对象 XMLHttpRequest对象

通过XMLHttpRequest() 构造函数用于初始化一个 XMLHttpRequest 实例对象

const xhr = new XMLHttpRequest();

（2）通过 XMLHttpRequest 对象的 open() 方法与服务端建立连接

xhr.open(method, url, [async][, user][, password])
//method：表示当前的请求方式，常见的有GET、POST
//url：服务端地址
//async：布尔值，表示是否异步执行操作，默认为true
//user: 可选的用户名用于认证用途；默认为null
//password: 可选的密码用于认证用途，默认为null

(3) 构建请求所需的数据内容，并通过XMLHttpRequest 对象的 send() 方法发送给服务器端

xhr.send([body])
//body: 在 xhr 请求中要发送的数据体，如果不传递数据则为 null 如果使用GET请求发送数据的时候，需要注意如下：
//将请求数据添加到open()方法中的url地址中
//发送请求数据中的send()方法中参数设置为null1.

(4) 绑定onreadystatechange事件，XMLHttpRequest 对象提供的 onreadystatechange 事件监听服务器端你的通信状态

request.onreadystatechange = function(e){
    if(request.readyState === 4){ // 整个请求过程完毕
        if(request.status >= 200 && request.status <= 300){
            console.log(request.responseText) // 服务端返回的结果
        }else if(request.status >=400){
            console.log("错误信息：" + request.status)
        }
    }
}
//readyState 属性一共有5个值，分别表示不同的请求响应阶段：
//0： 还未创建请求，即未调用 open() 方法
//1： 已调用 open() 方法，但未发送 send() 方法
//2： 已调用 send() 方法，但未接收到响应
//3： 已接收到部分响应
//4： 已接收到全部的响应

四、原生整体流程

const request = new XMLHttpRequest()
request.onreadystatechange = function(e){
    if(request.readyState === 4){ // 整个请求过程完毕
        if(request.status >= 200 && request.status <= 300){
            console.log(request.responseText) // 服务端返回的结果
        }else if(request.status >=400){
            console.log("错误信息：" + request.status)
        }
    }
}
request.open('POST','http://xxxx请求域名')
request.send()

五、jquery插件封装的ajax请求

（1）如果是自己进行封装

function ajax(options) {
    //创建XMLHttpRequest对象
    const xhr = new XMLHttpRequest()
    //初始化参数的内容
    options = options || {}
    options.type = (options.type || 'GET').toUpperCase()
    options.dataType = options.dataType || 'json'
    const params = options.data
    //发送请求
    if (options.type === 'GET') {
        xhr.open('GET', options.url + '?' + params, true)
        xhr.send(null)
    } else if (options.type === 'POST') {
        xhr.open('POST', options.url, true)
        xhr.send(params)
    //接收请求
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            let status = xhr.status
            if (status >= 200 && status < 300) {
                options.success && options.success(xhr.responseText, xhr.responseXML)
            } else {
                options.fail && options.fail(status)
            }
        }
    }
}

(2) 如果是使用jQuery插件，首先需要引入插件，然后调用Ajax方法

形式：$.ajax({name:val, name:val,...});

可选字段：

1）url：链接地址，字符串表示

2）data：需发送到服务器的数据，GET与POST都可以，格式为{A: '...', B: '...'}

3）type："POST" 或 "GET"，请求类型

4）timeout：请求超时时间，单位为毫秒，数值表示

5）cache：是否缓存请求结果，bool表示

6）contentType：内容类型，默认为"application/x-www-form-urlencoded"

7）dataType：服务器响应的数据类型，字符串表示；当填写为json时，回调函数中无需再对数据反序列化为json

8）success：请求成功后，服务器回调的函数

9）error：请求失败后，服务器回调的函数

10）complete：请求完成后调用的函数，无论请求是成功还是失败，都会调用该函数；如果设置了success与error函数，则该函数在它们之后被调用

11）async：是否异步处理，bool表示，默认为true；设置该值为false后，JS不会向下执行，而是原地等待服务器返回数据，并完成相应的回调函数后，再向下执行

$.ajax({
    url: "/greet",
    data: {name: 'jenny'},
    type: "POST",
    dataType: "json",
    success: function(data) {
        // data = jQuery.parseJSON(data);  //dataType指明了返回数据为json类型，故不需要再反序列化
        ...
    }
});

最后还有什么疑问之处请指出！