首页 > 编程笔记 > JavaScript笔记 > Ajax
阅读:22
AJAX解析请求得到的数据(多种格式)
在 JavaScript 中,一般将格式设置为 XML、HTML、JSON 或其他纯文本格式。具体使用哪种响应格式,可以参考下面几条原则。
在某些情况下,HTML 字符串可能为客户端解析响应信息节省了一些 JavaScript 脚本,但是也带来了一些问题。
- 如果向页面中添加大块数据,选择 HTML 格式会比较方便。
- 如果需要协作开发,且项目庞杂,选择 XML 格式会更通用。
- 如果要检索复杂的数据,且结构复杂,那么选择 JSON 格式更加轻便。
获取 XML 数据
XMLHttpRequest 对象通过 responseText、responseBody、responseStream 或 responseXML 属性获取响应信息,说明如下表所示,它们都是只读属性。响应信息 | 说明 |
---|---|
responseBody | 将响应信息正文以 Unsigned Byte 数组形式返回 |
responseStream | 以 ADO Stream 对象的形式返回响应信息 |
responseText | 将响应信息作为字符串返回 |
responseXML | 将响应信息格式化为 XML 文档格式返回 |
示例1
在服务器端创建一个简单的 XML 文档。<?xml version="1.0" encoding="utf-8"?> <the>XML 数据</the>然后,在客户端进行如下请求。createXHR() 方法在创建 XMLHttpRequest 对象中讲解过。
<input name="submit" type="button" id="submit" value="向服务器发出请求" /> <script> window.onload = function () { //页面初始化 var b = document.getElementsByTagName("input")[0]; b.onclick = function () { var xhr = createXHR(); //实例化XMLHttpRequest对象 xhr.open("GET", "server.xml", true); //建立连接,要求异步响应 xhr.onreadystatechange = function () { //绑定响应状态事件监听函数 if (xhr.readyState == 4) { //监听readyState状态 if (xhr.state == 200 || xhr.status == 0) { //监听HTTP状态码 var info = xhr.responseXML; console.log(info.getElementsByTagName("the")[0].firstChild.data); //返回元信息字符串“XML 数据” } } } xhr.send(); //发送请求 } } </script>在上面代码中,使用 XML DOM 的 getElementsByTagName() 方法获取 the 节点,然后再定位第一个 the 节点的子节点内容。此时如果继续使用 responseText 属性来读取数据,则会返回 XML 源代码字符串。
示例2
以示例 1 为例,使用服务器端脚本生成 XML 结构数据。<?php header('Content-Type: text/html;'); echo '<?xml version="1.0" encoding="utf-8"?><the>XML 数据</the>'; //输出XML ?>
获取 HTML 字符串
设计响应信息为 HTML 字符串,然后使用 innerHTML 把获取的字符串插入到网页中。示例
在服务器端设计响应信息为 HTML 结构代码。<table border="1" width="100%"> <tr><td>RegExp.exec()</td><td>通用的匹配模式</td></tr> <tr><td>RegExp.test()</td><td>检测一个字符串是否匹配某个模式</td></tr> </table>然后在客户端可以这样接收响应信息。
<input name="submit" type="button" id="submit" value="向服务器发出请求" /> <script> window.onload = function () { //页面初始化 var b = document.getElementsByTagName("input")[0]; b.onclick = function () { var xhr = createXHR(); //实例化XMLHttpRequest对象 xhr.open("GET", "server.xml", true); //建立连接,要求异步响应 xhr.onreadystatechange = function () { //绑定响应状态事件监听函数 if (xhr.readyState == 4) { //监听readyState状态 if (xhr.state == 200 || xhr.status == 0) { //监听HTTP状态码 var o = document.getElementById("grid"); o.innerHTML = xhr.responseText; //直接插入到页面中 } } } xhr.send(); //发送请求 } } </script>
在某些情况下,HTML 字符串可能为客户端解析响应信息节省了一些 JavaScript 脚本,但是也带来了一些问题。
- 响应信息中包含大量无用的字符,响应数据会变得很臃肿。因为 HTML 标记不含有信息,完全可以把它们放置在客户端,由 JavaScript 脚本负责生成。
- 响应信息中包含的 HTML 结构无法有效利用,对于 JavaScript 脚本来说,它们仅仅是一堆字符串。同时结构和信息混合在一起,也不符合标准化设计原则。
获取 JavaScript 脚本
设计相应为 JavaScript 代码,与 JSON 数据不同,它是可执行的命令或脚本。示例
在服务器端请求文件中包含下面一个函数。function () { var d = new Date(); return d.toString(); }然后在客户端执行下面的请求。
<input name="submit" type="button" id="submit" value="向服务器发出请求" /> <script> window.onload = function () { //页面初始化 var b = document.getElementsByTagName("input")[0]; b.onclick = function () { var xhr = createXHR(); //实例化XMLHttpRequest对象 xhr.open("GET", "server.xml", true); //建立连接,要求异步响应 xhr.onreadystatechange = function () { //绑定响应状态事件监听函数 if (xhr.readyState == 4) { //监听readyState状态 if (xhr.state == 200 || xhr.status == 0) { //监听HTTP状态码 var info = xhr.responseText; var o = eval("(" + info + ")" + "()"); //用eval()把字符串转换为脚本 console.log(o); //返回客户端当前信息 } } } xhr.send(); //发送请求 } } </script>使用 eval() 方法时,在字符串前后附加两个小括号:一个是包含函数结构体的,一个是表示调用函数的。不建议直接使用 JavaScript 代码作为响应格式,因为它不能传递更丰富的信息,同时 JavaScript 脚本极易引发安全隐患。
获取 JSON 数据
使用 responseText 可以获取 JSON 格式的字符串,然后使用 eval() 方法将其解析为本地 JavaScript 脚本,再从该数据对象中读取信息。示例
在服务器端请求文件中包含下面 JSON 数据。{ user : "css8", pass : "123456", email : "css8@123.cn" }然后在客户端执行下面的请求。把返回 JSON 字符串转换为对象,然后读取属性值。
<input name="submit" type="button" id="submit" value="向服务器发出请求" /> <script> window.onload = function () { //页面初始化 var b = document.getElementsByTagName("input")[0]; b.onclick = function () { var xhr = createXHR(); //实例化XMLHttpRequest对象 xhr.open("GET", "server.xml", true); //建立连接,要求异步响应 xhr.onreadystatechange = function () { //绑定响应状态事件监听函数 if (xhr.readyState == 4) { //监听readyState状态 if (xhr.state == 200 || xhr.status == 0) { //监听HTTP状态码 var info = xhr.responseText; var o = eval("(" + info + ")"); //调用eval()把字符串转换为本地脚本 console.log(info); //显示JSON对象字符串 console.log(o.user); //读取对象属性值,返回字符串“css8” } } } xhr.send(); //发送请求 } } </script>eval() 方法在解析 JSON 字符串时存在安全隐患。如果 JSON 字符串中包含恶意代码,在调用回调函数时可能会被执行。解决方法:先对 JSON 字符串进行过滤,屏蔽掉敏感或恶意代码。不过,确信所响应的 JSON 字符串是安全的,没有被人恶意攻击,那么可以使用 eval() 方法解析 JSON 字符串。
获取纯文本
对于简短的信息,可以使用纯文本格式进行响应。但是纯文本信息在传递过程中容易丢失,且没有办法检测信息的完整性。示例
服务器端响应信息为字符串“true”,则可以在客户端这样设计。var xhr = createXHR(); //实例化XMLHttpRequest对象 xhr.open("GET", "server.txt", true); //建立连接,要求异步响应 xhr.nreadystatechange = function () { //绑定响应状态事件监听函数 if (xhr.readyState == 4) { //监听readyState函数 if (xhr.status == 200 || xhr.status == 0) { //监听HTTP状态码 var info = xhr.responseText; if (info == "true") console.log("文本信息传输完整"); //检测信息是否完整 else console.log("文本信息可能存在丢失"); } } } xhr.send(); //发送请求
所有教程
- socket
- Python基础教程
- C#教程
- MySQL函数
- MySQL
- C语言入门
- C语言专题
- C语言编译器
- C语言编程实例
- GCC编译器
- 数据结构
- C语言项目案例
- C++教程
- OpenCV
- Qt教程
- Unity 3D教程
- UE4
- STL
- Redis
- Android教程
- JavaScript
- PHP
- Mybatis
- Spring Cloud
- Maven
- vi命令
- Spring Boot
- Spring MVC
- Hibernate
- Linux
- Linux命令
- Shell脚本
- Java教程
- 设计模式
- Spring
- Servlet
- Struts2
- Java Swing
- JSP教程
- CSS教程
- TensorFlow
- 区块链
- Go语言教程
- Docker
- 编程笔记
- 资源下载
- 关于我们
- 汇编语言
- 大数据
- 云计算
- VIP视频