创建 XMLHttpRequest 对象(请参考上一章)后,就可以向服务器发送请求。
要将请求发送到服务器,我们使用 XMLHttpRequest 对象的两个方法:
open()
send()
httpRequest.open("GET", "ajax_intro.txt", true); httpRequest.send();
open()方法接受三个参数:
第一个参数是HTTP请求类型GET、POST
第二个参数是您将请求发送到的URL
可选的第三个参数设置请求是否异步(默认为true)
send()方法接受一个可选参数:
对于GET请求,不要传递任何值
对于POST请求,传递名称=值
对
在GET方法中,浏览器会将表单内容(名称/值对)添加到URL的末尾?后。
GET通常用于不关心安全性的简单表单。GET为简单表单提供了许多优点。
GET请求可以被缓存
GET请求保留在浏览器历史记录中
GET请求可以加书签
处理敏感数据时,绝不应使用GET请求
GET请求具有长度限制(仅2048个字符)
在POST方法中,内容不会显示在URL中。
如果表单数据包含敏感信息或个人信息,则应始终使用POST。
POST请求不会被缓存
POST请求不会保留在浏览器历史记录中
POST请求无法添加书签
处理敏感数据时应使用POST请求
POST请求对数据长度没有限制
以下示例显示了如何使用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();测试看看‹/›
以下示例显示了如何使用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()方法接受两个参数:
第一个参数指定Http头名称
第二个参数指定Http头值
open()方法的第二个参数(url)是服务器上目标文件的地址。
httpRequest.open("GET", "ajax_get.php", true);
AJAX可以发送和接收各种格式的信息,包括JSON,XML,HTML,PHP,ASP,文本等。
XMLHttpRequest对象可以定义回调函数以处理响应。回调函数在XMLHttpRequest对象的onreadystatechange属性中定义。
httpRequest.onreadystatechange = function() { if (this.readyState === 4 && this.status === 200) { document.getElementById("output").innerHTML = this.responseText; } };测试看看‹/›
open()方法的第三个参数指定请求是异步还是同步。
要发送同步请求,请将open()方法中的第三个参数更改为false。
如果使用了同步请求,则无需指定响应函数:
var httpRequest = new XMLHttpRequest(); httpRequest.open("GET", "ajax_intro.txt", false); httpRequest.send(); document.getElementById("output").innerHTML = httpRequest.responseText;测试看看‹/›
不建议使用同步请求,因为:
JavaScript将停止执行,直到服务器返回响应数据
如果服务器忙或慢,则应用程序将挂起或停止,用户会感觉比较卡