什么是Ajax,Ajax的原理是什么?

目录

一、什么是Ajax?

二、Ajax的原理是什么?

三、Ajax是怎样实现的?

(1)创建 Ajax的核心对象 XMLHttpRequest对象

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

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

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

四、原生整体流程

五、jquery插件封装的ajax请求

(1)如果是自己进行封装

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


一、什么是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()方法中参数设置为null

(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类型,故不需要再反序列化
        ...
    }
});

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