Ajax 简明教程
AJAX - Sending Request
AJAX 应用程序使用 XMLHttpRequest 对象以非常有效的方式启动或管理发送到 Web 服务器的数据请求，并处理或监控 Web 服务器发送的数据。AJAX 支持以下类型的请求：
-
GET request
-
POST request
-
PUT request
-
DELETE request
要创建连接并向 Web 服务器发送请求，XMLHttpRequest 对象提供了以下两种方法：
open() − 用于在 Web 浏览器与 Web 服务器之间创建连接。
send() − 用于向 Web 服务器发送请求。
Syntax
open(method, url, async)其中，open() 方法接受三个参数：
-
method − 它表示用于与 Web 服务器建立连接的 HTTP 方法（GET 或 POST）。
-
url − 它表示将在 Web 服务器上打开的文件 URL。或者我们可以说服务器（文件）位置。
-
async − 对于异步连接，将值设置为 true。或者对于同步连接，将值设置为 false。此参数的默认值为 true。
要使用`open()`方法，我们首先创建一个 XMLHttpRequest 对象的实例。然后我们调用`open()`方法以使用 HTTP GET 或 POST 方法和服务器 URL 来初始化请求。
GET 选项用于从 Web 服务器检索适量的信息，而 POST 选项用于检索更多信息。所以 GET 和 POST 选项都可以配置 XMLHttpRequest 对象以使用给定的文件。
在 open() 方法中，可以使用绝对路径或相对路径指定 AJAX 应用程序的文件名、位置或路径。其中绝对路径是指定文件的确切位置的路径，例如 −
Myrequest.open("GET", "http://www.tutorialspoint.com/source.txt")此处“source.txt”是文件名， "http://www.tutorialspoint.com" 是存储 source.txt 文件的位置。
相对路径用于根据 Web 服务器上的位置相对于 Web 应用程序文件指定文件的位置，例如 −
Myrequest.open("GET", "my file.txt")Sending Request
要向服务器发送请求，首先需要创建 XMLHttpRequest 对象的实例，然后创建一个回调函数，此函数将在从 Web 服务器获得响应后生效。然后，我们使用 open() 方法建立 Web 浏览器和 Web 服务器之间的异步连接，然后使用 send() 函数向服务器发送请求。
Example
在以下代码中，我们正在从服务器获取指定的记录。要从服务器获取数据，请单击“单击此处”按钮。所以当我们单击“单击此处”按钮时，showDoc() 函数被调用。在 displayDoc() 函数内部，首先创建 XMLHttpRequest 对象。然后，我们创建一个回调函数来处理服务器响应。然后，我们调用 XHR 对象的 open() 方法以使用 HTTP GET 方法和服务器 URL 初始化请求，即 "https://jsonplaceholder.typicode.com/todos/3" ，该 URL 从 JSONPlaceholder API 中获取一个 ID = 3 的待办事项列表。然后，我们调用 send() 函数来发送请求。
<!DOCTYPE html>
<html>
<body>
<script>
function ShowDoc() {
// Creating XMLHttpRequest object
var myhttp = new XMLHttpRequest();
// Creating call back function
myhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("example").innerHTML = this.responseText;
}
};
// Open the given file
myhttp.open("GET", "https://jsonplaceholder.typicode.com/todos/3", true);
// Sending the request to the server
myhttp.send();
}
</script>
<div id="example">
<p>Please click on the button to fetch data</p>
<button type="button" onclick="ShowDoc()">Click Here</button>
</div>
</body>
</html>