Ajax返回值类型与用法实例分析

2024-09-01 08:26:44

字体：大中小

来源：转载

供稿：网友

本文实例讲述了Ajax返回值类型与用法。，具体如下：

Ajax返回值类型主要有XML类型和文本类型，其中文本类型又可以分为HTML、json类型等。

1、返回值之XML类型

如果服务器的响应头中Content-type的内容为text/xml时，此时XMLHttpRequest对象的responseXML属性才能使用。

2、返回值之文本类型

文本类型主要分为Html类型和json类型。

（1）Html类型

使用场景：一般返回需要重复复杂的操作。比如，页面使用ajax从服务器请求了json格式数据，返回到页面这，然后又要转换为数组，又要遍历，追加到页面中，可以考虑返回Html类型，在服务器把html页面封装好，然后到页面这只需要直接使用innerHTML追加到页面即可。

（2）json类型

{"name": "天龙八部","intro": "《天龙八部》是著名作家金庸的武侠代表作。著于1963年，历时4年创作完成（部分内容曾由倪匡代笔撰写），前后共有三版，并在2005年第三版中经历6稿修订，结局改动较大。"}

如果返回值是json文本，首先需要使用eval函数将文本转换为js对象，然后才能使用其属性。

案例：

使用Ajax返回值

文件结构图：

这里写图片描述

07-returntype-html文件：

页面中有3个按钮，分别实现了onclick事件，点击每个按钮就是从服务器获取不同格式的数据，然后解析，显示到页面中。

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <title>Ajax返回值类型</title>  <link rel="stylesheet" href=""></head><script>  //创建XMLHttpRequest对象  function createXhr(){    var xhr = null;    if(window.XMLHttpRequest){      xhr = new XMLHttpRequest();//谷歌、火狐等浏览器    }else if(window.ActiveXObject){      xhr = new ActiveXObject("Microsoft.XMLHTTP");//ie低版本    }    return xhr;  }  //测试返回值为xml  function test1(){    //1、创建XMLHttpRequest    var xhr = createXhr();    //2、确定请求参数    xhr.open('GET','./07-returntype-xml.php',true);    //3、重写回调函数    xhr.onreadystatechange = function (){      if(xhr.readyState == 4 && xhr.status == 200){        var domxml = xhr.responseXML;        var name = domxml.getElementsByTagName('book')[0].firstChild.firstChild.wholeText;        var intro = domxml.getElementsByTagName('book')[0].lastChild.firstChild.wholeText;        document.getElementById('name').value = name;        document.getElementById('intro').value = intro;      }    }    //4、发送请求    xhr.send(null);  }  //测试返回值为文本-HTML  function test2(){    //1、创建XMLHttpRequest    var xhr = createXhr();    //2、确定请求参数    xhr.open('GET','./07-returntype-html.php',true);    //3、重写回调函数    xhr.onreadystatechange = function (){      if(xhr.readyState == 4 && xhr.status == 200){        var domxml = xhr.responseXML;        document.getElementById('area').innerHTML = xhr.responseText;      }    }    //4、发送请求    xhr.send(null);  }  //测试返回值为文本-json  function test3(){    //1、创建XMLHttpRequest    var xhr = createXhr();    //2、确定请求参数    xhr.open('GET','./07-returntype-json.php',true);    //3、重写回调函数    xhr.onreadystatechange = function (){      if(xhr.readyState == 4 && xhr.status == 200){        var result = eval('('+xhr.responseText+')');        document.getElementById('name').value = result.name;        document.getElementById('intro').value = result.intro;      }    }    //4、发送请求    xhr.send(null);  }</script><body>  <p>书名：<input type="text" id="name"/></p>  <p>简介：<input type="text" id="intro"/></p>  <input type="button" onclick="test1();" value="测试xml"/>  <input type="button" onclick="test2();" value="测试HTML" />  <input type="button" onclick="test3();" value="测试json" />  <p id="area"></p></body></html>

上一篇：Ajax引擎 ajax请求步骤详细代码

下一篇：Fly拦截全局Ajax请求的方法