Ajax向服务器发送请求和接收返回的信息

Ajax向服务器发送请求

Ajax对象创建完成后，下面就要讲解一下Ajax如何使用。首先详细讲解一下Ajax向服务器发送请求所需的两个方法，具体如下：

(1)open()方法

open()方法用于创建一个新的HTTP请求，并指定此请求的类型(如GET、POST等)、URL以及验证信息，其声明方式如下所示：

在上述声明中，method用于指定请求的类型，其值可为POST、GET、PUT及PROPFIND，大小写不敏感URL表示请求的地址，可以为绝对地址也可以为相对地址，并且可以传递查询字符串。其余参数为可选参数，其中，asyncFlagy用于指定请求方式，同步请求为false，默认为异步请求trueuserName用于指定用户名，password用于指定密码。

(2)send()方法

send()方法用于发送请求到HTTP服务器并接收回应。其声明方式如下所示：

在上述声明中，content用于指定要发送的数据，其值可为DOM对象的实例、输入流或字符串，一般与POST请求类型配合使用，需要注意的是，如果请求声明为同步，该方法将会等待请求完成或者超时才会返回，否则此方法将立即返回。

需要注意的是，在使用GET方式传递特殊字符或中文参数时，要使用JavaScript中的encodeURIComponent()函数将其转换成“%十六进制数”的形式，防止在某些浏览器(如IE浏览器)中中文乱码的问题。

Ajax接收服务器返回的信息

了解Ajax向服务器发送请求后，下面将对Ajax如何接收服务器返回的信息(例如，HTML标签、CSS样式、字符串、XML、JSON等)，进行详细讲解。具体如下：

(1)readyState属性

readyState属性用于返回Ajax的当前状态，状态值有5种形式，具体如表所示。

(2)onreadystatechange属性

onreadystatechange事件属性用于感知readyState属性状态的改变。为了大家更好的理解这两个属性的使用，下面创建一个服务器端的文件index.php，用于输出字符串，然后在浏览器端index.html中向服务器端发送请求，并在控制台输出状态值。具体示例如下所示：

创建服务器端文件：index.php

创建浏览器端文件：index.html

在浏览器中访问客户端文件，按“F12”键，切换到控制台，查看输出结果，具体如下图所示。

从图中可以看出，通过onreadystatechange事件属性可以清晰的感知Ajax状态的改变，同时使用readyState获取转变后的状态值。例如Ajax从0(未初始化)状态变成1(初始化)状态值时，Ajax此时的状态值为1。

(3)status属性

status属性用于返回当前请求的HTTP状态码，常见的状态码如表所示。

值得一提的是，在感知当前Ajax对象状态时，为了追求程序的严谨性，需要同时判断当前HTTP状态status是否等于200(请求成功)。

需要注意的是，Ajax中的statusText属性，仅当数据发送并接收完毕后，才可以获取当前请求的响应状态。

(4)获取响应信息的相关属性

当数据接收完毕且请求服务器的请求成功时，即可以使用Ajax中提供的相关属性获取服务器的响应信息。具体的属性及相关说明如下表所示。

在上表中，responseText属性用于返回文本格式的响应数据属性responseBody表示直接从服务器返回并未经解码的二进制数据responseXML属性用于接收XML数据格式的响应数据。

比如服务器上有张表或者list\x0d\x0aidnamesex\x0d\x0a1张三男\x0d\x0a2李四女\x0d\x0a3王五男\x0d\x0a你首先在后台代码中把这个表处理成为JSON格式然后用Response.write的方法输出来，比如这样\x0d\x0a[{id:1,name:'张三',sex:'男'},{id:2,name:'李四',sex:'女'},{id:3,name:'王五',sex:'男'}]\x0d\x0aJSON是用于在JS中描述实体对象的一种方式，具体关于JSON的知识可以看w3school.com.cn上的相关内容，我这儿就不给你细讲了，很简单，我只说做法：\x0d\x0a为了方便使用，你需要在你的页面中引用jQuery库，我不知道你用什么语言做的后台程序，原理一样\x0d\x0a$.ajax({\x0d\x0aurl:"这里换成你写好的用于把表转换成JSON的后台处理文件地址，比如a.aspx?参数",\x0d\x0atype:"POST",//这里是AJAX请求的方式\x0d\x0adataType:"JSON",//如果你回发的内容是JSON格式的就用这个，否则用Text或其他\x0d\x0adata:{\x0d\x0a参数1:值,\x0d\x0a参数2:值,\x0d\x0a......\x0d\x0a参数n:值\x0d\x0a},//要发送的参数，如果无参数可以不写此项\x0d\x0asuccess:function(data)\x0d\x0a{\x0d\x0a//此处写入发送成功后要处理的代码，而参数里的这个data，就是请求成功后返回来的上面那个格式的JSON，你可以用data[i]的值来取其中一行，如取张三的数据就是\x0d\x0adata[0].name，就取出了张三的name属性\x0d\x0a所以你可以在这里用循环去处理data，然后将结果用document.write的方式输出来就完成了。\x0d\x0a},\x0d\x0aerror:function(XMLHttpRequest,Error,F)\x0d\x0a{\x0d\x0a//出错后可以在这里给出提示，Error参数表示错误信息\x0d\x0a}\x0d\x0a})\x0d\x0a还有弄不清楚的地方可以继续和我探讨。

---