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，為一個類似數組的結構，我們再遍曆這個數組就可以了。