XMLHttpRequest对象来与服务器交换数据。
发送请求到服务器
发送一个请求到服务器,我们使用open()和send() XMLHttpRequest对象的方法:
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
方法 | 描述 |
---|---|
open(method, url, async) | 指定请求的类型 method :请求的类型: GET或POST url :服务器(文件)的位置 async : true (异步)或false (同步) |
send() | 将请求发送给服务器(用于GET ) |
send(string) | 将请求发送给服务器(用于POST ) |
GET或POST ?
GET是简单和速度比POST ,可在大多数情况下被使用。
然而,始终使用POST请求时:
- 缓存的文件不是一个选项(更新服务器上的文件或数据库)。
- 发送大量的数据到服务器( POST没有大小限制)。
- 发送用户输入(可以包含未知字符), POST更加强大和安全比GET 。
GET请求
一个简单的GET请求:
在上面的例子中,你可能会得到一个缓存的结果。 为了避免这种情况,添加一个唯一ID to the URL: ID to the URL:
如果你想与信息发送GET方法,将信息添加到URL:
POST请求
一个简单的POST请求:
要POST数据,如一个HTML表单,添加一个HTTP header用setRequestHeader() 指定要在发送数据send()方法:
例
xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
试一试» 方法 | 描述 |
---|---|
setRequestHeader(header, value) | 添加HTTP标头的请求 header :指定头名 value :指定头值 |
网址 - 上的文件服务器
该url的参数open()方法,是一个地址到服务器上的文件:
xhttp.open("GET", "ajax_test.asp", true);
该文件可以是任何类型的文件,如.txt和.xml或类似的.asp和.PHP(可发送回响应之前在服务器上执行的操作)服务器的脚本文件。
异步- True还是False ?
AJAX代表了异步JavaScript和XML,以及XMLHttpRequest对象的行为与AJAX的async的参数open()方法,已被设置为true:
xhttp.open("GET", "ajax_test.asp", true);
发送异步请求是Web开发人员一个巨大的进步。 许多的服务器上执行的任务是非常耗时。 AJAX之前,这种操作可能会导致挂起或停止应用程序。
随着AJAX,在JavaScript没有等待服务器的响应,而是可以:
- 执行其他脚本在等待服务器响应
- 处理时的响应的响应就绪
Async=true
当使用类=“notranslate”新增异步=真实,指定一个功能,当响应是onreadystatechange事件准备执行:
例
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
试一试» 您将了解的onreadystatechange在后面的章节。
Async=false
要使用async=false ,更改第三个参数open()方法为false:
xhttp.open("GET", "ajax_info.txt", false);
使用async=false不建议,但对于一些小的请求,这可能是好的。
请记住,JavaScript就无法继续执行,直到服务器响应准备。 如果服务器太忙或太慢,应用程序将挂起或停止。
注意:当您使用async=false ,不写一个函数的onreadystatechange -只要把代码后send()语句:
例
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
试一试»