ajax请求在线,AJAX 发送请求

AJAX 发送请求

创建XMLHttpRequest对象(请参考上一章)后，我们必须向服务器发送请求。

向服务器发送请求

要将请求发送到服务器，我们使用XMLHttpRequest对象的两种方法：open()

send()httpRequest.open("GET", "ajax_intro.txt", true);

httpRequest.send();

该open()方法接受三个参数：第一个参数是HTTP请求方法-GET，POST

第二个参数是您将请求发送到的URL

可选的第三个参数设置请求是否异步(默认为true)

该send()方法接受一个可选参数：对于GET请求，不要传递任何值

对于POST请求，传递名称=值对

HTTP请求：GET与POST？

在GET方法中，浏览器会将表单内容(名称/值对)添加到URL的末尾。

GET通常用于不关心安全性的简单表单。GET为简单表单提供了许多优点。GET请求可以被缓存

GET请求保留在浏览器历史记录中

GET请求可以加书签

处理敏感数据时，绝不应使用GET请求

GET请求具有长度限制(仅2048个字符)

在POST方法中，内容不会显示在URL中。

如果表单数据包含敏感信息或个人信息，则应始终使用POST。POST请求永远不会被缓存

POST请求不会保留在浏览器历史记录中

POST请求无法添加书签

处理敏感数据时应使用POST请求

POST请求对数据长度没有限制

GET请求

以下示例显示了如何使用JavaScript发出简单的Ajax GET请求：

示例httpRequest.open("GET", "ajax_get.php", true);

httpRequest.send();测试看看‹/›

在上面的示例中，您可能会得到缓存的结果。为避免这种情况，请在URL中添加一个随机数：

示例httpRequest.open("GET", "ajax_get.php?r=" + Math.random(), true);

httpRequest.send();测试看看‹/›

如果要使用GET方法发送信息，请将信息添加到URL：

示例httpRequest.open("GET", "ajax_get.php?fname=Seagull&lname=Anna", true);

httpRequest.send();测试看看‹/›

POST请求

以下示例显示了如何使用JavaScript发出简单的Ajax POST请求：

示例httpRequest.open("POST", "ajax_post.php", true);

httpRequest.send();测试看看‹/›

如果要使用POST方法发送信息，请使用设置HTTP标头，setRequestHeader()并在该send()方法中指定要发送的数据：

示例httpRequest.open("POST", "ajax_post.php", true);

httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

httpRequest.send("fname=Seagull&lname=Anna");测试看看‹/›

该setRequestHeader()方法接受两个参数：第一个参数指定标题名称

第二个参数指定标题值

URL-服务器上的文件

该方法的第二个参数(url)open()是服务器上文件的地址。httpRequest.open("GET", "ajax_get.php", true);

AJAX可以发送和接收各种格式的信息，包括JSON，XML，HTML，PHP，ASP，文本等。

onreadystatechange属性

该XMLHttpRequest对象使您可以定义要执行的函数以处理响应。

响应函数onreadystatechange在XMLHttpRequest对象的属性中定义。

示例httpRequest.onreadystatechange = function() {

if (this.readyState === 4 && this.status === 200) {

document.getElementById("output").innerHTML = this.responseText;

}

};测试看看‹/›

您将onreadystatechange在本教程的后面部分了解有关属性的更多信息。

同步请求

方法的第三个参数open()指定请求是异步还是同步。

要发送同步请求，请将open()方法中的第三个参数更改为false。

如果使用了同步请求，则无需指定响应函数：

示例var httpRequest = new XMLHttpRequest();

httpRequest.open("GET", "ajax_intro.txt", false);

httpRequest.send();

document.getElementById("output").innerHTML = httpRequest.responseText;测试看看‹/›

不建议使用同步请求，因为：JavaScript将停止执行，直到服务器响应准备就绪

如果服务器忙或慢，则应用程序将挂起或停止

带来糟糕的用户体验