分类：Ajax

Ajax 相关技术文章，包括优秀的 Ajax 效果、Ajax 使用技巧、Ajax 教程、浏览器兼容性及 Ajax 开发中的常见问题。

当 eval 返回的 json 值时，提示 Error: Invalid Label

我们经常会在服务器端返回 json 格式的值，这样可以直接在脚本中当作完整的对象来使用，但是，许多新手通常都会遇到一个错误提示： Invalid Label ，这个问题通常会让人苦恼不堪，因为明明正确的 json 格式，却提示错误。

假如你从服务器端返回的是 json 格式的字符串：

{ siteName : "CodeBit.cn", siteUrl : "" }

当你在脚本中用 eval 的方式运行：

var result = eval(o.responseText); alert(result.siteName);

这时会提示 ： Error: Invalid Label

实际上，我们的 json 格式并没有错误，只是在 eval 的时候，要把你的 json 值用 “()” 括号括起来：

var result = eval("(" + o.responseText + ")"); alert(result.siteName);

呵呵，这个往往最容易忽略，但是一旦有错误，往往也最让人头痛：）

标签 Ajax、eval、Invalid、json、Label、responseText responseXML 为什么为空或者出错？调试这种情况的方法！

为什么执行 var xmlDoc = this.req.responseXML.documentElement 无法得到返回值？《Ajax in Action》的作者 Eric Pascarello 也经常被问到，因此在他的blog上发了一篇文章，并提供了调试方案。

调试此问题的四个步骤：
1. 是否设置 content type 为 text/xml ?
2. 请求是否发送到服务器端了？（检查一下 status code ）
3. 当你输出 responseText 的时候，返回的内容是否是 xml ？
4. 在浏览器中直接输入返回 xml 文档的网址，检查一下返回的 xml 格式是否正确。

原文网址：

标签 Ajax、documentElement、responseXML AJAX介绍–上手篇

本文章为 Mozilla Developer Center 的 AJAX:Getting Started 的翻译。这篇文章说明 AJAX 相关技术的基础，并提供实例供您上手。

AJAX 是啥？

AJAX (Asynchronous JavaScript and XML, 异步 JavaScript 及 XML 技术) 是个新词，但内涵是两个存在已有一段时间的 JavaScript 功能。这两种功能以往一直被忽略，在 Gmail、Google suggest 及 Google Maps 出现后才一举成名天下知。

这两个 JavaScript 功能 是：

* 在不重新读取页面的情况下对伺服器送出要求（request）
* 解析、使用 XML 文件

第一步 – 怎么发出 XMLHttpRequest

为了用 JavaScript 对伺服器发送 HTTP 要求，你必须先以相关的类别（class）制出实体（instance）。Internet Explorer 首先以 ActiveX 物件方式提供 XMLHTTP 类别，而 Mozilla、Safari 及其他浏览器则随后以 XMLHttpRequest 类别支援此 ActiveX 物件中的类别及属性。

因此，如果想跨浏览器，那么可以这么写：

if (window.XMLHttpRequest) { // Mozilla, Safari, ... http_request = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE http_request = new ActiveXObject("Microsoft.XMLHTTP"); }

(由于这段程式仅供说明，所以是采最简方式写出。本文第三步中有另一种我们比较常用的写法。)

有些版本的 Mozilla 浏览器在伺服器送回的资料未含 XML mime-type 档头（header）时会出错。为了避免这个问题，你可以用下列方法覆写伺服器传回的档头，以免传回的不是 text/xml。

http_request = new XMLHttpRequest(); http_request.overrideMimeType('text/xml');

接下来是要决定伺服器传回资料后的处理方式，此时你只要以 onreadystatechange 这个属性指明要处理传回值的 JavaScript 函式名称即可，例如：

http_request.onreadystatechange = nameOfTheFunction;

注意，指定的函式名称后不加括号也没有参数。除了指定函式名称外，你也能用 Javascript 即时定义函式的方法来定一个新的处理函式，如下：

http_request.onreadystatechange = function(){ // do the thing };

决定处理方式之后你得确实发出 request，此时需叫用 HTTP request 类别的 open() 及 send() 方法，如下：

http_request.open('GET', 'http://www.example.org/some.file', true); http_request.send(null);

* open() 的第一个参数是 HTTP request 的方法，也就是从 GET、POST、HEAD 中择一使用，亦可用你主机上支援的方式。为遵循 HTTP 标准，请记得这些方法都是大写，不然有的浏览器（如 Firefox）或许不会理你。其它 HTTP request 可以支援的方法列表请参考 W3C 规格书 。
* 第二个参数是目标 URL。基于安全考量，你不能叫用同网域以外的网页。如果网域不同，则叫用 open() 时会出现「权限不足，拒绝存取」那类的错误。通常大伙会犯的错误多为在 domain.tld 网的网站下呼叫 中的网页，仅是一点点差别都不行。
* 第三个参数决定此 request 是否不同步进行，如果设定为 TRUE 则即使伺服器尚未传回资料也会继续执行其余的程式，这也就是 AJAX 中第一个 A 代表的意义。

send() 的参数在以 POST 发出 request 时可以是任何想传给伺服器的东西，而资料则以查询字串的方式列出，例如：

name=value&anothername=othervalue&so=on

不过如果你想要以 POST 方式传送资料，则必须先将 MIME 型态改好，如下：

http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

否则伺服器就不会理你传过来的资料了。

第二步 – 处理伺服器传回的资料

传出 request 时必须提供处理传回值的函式名称。

http_request.onreadystatechange = nameOfTheFunction;

那么来看看这个函式该做些什么。首先，它必须检查 request 目前的状态：如果状态值为 4 代表伺服器已经传回所有资讯了，便可以开始解析所得资讯。

if (http_request.readyState == 4) { // everything is good, the response is received } else { // still not ready }

readyState 所有可能的值如下：

* 0 (还没开始)
* 1 (读取中)
* 2 (已读取)
* 3 (资讯交换中)
* 4 (一切完成)