AJAX开发简略 (第二部分)

七、AJAX开发
　　到这里，已经可以清楚的知道AJAX是什么，AJAX能做什么，AJAX什么地方不好。如果你觉得AJAX真的能给你的开发工作带来改进的话，那么继续看看怎么使用AJAX吧。

A、XMLHttpRequest对象
　　XMLHttpRequest是XMLHTTP组件的对象，通过这个对象，AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新界面，也不用每次将数据处理的工作都交给服务器来做；这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。

　　IE5.0开始，开发人员可以在Web页面内部使用XMLHTTP ActiveX组件扩展自身的功能，不用从当前的Web页面导航就可以直接传输数据到服务器或者从服务器接收数据。,Mozilla1.0以及NetScape7则是创建继承XML的代理类XMLHttpRequest；对于大多数情况，XMLHttpRequest对象和XMLHTTP组件很相似，方法和属性类似，只是部分属性不同。

XMLHttpRequest对象初始化：var http_request = false;//IE浏览器http_request = new ActiveXObject(“Msxml2.XMLHTTP”);http_request = new ActiveXObject(“Microsoft.XMLHTTP”);//Mozilla浏览器http_request = new XMLHttpRequest();

　　XMLHttpRequest对象的方法：

　　XMLHttpRequest对象的属性：

C、DOM
　　 DOM（Document Object Model）是提供给HTML和XML使用的一组API，提供了文件的表述结构，并可以利用它改变其中的内容和可见物。脚本语言通过DOM才可以跟页面进行交互。Web开发人员可操作及建立文件的属性、方法以及事件都以对象来展现。比如，document就代表页面对象本身。

D、XML
　　通过XML（Extensible Markup Language），可以规范的定义结构化数据，是网上传输的数据和文档符合统一的标准。用XML表述的数据和文档，可以很容易的让所有程序共享。

7.2、AJAX开发框架
　　这里，我们通过一步步的解析，来形成一个发送和接收XMLHttpRequest请求的程序框架。AJAX实质上也是遵循Request/Server模式，所以这个框架基本的流程也是：对象初始化à发送请求à服务器接收à服务器返回à客户端接收à修改客户端页面内容。只不过这个过程是异步的。

A、初始化对象并发出XMLHttpRequest请求
　　为了让Javascript可以向服务器发送HTTP请求，必须使用XMLHttpRequest对象。使用之前，要先将XMLHttpRequest对象实例化。之前说过，各个浏览器对这个实例化过程实现不同。IE以ActiveX控件的形式提供，而Mozilla等浏览器则直接以XMLHttpRequest类的形式提供。为了让编写的程序能够跨浏览器运行，要这样写：

if (window.XMLHttpRequest) { // Mozilla, Safari, …    http_request = new XMLHttpRequest(); }  else if (window.ActiveXObject) { // IE    http_request = new ActiveXObject(“Microsoft.XMLHTTP”);}

　　有些版本的Mozilla浏览器处理服务器返回的未包含XML mime-type头部信息的内容时会出错。因此，要确保返回的内容包含text/xml信息。

http_request = new XMLHttpRequest();http_request.overrideMimeType(‘text/xml’);

http_request.onreadystatechange = processRequest;

　　需要指出的时，这个函数名称不加括号，不指定参数。也可以用Javascript即时定义函数的方式定义响应函数。比如：

http_request.onreadystatechange = function() { };

　　指定响应处理函数之后，就可以向服务器发出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=on

　　首先，它要检查XMLHttpRequest对象的readyState值，判断请求目前的状态。参照前文的属性表可以知道，readyState值为4的时候，代表服务器已经传回所有的信息，可以开始处理信息并更新页面内容了。如下：

if (http_request.readyState == 4) {  // 信息已经返回，可以开始处理} else {  // 信息还没有返回，等待}

　　服务器返回信息后，还需要判断返回的HTTP状态码，确定返回的页面没有错误。所有的状态码都可以在W3C的官方网站上查到。其中，200代表页面正常。

if (http_request.status == 200) {  // 页面正常，可以开始处理信息} else {  // 页面有问题}

　　XMLHttpRequest对成功返回的信息有两种处理方式：
　　 responseText：将传回的信息当字符串使用；
　　 responseXML：将传回的信息当XML文档使用，可以用DOM处理。

var http_request = false;function send_request(url) {//初始化、指定处理函数、发送请求的函数http_request = false;//开始初始化XMLHttpRequest对象if(window.XMLHttpRequest) { //Mozilla 浏览器http_request = new XMLHttpRequest();if (http_request.overrideMimeType) {//设置MiME类别http_request.overrideMimeType(“text/xml”);}}else if (window.ActiveXObject) { // IE浏览器try {http_request = new ActiveXObject(“Msxml2.XMLHTTP”);} catch (e) {try {http_request = new ActiveXObject(“Microsoft.XMLHTTP”);} catch (e) {}}}if (!http_request) { // 异常，创建对象实例失败window.alert(“不能创建XMLHttpRequest对象实例.”);return false;}http_request.onreadystatechange = processRequest;// 确定发送请求的方式和URL以及是否同步执行下段代码http_request.open(“GET”, url, true);http_request.send(null);}// 处理返回信息的函数  function processRequest() {    if (http_request.readyState == 4) { // 判断对象状态      if (http_request.status == 200) { // 信息已经成功返回，开始处理信息        alert(http_request.responseText);      } else { //页面不正常        alert(“您所请求的页面有异常。”);      }    }  }

A、数据校验
　　在用户注册的表单中，经常碰到要检验待注册的用户名是否唯一。传统的做法是采用window.open的弹出窗口，或者window. showModalDialog的对话框。不过，这两个都需要打开窗口。采用AJAX后，采用异步方式直接将参数提交到服务器，用window.alert将服务器返回的校验信息显示出来。代码如下：

　　在之间增加一段form表单代码：

 用户名：
 
 

　　在开发框架的基础上再增加一个调用函数：

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做了什么：

　　运行一下，嗯，没有弹出窗口，没有页面刷新，跟预想的效果一样。如果需要的话，可以在sample1_2.jsp中实现更复杂的功能。最后，只要将反馈信息打印出来就可以了。

　　首先，在中间增加如下HTML代码：

经理室


 


开发部


 

　　在框架的基础上增加一个响应函数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了：

<%
String playPos = request.getParameter(“playPos”);if(“pos_1”.equals(playPos))   out.print(“总经理
副总经理”);else if(“pos_2”.equals(playPos))   out.println(“总工程师
软件工程师”);
%>

　　运行一下看看效果：

7.4.1、DOM眼中的HTML文档：树
　　在DOM眼中，HTML跟XML一样是一种树形结构的文档，是根（root）节点，、var elementName = “”; //全局变量，保存Element标记名，使用完毕要清空function countTotalElement(node) { //参数node是一个Node对象var total = 0;if(node.nodeType == 1) { //检查node是否为Element对象total++;//如果是，计数器加1elementName = elementName + node.tagName + “\r\n”; //保存标记名}var childrens = node.childNodes;//获取node的全部子节点for(var i=0;i<childrens.length;i++) {total += countTotalElement(childrens[i]); //在每个子节点上进行递归操作}return total;}<a href="javascript:void(0)" onClick="alert('标记总数：' + countTotalElement(document) + '\r\n

全部标记如下：\r\n’ + elementName);elementName=”;”>开始统计

　　例子2 – sample3_2.htm：
　　接下来使用firstChile、lastChild、nextSibling、previousSibling遍历整个文档树。修改一下countTotalElement函数，其他跟sample3_1.htm一样：

function countTotalElement(node) { //参数node是一个Node对象var total = 0;if(node.nodeType == 1) { //检查node是否为Element对象total++;//如果是，计数器加1elementName = elementName + node.tagName + “\r\n”; //保存标记名}var childrens = node.childNodes;//获取node的全部子节点for(var m=node.firstChild; m!=null;m=m.nextSibling) {total += countTotalElement(m); //在每个子节点上进行递归操作}return total;}

　　B、搜索文档中特定的元素
　　在使用DOM的过程中，有时候需要定位到文档中的某个特定节点，或者具有特定类型的节点列表。这种情况下，可以调用Document对象的getElementsByTagName()和getElementById()方法来实现。

　　document.getElementsByTagName()返回文档中具有指定标记名的全部Element节点数组（也是NodeList类型）。Element出现在数组中的顺序就是他们在文档中出现的顺序。传递给getElementsByTagName()的参数忽略大小写。比如，想定位到第一个

　　getElementsByTagName()返回的数组取决于文档。一旦文档改变，返回结果也立即改变。相比，getElementById()则比较灵活，可以随时定位到目标，只是要实现给目标元素一个唯一的id属性值。这个我们在《AJAX开发简略》的“级联菜单”例子中已经使用过了。

　　Element对象也支持getElementsByTagName()和getElementById()。不同的是，搜索领域只针对调用者的子节点。

　　C、修改文档内容
　　遍历整棵文档树、搜索特定的节点，我们最终目的之一是要修改文档内容。接下来的三个例子将使用Node的几个常用方法，来演示如何修改文档内容。

　　例子3 — sample4_1.htm：
　　这个例子包含三个文本节点和一个按钮。点击按钮后，三个文本节点和按钮的顺序将被颠倒。程序使用了Node的appendChild()和removeChild()方法。

function reverseNode(node) { // 颠倒节点node的顺序var kids = node.childNodes; //获取子节点列表var kidsNum = kids.length; //统计子节点总数for(var i=kidsNum-1;i>=0;i–) { //逆向遍历子节点列表var c = node.removeChild(kids[i]); //删除指定子节点，保存在c中node.appendChild(c); //将c放在新位置上}}

第一行
第二行
第三行

　　例子4– sample4_2.htm：
　　例子1通过直接操作body的子节点来修改文档。在HTML文档中，布局和定位常常通过表格

function reverseTable() {var node = document.getElementsByTagName(“table”)[0]; //第一个表格var child = node.getElementsByTagName(“tr”); //取得表格内的所有行var newChild = new Array(); //定义缓存数组，保存行内容for(var i=0;i<child.length;i++) {newChild[i] = child[i].firstChild.innerHTML; }node.removeChild(node.childNodes[0]); //删除全部单元行var header = node.createTHead(); //新建表格行头for(var i=0;i<newChild.length;i++) {var headerrow = header.insertRow(i); //插入一个单元行var cell = headerrow.insertCell(0); //在单元行中插入一个单元格//在单元格中创建TextNode节点cell.appendChild(document.createTextNode(newChild[newChild.length-i-1]));}}

　　例子5 — sample4_3.htm：
　　正如我们在Node节点介绍部分所指出的那样，appendChild()、replaceChild()、removeChild()、insertBefore()方法会立即改变文档的结构。下面的例子包含两个表格，我们试着把表格二的内容替换表格一的内容。

function replaceContent() {var table1 = document.getElementsByTagName(“table”)[0];var table2 = document.getElementsByTagName(“table”)[1];var kid1 = table1.firstChild.firstChild.firstChild; //定位到

节点var kid2 = table2.firstChild.firstChild.firstChild; //定位到

节点var repKid = kid2.firstChild; //定位到表格二

内含的TextNode节点try {//用表格二的单元格内容替换表格一的单元格内容，表格二变成没有单元格内容kid1.replaceChild(repKid,kid1.firstChild); //下面注释如果开放，将出现object error，因为表格二已经被改变//kid2.replaceChild(kid1.firstChild,kid2.firstChild);}catch(e){alert(e);}}




表格一







表格二

　　注意，当执行kid1.replaceChild(repKid,kid1.firstChild);的时候，table2的子节点已经被转移到table1了，table2已经没有子节点，不能再调用table2的子节点。看看代码的注释，试着运行一下，应该就知道文档是怎么改变的了。

　　D、往文档添加新内容
　　在学会遍历、搜索、修改文档之后，我们现在试着网文档添加新的内容。其实没有什么新意，只是利用我们上述提到的Node的属性和方法而已，还是操作

　　例子6 – sample5_1.htm：

function insertStr() {var f = document.form1;var value = f.str.value;if(value!=””) {// 从最终的TextNode节点开始，慢慢形成

　　我们之前说过，

function loadXML(handler) {var url = “employees.xml”;if(document.implementation&&document.implementation.createDocument) {var xmldoc = document.implementation.createDocument(“”, “”, null);xmldoc.onload = handler(xmldoc, url);xmldoc.load(url);}else if(window.ActiveXObject) {var xmldoc = new ActiveXObject(“Microsoft.XMLDOM”);xmldoc.onreadystatechange = function() {if(xmldoc.readyState == 4) handler(xmldoc, url);}xmldoc.load(url);}}function makeTable(xmldoc, url) {var table = document.createElement(“table”);table.setAttribute(“border”,”1″);table.setAttribute(“width”,”600″);table.setAttribute(“class”,”tab-content”);document.body.appendChild(table);var caption = “Employee Data from ” + url;table.createCaption().appendChild(document.createTextNode(caption));var header = table.createTHead();var headerrow = header.insertRow(0);headerrow.insertCell(0).appendChild(document.createTextNode(“姓名”));headerrow.insertCell(1).appendChild(document.createTextNode(“职业”));headerrow.insertCell(2).appendChild(document.createTextNode(“工资”));var employees = xmldoc.getElementsByTagName(“employee”);for(var i=0;i<employees.length;i++) {var e = employees[i];var name = e.getAttribute("name");var job = e.getElementsByTagName("job")[0].firstChild.data;var salary = e.getElementsByTagName("salary")[0].firstChild.data;var row = table.insertRow(i+1);row.insertCell(0).appendChild(document.createTextNode(name));row.insertCell(1).appendChild(document.createTextNode(job));row.insertCell(2).appendChild(document.createTextNode(salary));}}
供读取调用的XML文档 – employees.xml：
Programmer32768Sales70000CEO100000

processRequest()方法修改如下：// 处理返回信息的函数  function processRequest() {    if (http_request.readyState == 4) { // 判断对象状态      if (http_request.status == 200) { // 信息已经成功返回，开始处理信息var returnObj = http_request.responseXML;var xmlobj = http_request.responseXML;var employees = xmlobj.getElementsByTagName(“employee”);var feedbackStr = “”;for(var i=0;i<employees.length;i++) { // 循环读取employees.xml的内容var employee = employees[i];feedbackStr += "员工：" + employee.getAttribute("name");feedbackStr += " 职位：" + employee.getElementsByTagName("job")[0].firstChild.data;feedbackStr += " 工资：" + employee.getElementsByTagName("salary")[0].firstChild.data;feedbackStr += "\r\n";}alert(feedbackStr);      } else { //页面不正常        alert("您所请求的页面有异常。");      }    }}

public Element toXml() { Element employee = new Element(“employee”);Employee.setAttribute(“name”,name);Element jobE = new Element(“job”).addContent(job);employee.setContent(jobE);Element salaryE = new Element(“salary”).addContent(salary);employee.setContent(salaryE);return employee;}

<employee name="”>