头图

概述

AJAX 是一个缩写,它的全名是 Asynchronous JavaScript and XML,意思就是异步 JavaScript 和 XML,即用JavaScript执行异步网络请求

AJAX 不是一种新技术,而是一个在 2005 年被 Jesse James Garrett 提出的新术语,用来描述一种使用现有技术集合的‘新’方法,包括:

  • HTML 或 XHTML
  • CSS
  • JavaScript
  • DOM
  • XML
  • XSLT
  • XMLHttpRequest

尽管 X 在 AJAX 中代表 XML, 但由于 JSON 的许多优势,比如更加轻量以及作为 Javascript 的一部分,目前 JSON 的使用比 XML 更加普遍。JSON 和 XML 都被用于在 AJAX 模型中打包信息。

AJAX 的优势

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

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

XMLHttpRequest 对象

XMLHttpRequest(XHR)对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL,获取数据。这允许网页在不影响用户操作的情况下,更新页面的局部内容。XMLHttpRequest 在 AJAX 编程中被大量使用。

AJAX 的工作原理

其工作原理基本经过以下几个步骤:

  1. 客户端发送请求,请求交给 xhr。
  2. xhr 把请求提交给服务。
  3. 服务器进行业务处理。
  4. 服务器响应数据交给 xhr 对象。
  5. xhr 对象接收数据,由 JavaScript 把数据写到页面上。

AJAX 工作原理

AJAX 的创建步骤

根据 AJAX 的工作原理,它的创建步骤主要包括:

  1. 创建 XMLHttpRequest 对象,即创建一个异步调用对象。
  2. 创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息。
  3. 设置响应 HTTP 请求状态变化的函数。
  4. 发送 HTTP 请求。
  5. 获取异步调用返回的数据。
  6. 使用 JavaScript 和 DOM 实现局部刷新。

AJAX 的具体使用

以下是 使用 AJAX 的完整流程。

1. 创建 XMLHttpRequest 对象

const request = new XMLHttpRequest();

2. 创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息

创建 HTTP 请求可以使用 XMLHttpReques t对象的 open() 方法,其语法代码如下:

request.open(method, url, async, user, password);

参数解析:

  • method 要使用的HTTP方法,比如 "GET"、"POST"、"PUT"、"DELETE" 等。
  • url 表示要向其发送请求的 URL 地址。
  • async (可选) 一个可选的布尔参数,表示是否异步执行操作,默认为 true。如果值为 false,send() 方法直到收到答复前不会返回。如果 true,已完成事务的通知可供事件监听器使用。如果 multipart 属性为 true 则这个必须为 true,否则将引发异常。
  • user (可选 用于认证用途的用户名,默认值为 null。
  • password (可选) 用于认证用途的密码,默认值为 null。

3. 设置响应 HTTP 请求状态变化的函数和服务端返回信息函数

创建完 HTTP 请求之后,应该就可以将 HTTP 请求发送给 Web 服务器了。然而,发送 HTTP 请求的目的是为了接收从服务器中返回的数据。从创建 XMLHttpRequest 对象开始,到发送数据、接收数据、XMLHttpRequest 对象一共会经历以下 5 种状态:

  • 未初始化状态。在创建完 XMLHttpRequest 对象时,该对象处于未初始化状态,此时 XMLHttpRequest 对象的 readyState 属性值为 0。
  • 初始化状态。在创建完 XMLHttpRequest 对象后使用 open() 方法创建了 HTTP 请求时,该对象处于初始化状态。此时 XMLHttpRequest 对象的readyState属性值为 1。
  • 发送数据状态。在初始化 XMLHttpRequest 对象后,使用 send() 方法发送数据时,该对象处于发送数据状态,此时XMLHttpRequest 对象的 readyState 属性值为 2。
  • 接收数据状态。Web 服务器接收完数据并进行处理完毕之后,向客户端传送返回的结果。此时,XMLHttpRequest 对象处于接收数据状态,XMLHttpRequest 对象的 readyState 属性值为 3。
  • 完成状态。XMLHttpRequest 对象接收数据完毕后,进入完成状态,此时 XMLHttpRequest 对象的 readyState 属性值为 4。此时接收完毕后的数据存入在客户端计算机的内存中,可以使用 responseText 属性或 responseXml 属性来获取数据。

总的来说,readyState 属性的值有以下几种:

  • 0 (未初始化) or (请求还未初始化)
  • 1 (正在加载) or (已建立服务器链接)
  • 2 (加载成功) or (请求已接受)
  • 3 (交互) or (正在处理请求)
  • 4 (完成) or (请求已完成并且响应已准备好)

只读属性 XMLHttpRequest.status 返回了 XMLHttpRequest 响应中的数字状态码。status 的值是一个无符号短整型。在请求完成前,status 的值为 0。值得注意的是,如果 XMLHttpRequest 出错,浏览器返回的 status 也为0:

  • UNSENT(未发送) 0
  • OPENED(已打开) 0
  • LOADING(载入中) 200
  • DONE(完成) 200
var xhr = new XMLHttpRequest();
console.log('UNSENT', xhr.readyState); // readyState 为 0

xhr.open('GET', '/api', true);
console.log('OPENED', xhr.readyState); // readyState 为 1

xhr.onprogress = function () {
    console.log('LOADING', xhr.readyState); // readyState 为 3
};

xhr.onload = function () {
    console.log('DONE', xhr.readyState); // readyState 为 4
};

xhr.send(null);

只有在XMLHttpRequest对象完成了以上5个步骤之后,才可以获取从服务器端返回的数据。因此,如果要获得从服务器端返回的数据,就必须要先判断XMLHttpRequest对象的状态:

const xhr = new XMLHttpRequest();
xmlHttpRequest.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        // do something here
    }
}

4. 发送HTTP请求

XMLHttpRequest.send(data);

结束

最后,附上一个简单的完整 AJAX 实例:

<button id="ajaxButton" type="button">Make a request</button>

<script>
    var httpRequest;
    document.getElementById("ajaxButton").addEventListener('click', makeRequest);

    function makeRequest() {
        httpRequest = new XMLHttpRequest();

        httpRequest.onreadystatechange = alertContents;
        httpRequest.open('GET', 'test.html');
        httpRequest.send();
    }

    function alertContents() {
        if (httpRequest.readyState === XMLHttpRequest.DONE) {
            if (httpRequest.status === 200) {
                alert(httpRequest.responseText);
            } else {
                alert('There was a problem with the request.');
            }
        }
    }
</script>

AJAX-Logo

~

~

~ 本文完

~

学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!

大家好!我是〖编程三昧〗的作者 隐逸王,我的公众号是『编程三昧』,欢迎关注,希望大家多多指教!

知识与技能并重,内力和外功兼修,理论和实践两手都要抓、两手都要硬!


编程三昧
54 声望10 粉丝

学习有趣的知识,交识有趣的朋友,造就有趣的灵魂!