关于前端:前端-JS-之-AJAX-简介及使用

概述

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 的工作原理，它的创立步骤次要包含：

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>

~

~

~ 本文完

~

学习乏味的常识，结识乏味的敌人，塑造乏味的灵魂！

大家好！我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢送关注，心愿大家多多指教！

常识与技能并重，内力和外功兼修，实践和实际两手都要抓、两手都要硬！