最新的Web开发教程
 

AJAX - 发送一个请求到服务器


XMLHttpRequest对象来与服务器交换数据。


发送请求到服务器

发送一个请求到服务器,我们使用open()send() XMLHttpRequest对象的方法:

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
方法 描述
open(method, url, async) 指定请求的类型

method :请求的类型: GETPOST
url :服务器(文件)的位置
asynctrue (异步)或false (同步)
send() 将请求发送给服务器(用于GET
send(string) 将请求发送给服务器(用于POST

GETPOST

GET是简单和速度比POST ,可在大多数情况下被使用。

然而,始终使用POST请求时:

  • 缓存的文件不是一个选项(更新服务器上的文件或数据库)。
  • 发送大量的数据到服务器( POST没有大小限制)。
  • 发送用户输入(可以包含未知字符), POST更加强大和安全比GET

GET请求

一个简单的GET请求:

xhttp.open("GET", "demo_get.asp", true);
xhttp.send();
试一试»

在上面的例子中,你可能会得到一个缓存的结果。 为了避免这种情况,添加一个唯一ID to the URL: ID to the URL:

xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();
试一试»

如果你想与信息发送GET方法,将信息添加到URL:

xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send();
试一试»

POST请求

一个简单的POST请求:

xhttp.open("POST", "demo_post.asp", true);
xhttp.send();
试一试»

POST数据,如一个HTML表单,添加一个HTTP headersetRequestHeader() 指定要在发送数据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;
试一试»