在前端开发中，经常需要使用AJAX技术来实现无刷新更新数据。本文将介绍如何使用JavaScript和AJAX编写一个编辑信息的示例。
AJAX简介
AJAX全称为Asynchronous JavaScript and XML，即异步JavaScript和XML。它是一种在不重新加载整个页面的情况下，通过后台与服务器进行数据交换并更新部分页面的技术。
AJAX最初是由Google公司推出的，目的是提高Web应用程序的交互性和响应速度。AJAX可以使Web应用程序更加像桌面应用程序，从而提高用户体验。
AJAX的使用
在JavaScript中，我们可以通过XMLHttpRequest对象来发送AJAX请求。以下是一个简单的AJAX请求示例：
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/getData');
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};上述代码中，首先创建了一个XMLHttpRequest对象，然后调用open()方法设置请求的方法和URL，接着调用send()方法发送请求。当服务端返回数据时，onreadystatechange事件会被触发，我们可以通过readyState属性和status属性来判断请求的状态和服务器响应的状态码，最后获取响应数据。
示例说明
在本示例中，我们将使用AJAX来实现编辑信息的功能。我们将创建一个文本框和一个按钮，用户可以在文本框中输入新的信息，然后通过AJAX请求将新信息发送到后台进行更新，并在页面上显示更新后的信息。
以下是示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
-------------------------
-------
------
-----
------ ------------------------
----- -----------------
------
-----
------ --------------------------
------ ----------- ------------ --
------- ----------------------------
------
--------
----- -------- - --------------------------------
----- ----------- - -----------------------------------
----- ------------- - -------------------------------------
-- ------
-------- --------- -
----- --- - --- -----------------
--------------- ----------------
-----------
---------------------- - -------- -- -
-- --------------- --- - -- ---------- --- ---- -
----- ---- - -----------------------------
------------------ - -----
-
--
-
-- ----
-------- ------------ -
----- ------- - -------------------------
-- ---------- -
-----------------
-------
-
----- --- - --- -----------------
---------------- -------------------
------------------------------------ ----------------------------------
------------------------- ----- ------- ----
---------------------- - -------- -- -
-- --------------- --- - -- ---------- --- ---- -
----- ---- - -----------------------------
------------------ - -----
----------------- - ---
-----------------
-
--
-
----------
--------------------------------------- ------------
---------
-------
-------上述代码中，我们首先创建了一个用于显示当前信息的span元素和一个用于输入新信息的文本框。然后创建了一个button按钮，点击此按钮将会触发updateInfo()函数。
在getInfo()函数中，我们使用AJAX请求获取当前信息，并将其显示在页面上。在updateInfo()函数中，我们首先获取新信息，并判断其是否为空。如果不为空，则通过AJAX请求将新信息发送到后台进行更新，并将更新后的信息显示在页面上。
总结
AJAX是一种非常有用的技术，
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/3525
