夏日博客

A-A+

Ajax响应数据XML格式和ajax .innerHTML处理方法

2016年01月20日 前端设计 暂无评论 阅读 6 views 次

Ajax响应数据XML格式和ajax .innerHTML处理方法,有需要了解的朋友可参考一下.

ajax .innerHTML处理

JavaScript代码分析,首先,这个需要发送三次请求,所以我们把可以重用的代码编写到一个函数中,这个函数的任务就是设置XMLHttpRequest对象,初始化必要的属性,代码很大程度上参考了《Ajax基础教程》和《AdvancED DOM Scripting》,代码如下:

  1. function createRequest(options){  
  2.  var req = false;  
  3.  if(window.XMLHttpRequest) {  
  4.   var req = new window.XMLHttpRequest();  
  5.  } else if (window.ActiveXObject) {  
  6.   var req = new window.ActiveXObject('Microsoft.XMLHTTP');  
  7.  }  
  8.  if(!req) return false;  
  9.  req.onreadystatechange = function(){  
  10.   if (req.readyState ==4 && req.status == 200){  
  11.    options.listener.call(req);  
  12.   }  
  13.  };  
  14.  req.open(options.method,options.url,true);  
  15.  return req;  
  16. }  

createRequest只接受一个options参数,它是一个对象,返回XMLHttpRequest对象,参数options可能是这样一个字面量对象,代码如下:

  1. var options = {  
  2.  url:'ajax/strTest.txt',  
  3.  listener:callback,  
  4.  method:'GET'  
  5. }  

url表示要请求的文件地址,listener会被作为onreadyStateChange,method作为open的参数,这个对象比较简单,仅仅是“刚好够用”的程度,应该还需要扩展,有了这个创建XMLHttpRequest对象的函数之后,我们的任务就只剩下send一下了,本页有三个类似的函数,它们分别向服务器请求不同的三个文本文件,代码如下:

  1. function ajaxStr(){  
  2.  var options = {  
  3.   url:'ajax/strTest.txt',  
  4.   listener:callback,  
  5.   method:'GET'  
  6.  }  
  7.  var request = createRequest(options);  
  8.  request.send(null);  
  9. }  
  10. function ajaxTable(){  
  11.  var options = {  
  12.   url:'ajax/tableTest.txt',  
  13.   listener:callback,  
  14.   method:'GET'  
  15.  }  
  16.  var request = createRequest(options);  
  17.  request.send(null);  
  18. }  
  19. function ajaxImg(){  
  20.  var options = {  
  21.   url:'ajax/imgTest.txt',  
  22.   listener:callback,  
  23.   method:'GET'  
  24.  }  
  25.  var request = createRequest(options);  
  26.  request.send(null);  
  27. }  

callback函数会使用innerHTML将它们插入文档。

  1. function callback(){  
  2.  var str = this.responseText;  
  3.  document.getElementById('test').innerHTML = str;   
  4. }  

最后的任务就是生成那几个调用函数的按钮了,这里就不给出代码了.

ajax xml处理:

仍然使用上一节的函数来创建XMLHttpRequest对象，这里就不写代码了。发送请求的ajaxRequest函数也比较简单,代码如下:

  1. function ajaxRequest(){  
  2.  var options = {  
  3.   url:'ajax/ajaxXML.xml',  
  4.   listener:callback,  
  5.   method:'GET'  
  6.  }  
  7.  var request = createRequest(options);  
  8.  request.send(null);  
  9. }  

其中,ajaxXML.xml这个文件就是我们要请求的XML格式的文件,它的内容如下:

  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <root>  
  3.  <server>  
  4.   <lang>PHP</lang>  
  5.   <lang>Java</lang>  
  6.   <lang>Python</lang>  
  7.   <lang>.NET</lang>  
  8.   <lang>Ruby</lang>  
  9.  </server>  
  10.  <browser>  
  11.   <lang>XHTML</lang>  
  12.   <lang>CSS</lang>  
  13.   <lang>JavaScript</lang>  
  14.   <lang>ActionScript</lang>  
  15.  </browser>  
  16. </root>  

最后的响应函数callback才是关键,代码如下:

  1. function callback(){  
  2.  var xmlDoc = this.responseXML;  
  3.  var parent = document.getElementById('langSel');  
  4.  var side = parent.options[parent.selectedIndex].value || "server";  
  5.  var target = xmlDoc.getElementsByTagName(side)[0];  
  6.  var str = "<ul>";  
  7.  var langs = target.getElementsByTagName("lang");  
  8.  var currentLang = null;  
  9.  for(var i = 0; i < langs.length; i++) {  
  10.   currentLang = langs[i];  
  11.   str += '<li>' + currentLang.childNodes[0].nodeValue + '</li>';  
  12.  }  
  13.  str += '</ul>';  
  14.  document.getElementById('test').innerHTML = str;  
  15. }  

var xmlDoc = this.responseXML;通过XMLHttpRequest的responseXML属性获得请求的XML文件内容,之后我们就可以使用“各种”方法来处理它了.

xmlDoc.getElementsByTagName(side)[0];side的值可能是'server'或者是'browser',当值为server的时候就取得了server标签,再在它的基础上getElementsByTagName("lang");就取得了所有server标签下的lang,为一个类似数组的结构,我们再遍历这个数组就可以了.

标签：

给我留言