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

XMLHttpRequest对象用来和服务器交换数据.

发送一个请求到服务器

为了发送一个请求到服务器，我们需要使用XMLHttpRequest对象的open() 和 send() 方法:

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

方法
描述

open(method,url,async) 指定请求的类型, URL, 以及这个请求是否以asynchronously方式处理.
method:请求的类型: GET or POST
url: 文件在服务器上的位置
async: true (异步asynchronous) or false (同步synchronous)

send(string) 发送请求到服务器.
string: 只有POST请求才会用到

GET or POST?

GET 比POST简单而且更快捷,并且大部分时候都可以使用.

然而一下情况通常会使用POST请求requests:

GET Requests

一个简单的GET请求:

例子：

xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();

Try it yourself »

在这个例子中，我们可能得到的是一个缓存的结果.为了避免这个，可以为URL添加一个unique ID:

例子：

xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);
xmlhttp.send();

Try it yourself »

如果希望使用GET方法发送信息,给URL添加信息:

例子

xmlhttp.open("GET","demo_get2.asp?fname=Henry&lname=Ford",true);
xmlhttp.send();

Try it yourself »

POST请求

一个简单的POST请求:

例子

xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();

Try it yourself »

为了向HTML form 一样POST数据，可以使用setRequestHeader()添加一个HTTP header. 指定我们想使用send（）方法传送的数据:

例子

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

Try it yourself »

方法 描述

setRequestHeader(header,value) 给请求添加添加HTTP headers
header: 指定header的名字
value: 指定header的值

url - 一个服务器上的文件

open（）方法的url parameter, 是一个服务器上文件的地址:

xmlhttp.open("GET","ajax_test.asp",true);

这个文件可以是任何类新，比如 .txt and .xml, or 或者服务器脚本文件 .asp and .php (在返回反应之前服务器执行的一些行动).

Asynchronous（异步） - 真或者假?

AJAX 表示Asynchronous JavaScript and XML, 并且为了使XMLHttpRequest对象表现的更象AJAX, open（）方法设置async参数为真:

xmlhttp.open("GET","ajax_test.asp",true);

发送异步请求，对于web开发人员是一个很大的提高.服务器上执行的任务非常耗费时间，在AJAX之前, 这类操作导致应用停止或者挂起.

使用AJAX, JavaScript不需要等待服务器响应，而是能：

在等待系统响应的时候执行其他脚本

当响应就绪的时候处理响应

Async=true

当使用async=true, 在onreadystatechange事件中，当响应就绪时，指定一个函数执行:

例子

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementByIdx_x_x("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

Try it yourself »

关于onreadystatechange，我们在以后会学习的更多.

Async=false

为了使用async=false, 可以改变open（）方法中的第三个参数为false:

xmlhttp.open("GET","ajax_info.txt",false);

不推荐使用async=false,但是对于一些小的请求也没有问题.

切记JavaScript不会继续执行，知道服务器响应就绪. 如果服务器很忙或者很慢，应用会挂起或者停止

注意: 当使用async=false, 千万不要写onreadystatechange函数 - 只需要把代码放在send（）后面就可以了:

例子

xmlhttp.open("GET","ajax_info.txt",false);
xmlhttp.send();
document.getElementByIdx_x_x("myDiv").innerHTML=xmlhttp.responseText;

Try it yourself »
服务器响应

为了得到服务器响应, 使用XMLHttpRequest 对象的 responseText 或者 responseXML属性.

属性 描述

responseText 作为字符串得到响应数据

responseXML 作为xml数据得到响应数据

responseText 属性

如果从服务器得到的响应不是XML, 使用 responseText 属性.

responseText 属性作为一个字符串返回, 我们可以相应的使用它:

例子

document.getElementByIdx_x_x("myDiv").innerHTML=xmlhttp.responseText;

Try it yourself »

responseXML 属性

如果从服务器的响应是XML, 我们需要把它作为一个XML对象解析时，使用responseXML 属性:

例子

请求文件 cd_catalog.xml 并解析响应:

xmlDoc=xmlhttp.responseXML;
var txt="";
x=xmlDoc.getElementsByTagName_r("ARTIST");
for (i=0;i<x.length;i++)
  {
  txt=txt + x[i].childNodes[0].nodeValue + "<br />";
  }
document.getElementByIdx_x_x("myDiv").innerHTML=txt;

Try it yourself »
onreadystatechange 事件

当请求向服务器发送以后, 我们希望在响应的基础上执行某些操作.

每一次readyState发生改变，onreadystatechange 事件都会被触发.

readyState 属性拥有XMLHttpRequest的状态.

XMLHttpRequest对象的三个重要属性:

属性 描述

onreadystatechange 保存一个函数，或者函数的名字，每次readyState 属性发生改变的时候执行

readyState 拥有XMLHttpRequest的状态. 在0 到 4之间变化:
0: 请求未初始化
1: 服务器链接建立
2: 请求收到了
3: 请求处理中
4: 请求完成响应就绪

status 200: "OK"
404: Page not found

在onreadystatechange事件中, 我们指定了当服务器响应即将处理时将要发生什么.

当readyState 是 4 并且 status 是 200, 表示响应就绪:

例子