Ajax响应数据XML格式和ajax .innerHTML处理方法，有需要了解的朋友可参考一下。
ajax .innerHTML处理
JavaScript代码分析
首先，这个需要发送三次请求，所以我们把可以重用的代码编写到一个函数中，这个函数的任务就是设置XMLHttpRequest对象，初始化必要的属性。代码很大程度上参考了《Ajax基础教程》和《AdvancED DOM Scripting》。
| 代码如下 |
|
|
function createRequest(options){
var req = false;
if(window.XMLHttpRequest) {
var req = new window.XMLHttpRequest();
} else if (window.ActiveXObject) {
var req = new window.ActiveXObject('Microsoft.XMLHTTP');
}
if(!req) return false;
req.onreadystatechange = function(){
if (req.readyState ==4 && req.status == 200){
options.listener.call(req);
}
};
req.open(options.method,options.url,true);
return req;
}
|
createRequest只接受一个options参数，它是一个对象，返回XMLHttpRequest对象。参数options可能是这样一个字面量对象：
| 代码如下 |
|
|
var options = {
url:'ajax/strTest.txt',
listener:callback,
method:'GET'
}
|
url表示要请求的文件地址，listener会被作为onreadyStateChange，method作为open的参数。这个对象比较简单，仅仅是“刚好够用”的程度，应该还需要扩展。
有了这个创建XMLHttpRequest对象的函数之后，我们的任务就只剩下send一下了。本页有三个类似的函数，它们分别向服务器请求不同的三个文本文件：
| 代码如下 |
|
|
function ajaxStr(){
var options = {
url:'ajax/strTest.txt',
listener:callback,
method:'GET'
}
var request = createRequest(options);
request.send(null);
}
function ajaxTable(){
var options = {
url:'ajax/tableTest.txt',
listener:callback,
method:'GET'
}
var request = createRequest(options);
request.send(null);
}
function ajaxImg(){
var options = {
url:'ajax/imgTest.txt',
listener:callback,
method:'GET'
}
var request = createRequest(options);
request.send(null);
}
callback函数会使用innerHTML将它们插入文档。
function callback(){
var str = this.responseText;
document.getElementById('test').innerHTML = str;
}
|
最后的任务就是生成那几个调用函数的按钮了，这里就不给出代码了
ajax xml处理
仍然使用上一节的函数来创建XMLHttpRequest对象，这里就不写代码了。发送请求的ajaxRequest函数也比较简单：
| 代码如下 |
|
|
function ajaxRequest(){
var options = {
url:'ajax/ajaxXML.xml',
listener:callback,
method:'GET'
}
var request = createRequest(options);
request.send(null);
}
|
其中，ajaxXML.xml这个文件就是我们要请求的XML格式的文件，它的内容如下：
| 代码如下 |
|
|
<?xml version="1.0" encoding="UTF-8"?>
<root>
<server>
<lang>PHP</lang>
<lang>Java</lang>
<lang>Python</lang>
<lang>.NET</lang>
<lang>Ruby</lang>
</server>
<browser>
<lang>XHTML</lang>
<lang>CSS</lang>
<lang>JavaScript</lang>
<lang>ActionScript</lang>
</browser>
</root>
|
最后的响应函数callback才是关键：
| 代码如下 |
|
|
function callback(){
var xmlDoc = this.responseXML;
var parent = document.getElementById('langSel');
var side = parent.options[parent.selectedIndex].value || "server";
var target = xmlDoc.getElementsByTagName(side)[0];
var str = "<ul>";
var langs = target.getElementsByTagName("lang");
var currentLang = null;
for(var i = 0; i < langs.length; i++) {
currentLang = langs[i];
str += '<li>' + currentLang.childNodes[0].nodeValue + '</li>';
}
str += '</ul>';
document.getElementById('test').innerHTML = str;
}
|
var xmlDoc = this.responseXML;通过XMLHttpRequest的responseXML属性获得请求的XML文件内容。之后我们就可以使用“各种”方法来处理它了。
xmlDoc.getElementsByTagName(side)[0];side的值可能是'server'或者是'browser'，当值为server的时候就取得了server标签。再在它的基础上getElementsByTagName("lang");就取得了所有server标签下的lang，为一个类似数组的结构，我们再遍历这个数组就可以了。
