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(){ |
|
最后的任务就是生成那几个调用函数的按钮了，这里就不给出代码了
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，为一个类似数组的结构，我们再遍历这个数组就可以了。