首页 > 代码库 > 关于AJAX与JSON的杂记
关于AJAX与JSON的杂记
一、当网页需要有多个XMLHttpRequest对象时，可以使用Callback 函数，callback 函数是一种以参数形式传递给另一个函数的函数。
<html><head><script type="text/javascript">var xmlhttp;function loadXMLDoc(url,cfunc){if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }xmlhttp.onreadystatechange=cfunc;xmlhttp.open("GET",url,true);xmlhttp.send();}function myFunction(){loadXMLDoc("/ajax/test1.txt",function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } });}</script></head><body><div id="myDiv"><h2>Let AJAX change this text</h2></div><button type="button" onclick="myFunction()">通过 AJAX 改变内容</button></body></html>
上例中，在myFunction()中调用loadXMLDoc函数，传递两个参数，一个是请求用的网址，另外一个是callback函数，用于在该XMLRequest响应状态改变时调用。该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）。
二、JSON: JavaScript Object Notation(JavaScript 对象表示法)
JSON 是存储和交换文本信息的语法。类似 XML。
JSON 比 XML 更小、更快，更易解析。JSON 是轻量级的文本数据交换格式。JSON 独立于语言，JSON 使用 JavaScript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。JSON 具有自我描述性，更易理解。
JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。由于这种相似性，无需解析器，JavaScript 程序能够使用内建的 eval() 函数，用 JSON 数据来生成原生的 JavaScript 对象。
eval()函数可计算某个字符串，并执行其中的的 JavaScript 代码。
一个简单的示例，读取创建JSON对象以及读取JSON对象中的数据。
<html><body><h2>在 JavaScript 中创建 JSON 对象</h2><p>Name: <span id="jname"></span><br />Age: <span id="jage"></span><br />Address: <span id="jstreet"></span><br />Phone: <span id="jphone"></span><br /></p><script type="text/javascript">var JSONObject= {"name":"Bill Gates","street":"Fifth Avenue New York 666","age":56,"phone":"555 1234567"};document.getElementById("jname").innerHTML=JSONObject.namedocument.getElementById("jage").innerHTML=JSONObject.agedocument.getElementById("jstreet").innerHTML=JSONObject.streetdocument.getElementById("jphone").innerHTML=JSONObject.phone</script></body></html>
| 与XML相同处 | 与XML不同处 |
| JSON 是纯文本 | 没有结束标签 |
| JSON 具有“自我描述性”（人类可读） | 更短 |
| JSON 具有层级结构（值中存在值） | 读写的速度更快 |
| JSON 可通过 JavaScript 进行解析 | 能够使用内建的 JavaScript eval() 方法进行解析 |
| JSON 数据可使用 AJAX 进行传输 | 使用数组，不使用保留字 |
对于 AJAX 应用程序来说，JSON 比 XML 更快更易使用：
使用 XML步骤：读取 XML 文档、使用 XML DOM 来循环遍历文档、读取值并存储在变量中。
使用 JSON步骤：读取 JSON 字符串、用 eval() 处理 JSON 字符串。
JSON 语法是 JavaScript 对象表示法语法的子集。JSON 语法规则：数据在名称/值对中、数据由逗号分隔、花括号保存对象、方括号保存数组。
JSON 数据的书写格式是：名称/值对。
名称/值对包括字段名称（在双引号中），后面写一个冒号，然后是值："firstName" : "John"，等价于javascript的：firstName = "John"。
JSON 值可以是：数字（整数或浮点数）、字符串（在双引号中）、逻辑值（true 或 false）、数组（在方括号中）、对象（在花括号中）、null。
JSON 对象在花括号中书写，对象可以包含多个名称/值对：{ "firstName":"John" , "lastName":"Doe" }，等价于javascript的firstName = "John";lastName = "Doe"。
在javascript中，创建JSON数组对象并访问数组对象的方式如下：
<!DOCTYPE html><html><body><h2>Create Object from JSON String</h2><p>First Name: <span id="fname"></span></p> <script>var employees = [{ "firstName" : "John" , "lastName" : "Doe" }, { "firstName" : "Anna" , "lastName" : "Smith" }, { "firstName" : "Peter" , "lastName" : "Jones" }, ];employees[1].firstName="Jonatan";document.getElementById("fname").innerHTML=employees[1].firstName;</script></body></html>
JSON中包括数组的写法：
{"employees": [{ "firstName":"John" , "lastName":"Doe" },{ "firstName":"Anna" , "lastName":"Smith" },{ "firstName":"Peter" , "lastName":"Jones" }]}JSON 文件的文件类型是 ".json"，JSON 文本的 MIME 类型是 "application/json"。
JSON的使用：JSON 最常见的用法之一，是从 web 服务器上读取 JSON 数据（作为文件或作为 HttpRequest），将 JSON 数据转换为 JavaScript 对象，然后在网页中使用该数据。
下面通过解析一个JSON对象字符串来演示如何使用JSON对象。
一个JSON字符串对象：
var txt = ‘{ "employees" : [‘ +‘{ "firstName":"Bill" , "lastName":"Gates" },‘ +‘{ "firstName":"George" , "lastName":"Bush" },‘ +‘{ "firstName":"Thomas" , "lastName":"Carter" } ]}‘;单引号用于嵌套双引号。
由于 JSON 语法是 JavaScript 语法的子集，JavaScript 函数 eval() 可用于将 JSON 文本转换为 JavaScript 对象。eval() 函数使用的是 JavaScript 编译器，可解析 JSON 文本，然后生成 JavaScript 对象。必须把文本包围在括号中，这样才能避免语法错误：
var obj = eval ("(" + txt + ")");
在网页中使用 JavaScript 对象：
<html><body><h2>通过 JSON 字符串来创建对象</h3><p>First Name: <span id="fname"></span><br /> Last Name: <span id="lname"></span><br /> </p> <script type="text/javascript">var txt = ‘{"employees":[‘ +‘{"firstName":"Bill","lastName":"Gates" },‘ +‘{"firstName":"George","lastName":"Bush" },‘ +‘{"firstName":"Thomas","lastName":"Carter" }]}‘;var obj = eval ("(" + txt + ")");document.getElementById("fname").innerHTML=obj.employees[1].firstName document.getElementById("lname").innerHTML=obj.employees[1].lastName </script></body></html>
JSON 解析器：使用javascript中的eval() 函数，可编译并执行任何 JavaScript 代码。但是这隐藏了一个潜在的安全问题。
使用 JSON 解析器将 JSON 转换为 JavaScript 对象是更安全的做法。JSON 解析器只能识别 JSON 文本，而不会编译脚本。
在浏览器中，这提供了原生的 JSON 支持，而且 JSON 解析器的速度更快。
较新的浏览器和最新的 ECMAScript (JavaScript) 标准中均包含了原生的对 JSON 的支持。
JSON解析器用法：
<html><body><h2>通过 JSON 字符串来创建对象</h3><p>First Name: <span id="fname"></span><br /> Last Name: <span id="lname"></span><br /> </p> <script type="text/javascript">var txt = ‘{"employees":[‘ +‘{"firstName":"Bill","lastName":"Gates" },‘ +‘{"firstName":"George","lastName":"Bush" },‘ +‘{"firstName":"Thomas","lastName":"Carter" }]}‘;obj = JSON.parse(txt);document.getElementById("fname").innerHTML=obj.employees[1].firstName document.getElementById("lname").innerHTML=obj.employees[1].lastName </script></body></html>
三、JSONP
Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
为什么我们从不同的域（网站）访问数据需要一个特殊的技术(JSONP )呢？这是因为同源策略。
同源策略，它是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript 的浏览器都会使用这个策略。
如客户想访问 : http://www.w3cschool.cc/try/ajax/jsonp.php?jsonp=callbackFunction。
假设客户期望返回JSON数据：["customername1","customername2"]。
真正返回到客户端的数据显示为: callbackFunction(["customername1","customername2"])。
在客户端是需要实现callbackFunction来获取数据的。
关于AJAX与JSON的杂记