Ajax技术

Ajax技术
Ajax技术
制作⼈：全⼼全意Ajax介绍
Ajax开发模式与传统开发模式的⽐较
传统开发模式：在传统的Web应⽤模式中，页⾯中⽤户的每⼀次操作都将触发⼀次返回Web服务器的HTTP请求，服务器进⾏相应的处理（获得数据、运⾏与不同的系统会话）后，返回⼀个HTML页⾯给客户端。

其关系结构图如下图所⽰。

Ajax开发模式：在Ajax应⽤中，页⾯中⽤户的操作将通过Ajax引擎与服务器进⾏通信，然后将返回结构提交给客户端页⾯的Ajax引擎，再由Ajax引擎来决定将这些数据插⼊到页⾯的指定位置。

其关系结构图如下图所⽰。

Ajax使⽤的技术
Ajax是XMLHttpRequest对象和JavaScript、XML、CSS、DOM等多种技术的组合。

其中，只有XMLHttpRequest对象是新技术，其他的均为已有技术。

Ajax最核⼼的技术就是XMLHttpRequest，它是⼀个具有应⽤程序接⼝的JavaScript对象，能够使⽤超⽂本传输协议（HTTP）连接⼀个服务器，是微软公司为了满⾜开发者的需求，于1999年在IE5.0浏览器中率先推出的。

现在许多的浏览器都对其提供了⽀持，不过实现⽅式与IE有所不同。

在Ajax应⽤中，通过JavaScript操作DOM，可以达到不刷新页⾯的情况下实时修改⽤户界⾯的⽬的。

XMLHttpRequest对象的使⽤
通过XMLHttpRequest对象，Ajax可以像桌⾯应⽤程序⼀样只同服务器进⾏数据层⾯的交换，⽽不⽤每次都刷新页⾯，也不⽤每次都将数据处理的⼯作交给服务器来完成，这样既减轻了服务器的负担，⼜加快了响应速度，缩短了⽤户等待的时间。

初始化XMLHttpRequest对象
由于XMLHttpRequest不是⼀个W3C标准，所以针对不同的浏览器，初始化⽅法也是不同的。

通常情况下，初始化XMLHttpRequest对象只需要考虑两种情况，⼀种是IE浏览器，另⼀种是⾮IE浏览器。

（1）IE浏览器（将XMLHttpRequest实例化为⼀个ActiveX对象）
var http_request = new ActiveXObject("Msxml2.XMLHTTP");
或者
var http_request = new ActiveXObject("Microsoft.XMLHTTP");
在上⾯的语法中，Msxml2.XMLHTTP和Microsoft.XMLHTTP是针对IE浏览器的不同版本⽽进⾏设置的，⽬前⽐较常⽤的是这两种。

（2）⾮IE浏览器（将XMLHttpRequest实例化为⼀个本地JavaScript对象）
var http_request = new XMLHttpRequest();
使⽤⽰例：为提⾼兼容性，可以创建⼀个跨浏览器的XMLHttpRequest对象。

<script type="text/javascript">
function myname() {
var http_request = false;
if (window.XMLHttpRequest) { //⾮IE浏览器
http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { //IE浏览器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP"); //使⽤第⼀种⽅式初始化
} catch (e) {//第⼀种⽅式错误，使⽤第⼆种⽅式初始化
try {
} catch (e) {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
}
}
}
</script>
XMLHttpRequest对象的常⽤⽅法
XMLHttpRequest对象提供了⼀些常⽤⽅法，通常这些⽅法可以对请求进⾏操作。

open()⽅法
open()⽅法⽤于设置进⾏异步请求⽬标的URL、请求⽅法以及其他参数信息。

其语法格式如下：
open("method","URL"[,asyncFlag[,"userName"[,"password"]]])
参数说明：
method：⽤于指定请求的类型，⼀般为GET或POST。

URL：⽤于指定请求地址，可以使⽤绝对地址或者相对地址，并且可以传递查询字符串。

asyncFlag：为可选参数，⽤于指定请求⽅式，异步请求为true，同步请求为false，默认情况下为true。

userName：为可选参数，⽤于指定请求⽤户名，没有时可省略。

password：为可选参数，⽤于指定请求密码，没有时可省略。

send()⽅法
send()⽅法⽤于向服务器发送请求。

如果请求声明为异步，该⽅法⽴即返回，否则将等到接收到响应为⽌。

其语法格式如下：send(content)
参数说明：
content：⽤于指定发送的数据，可以是DOM对象的实例、输⼊流或字符串。

如果没有参数需要传递，可以设置为null。

setRequestHeader()⽅法
setRequestHeader()⽅法⽤于为请求的HTTP头设置值。

其语法格式如下：
setRequestHeader("header","value")
参数说明：
header：⽤于指定HTTP头。

value：⽤于为指定的HTTP头设置值。

注意：该⽅法必须在调⽤open()⽅法之后才能调⽤。

abort()⽅法
abort()⽅法⽤于停⽌或放弃当前异步请求。

其语法格式如下：
abort()
getResponseHeader()⽅法
getResponseHeader()⽅法⽤于以字符串形式返回指定的HTTP头信息。

其语法格式如下：
getResponseHeader("headerLabel")
参数说明：
headerLabel：⽤于指定HTTP头，包括Server、Content-Type和Date等。

getAllResponseHeaders()⽅法
getAllResponseHeaders()⽅法⽤于以字符串形式返回完整的HTTP头信息，其中包括Server、Date、Content-Type和Content-Length。

其语法格式如下：
getAllResponseHeader()
XMLHttpRequest对象的常⽤属性
XMLHttpRequest对象提供了⼀些常⽤属性，通过这些属性可以获取服务器的响应状态及响应内容。

onreadystatechange属性
onreadystatechange属性⽤于指定状态改变时所触发的事件处理器。

在Ajax中，每个状态改变时都会触发这个事件处理器，通常会调⽤⼀个JavaScript函数。

readyState属性
readyState属性⽤于获取请求的状态。

该属性共包括5个属性值，如下表所⽰：
值意义值意义
0未初始化3交互中
1正在加载4完成
2已加载
responseText属性
responseText属性⽤于获取服务器的响应，表⽰为字符串。

responseXML属性
responseXML属性⽤于获取服务器的响应，表⽰为XML。

这个对象可以解析为⼀个DOM对象。

status属性
status属性⽤于返回服务器的HTTP状态码，常见的状态码如下所⽰：
200：成功
202：请求被接受，但未成功
400：错误的请求
404：⽂件未找到
500：内部服务器错误
statusText属性
statusText属性⽤于返回HTTP状态码对应的⽂本，如OK或Not Fount(未找到)等。

发送请求与处理响应
发送请求
Ajax可以通过XMLHttpRequest对象实现采⽤异步⽅式在后台发送请求。

通常情况下，Ajax发送请求⽅式有两种，⼀种时发送GET请求，另⼀种是发送POST请求。

但是⽆论发送哪种请求，都需要经过以下4个步骤：
（1）初始化XMLHttpRequest对象。

（2）指定返回结果处理函数（回调函数），⽤于对返回结果进⾏处理。

（3）创建与服务器的连接，指定发送请求的⽅式，以及是否采⽤异步⽅式发送请求。

（4）向服务器发送请求。

处理响应
当向服务器发送请求后，接下来就需要处理服务器响应。

在向服务器发送请求时，需要通过XMLHttpRequest对象的onreadystatechange属性指定⼀个回调函数，⽤于处理服务器响应。

在这个回调函数中，⾸先需要判断服务器的请求状态，保证请求已完成；然后再根据服务器的HTTP状态码，判断服务器对请求的响应是否成功，如果成功，则获取服务器的响应反馈给客户端。

XMLHttpRequest对象提供了两个⽤来访问服务器响应的属性，⼀个是responseText属性，返回字符串响应；另⼀个是responseXML属性，返回XML响应。

返回字符串响应的⽰例参考《发送请求与处理响应的应⽤实例》
返回XML响应的⽰例：
abc.xml⽂件：
<?xml version="1.0" encoding="utf-8"?>
<musics>
<music>
<name>李⽟刚</name>
<title>新贵妃醉酒</title>
</music>
<music>
<name>⽻泉</name>
<title>奔跑</title>
</music>
</musics>
index.jsp页⾯：显⽰格式化后的XML⽂件信息
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@taglib uri="/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>根据是否登录显⽰不同的内容</title>
</head>
<script language="javascript">
function createRequest(url) {//初始化XMLHttpRequest对象
http_request = false;
if (window.XMLHttpRequest) { // ⾮IE浏览器
http_request = new XMLHttpRequest(); //创建XMLHttpRequest对象
} else if (window.ActiveXObject) { // IE浏览器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP"); //创建XMLHttpRequest对象
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP"); //创建XMLHttpRequest对象
} catch (e) {
}
}
}
if (!http_request) {
alert("不能创建XMLHttpRequest对象实例！");
return false;
}
http_request.onreadystatechange = getResult; //指定返回结果处理函数（回调函数），⽤于对返回结果进⾏处理
http_request.open('GET', url, true); //创建与服务器的连接，指定发送请求的⽅式，以及是否采⽤异步⽅式发送请求
http_request.send(null); //向服务器发送请求
}
function getResult() {
if (http_request.readyState == 4) { // 判断请求状态
if (http_request.status == 200) { // 请求成功，开始处理返回结果
var xmldoc = http_request.responseXML;
var str = "";
for (i = 0; i < xmldoc.getElementsByTagName("music").length; i++) {
var music = xmldoc.getElementsByTagName("music")[i];
str = str
+ "《"
+ music.getElementsByTagName("title")[0].firstChild.data
+ "》由“"
+ music.getElementsByTagName("name")[0].firstChild.data
+ "”演唱<br>";
}
document.getElementById("music").innerHTML = str;
} else { // 请求页⾯有错误
alert("您所请求的页⾯有错误！");
}
}
}
function checkUser() {
createRequest('abc.xml');
}
</script>
<body>
<b onclick="checkUser()">请求</b>
<div id="music"></div>
</body>
</html>
发送请求与处理响应的应⽤实例（检测⽤户名是否唯⼀）
index.jsp页⾯：添加收集⽤户信息的表单元素，调⽤检测⽤户名是否唯⼀的⽅法
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"> <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>检测⽤户名是否唯⼀</title>
<script language="javascript">
function createRequest(url) {//初始化XMLHttpRequest对象
http_request = false;
if (window.XMLHttpRequest) { // ⾮IE浏览器
http_request = new XMLHttpRequest(); //创建XMLHttpRequest对象
} else if (window.ActiveXObject) { // IE浏览器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP"); //创建XMLHttpRequest对象
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP"); //创建XMLHttpRequest对象
} catch (e) {
}
}
}
if (!http_request) {
alert("不能创建XMLHttpRequest对象实例！");
return false;
}
http_request.onreadystatechange = getResult; //指定返回结果处理函数（回调函数），⽤于对返回结果进⾏处理 http_request.open('GET', url, true); //创建与服务器的连接，指定发送请求的⽅式，以及是否采⽤异步⽅式发送请求 http_request.send(null); //向服务器发送请求
}
function getResult() {
if (http_request.readyState == 4) { // 判断请求状态
if (http_request.status == 200) { // 请求成功，开始处理返回结果
document.getElementById("toolTip").innerHTML = http_request.responseText; //设置提⽰内容
document.getElementById("toolTip").style.display = "block"; //显⽰提⽰框（id为toolTip的div层）
} else { // 请求页⾯有错误
alert("您所请求的页⾯有错误！");
}
}
}
function checkUser(userName) {
if (userName.value == "") {
alert("请输⼊⽤户名！");
userName.focus();
return;
} else {
createRequest('checkUser.jsp?user=' + userName.value);
}
}
</script>
<!-- 检测⽤户名是否唯⼀返回结果的显⽰位置-->
<style type="text/css">
#toolTip {
position: absolute;
left: 331px;
top: 39px;
width: 98px;
height: 55px;
padding-top: 45px;
padding-left: 22px;
padding-right: 58px;
z-index: 1;
display: none;
color: red;
}
</style>
</head>
<body style="margin: 0px;">
<form method="post" action="" name="form1">
<table width="509" height="352" border="0" align="center"
cellpadding="0" cellspacing="0">
<tr>
<td height="54"> </td>
</tr>
<tr>
<td height="253" valign="top">
<div style="position: absolute;">
<table width="100%" height="250" border="0" cellpadding="0"
cellspacing="0">
<tr>
<td width="18%" height="54" align="right" style="color: #8e6723"><b>⽤户名：</b></td> <td width="49%"><input name="username" type="text"
id="username" size="25"></td>
<td width="33%" onClick="checkUser(ername);">检测⽤户名</td>
</tr>
<tr>
<td height="51" align="right" style="color: #8e6723"><b>密码：</b></td>
<td><input name="pwd1" type="password" id="pwd1" size="25"></td>
<td rowspan="2">
<div id="toolTip"></div>
</td>
</tr>
<tr>
<td height="56" align="right" style="color: #8e6723"><b>确认密码：</b></td>
<td><input name="pwd2" type="password" id="pwd2" size="25"></td>
</tr>
<tr>
<td height="55" align="right" style="color: #8e6723"><b>E-mail：</b></td>
<td colspan="2"><input name="email" type="text" id="email"
size="45"></td>
</tr>
<tr>
<td> </td>
<td colspan="2">注册</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
checkUser.jsp页⾯：判断输⼊的⽤户名是否注册，并输出判断结果。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String[] userList = { "全⼼全意", "zq", "root", "qxqy" }; //创建⼀个⼀维数组
String user = new String(request.getParameter("user").getBytes("ISO-8859-1"),
"utf-8"); //获取⽤户名
Arrays.sort(userList); //对数组排序
int result = Arrays.binarySearch(userList, user); //搜索数组
if (result > -1) {
out.println("很抱歉，该⽤户名已经被注册！"); //输出检测结果
} else {
out.println("恭喜您，该⽤户名没有被注册！"); //输出检测结果
}
%>
Ajax解决中⽂乱码问题
Ajax不⽀持多种字符集，它默认的字符集是UTF-8，所以在应⽤Ajax技术的程序中应及时进⾏编码转换，否则对于程序中出现的中⽂字符将变成乱码。

发送请求时出现中⽂乱码
（1）当接收使⽤GET⽅法提交的数据时，要将编码转换为GBK或UTF-8。

String selProvince = request.getParameter("parProvince"); //获取选择的省份
selProvince = new String(selProvince.getBytes("ISO-8859-1"),"UTF-8");
（2）由于应⽤POST⽅法提交数据时，默认的字符编码是UTF-8，所以当接收使⽤POST⽅法提交的数据时，要将编码转换为UTF-8。

String username = request.getParameter("user"); //获取⽤户名
username = new String(username.getBytes("ISO-8859-1"),"UTF-8");
获取服务器的响应结果时出现中⽂乱码
由于Ajax在接收responseText或responseXML的值时是按照UTF-8的编码格式进⾏解码的，所以如果服务器端传递的数据不是UTF-8格式，在接收responseText或responseXML的值时，就可能产⽣乱码。

解决办法是保证从服务器端传递的数据采⽤UTF-8的编码格式。