七、AJAX开发
到这里，已经可以清楚的知道AJAX是什么，AJAX能做什么，AJAX什么地方不好。如果你觉得AJAX真的能给你的开发工作带来改进的话，那么继续看看怎么使用AJAX吧。
IE5.0开始，开发人员可以在Web页面内部使用XMLHTTP ActiveX组件扩展自身的功能，不用从当前的Web页面导航就可以直接传输数据到服务器或者从服务器接收数据。,Mozilla1.0以及NetScape7则是创建继承XML的代理类XMLHttpRequest；对于大多数情况，XMLHttpRequest对象和XMLHTTP组件很相似，方法和属性类似，只是部分属性不同。
XMLHttpRequest对象初始化：<script language=”javascript”>var http_request = false;//IE浏览器http_request = new ActiveXObject("Msxml2.XMLHTTP");http_request = new ActiveXObject("Microsoft.XMLHTTP");//Mozilla浏览器http_request = new XMLHttpRequest();</script>XMLHttpRequest对象的方法：
方法描述
abort()
停止当前请求
getAllResponseHeaders()
作为字符串返回完整的headers
getResponseHeader("headerLabel")
作为字符串返回单个的header标签
open("method","URL"[,asyncFlag[,"userName"[, "password"]]])设置未决的请求的目标 URL，方法，和其他参数
send(content)发送请求
setRequestHeader("label", "value")设置header并和请求一起发送
XMLHttpRequest对象的属性：
属性描述
onreadystatechange状态改变的事件触发器
readyState对象状态(integer):
0 = 未初始化
1 = 读取中
2 = 已读取
3 = 交互中
4 = 完成
responseText服务器进程返回数据的文本版本
responseXML服务器进程返回数据的兼容DOM的XML文档对象
status服务器返回的状态码, 如：404 = "文件未找到" 、200 ="成功"
statusText服务器返回的状态文本信息
有些版本的Mozilla浏览器处理服务器返回的未包含XML mime-type头部信息的内容时会出错。因此，要确保返回的内容包含text/xml信息。
http_request = new XMLHttpRequest();http_request.overrideMimeType('text/xml');B、指定响应处理函数需要指出的时，这个函数名称不加括号，不指定参数。也可以用Javascript即时定义函数的方式定义响应函数。比如：
http_request.onreadystatechange = function() { };
C、发出HTTP请求指定响应处理函数之后，就可以向服务器发出HTTP请求了。这一步调用XMLHttpRequest对象的open和send方法。
http_request.open('GET', 'http://www.example.org/some.file', true);http_request.send(null);open的第一个参数是HTTP请求的方法，为Get、Post或者Head。
open的第二个参数是目标URL。基于安全考虑，这个URL只能是同网域的，否则会提示“没有权限”的错误。这个URL可以是任何的URL，包括需要服务器解释执行的页面，不仅仅是静态页面。目标URL处理请求XMLHttpRequest请求则跟处理普通的HTTP请求一样，比如JSP可以用request.getParameter(“”)或者request.getAttribute(“”)来取得URL参数值。
open的第三个参数只是指定在等待服务器返回信息的时间内是否继续执行下面的代码。如果为True，则不会继续执行，直到服务器返回信息。默认为True。
按照顺序，open调用完毕之后要调用send方法。send的参数如果是以Post方式发出的话，可以是任何想传给服务器的内容。不过，跟form一样，如果要传文件或者Post内容给服务器，必须先调用setRequestHeader方法，修改MIME类别。如下：
http_request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);这时资料则以查询字符串的形式列出，作为sned的参数，例如：
name=value&anothername=othervalue&so=onD、处理服务器返回的信息首先，它要检查XMLHttpRequest对象的readyState值，判断请求目前的状态。参照前文的属性表可以知道，readyState值为4的时候，代表服务器已经传回所有的信息，可以开始处理信息并更新页面内容了。如下：
if (http_request.readyState == 4) {// 信息已经返回，可以开始处理} else {// 信息还没有返回，等待}服务器返回信息后，还需要判断返回的HTTP状态码，确定返回的页面没有错误。所有的状态码都可以在W3C的官方网站上查到。其中，200代表页面正常。
if (http_request.status == 200) {// 页面正常，可以开始处理信息} else {// 页面有问题} XMLHttpRequest对成功返回的信息有两种处理方式：
responseText：将传回的信息当字符串使用；
responseXML：将传回的信息当XML文档使用，可以用DOM处理。
在<body></body>之间增加一段form表单代码：
<form action="" method="post">在开发框架的基础上再增加一个调用函数：
function userCheck() {var f = document.form1;var username = f.username.value;if(username=="") {window.alert("用户名不能为空。");f.username.focus();return false;}else {send_request('sample1_2.jsp?username='+username);}}看看sample1_2.jsp做了什么：
<%@ page contentType="text/html; charset=gb2312" errorPage="" %><%String username = request.getParameter("username");if("educhina".equals(username)) out.print("用户名已经被注册，请更换一个用户名。");else out.print("用户名尚未被使用，您可以继续。");%>运行一下，嗯，没有弹出窗口，没有页面刷新，跟预想的效果一样。如果需要的话，可以在sample1_2.jsp中实现更复杂的功能。最后，只要将反馈信息打印出来就可以了。
首先，在<body></body>中间增加如下HTML代码：
<table cellspacing="0" cellpadding="0"><tr><td><a href="javascript:void(0)">经理室</a></td></tr><tr><td> </td></tr><tr><td><a href="javascript:void(0)">开发部</a></td></tr><tr><td> </td></tr></table>在框架的基础上增加一个响应函数showRoles(obj)：
//显示部门下的岗位function showRoles(obj) {document.getElementById(obj).parentNode.style.display = "";document.getElementById(obj).innerHTML = "正在读取数据..."currentPos = obj;send_request("sample2_2.jsp?playPos="+obj);}修改框架的processRequest函数：
// 处理返回信息的函数function processRequest() {if (http_request.readyState == 4) { // 判断对象状态if (http_request.status == 200) { // 信息已经成功返回，开始处理信息document.getElementById(currentPos).innerHTML = http_request.responseText;} else { //页面不正常alert("您所请求的页面有异常。");}}}最后就是smaple2_2.jsp了：
<%@ page contentType="text/html; charset=gb2312" errorPage="" %>运行一下看看效果：
7.4、文档对象模型（DOM）当前1/3页
新闻热点
疑难解答
图片精选
