AJAX - 请求类型
❮ 上一节
下一节 ❯
AJAX - 请求类型
AJAX 是一种用于创建动态网页的网络技术。 它允许网页更新其内容而无需重新加载整个页面。 一般来说,AJAX支持四种类型的请求,它们是 −
GET 请求
POST 请求
PUT 请求
DELETE 请求
GET 请求
GET 请求用于从服务器检索数据。 在此请求中,数据作为附加在请求末尾的 URL 的一部分发送。 我们可以通过 open() 方法使用此请求。
语法
open(GET, url, true)
其中,open()方法采用三个参数 −
GET − 它用于从服务器检索数据。
url − url 代表将在网络服务器上打开的文件。
true − 对于异步连接,将该值设置为 true。 或者对于同步连接,将该值设置为 false。 该参数的默认值为true。
示例
function displayRecords() {
// Creating XMLHttpRequest object
var zhttp = new XMLHttpRequest();
// 创建回调函数
zhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("example").innerHTML = this.responseText;
}
};
// Open the given file
zhttp.open("GET", "https://jsonplaceholder.typicode.com/todos/6", true);
// Sending the request to the server
zhttp.send();
}
Please click on the button to fetch 6th record from the server
输出
在上面的示例中,我们使用 XMLHttpRequest 中的 GET 请求 "https://jsonplaceholder.typicode.com/todos/6" API 从服务器获取第 6 条记录。 所以点击按钮后,我们将从服务器获取第6条记录。
POST 请求
POST 请求用于将数据从网页发送到 Web 服务器。 在此请求中,数据在与 URL 分开的请求正文中发送。 我们可以通过 open() 方法使用此请求。
语法
open('POST', url, true)
其中,open()方法采用三个参数 −
POST − 它用于向网络服务器发送数据。
url − url 代表服务器(文件)位置。
true − 对于异步连接,将该值设置为 true。 或者对于同步连接,将该值设置为 false。 该参数的默认值为true。
示例
function sendDoc() {
// Creating XMLHttpRequest object
var qhttp = new XMLHttpRequest();
// 创建回调函数
qhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 201) {
document.getElementById("sample").innerHTML = this.responseText;
console.log("Data Send Successfully")
}
};
// Open the given file
qhttp.open("POST", "https://jsonplaceholder.typicode.com/todos", true);
// Setting HTTP request header
qhttp.setRequestHeader('Content-type', 'application/json')
// Sending the JSON document to the server
qhttp.send(JSON.stringify({
"title": "MONGO",
"userId": 11,
"id": 21,
"body": "est rerum tempore"
}));
}
Example of POST Request
输出
在上面的示例中,我们使用 PUT 请求使用下面给出的数据更新记录。
"https://jsonplaceholder.typicode.com/todos/21" API:
{
"title": "MONGO",
"userId": 11,
"id": 21,
"body": "est rerum tempore"
}
DELETE 请求
DELETE 请求用于从 Web 服务器删除数据。 在此请求中,要删除的数据在请求正文中发送,Web 服务器将从其存储中删除该数据。
语法
open('DELETE', url, true)
其中,open()方法采用三个参数 −
DELETE − 它用于从网络服务器删除数据。
url − 它代表将在 Web 服务器上打开的文件 url。 或者我们可以说服务器(文件)位置。
true − 对于异步连接,将该值设置为 true。 或者对于同步连接,将该值设置为 false。 该参数的默认值为true。
示例
function delDoc() {
// Creating XMLHttpRequest object
var qhttp = new XMLHttpRequest();
// 创建回调函数
qhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("sample").innerHTML = this.responseText;
console.log("Record Deleted Successfully")
}
};
// Deleting given file
qhttp.open("DELETE", "https://jsonplaceholder.typicode.com/todos/2", true);
// Sending the request to the server
qhttp.send();
}
Example of DELETE Request
输出
在上面的示例中,我们使用 DELETE 请求 "https://jsonplaceholder.typicode.com/todos/2" API 删除 Id = 2 上存在的记录。
AJAX 还支持一些其他请求,例如 OPTIONS、HEAD 和 TRACE,但它们是 AJAX 应用程序最不常用的请求。 在下一篇文章中,我们将了解 AJAX 如何处理响应。
❮ 上一节
下一节 ❯