本 JSON 教程会帮助我们了解 JSON 以及如何在各种编程语言，比如 PHP，PERL，Python，Ruby，Java等等编程语言中使用它。
JSON 或者 JavaScript 对象表示法是一种轻量级的基于文本的开放标准，被设计用于可读的数据交换。JSON 格式最初由 Douglas Crockford 提出，使用 RFC 4627 描述。JSON 的官方网络媒体类型是 application/json。JSON 的文件名扩展是 .json。
本教程旨在帮助初学者了解 JavaScript 对象表示法（JSON）开发数据交换格式的基本功能。完成本教程之后，你会发现自己处于在JavaScript，AJAX，Perl中使用 JSON 的水平为中等，然后你可以自己走向下一个水平。
在学习本教程之前，你应该对 Web 应用程序如何通过 HTTP 进行工作有一个基本的了解，并且我们假设你已经掌握了基本的 JavaScript 知识，你可以参考本站的《JavaScript教程》
| 更新日期 | 更新内容 |
|---|---|
| 2015-05-05 | 第一版发布 |
本 JSON 教程会帮助我们了解 JSON 以及如何在各种编程语言，比如 PHP，PERL，Python，Ruby，Java等等编程语言中使用它。
JSON 或者 JavaScript 对象表示法是一种轻量级的基于文本的开放标准，被设计用于可读的数据交换。JSON 格式最初由 Douglas Crockford 提出，使用 RFC 4627 描述。JSON 的官方网络媒体类型是 application/json。JSON 的文件名扩展是 .json。
本教程旨在帮助初学者了解 JavaScript 对象表示法（JSON）开发数据交换格式的基本功能。完成本教程之后，你会发现自己处于在JavaScript，AJAX，Perl中使用 JSON 的水平为中等，然后你可以自己走向下一个水平。
在学习本教程之前，你应该对 Web 应用程序如何通过 HTTP 进行工作有一个基本的了解，并且我们假设你已经掌握了基本的 JavaScript 知识，你可以参考本站的《JavaScript教程》
| 更新日期 | 更新内容 |
|---|---|
| 2015-05-05 | 第一版发布 |
JSON: JavaScript Object Notation(JavaScript 对象表示法)
JSON 是存储和交换文本信息的语法，类似 XML。
JSON 比 XML 更小、更快，更易解析。
JSON实例：
{ "employees": [ { "firstName":"John" , "lastName":"Doe" }, { "firstName":"Anna" , "lastName":"Smith" }, { "firstName":"Peter" , "lastName":"Jones" } ]}这个 employee 对象是包含 3 个员工记录（对象）的数组。
把任何 JavaScript 对象变成 JSON，就是把这个对象序列化成一个 JSON 格式的字符串，这样才能够通过网络传递给其他计算机。
JSON 使用 Javascript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。
JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。
由于这种相似性，无需解析器，JavaScript 程序能够使用内建的 eval() 函数，用 JSON 数据来生成原生的 JavaScript 对象。
JSON 或者 JavaScript 对象表示法是一种轻量级的基于文本的开放标准，被设计用于可读的数据交换。约定使用 JSON 的程序包括 C，C++，Java，Python，Perl 等等。
鉴于书籍数据有语言和版本信息，下面的例子展示了使用 JSON 存储书籍信息：
{ "book": [ { "id":"01", "language": "Java", "edition": "third", "author": "Herbert Schildt" }, { "id":"07", "language": "C++", "edition": "second", "author": "E.Balagurusamy" }]}理解上述程序之后我们来看另外一个例子，让我们把下面的代码保存为 json.htm：
<html><head><title>JSON example</title><script language="javascript" > var object1 = { "language" : "Java", "author" : "herbert schildt" }; document.write("<h1>JSON with JavaScript example</h1>"); document.write("<br/>"); document.write("<h3>Language = " + object1.language+"</h3>"); document.write("<h3>Author = " + object1.author+"</h3>"); var object2 = { "language" : "C++", "author" : "E-Balagurusamy" }; document.write("<br/>"); document.write("<h3>Language = " + object2.language+"</h3>"); document.write("<h3>Author = " + object2.author+"</h3>"); document.write("<hr />"); document.write(object2.language + " programming language can be studied " + "from book written by " + object2.author); document.write("<hr />");</script></head><body></body></html>现在尝试使用 IE 或者其他任何启用了 JavaScript 的浏览器打开这个页面，它会生成如下所示结果：
你可以参考 JSON 对象 来了解更多关于 JSON 对象的信息。
通过我们的编辑器，您可以在线编辑 JavaScript 代码，然后通过点击一个按钮来查看结果：
<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>
var JSONObject= {
"name":"John Johnson",
"street":"Oslo West 555",
"age":33,
"phone":"555 1234567"};
document.getElementById("jname").innerHTML=JSONObject.name
document.getElementById("jage").innerHTML=JSONObject.age
document.getElementById("jstreet").innerHTML=JSONObject.street
document.getElementById("jphone").innerHTML=JSONObject.phone
</script>
</body>
</html>
对于 AJAX 应用程序来说，JSON 比 XML 更快更易使用：
有关JSON的介绍到此为止，在接下来的章节中，我们将开始学习与使用JSON！
JSON 使用 JavaScript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。
JSON 语法是 JavaScript 语法的子集。
我们来快速浏览一下 JSON 的基本语法。JSON 的语法基本上可以视为 JavaScript 语法的一个子集，包括以下内容：
下面是一个简单的示例：
{ "book": [ { "id":"01", "language": "Java", "edition": "third", "author": "Herbert Schildt" }, { "id":"07", "language": "C++", "edition": "second", "author": "E.Balagurusamy" }]}JSON 支持以下两种数据结构：
JSON 语法是 JavaScript 对象表示法语法的子集。
JSON 语法规则不复杂，它参考了 C 语言家族的一些习惯，学习起来并不会感到陌生。
JSON 数据的书写格式是：名称/值对。
{ "flag":true }名称/值对包括字段名称（在双引号中），后面写一个冒号，然后是值：
"firstName" : "John"这很容易理解，等价于这条 JavaScript 语句：
firstName = "John"JSON 值可以是：
JSON 对象在花括号（{}）中书写：
对象可以包含多个名称/值对：
{ "firstName":"John" , "lastName":"Doe" }这一点也容易理解，与这条 JavaScript 语句等价：
firstName = "John" lastName = "Doe"JSON 数组在方括号中书写：
数组可包含多个对象：
{ "employees": [ { "firstName":"John" , "lastName":"Doe" }, { "firstName":"Anna" , "lastName":"Smith" }, { "firstName":"Peter" , "lastName":"Jones" } ]}在上面的例子中，对象 "employees" 是包含三个对象的数组。每个对象代表一条关于某人（有姓和名）的记录。
JSON 布尔值可以是 true 或者 false：
{ "51coolma":true }JSON 可以设置 null 值：
{ "51coolma":null }因为 JSON 使用 JavaScript 语法，所以无需额外的软件就能处理 JavaScript 中的 JSON。
通过 JavaScript，您可以创建一个对象数组，并像这样进行赋值：
可以像这样访问 JavaScript 对象数组中的第一项：
返回的内容是：
可以像这样修改数据：
在下面的章节，您将学到如何把 JSON 文本转换为 JavaScript 对象。
在下节内容中，我们将介绍如何使用JSON把文本转换为JavaScript对象。
JSON 最常见的用法之一，是从 web 服务器上读取 JSON 数据（作为文件或作为 HttpRequest），将 JSON 数据转换为 JavaScript 对象，然后在网页中使用该数据。
为了更简单地为您讲解，我们使用字符串作为输入进行演示（而不是文件）。
创建包含 JSON 语法的 JavaScript 字符串：
var txt = '{ "employees" : [' + '{ "firstName":"John" , "lastName":"Doe" },' + '{ "firstName":"Anna" , "lastName":"Smith" },' + '{ "firstName":"Peter" , "lastName":"Jones" } ]}';由于 JSON 语法是 JavaScript 语法的子集，JavaScript 函数 eval() 可用于将 JSON 文本转换为 JavaScript 对象。
eval() 函数使用的是 JavaScript 编译器，可解析 JSON 文本，然后生成 JavaScript 对象。必须把文本包围在括号中，这样才能避免语法错误：
var obj = eval ("(" + txt + ")");在网页中使用 JavaScript 对象：
eval() 函数可编译并执行任何 JavaScript 代码。这隐藏了一个潜在的安全问题。
使用 JSON 解析器将 JSON 转换为 JavaScript 对象是更安全的做法。JSON 解析器只能识别 JSON 文本，而不会编译脚本。
在浏览器中，这提供了原生的 JSON 支持，而且 JSON 解析器的速度更快。
较新的浏览器和最新的 ECMAScript (JavaScript) 标准中均包含了原生的对 JSON 的支持。
| Web 浏览器支持 | Web 软件支持 |
|---|---|
|
|
对于较老的浏览器，可使用 JavaScript 库： https://github.com/douglascrockford/JSON-js
本章节我们将向大家介绍 JSONP 的知识。
Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
为什么我们从不同的域（网站）访问数据需要一个特殊的技术(JSONP )呢？这是因为同源策略。
什么是同源策略？它是由Netscape提出的一个著名的安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策略。
Jsonp 的实现原理是利用 <script> 标签可以获取不同源资源的特点，来达到跨域访问某个资源的目的。
如客户想访问 : /try/ajax/jsonp.php?jsonp=callbackFunction。
假设客户期望返回JSON数据：["customername1","customername2"]。
真正返回到客户端的数据显示为: callbackFunction(["customername1","customername2"])。
服务端文件jsonp.php代码为：
<?php header('Content-type: application/json'); //获取回调函数名 $jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']); //json数据 $json_data = '["customername1","customername2"]'; //输出jsonp格式的数据 echo $jsoncallback . "(" . $json_data . ")"; ?><script type="text/javascript">function onCustomerLoaded(result, methodName){ var html = '<ul>'; for(var i = 0; i < result.length; i++){ html += '<li>' + result[i] + '</li>'; } html += '</ul>'; document.getElementById('divCustomers').innerHTML = html;}</script><div id="divCustomers"></div><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head> <title>JSONP 实例</title></head><body> <div id="divCustomers"></div> <script type="text/javascript"> function callbackFunction(result, methodName){ var html = '<ul>'; for(var i = 0; i < result.length; i++){ html += '<li>' + result[i] + '</li>'; } html += '</ul>'; document.getElementById('divCustomers').innerHTML = html; } </script><script type="text/javascript" src="/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script></body></html>以上代码可以使用 jQuery 代码实例：
<!DOCTYPE html><html><head> <title>JSONP 实例</title> <script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.js" rel="external nofollow" ></script> </head><body><div id="divCustomers"></div><script>$.getJSON("/try/ajax/jsonp.php?jsoncallback=?", function(data) { var html = '<ul>'; for(var i = 0; i < data.length; i++){ html += '<li>' + data[i] + '</li>'; } html += '</ul>'; $('#divCustomers').html(html); });</script></body></html> 很多网站都有提供一些很不错的JSON在线校验工具，我们也提供了一些JSON在线工具：
这是一款可将Excel/csv数据在线转换成json格式的工具，用户只需复制Excel/csv中的数据粘贴到上面一个文本框，再点击【转换】按钮即可实现快速转换json功能，还可根据需要选择转换成对象还是转换成数组格式，欢迎需要的朋友使用。
JSON和XML和我们最常用的两种信息传输格式，但是有些时候，我们却需要两者之间的转换，方便我们的工作。
JSON检验工具是一款集在线解析、格式化、验证功能于一体的在线工具，你可以实用该工具在线验证、编辑和格式化JSON数据，格式化后的JSON数据将更易于阅读。
JSON 格式支持以下数据类型：
| 类型 | 描述 |
|---|---|
| 数字型（Number） | JavaScript 中的双精度浮点型格式 |
| 字符串型（String） | 双引号包裹的 Unicode 字符和反斜杠转义字符 |
| 布尔型（Boolean） | true 或 false |
| 数组（Array） | 有序的值序列 |
| 值（Value） | 可以是字符串，数字，true 或 false，null 等等 |
| 对象（Object） | 无序的键:值对集合 |
| 空格（Whitespace） | 可用于任意符号对之间 |
| null | 空 |
下表展示了数字类型：
| 类型 | 描述 |
|---|---|
| 整形（Integer） | 数字1-9，0和正负数 |
| 分数（Fraction） | 分数，比如 .3，.9 |
| 指数（Exponent） | 指数，比如 e，e+，e-，E，E+，E- |
语法：
var json-object-name = { string : number_value, .......}示例：
下面的示例展示了数字类型，其值不应该使用引号包裹：
var obj = {marks: 97}下表展示了字符串类型：
| 类型 | 描述 |
|---|---|
| " | 双引号 |
| 反斜线 | |
| / | 斜线 |
| b | 退格符 |
| f | 换页符 |
| n | 换行符 |
| r | 回车符 |
| t | 水平制表符 |
| u | 四位十六进制数字 |
语法：
var json-object-name = { string : "string value", .......}示例：
下面的示例展示了字符串数据类型：
var obj = {name: 'Amit'}它包含 true 和 false 两个值。
语法：
var json-object-name = { string : true/false, .......}示例：
var obj = {name: 'Amit', marks: 97, distinction: true}语法：
[ value, .......]示例：
下面的示例展示了一个包含多个对象的数组：
{ "books": [ { "language":"Java" , "edition":"second" }, { "language":"C++" , "lastName":"fifth" }, { "language":"C" , "lastName":"third" } ]}语法：
{ string : value, .......}示例：
下面的例子展示了对象：
{ "id": "011A", "language": "JAVA", "price": 500,}可以在任意一对符号之间插入。可以添加用来让代码更可读。下面的例子展示了使用空格和不使用空格的声明：
语法：
{string:" ",....}示例：
var i= " sachin";var j = " saurav"意味着空类型。
语法：
null示例：
var i = null;if(i==1) { document.write("<h1>value is 1</h1>"); } else { document.write("<h1>value is null</h1>");}包括：
语法：
String | Number | Object | Array | TRUE | FALSE | NULL示例：
var i =1;var j = "sachin";var k = null;一个简单的 JSON 对象语法：
{ "name":"51coolma", "alexa":8000, "site":null }JSON 对象使用在大括号({})中书写，对象可以包含多个 key/value（键/值）对。
其中：
JSON 对象可以使用 JavaScript 创建。我们来看看使用 JavaScript 创建 JSON 对象的各种方式：
var JSONObj = {};var JSONObj = new Object();var JSONObj = { "bookname ":"VB BLACK BOOK", "price":500 };这里有一个例子，展示了在 JavaScript 中使用 JSON 创建对象，可以将下面的代码保存为 json_object_51coolma.htm：
注：.htm格式是早期的.html格式，此处内容无误。
<html><head><title>在JavaScript中使用JSON创建对象（51coolma.cn）</title><script language="javascript" > var JSONObj = { "name" : "编程狮（51coolma.cn）", "time" : 2020 }; document.write("<h1>JSON和JavaScript的例子</h1>"); document.write("<h3>网站的名字="+JSONObj.name+"</h3>"); document.write("<h3>时间="+JSONObj.time+"</h3>"); </script></head><body></body></html>现在让我们尝试使用 IE 或者任何其他启用了 JavaScript 的浏览器打开这个页面，这会生成如下所示结果：
你可以使用点号（.）来访问对象的值：
你也可以使用中括号（[]）来访问对象的值：
你可以使用 for-in 来循环对象的属性：
在 for-in 循环对象的属性时，使用中括号（[]）来访问属性的值：
下面的例子展示了在 JavaScript 中使用 JSON 创建数组对象，可以将下面的代码保存为 json_array_object_51coolma.htm：
<html><head><title>在 JavaScript 中使用 JSON 创建数组对象(51coolma.cn)</title><script language="javascript" >document.writeln("<h2>JSON数组对象(51coolma.cn)</h2>");var books = { "Pascal" : [ { "Name" : "Pascal Made Simple", "price" : 700 }, { "Name" : "Guide to Pascal", "price" : 400 } ], "Scala" : [ { "Name" : "Scala for the Impatient", "price" : 1000 }, { "Name" : "Scala in Depth", "price" : 1300 } ] } var i = 0document.writeln("<table border='2'><tr>");for(i=0;i<books.Pascal.length;i++){ document.writeln("<td>"); document.writeln("<table border='1' width=100 >"); document.writeln("<tr><td><b>Name</b></td><td width=50>" + books.Pascal[i].Name+"</td></tr>"); document.writeln("<tr><td><b>Price</b></td><td width=50>" + books.Pascal[i].price +"</td></tr>"); document.writeln("</table>"); document.writeln("</td>");}for(i=0;i<books.Scala.length;i++){ document.writeln("<td>"); document.writeln("<table border='1' width=100 >"); document.writeln("<tr><td><b>Name</b></td><td width=50>" + books.Scala[i].Name+"</td></tr>"); document.writeln("<tr><td><b>Price</b></td><td width=50>" + books.Scala[i].price+"</td></tr>"); document.writeln("</table>"); document.writeln("</td>");}document.writeln("</tr></table>");</script></head><body></body></html>现在让我们尝试使用 IE 或者任意其他启用了 JavaScript 的浏览器打开这个页面，和会生成如下所示结果：
JSON 对象中可以包含另外一个 JSON 对象：
myObj = { "name":"51coolma", "alexa":10000, "sites": { "site1":"www.51coolma.cn", "site2":"m.51coolma.cn", "site3":"c.51coolma.cn" }}你可以使用点号(.)或者中括号([])来访问嵌套的 JSON 对象。
你可以使用点号(.)来修改 JSON 对象的值：
你可以使用中括号([])来修改 JSON 对象的值：
JSON 对象和 JSON 字符串的区别：
JSON 对象
var str2 = { "name": "asan", "sex": "man" };JSON 字符串
var str1 = '{ "name": "deyuyi", "sex": "man" }';JSON 模式是一种基于 JSON 格式定义 JSON 数据结构的规范。它被写在 IETF 草案下并于 2011 年到期。JSON 模式：
目前有好几个验证器可用于不同的编程语言。但是目前最完整和兼容 JSON 模式的验证器是 JSV。
| 语言 | 程序库 |
|---|---|
| C | WJElement (LGPLv3) |
| Java | json-schema-validator (LGPLv3) |
| .NET | Json.NET (MIT) |
| ActionScript 3 | Frigga (MIT) |
| Haskell | aeson-schema (MIT) |
| Python | Jsonschema |
| Ruby | autoparse (ASL 2.0); ruby-jsonschema (MIT) |
| PHP | php-json-schema (MIT). json-schema (Berkeley) |
| JavaScript | Orderly (BSD); JSV; json-schema; Matic (MIT); Dojo; Persevere (modified BSD or AFL 2.0); schema.js. |
下面是一个基本的 JSON 模式，其中涵盖了一个经典的产品目录说明：
{ "$schema": "http://json-schema.org/draft-04/schema#", "title": "Product", "description": "A product from Acme's catalog", "type": "object", "properties": { "id": { "description": "The unique identifier for a product", "type": "integer" }, "name": { "description": "Name of the product", "type": "string" }, "price": { "type": "number", "minimum": 0, "exclusiveMinimum": true } }, "required": ["id", "name", "price"]}我们来看一下可以用于这一模式中的各种重要关键字：
| 关键字 | 描述 |
|---|---|
| $schema | $schema 关键字状态，表示这个模式与 v4 规范草案书写一致。 |
| title | 用它给我们的模式提供了标题。 |
| description | 关于模式的描述。 |
| type | type 关键字在我们的 JSON 数据上定义了第一个约束：必须是一个 JSON 对象。 |
| properties | 定义各种键和他们的值类型，以及用于 JSON 文件中的最小值和最大值。 |
| required | 存放必要属性列表。 |
| minimum | 给值设置的约束条件，表示可以接受的最小值。 |
| exclusiveMinimum | 如果存在 "exclusiveMinimum" 并且具有布尔值 true，如果它严格意义上大于 "minimum" 的值则实例有效。 |
| maximum | 给值设置的约束条件，表示可以接受的最大值。 |
| exclusiveMaximum | 如果存在 "exclusiveMinimum" 并且具有布尔值 true，如果它严格意义上小于 "maximum" 的值则实例有效。 |
| multipleOf | 如果通过这个关键字的值分割实例的结果是一个数字则表示紧靠 "multipleOf" 的数字实例是有效的。 |
| maxLength | 字符串实例字符的最大长度数值。 |
| minLength | 字符串实例字符的最小长度数值。 |
| pattern | 如果正则表达式匹配实例成功则字符串实例被认为是有效的。 |
可以在 http://json-schema.org 上检出可用于定义 JSON 模式的完整关键字列表。上面的模式可用于测试下面给出的 JSON 代码的有效性：
[ { "id": 2, "name": "An ice sculpture", "price": 12.50, }, { "id": 3, "name": "A blue mouse", "price": 25.50, }]XML：扩展标记语言 (Extensible Markup Language, XML) ，用于标记电子文件使其具有结构性的标记语言，可以用来标记数据、定义数据类型，是一种允许用户对自己的标记语言进行定义的源语言。
JSON(JavaScript Object Notation)是一种轻量级的文本数据交换格式，具有良好的可读和便于快速编写的特性，可在不同平台之间进行数据交换。
JSON 和 XML 都是人类可读的格式并且与语言无关。在现实环境中它们都支持创建，读取和解码。我们可以通过以下的因素来比较 JSON 和 XML：
XML 文件庞大，文件格式复杂，传输占带宽；JSON 数据格式比较简单，易于读写，格式都是压缩的，占用带宽小。
XML 比 JSON 冗余，因此对我们来说编写 JSON 会更快。
XML 被用来描述结构化数据，不包含数组；而 JSON 包含数组。
可以使用 JavaScript 的 eval 方法解析 JSON。当针对 JSON 应用这个方法时，eval 返回描述的对象。
下面分别展示了一个 XML 和 JSON 示例：
{ "company":"Volkswagen", "name": "Vento", "price": 800000}<car> <company>Volkswagen</company> <name>Vento</name> <price>800000</price></car>更多关于XML的知识，请参考：XML教程
JSON，说白了就是JavaScript用来处理数据的一种格式，这种格式非常简单易用。
JSON，大部分都是用来处理JavaScript和web服务器端之间的数据交换，把后台web服务器的数据传递到前台，然后使用JavaScript进行处理，例如ajax等。
JSON支持的语言非常多，包括JavaScript、C#、PHP、Java等等，这是由于JSON独立于语言的轻量级的数据交换格式，这个特点有点类似于SQL语言。
JSON结构共有2种：
对象结构是使用大括号“{}”括起来的，大括号内是由0个或多个用英文逗号分隔的“关键字:值”对（key:value）构成的。
语法：
var jsonObj ={ "键名1":值1, "键名2":值2, …… "键名n":值n}说明：
jsonObj指的是json对象。对象结构是以“{”开始，到“}”结束。其中“键名”和“值”之间用英文冒号构成对，两个“键名:值”之间用英文逗号分隔。
注意，这里的键名是字符串，但是值可以是数值、字符串、对象、数组或逻辑true和false。
JSON数组结构是用中括号“[]”括起来，中括号内部由0个或多个以英文逗号“,”分隔的值列表组成。
语法：
var arr =[ { "键名1":值1, "键名2":值2 }, { "键名3":值3, "键名4":值4 }, ……]说明：
arr指的是json数组。数组结构是以“[”开始，到“]”结束，这一点跟JSON对象不同。在JSON数组中，每一对“{}”相当于一个JSON对象，大家看看像不像？而且语法都非常类似。
注意，这里的键名是字符串，但是值可以是数值、字符串、对象、数组或逻辑true和false。
对于JSON对象结构和JSON数组结构的读取、写入、修改、删除和遍历等操作请到相应章节认真查看。
代码片断1
{ "button":[ { "type":"click", "name":"今日歌曲", "key":"V1001_TODAY_MUSIC" }, { "type":"click", "name":"歌手简介", "key":"V1001_TODAY_SINGER" }, { "name":"菜单", "sub_button":[ { "type":"view", "name":"搜索", "url":"http://www.soso.com/" }, { "type":"view", "name":"视频", "url":"http://v.qq.com/" }, { "type":"click", "name":"赞一下我们", "key":"V1001_GOOD" }] }] }然后用PHP的json_encode()函数，对一二维数组转换成JSON形式
但转换出来的JSON形式:
代码片断2
{ "button": { "1": { "type": "click", "name": "今日歌曲", "key": "V1001_TODAY_MUSIC" }, "2": { "type": "click", "name": "歌手简介", "key": "V1001_TODAY_SINGER" }, "3": { "name": "菜单", "sub_button": [ { "type": "view", "name": "搜索", "url": "http://www.soso.com/" }, { "type": "view", "name": "视频", "url": "http://v.qq.com/" }, { "type": "click", "name": "赞一下我们", "key": "V1001_GOOD" } ] } }}看出来形式是不一致的。
只能来了解一下JSON的结构形式。
JSON有两种数据：1.无序的对象结构；2.有序的数组结构
1.无序的对象结构
无序的对象结构在不同语言中称法不同，比如在Python中称为字典，在JS中称为JSON对象……
总之就是键/值对组合形式。
刚才我转换出来的JSON结构就是无序的键/值对组合
2.有序的数组结构
有序的的数组结构，即代码片断2所展示的结构。
将数组作为有序数组进行转换JSON，就可以得到有序的JSON数组结构。
在下一节内容中，我们一起来认识 JSON 数据格式！
JSON 是 JavaScript Object Notation 的简称，是一种轻量的数据表示方法。json格式采用key:value的方式记录数据，非常直观，比XML简洁，因而大受欢迎
介绍json格式前，先让我们看看XML格式。显然，XML 得到了相当多的关注（正面和负面的评价都有），已经在 Ajax 应用程序中广泛使用：
<request> <firstName>Brett</firstName> <lastName>McLaughlin</lastName> <email>brett@newInstance.com</email></request>这里的数据与前面看到的相同，但是这一次采用 XML 格式。这没什么了不起的；这只是另一种数据格式，使我们能够使用 XML 而不是纯文本和名称/值对。
本文讨论另一种数据格式，JavaScript Object Notation（JSON）。JSON 看起来既熟悉又陌生。它提供了另一种选择，选择范围更大总是好事情。
在使用名称/值对或 XML 时，实际上是使用 JavaScript 从应用程序中取得数据并将数据转换成另一种数据格式。在这些情况下，JavaScript 在很大程度上作为一种数据操纵语言，用来移动和操纵来自 Web 表单的数据，并将数据转换为一种适合发送给服务器端程序的格式。
但是，有时候 JavaScript 不仅仅作为格式化语言使用。在这些情况下，实际上使用 JavaScript 语言中的对象来表示数据，而不仅是将来自 Web 表单的数据放进请求中。在这些情况下，从 JavaScript 对象中提取数据，然后再将数据放进名称/值对或 XML，就有点儿多此一举了。这时就适合使用 JSON：JSON 允许轻松地将 JavaScript对象转换成可以随请求发送的数据（同步或异步都可以）。
JSON 并不是某种银弹；但是，它对于某些非常特殊的情况是很好的选择。
简单地说，JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串，然后就可以在函数之间轻松地传递这个字符串，或者在异步应用程序中将字符串从 Web 客户机传递给服务器端程序。这个字符串看起来有点儿古怪（稍后会看到几个示例），但是 JavaScript 很容易解释它，而且 JSON 可以表示比名称/值对更复杂的结构。例如，可以表示数组和复杂的对象，而不仅仅是键和值的简单列表。JSON 基础
按照最简单的形式，可以用下面这样的 JSON 表示名称/值对：
{ "firstName": "Brett" }这个示例非常基本，而且实际上比等效的纯文本名称/值对占用更多的空间：
firstName="Brett"但是，当将多个名称/值对串在一起时，JSON 就会体现出它的价值了。首先，可以创建包含多个名称/值对的记录，比如：
{"firstName": "Brett","lastName":"McLaughlin","email": "brett@newInstance.com"}从语法方面来看，这与名称/值对相比并没有很大的优势，但是在这种情况下 JSON 更容易使用，而且可读性更好。例如，它明确地表示以上三个值都是同一记录的一部分；花括号使这些值有了某种联系。
当需要表示一组值时，JSON 不但能够提高可读性，而且可以减少复杂性。例如，假设您希望表示一个人名列表。在 XML 中，需要许多开始标记和结束标记；如果使用典型的名称/值对（就像在本系列前面文章中看到的那种名称/值对），那么必须建立一种专有的数据格式，或者将键名称修改为 person1-firstName 这样的形式。
如果使用 JSON，就只需将多个带花括号的记录分组在一起：
{ "people": [ { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" }, { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" }, { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }]}这不难理解。在这个示例中，只有一个名为 people 的变量，值是包含三个条目的数组，每个条目是一个人的记录，其中包含名、姓和电子邮件地址。上面的示例演示如何用括号将记录组合成一个值。当然，可以使用相同的语法表示多个值（每个值包含多个记录）：
{ "programmers": [ { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" }, { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" }, { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" } ],"authors": [ { "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" }, { "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" }, { "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" } ],"musicians": [ { "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" }, { "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" } ]}这里最值得注意的是，能够表示多个值，每个值进而包含多个值。但是还应该注意，在不同的主条目（programmers、authors 和 musicians）之间，记录中实际的名称/值对可以不一样。JSON 是完全动态的，允许在 JSON 结构的中间改变表示数据的方式。
在处理 JSON 格式的数据时，没有需要遵守的预定义的约束。所以，在同样的数据结构中，可以改变表示数据的方式，甚至可以以不同方式表示同一事物。
将 JSON 数据赋值给变量掌握了 JSON 格式之后，在 JavaScript 中使用它就很简单了。JSON 是 JavaScript 原生格式，这意味着在JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。在 JavaScript 中使用 JSON
例如，可以创建一个新的 JavaScript 变量，然后将 JSON 格式的数据字符串直接赋值给它：
var people = { "programmers": [ { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" }, { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" }, { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" } ], "authors": [ { "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" }, { "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" }, { "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" } ], "musicians": [ { "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" }, { "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" } ] }这非常简单；现在 people 包含前面看到的 JSON 格式的数据。但是，这还不够，因为访问数据的方式似乎还不明显。
尽管看起来不明显，但是上面的长字符串实际上只是一个数组；将这个数组放进 JavaScript 变量之后，就可以很轻松地访问它。实际上，只需用点号表示法来表示数组元素。所以，要想访问 programmers 列表的第一个条目的姓氏，只需在 JavaScript 中使用下面这样的代码：
people.programmers[0].lastName;注意，数组索引是从零开始的。所以，这行代码首先访问 people 变量中的数据；然后移动到称为 programmers的条目，再移动到第一个记录（[0]）；最后，访问 lastName 键的值。结果是字符串值 “McLaughlin”。
下面是使用同一变量的几个示例。
people.authors[1].genre // Value is "fantasy"people.musicians[3].lastName // Undefined. This refers to the fourth entry, and there isn't onepeople.programmers.[2].firstName // Value is "Elliotte"利用这样的语法，可以处理任何 JSON 格式的数据，而不需要使用任何额外的 JavaScript 工具包或 API。
正如可以用点号和括号访问数据，也可以按照同样的方式轻松地修改数据：
people.musicians[1].lastName = "Rachmaninov";在将字符串转换为 JavaScript 对象之后，就可以像这样修改变量中的数据。
当然，如果不能轻松地将对象转换回本文提到的文本格式，那么所有数据修改都没有太大的价值。在 JavaScript中这种转换也很简单：
String newJSONtext = people.toJSONString();这样就行了！现在就获得了一个可以在任何地方使用的文本字符串，例如，可以将它用作 Ajax 应用程序中的请求字符串。
更重要的是，可以将任何 JavaScript 对象转换为 JSON 文本。并非只能处理原来用 JSON 字符串赋值的变量。为了对名为 myObject 的对象进行转换，只需执行相同形式的命令：
String myObjectInJSON = myObject.toJSONString();这就是 JSON 与本系列讨论的其他数据格式之间最大的差异。如果使用 JSON，只需调用一个简单的函数，就可以获得经过格式化的数据，可以直接使用了。对于其他数据格式，需要在原始数据和格式化数据之间进行转换。即使使用 Document Object Model 这样的 API（提供了将自己的数据结构转换为文本的函数），也需要学习这个API 并使用 API 的对象，而不是使用原生的 JavaScript 对象和语法。
最终结论是，如果要处理大量 JavaScript 对象，那么 JSON 几乎肯定是一个好选择，这样就可以轻松地将数据转换为可以在请求中发送给服务器端程序的格式。
本教程将会教我们如何使用 PHP 编程语言编码和解码 JSON 对象。让我们先来准备环境以便针对 JSON 进行 PHP 编程。
从 PHP 5.2.0 开始默认捆绑了 JSON 扩展并被编译到 PHP 中。
| 函数 | 程序库 |
|---|---|
| json_encode | 返回一个值的 JSON 表示形式。 |
| json_decode | 解码为一个 JSON 字符串。 |
| json_last_error | 返回最后一次出现的错误。 |
PHP 的 json_encode() 函数用于在 PHP 中编码 JSON。编码成功时这个函数返回给定值的 JSON 表示形式，失败则返回 FALSE。
语法：
string json_encode ( $value [, $options = 0 ] )参数：
示例：
下面的例子展示了如何使用 PHP 将一个数组转换为 JSON：
<?php $arr = array('a' => 1, 'b' => 2, 'c' => 3, 'd' => 4, 'e' => 5); echo json_encode($arr);?>执行时会生成如下结果：
{"a":1,"b":2,"c":3,"d":4,"e":5}下面的例子展示了 PHP 对象也可以被转换为 JSON：
<?php class Emp { public $name = ""; public $hobbies = ""; public $birthdate = ""; } $e = new Emp(); $e->name = "sachin"; $e->hobbies = "sports"; $e->birthdate = date('m/d/Y h:i:s a', strtotime("8/5/1974 12:20:03")); echo json_encode($e);?>执行时会生成如下所示结果：
{"name":"sachin","hobbies":"sports","birthdate":"08/05/1974 12:20:03 pm"}PHP 的 json-decode() 函数用于在 PHP 中解码 JSON。这个函数返回从 JSON 解码到适当 PHP 类型的值。
语法：
mixed json_decode ($json [,$assoc = false [, $depth = 512 [, $options = 0 ]]])参数：
示例：
下面例子展示了如何使用 PHP 解码 JSON 对象：
<?php $json = '{"a":1,"b":2,"c":3,"d":4,"e":5}'; var_dump(json_decode($json)); var_dump(json_decode($json, true));?>执行时生成如下所示结果：
object(stdClass)#1 (5) { ["a"] => int(1) ["b"] => int(2) ["c"] => int(3) ["d"] => int(4) ["e"] => int(5)}array(5) { ["a"] => int(1) ["b"] => int(2) ["c"] => int(3) ["d"] => int(4) ["e"] => int(5)}本教程将会教我们如何使用 Perl 编程语言编码和解码 JSON 对象。让我们先来准备环境以便针对 JSON 进行 Perl 编程。
在开始使用 Perl 编码和解码 JSON 之前，我们需要安装 JSON 模块，可以从 CPAN 中获取。下载 JSON-2.53.tar.gz 或者其他任意最新版本之后请按照下列步骤操作：
$tar xvfz JSON-2.53.tar.gz$cd JSON-2.53$perl Makefile.PL$make$make install| 函数 | 程序库 |
|---|---|
| encode_json | 将给定的 Perl 数据结构转为 UTF-8 编码的二进制字符串。 |
| decode_json | 解码 JSON 字符串。 |
| to_json | 将给定的 Perl 数据结构转换为 JSON 字符串。 |
| from_json | 接受一个 JSON 字符串并试图解析它，返回结果引用。 |
| convert_blessed | 给这个函数传递 true，则 Perl 可以使用这个对象类的 TO_JSON 方法将对象转换为 JSON。 |
Perl 的 encode_json() 函数可以将给定的 Perl 数据结构转换为 UTF-8 编码的二进制字符串。
语法：
$json_text = encode_json ($perl_scalar );or$json_text = JSON->new->utf8->encode($perl_scalar);示例：
下面的例子展示了使用 Perl 将数组转换为 JSON：
#!/usr/bin/perluse JSON;my %rec_hash = ('a' => 1, 'b' => 2, 'c' => 3, 'd' => 4, 'e' => 5);my $json = encode_json \%rec_hash;print "$json
";执行时生成如下所示结果：
{"e":5,"c":3,"a":1,"b":2,"d":4}下面的例子展示了如何将 Perl 对象转换为 JSON：
#!/usr/bin/perlpackage Emp;sub new{ my $class = shift; my $self = { name => shift, hobbies => shift, birthdate => shift, }; bless $self, $class; return $self;}sub TO_JSON { return { %{ shift() } }; }package main;use JSON;my $JSON = JSON->new->utf8;$JSON->convert_blessed(1);$e = new Emp( "sachin", "sports", "8/5/1974 12:20:03 pm");$json = $JSON->encode($e);print "$json
";执行时生成如下所示结果：
{"birthdate":"8/5/1974 12:20:03 pm","name":"sachin","hobbies":"sports"}Perl 的 decode_json() 函数用于在 Perl 中解码 JSON。这个函数返回从 JSON 解码到适当 Perl 类型的值。
语法：
$perl_scalar = decode_json $json_textor$perl_scalar = JSON->new->utf8->decode($json_text)示例：
下面的例子展示了如何使用 Perl 解码 JSON 对象。如果你的机器上没有 Data::Dumper 模块那么你需要安装这个模块。
#!/usr/bin/perluse JSON;use Data::Dumper;$json = '{"a":1,"b":2,"c":3,"d":4,"e":5}';$text = decode_json($json);print Dumper($text);执行时生成如下所示结果：
$VAR1 = { 'e' => 5, 'c' => 3, 'a' => 1, 'b' => 2, 'd' => 4};本教程将会教我们如何使用 Python 编程语言编码和解码 JSON。让我们先来准备环境以便针对 JSON 进行 Python 编程。
在我们使用 Python 编码和解码 JSON 之前，我们需要安装一个可用 JSON 模块。对于本教程请按照如下方式下载和安装 Demjson：
$tar xvfz demjson-1.6.tar.gz$cd demjson-1.6$python setup.py installpython在2.6版本后内置了JSON模块，使用方法与下文类似，详细的内容可以前往这篇文章中进行查看：python如何解析JSON？JSON模块详解！
| 函数 | 程序库 |
|---|---|
| encode | 将 Python 对象编码为 JSON 字符串表示。 |
| decode | 将 JSON 编码的字符串解码为 Python 对象。 |
Python 的 encode() 函数用于将 Python 对象编码为 JSON 字符串表示。
语法：
demjson.encode(self, obj, nest_level=0)示例：
下面的例子展示了使用 Python 将数组转换为 JSON：
#!/usr/bin/pythonimport demjsondata = [ { 'a' : 1, 'b' : 2, 'c' : 3, 'd' : 4, 'e' : 5 } ]json = demjson.encode(data)print json执行时会生成如下所示结果：
{'a': 1, 'b': 2, 'c': 3, 'd': 4, 'e': 5}Python 可以使用 demjson.decode() 函数处理 JSON 解码。这个函数返回从 JSON 解码到适当 Python 类型的值。
语法：
demjson.decode(self, txt)示例：
下面的例子展示了如何使用 Python 解码 JSON 对象。
#!/usr/bin/pythonimport demjsonjson = '{"a":1,"b":2,"c":3,"d":4,"e":5}';text = demjson.decode(json)print text执行时生成如下所示结果：
{'a': 1, 'b': 2, 'c': 3, 'd': 4, 'e': 5}本教程将会教我们如何使用 Python 编程语言编码和解码 JSON。
在python3中（以及python2.6版本后的python2版本）内置了JSON模块，无需额外安装另外的JSON模块。
JSON模块是python内置的用来进行python对象序列化和反序列化的模块。
序列化，指将python对象转换为json格式的数据流，反序列化则是将json格式的数据流转换为python对象。
该模块中常用的方法有以下四个：
两个dump函数是将python对象转换为json，可以理解为编码（类似demjson的encode函数），两个load函数是将json转换为python对象，可以理解为JSON解析（类似demjson的code函数）。因为两个dump和两个load的功能相似，所以小编只介绍其中一个（介绍JSON格式数据的字符串的编码与解析，也就是dumps和loads函数）。
dumps可以传递的参数如下：
json.dumps(obj, skipkeys=False, ensure_ascii=True, check_circular=True, allow_nan=True, cls=None, indent=None, separators=None, default=None, sort_keys=False)在日常使用中，更多的情况我们只传递必须的obj参数（这是一个对象），其他参数为可选参数，下表是该函数的所有参数的作用：
| 参数 | 作用 | |||
obj（必选项） | 要序列化的python对象 | |||
skipkeys=False | 是否跳过要序列化的对象中字典元素的key不是基本类型的数据； 如果为 True，则跳过，如果为 False，将抛出 TypeError异常。 | |||
ensure_ascii=True | 是否将要序列化的对象中的字符串中的非ascii字符进行转义。 如果该参数为 | |||
check_circular=True | 是否进行容器类型的循环引用检查。 如果该参数设置为 如果该参数设置为 | |||
allow_nan=True | 是否允许序列化超出范围的float 类型的值（如float('inf') 、float('-inf') 、float('nan') ）。 如果该参数设置为 如果该参数设置为 | |||
indent=None | 是否在数组元素和对象成员前增加缩进以便使格式更加美观。 如果该参数设置为大于等于1的整数，则添加换行符和对应数量的空格表示缩进，如果设置为 | |||
separators=None | 设置Json中各项之间、对象的键和值之间的分隔符； 该参数必须是一个2元组，元组第一个元素表示Json数据中各项之间的分隔符，元组的第二个元素表示Json对象的键和值之间的分隔符。默认的分隔符为（’,’, ‘:’） | |||
default=None | 指定一个函数，用来将不可进行序列化的Python对象转化为可序列化的Python对象。 | |||
cls=None | 指定一个定制的JSONEncoder 的子类（例如，重写了.default() 方法用来序列化附加的类型），指定该参数时请使用cls 关键字参数。如果未指定该参数，则将使用默认的JSONEncoder 。 | |||
sort_keys=False | 是否要将对象中字典元素按照key进行排序。 默认为 | |||
举个简单的例子：
#!/usr/bin/python3import json# Python 字典类型转换为 JSON 对象data = { 'no' : 1, 'name' : 'W3CSchool', 'url' : 'http://www.51coolma.cn'}json_str = json.dumps(data)print ("Python 原始数据：", repr(data))print ("JSON 对象：", json_str)python对象转化为JSON字符串的时候遵循以下转换规则：
| Python | Json |
|---|---|
| dict | object |
| list, tuple | array |
| str | string |
| int, float | number |
| True | true |
| False | false |
| None | null |
loads可以传递的参数如下：
json.loads(s,encoding=None, cls=None, object_hook=None, parse_float=None, parse_int=None, parse_constant=None, object_pairs_hook=None)在日常使用中，更多的情况我们只传递必须的s参数（这是一个字符串），其他参数为可选参数，下表是该函数的所有参数的作用：
| 参数 | 作用 | |||
s（必选项） | 要反序列化的JSON字符串 | |||
| encoding=None | 该参数已弃用，将会被忽略 | |||
| cls=None | 指定一个定制的JsonDecoder 子类，以便实现特定的反序列化需求； | |||
| object_hook=None | 接受一个可调用对象，用于处理解码后生成的Python对象中 注意，这个处理过程是递归进行的，即返回的Python对象内部所有的字典结构都将被这个方法处理 | |||
parse_float=None | 用于处理解码后的Python对象中的 | |||
parse_int=None | 接受一个可调用对象，用于处理解码后的Python对象中的int 类型的值。 | |||
parse_constant=None | 接受一个可调用对象，用于解码时对 Infinity、 -Infinity、 NaN或其他非法的Json数值的处理。 | |||
object_parse_hook=None | 如果指定了该参数并且设置为一个可调用对象，那么Json对象将被解码成一个元素为二元组的列表，二元组的两个元素分别为Json对象中的键值对的键和值，并且列表中元素的顺序与Json对象中键值对的顺序一致。 | |||
举个简单的例子：
#!/usr/bin/python3import json# Python 字典类型转换为 JSON 对象data1 = { 'no' : 1, 'name' : 'W3CSchool', 'url' : 'http://www.51coolma.cn'}json_str = json.dumps(data1)print ("Python 原始数据：", repr(data1))print ("JSON 对象：", json_str)# 将 JSON 对象转换为 Python 字典data2 = json.loads(json_str)print ("data2['name']: ", data2['name'])print ("data2['url']: ", data2['url'])与序列化的过程类似，JSON转化为python对象也遵循一定的规则：
| Json | Python |
|---|---|
| object | dict |
| array | list |
| string | str |
| number（int） | int |
| number（real） | float |
| true | True |
| false | False |
| null | None |
本教程将会教我们如何使用 Ruby 编程语言编码和解码 JSON。让我们先来准备环境以便针对 JSON 进行 Ruby 编程。
在我们使用 Ruby 编码和解码 JSON 之前，我们需要安装一个可用于 Ruby 的 JSON 模块。你可能需要安装 Ruby gem，我们使用 Ruby gem 安装 JSON 模块，如果你使用的是最新版的 Ruby，那么可能已经安装了 gem，安装好 gem 之后请按照下面的步骤操作：
$gem install json下面的例子展示了前 2 个键持有字符串值，最后 3 个键持有字符串数组。我们把下面的内容保存为叫做 input.json 的文件。
{ "President": "Alan Isaac", "CEO": "David Richardson", "India": [ "Sachin Tendulkar", "Virender Sehwag", "Gautam Gambhir" ], "Srilanka": [ "Lasith Malinga", "Angelo Mathews", "Kumar Sangakkara" ], "England": [ "Alastair Cook", "Jonathan Trott", "Kevin Pietersen" ]}下面是用于解析上述 JSON 文档的 Ruby 程序：
#!/usr/bin/rubyrequire 'rubygems'require 'json'require 'pp'json = File.read('input.json')obj = JSON.parse(json)pp obj执行时生成如下所示结果：
{ "President"=>"Alan Isaac", "CEO"=>"David Richardson", "India"=> ["Sachin Tendulkar", "Virender Sehwag", "Gautam Gambhir"], "Srilanka"=> ["Lasith Malinga ", "Angelo Mathews", "Kumar Sangakkara"], "England"=> ["Alastair Cook", "Jonathan Trott", "Kevin Pietersen"]}本教程将会教我们如何使用 Java 编程语言编码和解码 JSON。让我们先来准备环境以便针对 JSON 进行 Java 编程。
在我们使用 Java 编码和解码 JSON 之前，我们需要安装一个可用的 JSON 模块。对于这个教程请下载和安装 JSON.simple，然后把 jsonsimple-1.1.1.jar 文件的路径添加到环境变量 CLASSPATH 中。
JSON.simple 实体映射从左侧到右侧为解码或解析，实体映射从右侧到左侧为编码。
| JSON | Java |
|---|---|
| string | java.lang.String |
| number | java.lang.Number |
| true | false | java.lang.Boolean |
| null | null |
| array | java.util.List |
| object | java.util.Map |
解码时，java.util.List 的默认具体类是 org.json.simple.JSONArray，java.util.Map 的默认具体类是 org.simple.JSONObject。
下面这个简单的示例展示了使用 java.util.HashMap 的子类 JSONObject 编码一个 JSON 对象。这里并没有提供顺序。如果你需要严格的元素顺序，请使用 JSONValue.toJSONString(map) 方法的有序映射实现，比如 java.util.LinkedHashMap。
import org.json.simple.JSONObject;class JsonEncodeDemo { public static void main(String[] args) { JSONObject obj = new JSONObject(); obj.put("name", "foo"); obj.put("num", new Integer(100)); obj.put("balance", new Double(1000.21)); obj.put("is_vip", new Boolean(true)); System.out.print(obj); }}编译和执行上面的程序时，会生成如下所示结果：
{"balance": 1000.21, "num":100, "is_vip":true, "name":"foo"}下面是另一个示例，使用 Java JSONObject 展示了 JSON 对象流：
import org.json.simple.JSONObject;class JsonEncodeDemo{ public static void main(String[] args) { JSONObject obj = new JSONObject(); obj.put("name","foo"); obj.put("num",new Integer(100)); obj.put("balance",new Double(1000.21)); obj.put("is_vip",new Boolean(true)); StringWriter out = new StringWriter(); obj.writeJSONString(out); String jsonText = out.toString(); System.out.print(jsonText); }}编译和执行上面的程序时，会生成如下所示结果：
{"balance": 1000.21, "num":100, "is_vip":true, "name":"foo"}下面的例子使用了 JSONObject 和 JSONArray，其中 JSONObject 就是 java.util.Map，JSONArray 就是 java.util.List，因此我们可以使用 Map 或 List 的标准操作访问它们。
import org.json.simple.JSONObject;import org.json.simple.JSONArray;import org.json.simple.parser.ParseException;import org.json.simple.parser.JSONParser;class JsonDecodeDemo{ public static void main(String[] args) { JSONParser parser=new JSONParser(); String s = "[0,{"1":{"2":{"3":{"4":[5,{"6":7}]}}}}]"; try{ Object obj = parser.parse(s); JSONArray array = (JSONArray)obj; System.out.println("The 2nd element of array"); System.out.println(array.get(1)); System.out.println(); JSONObject obj2 = (JSONObject)array.get(1); System.out.println("Field "1""); System.out.println(obj2.get("1")); s = "{}"; obj = parser.parse(s); System.out.println(obj); s= "[5,]"; obj = parser.parse(s); System.out.println(obj); s= "[5,,2]"; obj = parser.parse(s); System.out.println(obj); }catch(ParseException pe){ System.out.println("position: " + pe.getPosition()); System.out.println(pe); } }}编译和执行上面的程序时，会生成如下所示结果：
The 2nd element of array{"1":{"2":{"3":{"4":[5,{"6":7}]}}}}Field "1"{"2":{"3":{"4":[5,{"6":7}]}}}{}[5][5,2]AJAX 就是异步 JavaScript 和 XML，它是一组用于客户端的相互关联的 Web 开发技术，以创建异步 Web 应用程序。遵循 AJAX 模型，Web 应用程序可以以异步的方式发送数据以及从服务器上检索数据，而不影响现有页面的显示行为。
许多开发人员都在客户端和服务器之间使用 JSON 传递 AJAX 更新。实时更新体育成绩的站点就可以视为一个 AJAX 例子。如果这些成绩要更新到站点上，那么必须要把它们存储到服务器上便于需要时网页能取回这些成绩。这里我们可以使用 JSON 格式的数据。
任何使用 AJAX 更新的数据都可以使用 JSON 格式存储在 Web 服务器上。使用 AJAX，那么 JavaScript 就可以在必要时取回这些 JSON 文件，解析它们，然后做以下两件事情：
下面的代码展示了 JSON 和 AJAX，请把它们保存为 ajax.html 文件。这里的加载函数 loadJSON() 将会使用异步的方式上传 JSON 数据。
<!DOCTYPE html><html lang="en"><head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><script type="application/javascript">function loadJSON(){ var data_file = "https://atts.51coolma.cn/articles/user.json"; var http_request = new XMLHttpRequest(); try{ // Opera 8.0+, Firefox, Chrome, Safari http_request = new XMLHttpRequest(); }catch (e){ // IE 浏览器处理 try{ http_request = new ActiveXObject("Msxml2.XMLHTTP"); }catch (e) { try{ http_request = new ActiveXObject("Microsoft.XMLHTTP"); }catch (e){ // 错误处理 alert("Your browser broke!"); return false; } } } http_request.onreadystatechange = function(){ if (http_request.readyState == 4 ) { // 使用 JSON.parse 解析 JSON 数据 var jsonObj = JSON.parse(http_request.responseText); // jsonObj 变量现在包含数组结构，可以通过 jsonObj.name 和 jsonObj.country 的方式访问 document.getElementById("Name").innerHTML = jsonObj.name; document.getElementById("Country").innerHTML = jsonObj.country; } } http_request.open("GET", data_file, true); http_request.send();}</script><title>tutorialspoint.com JSON</title></head><body><h1>Cricketer Details</h1><table class="src"><tr><th>Name</th><th>Country</th></tr><tr><td><div id="Name">Sachin</div></td><td><div id="Country">India</div></td></tr></table><div class="central"><button type="button" onclick="loadJSON()">Update Details </button></div></body></html>下面就是包含 JSON 格式数据的输入文件 user.json，当我们点击 Update Detail 按钮时会以异步的方式请求这个json。这个文件已经保存到https://atts.51coolma.cn/articles/user.json上了。
{"name": "brett", "country": "Australia"}上面的 HTML 代码会生成如下所示屏幕显示，这里你可以进行 AJAX 实战：
当我们点击 Update Detail 按钮时，应该会得到如下所示的结果，你也可以自己尝试 JSON 和 AJAX，提供你自己的浏览器支持的 JavaScript。
由于CROS的存在，跨域请求处理会被浏览器屏蔽掉，所以ajax请求只能在相同域名下进行请求（比如本站的网页请求本站的Ajax），以上代码在在线运行情况下是可以运行的，但在本地情况下不能运行，望知悉。
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C、C++、C#、Java、JavaScript、Perl、Python等）。这些特性使JSON成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成(一般用于提升网络传输速率)。
JSON的规则很简单： 对象是一个无序的“‘名称/值'对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值' 对”之间使用“,”（逗号）分隔。具体细节参考http://www.json.org/json-zh.html
举个简单的例子：
js 代码
function showJSON() { var user = { "username": "andy", "age": 20, "info": { "tel": "123456", "cellphone": "98765" }, "address": [{ "city": "beijing", "postcode": "222333" }, { "city": "newyork", "postcode": "555666" } ] } alert(user.username); alert(user.age); alert(user.info.cellphone); alert(user.address[0].city); alert(user.address[0].postcode);}这表示一个user对象，拥有username, age, info, address 等属性。
同样也可以用JSON来简单的修改数据，修改上面的例子，得到：
js 代码
function showJSON() { var user = { "username": "andy", "age": 20, "info": { "tel": "123456", "cellphone": "98765" }, "address": [{ "city": "beijing", "postcode": "222333" }, { "city": "newyork", "postcode": "555666" } ] } alert(user.username); alert(user.age); alert(user.info.cellphone); alert(user.address[0].city); alert(user.address[0].postcode); user.username = "Tom"; alert(user.username);}JSON提供了json.js包，下载http://www.json.org/json.js 后，将其引入然后就可以简单的使用object.toJSONString()转换成JSON数据。
js 代码
function showCar() { var carr = new Car("Dodge", "Coronet R/T", 1968, "yellow"); alert(carr.toJSONString());}function Car(make, model, year, color) { this.make = make; this.model = model; this.year = year; this.color = color;}可以使用eval来转换JSON字符到Object
js 代码
function myEval() { var str = '{ "name": "Violet", "occupation": "character" }'; var obj = eval('(' + str + ')'); alert(obj.toJSONString()); }或者使用parseJSON()方法
js 代码
function myEval() { var str = '{ "name": "Violet", "occupation": "character" }'; var obj = str.parseJSON(); alert(obj.toJSONString());}下面使用prototype写一个JSON的ajax例子。
先写一个servlet (我的是servlet.ajax.JSONTest1.java)就写一句话
java 代码
response.getWriter().print("{ "name": "Violet", "occupation": "character" }");再在页面中写一个ajax的请求
js 代码
function sendRequest() {
var url = "/MyWebApp/JSONTest1";
var mailAjax = new Ajax.Request(
url, {
method: 'get',
onComplete: jsonResponse
});
}
function jsonResponse(originalRequest) {
alert(originalRequest.responseText);
var myobj = originalRequest.responseText.parseJSON();
alert(myobj.name);
}
prototype-1.5.1.js中提供了JSON的方法，String.evalJSON(), 可以不使用json.js, 修改上面的方法
js 代码
function jsonResponse(originalRequest) { alert(originalRequest.responseText); var myobj = originalRequest.responseText.evalJSON(true); alert(myobj.name);}JSON还提供了java的jar包 http://www.json.org/java/index.html API也很简单，下面举个例子
在javascript中填加请求参数
js 代码
function sendRequest() { var carr = new Car("Dodge", "Coronet R/T", 1968, "yellow"); var pars = "car=" + carr.toJSONString(); var url = "/MyWebApp/JSONTest1"; var mailAjax = new Ajax.Request( url, { method: 'get', parameters: pars, onComplete: jsonResponse });}使用JSON请求字符串就可以简单的生成JSONObject并进行解析,修改servlet添加JSON的处理(要使用json.jar)
java 代码
private void doService(HttpServletRequest request, HttpServletResponse response) throws IOException {
String s3 = request.getParameter("car");
try {
JSONObject jsonObj = new JSONObject(s3);
System.out.println(jsonObj.getString("model"));
System.out.println(jsonObj.getInt("year"));
} catch (JSONException e) {
e.printStackTrace();
}
response.getWriter().print("{ "name": "Violet", "occupation": "character" }");
}
同样可以使用JSONObject生成JSON字符串，修改servlet
java 代码
private void doService(HttpServletRequest request, HttpServletResponse response) throws IOException { String s3 = request.getParameter("car"); try { JSONObject jsonObj = new JSONObject(s3); System.out.println(jsonObj.getString("model")); System.out.println(jsonObj.getInt("year")); } catch (JSONException e) { e.printStackTrace(); } JSONObject resultJSON = new JSONObject(); try { resultJSON.append("name", "Violet") .append("occupation", "developer") .append("age", new Integer(22)); System.out.println(resultJSON.toString()); } catch (JSONException e) { e.printStackTrace(); } response.getWriter().print(resultJSON.toString());}
js 代码
function jsonResponse(originalRequest) {
alert(originalRequest.responseText);
var myobj = originalRequest.responseText.evalJSON(true);
alert(myobj.name);
alert(myobj.age);
}
下面在重点给大家介绍JS中json数据的处理：
1、 json数据结构(对象和数组)
json对象：var obj = {"name":"xiao","age":12};
json数组：
var objArray = [{"name":"xiao","age":12},{"name":"xiao","age":12}];2、 处理json数据，依赖文件有：jQuery.js
3、Note：数据传输过程中，json数据是以文本，即字符串格式形式存在；
JS语言操作的是JS对象；
所以json字符串与JS对象之间的转换是关键；
4、数据格式
Json字符串：var json_str = ‘{"name":"xiao","age":12}';
Josn对象：var obj = {"name":"xiao","age":12};
JS对象：Object {name: "xiao", age: 12}
5、类型转换
Json字符串——>JS对象，使用方法：
注明：json_str、obj代表的是在本文子标题4中的数据类型；
obj = JSON.parse(json_str);
obj = jQuery.parseJSON(json_str);
Note:传入畸形json字符串(例如：‘{name:"xiao",age:12}')，会抛出异常；
Json字符串格式，严格格式：‘{"name":"xiao","age":12}'
JS对象——>Json字符串：
json_str = JSON. stringify(obj);
NOTE：
1、eval()是JS原生函数，使用该形式：eval(‘('+‘{name:"xiao",age:12}'+')')，并不安全,无法保证类型转换为JS对象；
2、上面3中方法，都经过chrome浏览器测试，下面是测试结果截图；
Json字符串——>JS对象;
JS对象——>Json字符串：
在JavaScript中将JSON的字符串解析成JSON数据格式，一般有两种方式：
一种为使用eval()函数。
使用Function对象来进行返回解析。
使用eval函数来解析，jquery的each方法来遍历
用JQuery解析JSON数据的方法，作为JQuery异步请求的传输对象，JQuery请求后返回的结果是json对象，这里考虑的都是服务器返回JSON形式的字符串的形式，对于利用JSONObject等插件封装的JSON对象，与此亦是大同小异，这里不再做说明。
这里首先给出JSON字符串集，字符串集如下：
var data = "{root:[ {name:'1',value:'0'}, {name:'6101',value:'北京市'}, {name:'6102',value:'天津市'}, {name:'6103',value:'上海市'}, {name:'6104',value:'重庆市'},]}";这里以JQuery异步获取的数据类型——json对象和字符串为依据，分别介绍两种方式获取到的结果处理方式。
eval()
对于服务器返回的JSON字符串，如果jquery异步请求没做类型说明，或者以字符串方式接受，那么需要做一次对象化处理，方式不是太麻烦，就是将该字符串放于eval()中执行一次。这种方式也适合以普通javascipt方式获取json对象，以下举例说明：
// 转换为json对象
var dataObj=eval("("+data+")");
为什么要 eval这里要添加 ("("+data+")"); 呢？
原因在于：eval本身的问题。 由于json是以”{}”的方式来开始以及结束的，在JS中，它会被当成一个语句块来处理，所以必须强制性的将它转换成一种表达式。
加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式（expression）转化为对象，而不是作为语句（statement）来执行。举一个例子，例如对象字面量{}，如若不加外层的括号，那么eval会将大括号识别为JavaScript代码块的开始和结束标记，那么{}将会被认为是执行了一句空语句。所以下面两个执行结果是不同的：
// return undefinedalert(eval("{}");// return object[Object]alert(eval("({})");对于这种写法，在JS中，可以到处看到。如: (function()) {}(); 做闭包操作时等。//输出root的子对象数量alert(dataObj.root.length);$.each(dataObj.root,fucntion(idx,item){ if(idx==0){ return true; } //输出每个root子对象的名称和值 alert("name:"+item.name+",value:"+item.value);});对于一般的js生成json对象，只需要将$.each()方法替换为for语句即可，其他不变。
服务器返回的JSON字符串
对于服务器返回的JSON字符串，如果jquery异步请求将type（一般为这个配置属性）设为“json”，或者利 用$.getJSON()方法获得服务器返回，那么就不需要eval（）方法了，因为这时候得到的结果已经是json对象了，只需直接调用该对象即可，这里以$.getJSON方法为例说明数据处理方法：
$.getJSON("http://www.phpzixue.cn/",{param:"gaoyusi"},function(data){ //此处返回的data已经是json对象 //以下其他操作同第一种情况 $.each(data.root,function(idx,item){ if(idx==0){ //同countinue，返回false同break return true; } alert("name:"+item.name+",value:"+item.value); });});这里特别需要注意的是方式1中的eval()方法是动态执行其中字符串（可能是js脚本）的，这样很容易会造成系统的安全问题。所以可以采用一些规避了eval()的第三方客户端脚本库，比如JSON in JavaScript就提供了一个不超过3k的脚本库。
第二种解析方式就是使用Function对象来完成，它的典型应用就是在JQuery中的AJAX方法下的success等对于返回数据data的解析。
var json='{"name":"CJ","age":18}';data =(new Function("","return "+json))();此时的data就是一个会解析成一个json对象了。
使用JSON
JSON也就是JavaScript Object Notation，是一个描述数据的轻量级语法。JSON的优雅是因为它是JavaScript语言的一个子集。接下来你将看到它为什么如此重要。首先，来比较一下JSON和XML语法。
JSON和XML都使用结构化方法描述数据。例如一个地址簿应用程序可以提供用来产生XML格式的地址卡的web服务：
<?xml version='1.0' encoding='UTF-8'?>
<card>
<fullname>Sean Kelly</fullname>
<org>SK Consulting</org>
<emailaddrs>
<address type='work'>kelly@seankelly.biz</address>
<address type='home' pref='1'>kelly@seankelly.tv</address>
</emailaddrs>
<telephones>
<tel type='work' pref='1'>+1 214 555 1212</tel>
<tel type='fax'>+1 214 555 1213</tel>
<tel type='mobile'>+1 214 555 1214</tel>
</telephones>
<addresses>
<address type='work' format='us'>1234 Main St
Springfield, TX 78080-1216</address>
<address type='home' format='us'>5678 Main St
Springfield, TX 78080-1316</address>
</addresses>
<urls>
<address type='work'>http://seankelly.biz/</address>
<address type='home'>http://seankelly.tv/</address>
</urls>
</card>
使用JSON, 形式如下:
{
"fullname": "Sean Kelly",
"org": "SK Consulting",
"emailaddrs": [
{"type": "work", "value": "kelly@seankelly.biz"},
{"type": "home", "pref": 1, "value": "kelly@seankelly.tv"}
],
"telephones": [
{"type": "work", "pref": 1, "value": "+1 214 555 1212"},
{"type": "fax", "value": "+1 214 555 1213"},
{"type": "mobile", "value": "+1 214 555 1214"}
],
"addresses": [
{"type": "work", "format": "us",
"value": "1234 Main StnSpringfield, TX 78080-1216"},
{"type": "home", "format": "us",
"value": "5678 Main StnSpringfield, TX 78080-1316"}
],
"urls": [
{"type": "work", "value": "http://seankelly.biz/"},
{"type": "home", "value": "http://seankelly.tv/"}
]
}
如你所看到的，JSON有结构化的嵌套数据元素，这一点和XML相似。JSON也是基于文本的，XML也是如此。两者都使用Unicode。 JSON和XML都很容易阅读。主观上，JSON更清晰，冗余更少。JSON WEB站点严格地描述了JSON语法，目前就是这样的。它确实是一个简单的小语言！ XML确实适合标记文档，但是JSON是数据交互的理想格式。每个JSON文档描述了一个这样一个对象，该对象包含有：嵌套对象、数组、字符串、数字、布 尔值或空值。
在这些地址卡例子代码中，JSON版本是更轻量级的，只占用了682字节的空间，而XML版本需要744字节空间。尽管这不是一个可观的节省。而实际的好处则来自解析过程。
XML对比JSON：地位丧失
通过使用XMLHttpRequest对象，可以从你的基于AJAX的应用程序取得XML和JSON文件。典型的，交互代码如下：
var req = new XMLHttpRequest();req.open("GET", "http://localhost/addr?cardID=32", /*async*/true);req.onreadystatechange = myHandler;req.send(/*no params*/null);作为WEB服务器响应，你提供的处理器函数（myHandler函数）被多次调用，为你提供提前终止事务，更新进度条等机会。通常的，只有在web请求完成以后才起作用：那时，你就可以使用返回的数据了。
为了处理XML版本的地址卡数据，myHandler的代码如下：
function myHandler() { if (req.readyState == 4 /*complete*/) { // Update address field in a form with first street address var addrField = document.getElementById('addr'); var root = req.responseXML; var addrsElem = root.getElementsByTagName('addresses')[0]; var firstAddr = addrsElem.getElementsByTagName('address')[0]; var addrText = fistAddr.firstChild; var addrValue = addrText.nodeValue; addrField.value = addrValue; }}值得注意的是你不必解析XML文档：XMLHttpRequest对象自动地解析了，并使responseXML中的DOM树可用。通过使用 responseXML属性，可以调用getElementsByTagName方法查找文档的地址部分，你还可以使用第一个去找到它。然后，可以再次调 用getElementsByTagName在地址部分查找第一个地址元素。这就取得了文档的第一个DOM子节点，就是一个文本节点，并取得节点的值，这 就是你想要的街道地址。最后，可以在表单域中显示结果。
确实不是一个简单的工作，现在，使用JSON再试一下：
function myHandler() { if (req.readyState == 4 /*complete*/) { var addrField = document.getElementById('addr'); var card = eval('(' + req.responseText + ')'); addrField.value = card.addresses[0].value; }}你所做的第一件事情就是解析JSON响应。但是，因为JSON是JavaScript的一个子集，你可以使用JavaScript自己的编译器来解析它， 通过调用eval函数。解析JSON仅需要一行！此外，操纵JSON中的对象就像操纵其他JavaScript对象一样。这显然要比通过DOM树来操纵简 单，例如：
card.addresses[0].value 是第一个街道地址, "1234 Main Stb &"
card.addresses[0].type 是地址类型, "work"
card.addresses[1] 是家庭地址对象
card.fullname 是card的名称, "Sean Kelly"
如果更仔细观察，你可能会发现XML格式中文档至少有一个跟元素，card。这在JSON里是不存在的，为什么？ 大概就是，如果你正在开发JavaScript来访问Web服务，你已经知道你想要得到的。然而，你可以在JSON中这么使用：
{"card": {"fullname": ...}}
使用这个技术，你的JSON文件总是以一个带有单一命名属性的对象开始，该属性标识了对象的种类。
JSON是快速可靠的吗？
JSON提供轻量的小文档，并且JSON在JavaScript更容易使用。XMLHttpRequest自动为你解析了XML文档，而你还要手工解析 JSON文件，但是解析JSON比解析XML更慢么？作者通过几千次的反复测试，使用XMLHttpRequest解析XML和解析JSON，结果是解析 JSON比XML要快10倍！当把AJAX当作桌面应用看待时，速度是最重要的因素，很明显，JSON更优秀。
当然，你不能总是控制服务器端来为AJAX程序产生数据。你还可以使用第三方服务器代替服务器提供XML格式的输出。并且，如果服务器恰好提供JSON，你可以确定你真的想使用它吗?
代码中值得注意的是，你将响应文本直接传入到eval中。如果你控制着服务器，就可以这么做。如果不是，一个恶意服务器可以使你的浏览器执行危险操作。在这样的情况下，你最好使用写在JavaScript中的代码来解析JSON。幸运地，这已经有了。
说到解析，Python爱好者可能注意到JSON不只是JavaScript的子集，它还是Python的一个子集。你可以在Python中直接执行JSON，或者使用安全JSON解析代替。JSON.org网站列举了许多常用JSON解析器。
服务器端的JSON
到现在为止，你或许将焦点注意在运行在客户浏览器中的基于AJAX的web应用程序使用JSON。自然地，首先，JSON格式的数据必须在服务器端产生。 幸运地是，创建JSON或将其他存在的数据转换成JSON是相当简单的。一些WEB应用程序框架，例如TurboGears，自动包括对JSON输出的支 持。
此外商业WEB服务提供商也注意到了JSON。Yahoo最近创建了许多基于JSON的web服务。Yahoo的多种搜索服务，履行计 划，del.icio.us，还有高速公路交通服务也都支持JSON输出。毫无疑问，其他主要WEB服务提供商也将加入到对JSON的支持中。
问题：请编写一个JavaScript函数parseQueryString，它的用途是把URL参数解析为一个对象。
例如：var obj=parseQueryString(url);
创建对象的三种形式：
一：
var Person=new Object();Person.name="Sun";Person.age=24;
二：
var Person=new Object();Person["name"]="Sun";Person["age"]=24;
三：
对象字面量表达式
var Person={name: "Sun",age: 24}
PS：
1、在这个例子中，比较适合使用第二种形式，向obj中添加元素
2、split("&") , 如果url只有一个参数的时候，没有“&”的时候，也不会报错，只会返回array[0]
function parseQueryString(url) { var obj = {}; var keyvalue = []; var key = "", value = ""; var paraString = url.substring(url.indexOf("?") + 1, url.length).split("&"); for (var i in paraString) { keyvalue = paraString[i].split("="); key = keyvalue[0]; value = keyvalue[1]; obj[key] = value; } return obj;}以下介绍了JS根据key值获取URL中的参数值及把URL的参数转换成json对象，js通过两种方式获取url传递参数，代码
示例一：
//把url的参数部分转化成json对象
parseQueryString: function(url) { var reg_url = /^[^/?]+/ ? ([wW] + ) $ / , reg_para = /([^&=]+)=([wW]*?)(&|$|#)/g, arr_url = reg_url.exec(url), ret = {}; if (arr_url && arr_url[1]) { var str_para = arr_url[1], result; while ((result = reg_para.exec(str_para)) != null) { ret[result[1]] = result[2]; } } return ret; }// 通过key获取url中的参数值
getQueryString: function(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null;}示例二：
js通过两种方法获取url传递参数：
js获取url传递参数方法一：
这里是一个获取URL带QUESTRING参数的JAVASCRIPT客户端解决方案，相当于asp的request.querystring，PHP的$_GET
函数:
function GetRequest() { var url = location.search; //获取url中"?"符后的字串 var theRequest = new Object(); if (url.indexOf("?") != -1) { var str = url.substr(1); strs = str.split("&"); for (var i = 0; i < strs.length; i++) { theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]); } } return theRequest;}然后我们通过调用此函数获取对应参数值：
var Request = new Object();Request = GetRequest();var 参数1,参数2,参数3,参数N;参数1 = Request[''参数1''];参数2 = Request[''参数2''];参数3 = Request[''参数3''];参数N = Request[''参数N''];以此获取url串中所带的同名参数
js获取url传递参数方法二 正则分析法：
function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) return (r[2]); return null;}alert(GetQueryString("参数名1"));alert(GetQueryString("参数名2"));alert(GetQueryString("参数名3"));其他参数获取介绍：
//设置或获取对象指定的文件名或路径。
alert(window.location.pathname);
//设置或获取整个 URL 为字符串。
alert(window.location.href);
//设置或获取与 URL 关联的端口号码。
alert(window.location.port);
//设置或获取 URL 的协议部分。
alert(window.location.protocol);
//设置或获取 href 属性中在井号“#”后面的分段。
alert(window.location.hash);
//设置或获取 location 或 URL 的 hostname 和 port 号码。
alert(window.location.host);
//设置或获取 href 属性中跟在问号后面的部分。
alert(window.location.search);
javasscript删除数组的3种方法
1，用shift()方法
shift：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined
var chaomao=[1,2,3,4,5]
var chaomao.shift()//得到1
alert(chaomao)//[2,3,4,5]
2，用pop()方法
pop：删除原数组最后一项，并返回删除元素的值；如果数组为空则返回undefined
var chaomao=[1,2,3,4,5]
var chaomao.pop()//得到5
alert(chaomao)//[1,2,3,4]
前面的方法只能操作数组开头和结尾，无法操作中间项，如果要操作中间的项，使用splice方法
3，用splice方法
这个方法很强大，可以对数组任意项进行增加，删除，替换操作
修改操作：
var chaomao=[1,2,3,4,5]
chaomao.splice(2,1,8,9)
alert(chaomao)//1,2,8,9,4,5
第一个参数是准备操作的数组位置，第二个参数是操作位置后面的数组项数，第三个以后的就是，被替换后的内容
例子就是表示：从chaomao这个数组位置2开始（也就是值为3的那一项，数组下标从0开始的），位置2后的一项，替换成成8，9
如果把第二个参数改为2，也就是chaomao.splice(2,2,8,9)，也就是说位置2后面的两项换成8，9，打印出来的结果就是1,2,8,9,5，3和4这2两项被换掉了
这里需要说明的是，被替换的项数不一定要和替换的项数相等，1项可以被换成3项，5项也可以被换成2项，基于这个原理，我们就用这个方法来对数组进行添加和删除操作
删除操作：
var chaomao=[1,2,3,4,5]
chaomao.splice(2,1)
alert(chaomao)//1,2,4,5
上面例子中，把chaomao中的位置2后的1项替换成空的，因为后面没有内容，结果可以看到，把3这项删除了
添加操作：
var chaomao=[1,2,3,4,5]
chaomao.splice(2,0,8,9)
alert(chaomao)//1,2,8,9,3,4,5
上面例子中，把chaomao中位置2后的0项换成8,9，也就等于添加了两项
其实，删除和添加操作都只是splice修改方法的两种衍生罢了
javasscript删除对象的方法
js中删除对象元素用delete操作符
我们来看看一个例子
var p ={"name": “chaomao”,"age":45,"sex":"male"};delete p.namefor(var i in p){console.log(i);//输出age,sex，name项已经被删除了}<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>javascript里面的数组，json对象，动态添加，修改，删除示例</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> var a = JSON.parse("{"title":"","data":[]}"); var b = JSON.parse("{"id":"2"}"); var c = JSON.parse("{"id":"3"}"); var d = JSON.parse("{"id":"4"}"); var e = JSON.parse("{"id":"5"}"); var f = JSON.parse("{"id":"6"}"); function myObjectPush() { debugger; /* javascript里面的数组，json对象，动态添加，修改，删除示例 只要适合Javascript的方法都是可以用在JSON对象的数组中的！所以还有另外的方法splice( )进行crud操作！*/ //增加属性 $(a).attr("id", "1"); //增加子对象 a.data.push(b); //数组最后加一条记录 a.data.push(c); a.data.push(d); a.data.unshift(d); //数组最前面加一条记录 //修改子对象及属性 a.title = "这是json名字"; //删除子对象 //json的删除有很多种，直接用过 delete json对象方式: delete a.data[1]; a.data.pop(); //删除最后一项 a.data.shift(); //删除第一项 a.data.splice(0, 1); //删除指定子对象，参数：开始位置,删除个数 //替换不删除 a.data.splice(1, 0, e, f); //开始位置,删除个数,插入对象 //替换并删除 a.data.splice(0, 1, e, f);//开始位置,删除个数,插入对象 } </script> </head> <body onload="myObjectPush()"></body></html>现在JSON格式在web开发中越来越受重视，特别是在使用ajax开发项目的过程中，经常需要将json格式的字符串返回到前端，前端解析成JS对象（JSON ）。
ECMA-262(E3)中没有将JSON概念写到标准中，还好在 ECMA-262(E5)中JSON的概念被正式引入了，包括全局的JSON对象和Date的toJSON方法。
解析JSON数据的三种方法的介绍如下：
解析JSON数据的最常用方法是使用javascript的eval()方法，代码如下：
function toJson(str){ var json = eval('(' + str + ')'); return json;}该方法存在性能和安全方面的问题，不建议使用。
function toJson(str){ var json = (new Function("return " + str))(); return json;}function toJson(str){ return JSON.parse(str);}json2.js会在浏览器原生支持JSON.parse的时候选用原生版本，而且它跟ES5是API兼容的。在ES5还没完全普及的现状下，John Resig大神推荐用json2.js主要是为了现在就能用跟ES5兼容的API，日后能平滑过渡到ES5——只要去掉一个import就换过来了。
下载json库
http://www.json.org/json-zh.html自己找javascript的
或者直接去下面的
https://github.com/douglascrockford/JSON-js
php生成json格式
使用页面
代码如下:
<script src="scripts/json.js"></script> alert(data.toJSONString());js 代码
代码如下:
functionshowJSON() { varuser = { "username":"tom", "age":20, "info": {"tel":"123456","cellphone":"98765"}, "address": [ {"city":"shanghai","postcode":"201203"}, {"city":"suzhou","postcode":"200000"} ] } alert(user.username); alert(user.age); alert(user.info.cellphone); alert(user.address[0].city); alert(user.address[0].postcode); }修改
代码如下:
user.username ="jerry";可以使用eval来转换JSON字符到Object
代码如下:
functionmyEval() { varstr = '{"name":"Violet","occupation":"character"}'; varbj = eval('(' + str + ')'); alert(obj.toJSONString()); }functionmyEval() { varstr = '{"name":"Violet","occupation":"character"}'; varbj = str.parseJSON(); alert(obj.toJSONString()); }我们在使用AJAX来做服务器端和客户端交互的时候，一般的做法是让服务器端返回一段JSON字符串，然后在客户端把它解析成JavaScript对象。
解析时用到的方法一般是eval或者new function，而目前IE8和Firefox3.1又内置了原生的JSON对象（据说会有一定的性能提升）。那我们在实际使用的时候怎样从这三种方法（因为性能问题，不考虑用javascript实现的解析）里面来选择呢？面对众多的浏览器，哪种方式的性能是最好的呢？
var count = 10000, o = null, i = 0, jsonString = '{"value":{"items": [{"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}]},"error":null}';eval 解析
代码如下:
var beginTime = new Date(); for ( i = 0; i < count; i++ ) { o = eval( "(" + jsonString + ")" ); } Console.output( "eval:" + ( new Date() - beginTime ) ); new Function 函数解析
代码如下:
var beginTime = new Date(); for ( i = 0; i < count; i++ ) { o = new Function( "return " + jsonString )(); } Console.output( "new Function:" + ( new Date() - beginTime ) ); native 原生解析
代码如下:
if ( typeof JSON !== "undefined" ) { var beginTime = new Date(); for ( i = 0; i < count; i++ ) { o = JSON.parse( jsonString ); } Console.output( "native:" + ( new Date() - beginTime ) ); } else { Console.output( "native:not support!" ); } 
1、Firefox2、3全部垫底，IE6的性能优于IE7（可能和机器不一致有关），Chrome和Safari4的性能远远超出其它浏览器。
2、不同的浏览器下eval和new Function的性能不一致，总的来说eval更好，但Firefox下new Function的性能是eval的一倍，为了更好的兼容各个浏览器，我们把对JSON的解析单独封装成一个对象来处理：
wrapper
var __json = null;if (typeof JSON !== "undefined") { __json = JSON;}var browser = Browser;var JSON = { parse: function(text) { if (__json !== null) { return __json.parse(text); } if (browser.gecko) { return new Function("return " + text)(); } return eval("(" + text + ")") }};var beginTime = new Date();for (i = 0; i < count; i++) { o = JSON.parse(jsonString);}Console.output("wrapper:" + (new Date() - beginTime));
主要修改的代码：
//eval 2: var beginTime = new Date(); for (i = 0; i < count; i++) { o = eval("(" + '{"value":{"items": [{"x":' + i + ',"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}]},"error":null}' + ")");}Console.output("eval:" + (new Date() - beginTime));//new Function beginTime = new Date();for (i = 0; i < count; i++) { o = new Function("return " + '{"value":{"items": [{"x":' + i + ',"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}]},"error":null}')();}Console.output("new Function:" + (new Date() - beginTime));//native if (typeof JSON !== "undefined") { beginTime = new Date(); for (i = 0; i < count; i++) { o = JSON.parse('{"value":{"items": [{"x":' + i + ',"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}]},"error":null}'); } Console.output("native:" + (new Date() - beginTime));} else { Console.output("native:not support!");}//wrapper var __json = null;if (typeof JSON !== "undefined") { __json = JSON;}var browser = Browser;var JSON = { parse: function(text) { if (__json !== null) { return __json.parse(text); } if (browser.gecko) { return new Function("return " + text)(); } return eval("(" + text + ")") }};beginTime = new Date();for (i = 0; i < count; i++) { o = JSON.parse('{"value":{"items": [{"x":' + i + ',"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}]},"error":null}');}Console.output("wrapper:" + (new Date() - beginTime));<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Parse JsonString</title> </head> <body> <div id="consoleRegion"></div> <script type="text/javascript"> //yui var Browser = function() { var o = { ie: 0, opera: 0, gecko: 0, webkit: 0 }; var ua = navigator.userAgent, m; if ( ( /KHTML/ ).test( ua ) ) { o.webkit = 1; } // Modern WebKit browsers are at least X-Grade m = ua.match(/AppleWebKit/([^s]*)/); if (m&&m[1]) { o.webkit=parseFloat(m[1]); } if (!o.webkit) { // not webkit // @todo check Opera/8.01 (J2ME/MIDP; Opera Mini/2.0.4509/1316; fi; U; ssr) m=ua.match(/Opera[s/]([^s]*)/); if (m&&m[1]) { o.opera=parseFloat(m[1]); } else { // not opera or webkit m=ua.match(/MSIEs([^;]*)/); if (m&&m[1]) { o.ie=parseFloat(m[1]); } else { // not opera, webkit, or ie m=ua.match(/Gecko/([^s]*)/); if (m) { o.gecko=1; // Gecko detected, look for revision m=ua.match(/rv:([^s)]*)/); if (m&&m[1]) { o.gecko=parseFloat(m[1]); } } } } } return o; }(); var Console = { consoleRegion: null, getRegion: function() { if ( this.consoleRegion === null ) { this.consoleRegion = document.getElementById( "consoleRegion" ); } return this.consoleRegion; }, output: function( text ) { this.getRegion().innerHTML += "<br/>" + text; } }; //test code var count = 10000, o = null, i = 0, jsonString = '{"value":{"items": [{"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}]},"error":null}'; //eval var beginTime = new Date(); for ( i = 0; i < count; i++ ) { o = eval( "(" + jsonString + ")" ); } Console.output( "eval:" + ( new Date() - beginTime ) ); //new Function beginTime = new Date(); for ( i = 0; i < count; i++ ) { o = new Function( "return " + jsonString )(); } Console.output( "new Function:" + ( new Date() - beginTime ) ); //native if ( typeof JSON !== "undefined" ) { beginTime = new Date(); for ( i = 0; i < count; i++ ) { o = JSON.parse( jsonString ); } Console.output( "native:" + ( new Date() - beginTime ) ); } else { Console.output( "native:not support!" ); } //wrapper var __json = null; if ( typeof JSON !== "undefined" ) { __json = JSON; } var browser = Browser; var JSON = { parse: function( text ) { if ( __json !== null ) { return __json.parse( text ); } if ( browser.gecko ) { return new Function( "return " + text )(); } return eval( "(" + text + ")" ) } }; beginTime = new Date(); for ( i = 0; i < count; i++ ) { o = JSON.parse( jsonString ); } Console.output( "wrapper:" + ( new Date() - beginTime ) ); //alert( o.value.items[0].z ); </script> </body> </html> package com.ghj.servlet; import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.google.gson.Gson; public class JsonServlet extends HttpServlet { private static final long serialVersionUID = -699926309344319475L; public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/json;charset=utf-8"); PrintWriter out = response.getWriter(); Map<String, List<String>> dataMap = new HashMap<String, List<String>>(); List<String > gradeList = new ArrayList<String>();//年级 gradeList.add("初中一年级"); gradeList.add("初中二年级"); gradeList.add("初中三年级"); dataMap.put("gradeList", gradeList); List<String> courseList = new ArrayList<String>();//课程 courseList.add("语文"); courseList.add("数学"); courseList.add("物理"); dataMap.put("courseList", courseList); out.write(new Gson().toJson(dataMap)); out.flush(); out.close(); } } <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>首页</title> <script type="text/javascript" src="<%=basePath%>js/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function(){ $("#json").click(function(){ $.ajax({ type: "POST", url: "<%=basePath%>JsonServlet", success: function(data){ var grades = data.gradeList; for(var index in grades){//年级 console.log(grades[index]); } var courses = data.courseList; for(var index in courses){//课程 console.log(courses[index]); } }, error:function(){ alert("数据请求失败！"); } }); }); }); </script> </head> <body> <button id="json">JavaScript解析JSON字符串</button> </body> </html> 本文通过for循环来获取json结点数据，需要的朋友可以参考以下这串json数据用来存储预加载的图片路径：
var imgData = [{ name: "p1", src: "images/p1.jpg" }, { name: "p2", src: "images/p2.jpg" }, { name: "p3", src: "images/p3.jpg" }, { name: "p4", src: "images/p4.jpg" }, { name: "p5", src: "images/p5.jpg" }]下面这个函数可通过json每行的name来获取该行的路径src，让我们看一下代码：
function getData(name) { var picArr = imgData; var picSrc; for (var i = 0; i < picArr.length; i++) { var cur_person = picArr[i]; if (cur_person.name == name) { picSrc = cur_person.src; } } return picSrc;}函数执行后将返回该行的src。
var g = getData("p1");console.log(g);输出后即可看到结果为：images/p1.jpg
JS对象和JSON格式数据的相互转换其实就是两个问题：JS对象转换成为JSON格式数据、JSON格式数据转换成为JS对象。目前的项目数据交互几乎都用JQuery，所以处理流程是：前端页面数据-》JS对象-》jQuery提交-》python处理，另外一种就是倒过来。python肯定不能直接处理JS对象数据，所以要把JS对象转换成为python能处理的一种数据格式（通常是字典dict），同样，python取数据反馈到前端也要把字典数据转换成JS能处理的对象，这个中间转换数据格式通常就是JSON。
object 本身就是无对象的集合，因此在用 for-in 语句遍历对象的属性时，遍历出的属性顺序与对象定义时不同。
var json1 = { "2":{"name":"第1条"}, "1":{"name":"第2条"}, "3":{"name":"第3条"}}var json2 = [ {"name":"第1条"}, {"name":"第2条"}, {"name":"第3条"}]for(var i in json1){ alert(json1[i].name);}//正确for(var i in json2){ alert(json2[i].name);}看看for-in代码在个浏览器差异：
下面通过一段代码单独给大家介绍JS 循环遍历JSON数据
JSON数据如：
{"options":"[{/"text/":/"王家湾/",/"value/":/"9/"},{/"text/":/"李家湾/",/"valu
e/":/"10/"},{/"text/":/"邵家湾/",/"value/":/"13/"}]"}
用js可以写成：
var data=[{name:"a",age:12},{name:"b",age:11},{name:"c",age:13},{name:"d",age:14}]; for(var o in data){ alert(o); alert(data[o]); alert("text:"+data[o].name+" value:"+data[o].age ); }或者是：
<script type="text/javascript"> function text(){ var json = {"options":"[{/"text/":/"王家湾/",/"value/":/"9/"},{/"text/":/"李家湾/",/"value/":/"10/"},{/"text/":/"邵家湾/",/"value/":/"13/"}]"} json = eval(json.options) for(var i=0; i<json.length; i++) { alert(json[i].text+" " + json[i].value) } } </script>js中遍历数组的有两种方式
var array = ['a']//标准的for循环for (var i = 1; i < array.length; i++) { alert(array[i])}//foreach循环for (var i in array) { alert(array[i])}正常情况下上面两种遍历数组的方式结果一样。首先说两者的第一个区别
标准的for循环中的i是number类型,表示的是数组的下标,但是foreach循环中的i表示的是数组的key是string类型,因为js中一切皆为对象。自己试试 alert(typeof i);这个区别是小问题。现在我加上如下代码，上面的执行结果就不一样了。
//扩展了js原生的ArrayArray.prototype.test=function(){ }再此建议两点
1.不要用for in遍历数组，全部统一采用标准的for循环变量数组(我们无法保证我们引入的js是否会采用prototype扩展原生的Array)
2.如果要对js的原生类扩展的时候，不要采用prototype了
代码如下:
/* author: liulf function: var __db_cpcj=vCpcj; var __db_cp=vCp; var vCp={"cppage":[ {"cpdh":"A01000101","page":"1","ca":"1309-36-0","mc":"硫铁矿","ename":"Pyrite","bm":"黄铁矿"}, {"cpdh":"A01000201","page":"1","ca":"1309-36-0","mc":"硫精砂","ename":"Pyrite concentrate;Sulfur concentrate","bm":""}, {"cpdh":"A01000202","page":"1","ca":"1309-36-0","mc":"硫精矿粉","ename": "Powdered pyrite concentrate;Pyrites concentrate,powder;Sulfur concentrate,powder","bm":"硫精矿"},{"cpdh":"A02000101","page":"1","ca":"","mc":"磷矿石","ename":"Phosphorus ore","bm":""}, {"cpdh":"A02000111","page":"2","ca":"","mc":"磷矿砂","ename":"Phosphorite grit","bm":""}, {"cpdh":"A02000201","page":"2","ca":"","mc":"磷矿粉","ename":"Phosphate rock powder","bm":""},{"cpdh":"A03000101","page":"2","ca":"12447-04-0","mc":"硼矿石","ename":"Ascharite;Boric ore","bm":"硼镁矿"}, {"cpdh":"A04000101","page":"2","ca":"","mc":"钾长石","ename":"Potash feldspar;Potassium feldspars","bm":""}, {"cpdh":"A04000201","page":"2","ca":"12003-63-3","mc":"长石粉","ename":"Feldspar powder","bm":""}, {"cpdh":"A04000301","page":"2","ca":"","mc":"光卤石","ename":"Carnallite","bm":""} ]} */function ObjSearch() { this.kw = ''; this.searchCpcj = function() { $(vCpcj).each(function() {}); } this.searchCp = function() { // var json = eval(vCp.cppage) // for(var i=0; i<json.length; i++) // { // alert(json[i].cpdh+" " + json[i].page) // break; // } $.each(vCp.cppage, function(index, content) { document.write('<div>' + content.cpdh + '</div><br />'); }); }}js 如何遍历jsonc对象？其实方法很简单。
比如有如下json对象：var obj ={”name”:”冯娟”,”password”:”123456″,”department”:”技术部”,”sex”:”女”,”old”:30};
for (var p in obj) { str = str + obj[p] + ','; return str;}综合实例：
var array = { "a": "abc", "b": [1, 2, 3, 4, 5, 6], "c": 3, "d": { "name": "james", "age": 28 }, "e": null, "f": true};var arrayObj = { "a": { "name": "kobe", "age": 34 }, "b": { "name": "lofo", "age": 28 }};//遍历array方式1for (var x in array) { if (typeof array[x] == 'object' && array[x] != null) { for (var y in array[x]) { alert("key = " + y + " value = " + array[x][y]); } } else { alert("key = " + x + " value = " + array[x]); // 非array object }}//遍历array方式2$.each(array, function(k, v) { var a = typeof(v); //数组与对象为object类型，其他分别是string与number类型 //此时的k代表a、b、c、d，v代表对应的值 if (typeof(v) == "object") { //获取数组与对象后，再去遍历这个数组与对象 $.each(v, function(k1, v1) { window.alert("key = " + k1 + " value=" + v1); }); } else { window.alert("key = " + k + " value=" + v); }});//遍历arrayObj方式1for (var x in arrayObj) { for (var key in arrayObj[x]) { window.alert("key=" + key + " value=" + arrayObj[x][key]); }}//遍历arrayObj方式2$.each(arrayObj, function(key, value) { $.each(value, function(k, v) { window.alert("key=" + k + " value=" + v); });});//遍历arrayObj方式3$.each(arrayObj, function(key, value) { window.alert("key=" + key + " valueName=" + value.name + " valueAge=" + value.age);});var UserList = [ { "UserID": 11, "Name": { "FirstName": "Truly", "LastName": "Zhu" }, "Email": "" }, { "UserID": 12, "Name": { "FirstName": "Jeffrey", "LastName": "Richter" }, "Email": "" }, { "UserID": 13, "Name": { "FirstName": "Scott", "LastName": "Gu" }, "Email": "" }]$.each(UserList, function(k, v) { $.each(v, function(k1, v1) { if (typeof(v1) == "object") { $.each(v1, function(k2, v2) { window.alert("key=" + k2 + " value=" + v2); }); } else { window.alert("key=" + k1 + " value=" + v1); } });});var userArray = [ { "UserID": 11, "Name": { "FirstName": "Truly", "LastName": "Zhu" }, "Email": "" }, { "UserID": 12, "Name": { "FirstName": "Jeffrey", "LastName": "Richter" }, "Email": "" }, { "UserID": 13, "Name": { "FirstName": "Scott", "LastName": "Gu" }, "Email": "" }];for (var i in userArray) { for (var k in userArray[i]) { if (typeof userArray[i][k] == "object" && userArray[i][k] != null) { for (var j in userArray[i][k]) { window.alert("key=" + j + "--value=" + userArray[i][k][j]); } } else { window.alert("key=" + k + "--value=" + userArray[i][k]); } }}代码示例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><SCRIPT LANGUAGE="JavaScript"> var t="{'firstName': 'cyra', 'lastName': 'richardson', 'address': { 'streetAddress': '1 Microsoft way', 'city': 'Redmond', 'state': 'WA', 'postalCode': 98052 },'phoneNumbers': [ '425-777-7777','206-777-7777' ] }";var jsonobj=eval('('+t+')');//单个JSON对象时要加括号，JSON数组就不需要了 alert(jsonobj.firstName); alert(jsonobj.lastName);var t2="[{name:'zhangsan',age:'24'},{name:'lisi',age:'30'},{name:'wangwu',age:'16'},{name:'tianqi',age:'7'}] ";var myobj=eval(t2);for(var i=0;i<myobj.length;i++){ alert(myobj[i].name); alert(myobj[i].age);}var t3="[['<a href=# onclick=openLink(14113295100,社旗县国税局桥头税务所,14113295100,d6d223892dc94f5bb501d4408a68333d,swjg_dm);>14113295100</a>','社旗县国税局桥头税务所','社旗县城郊乡长江路西段']]";//通过eval() 函数可以将JSON字符串转化为对象var obj = eval(t3);for(var i=0;i<obj.length;i++){ for(var j=0;j<obj[i].length;j++){alert(obj[i][j]); }}/*stringifier 函数的作用跟 parse 相反， 用来将一个js对象转换为 JSON 文本。var jsonText = JSON.stringify(obj);alert(jsonText);//如果基于安全的考虑的话，最好是使用一个 JSON 解析器。 一个 JSON 解析器将只接受 JSON 文本。所以是更安全的。var myObject = JSON.parse(myJSONtext, filter); //可选的 filter 参数将遍历每一个value key 值对， 并进行相关的处理。如：//如myData = JSON.parse(text, function (key, value) { return key.indexOf('date') >= 0 ? new Date(value) : value; });//stringifier 函数的作用跟 parse 相反， 用来将一个js对象转换为 JSON 文本。var myJSONText = JSON.stringifier(myObject);*/</SCRIPT></HEAD><BODY></BODY></HTML>
附加JSP后台拼JSON字符串
<%@ page contentType="text/html;charset=GBK" %><%@ taglib uri="/tags/web-flex" prefix="flex"%><%@ taglib uri="/tags/web-grid" prefix="grid"%><%@ taglib uri="/tags/web-html" prefix="html"%><%@ taglib uri="/tags/web-sotower" prefix="sotower"%><%@ taglib uri="/tags/sotower-bsp" prefix="bsp"%><%@page import="java.util.List"%><%@page import="com.wuynw.ygxx.po.WyYuang"%><% List reslist=(List)request.getAttribute("flexgrid.data");StringBuilder sb=new StringBuilder();sb.append("["); for(int i=0;i<reslist.size();i++) { WyYuang w=(WyYuang)reslist.get(i); if(i>0) { sb.append(","); } sb.append("{").append(""").append("id").append(""").append(":"); sb.append(""").append(w.getId()).append(""").append(","); sb.append(""").append("name").append(""").append(":"); sb.append(""").append(w.getXingm()).append(""").append(","); sb.append(""").append("gongh").append(""").append(":"); sb.append(""").append(w.getGongh()).append(""").append(","); sb.append(""").append("zhiw").append(""").append(":"); sb.append(""").append(w.getZhiw()).append(""").append(","); sb.append(""").append("ruzrq").append(""").append(":"); sb.append(""").append(w.getRuzrq()).append(""").append("}");}sb.append("]");out.print(sb.toString());%>直接在JS里创建JSON数据，然后遍历使用~
创建代码如下：（创建的是JSON对象）
var YearSelect = {}; var Year = 2014; var DateOption; for (var i = Year; i < Year + 12; i++) { DateOption = {'Year':i, 'Month':i-Year+1}; / alert(DateOption.Year) YearSelect[i] = DateOption; }这里是创建一个JSON对象，包括了年份和月份的数据。
我为什么创建JSON对象，是因为我对JSON对象比较熟悉。php后台返回的也是json对象。
json对象没有length属性~~
所以遍历的话要：
for(var key in YearSelect){ alert(YearSelect[key].Year); alert(YearSelect[key].Month); }这样就可以了~
记住一定要分辨好json的对象和数组~不然就一直是undenfined
下面给大家介绍js数组添加json数据的两种方式。
// 第一种方式
personInfo: [],for(var i = 0; i < _STAGE.passengerInfoArray.length; i++){var name = _STAGE.passengerInfoArray[i];var person = {v:name, text:name};this.personInfo.push(person);}// 第二种方式
var passengerInfo = {};passengerInfo.psgTypeDesc = psgTypeDesc;passengerInfo.flightPrice = flightPrice;_STAGE.passengerInfoArray.push(passengerInfo);1. 定义一维数组：var s1=new Array();
s1=[1,2,3,4]或者s1[0]=1,s1[1]=2,s1[3]=3,s1[4]=4;
alert(s1[0]);
结果为1；
2. 定义二维素组：var s1=new Array();
var s1=[[3,1],[2,3,4],3,[4,5,6,7,8]];
alert(s1[1][0]);
结果为2；
1. json对象
var status_process = { " name5" : '闲置期', "name1" : '播种期', "name2" : '苗期', "name3" : '生长期', "name4" : '采收期' } alert(status_process);结果为：Object:Object;
2. json字符串
所谓json字符串，是指该字符串变量的值与json的格式相同，但是不是json对象，比如：
var s1="{";var s2 = " 'name5' : '闲置期', 'name1' : '播种期','name2' : '苗期','name3' : '生长期','name4' : '采收期'";var s3="}";var status_process=s1+s2 +s3；虽然status_process的值符合json对象的格式，但是它不是对象，只是一个字符串(是拼凑出来的)；
将字符串转换为json对象使用函数eval，eval("(" + status_process+ ")")；
结论：从后台传入到前台的是json字符串，不是真正的json对象，因此需要使用eval函数转换。
3. json对象的使用
var status_process = { name5 : '闲置期', name1 : '播种期', name2 : '苗期', name3 : '生长期', name4 : '采收期' }; alert(status_process["name5"]); alert(status_process.name5);两个都为:闲置期
4. json二维对象
var status_process = { name5 : {name3:'空闲闲置期'}, name1 : '播种期', name2 : '苗期', name3 : '生长期', name4 : '采收期'};alert(status_process["name5"]["name3"]);alert(status_process.name5.name3);结果都为：'空闲闲置期'
本文提供了 JS 循环 JSON 数据列，以及 JS 循环遍历 JSON 数据的例子，供大家学习参考。
var len = json.length;for (var i = 0; i < len; i++){for (obj in json[i]){var obj2 = obj;}}
用js循环遍历的方法如下：
//方法1，var data=[{name:"a",age:12},{name:"b",age:11},{name:"c",age:13},{name:"d",age:14}]; for(var o in data){ alert(o); alert(data[o]); alert("text:"+data[o].name+" value:"+data[o].age ); } //方法2，<script type="text/javascript"> function text(){ var json = {"options":"[{/"text/":/"王家湾/",/"value/":/"9/"},{/"text/":/"李家湾/",/"value/":/"10/"},{/"text/":/"邵家湾/",/"value/":/"13/"}]"} json = eval(json.options) for(var i=0; i<json.length; i++) { alert(json[i].text+" " + json[i].value) } } </script>JS 遍历 JSON 返回的 map 内容示例代码
代码如下:
var yData = [];//Y轴数据 var xData = [];//X轴数据 $(data.rows).each(function(i){ var obj = data.rows[i]; // alert(obj.key); // alert(obj.value); yData.push(obj.key); //动态取值 xData.push(obj.value); //动态取值 }); 由于JS不能直接遍历Map，但是可以遍历JSON对象，所以先将Map转为JSON数据，再由JS去解析遍历JSON对象，就达到了间接遍历Map的目的：
代码如下：var proIdArray = new Array();var proNameArray = new Array();// Deal with the project names. var theProjectsObj = JSON.parse(result.data["projectIdsNames"]);for (var proId in theProjectsObj) { proNameArray.push(theProjectsObj[proId]); proIdArray.push(proId);}本文实例讲述了JSP+jQuery使用Ajax方式调用JSON的实现方法，在这里分享给大家以供大家参考，具体的实现以及代码如下所示：
前台：
<script type="text/javascript" src="jquery-1.5.1.min.js"></script><script type="text/javascript"> //test function test(uid) { if(confirm("确定该用户操作"+uid+"吗？")) { var date = new Date(); var param = {uid:uid}; jQuery.get("test.jsp?para=" + date, param, function(data){ if(data != null) { var result = data.result; //alert("data==="+data); if(result == 1) { alert("操作失败"); } if(result == 0) { alert("操作失败。"); //document.location.href = document.location; //window.location.reload(); } } }); } }</script><a href="javascript:void(0);" onclick="test(111111111111111111);">submit</a>后台：
test.jsp：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%response.setContentType("application/x-json;charset=UTF-8");String uid=request.getParameter("uid");int ret=0;String result = "{"result":" + ret + "}";out.print(result);%>注意：返回json格式
如{"result":0}
需要设置 ：
代码如下:
response.setContentType("application/x-json;charset=UTF-8");jsp+jquery+ajax+json
Person、Address 2个类描述一个人，用ajax把数据取回显示在页面上，在DemoServlet里组装数据，项目用到的文件
json-lib-2.1-jkd15.jar
commons-lang-2.1.jar
commons-logging.jar
commons-collections-3.2.jar
commons-beanutils.jar
jquery.js
json.js
下面是详细代码：
Person:
public class Person implements java.io.Serializable{ private String name; private String sex; private Integer age; private Address address; public String getName() { return name; } public void setName(String name) { this.name = name; } public String getSex() { return sex; } public void setSex(String sex) { this.sex = sex; } public Integer getAge() { return age; } public void setAge(Integer age) { this.age = age; } public Address getAddress() { return address; } public void setAddress(Address address) { this.address = address; } }
Address:
public class Address implements java.io.Serializable{ private String province; private String city; private String country; public Address() { } public Address(String province, String city, String country){ this.province =province; this.city = city; this.country = country; } public String getProvince() { return province; } public void setProvince(String province) { this.province =province; } public String getCity() { return city; } public void setCity(String city) { this.city = city; } public String getCountry() { return country; } public void setCountry(String country) { this.country = country; } }
DemoServlet:
import java.io.IOException; import java.util.ArrayList; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONArray; import net.sf.json.JSONObject; import org.wncnke.json.pojo.Address; import org.wncnke.json.pojo.Person; public class DemoServlet extends HttpServlet{ @Override protected void doGet(HttpServletRequest request,HttpServletResponse response) throwsServletException, IOException { doPost(request, response); } @Override protected void doPost(HttpServletRequest request,HttpServletResponse response) throwsServletException, IOException { response.setContentType("text/xml;charset=utf-8"); response.setHeader("Cache-Control","no-cache"); try{ Personperson1 = new Person(); person1.setName("小王"); person1.setSex("女"); person1.setAge(23); person1.setAddress(newAddress("辽宁省","大连市","高新园区")); List<Person> list = new ArrayList<Person>(); list.add(person1); try{ //取集合 JSONArray jsonArray = JSONArray.fromObject(list); JSONObject jsonObject = new JSONObject(); jsonObject.put("person", jsonArray); response.getWriter().write(jsonObject.toString()); } catch(IOException e) { e.printStackTrace(); } }catch(Exception e){ e.printStackTrace(); } } }web.xml:
<?xml version="1.0"encoding="UTF-8"?> <web-app xmlns="http://caucho.com/ns/resin" xmlns:resin="http://caucho.com/ns/resin/core"> <display-name>json</display-name> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> <servlet> <servlet-name>DemoServlet</servlet-name> <servlet-class>org.wncnke.json.servlet.DemoServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>DemoServlet</servlet-name> <url-pattern>/demoServlet</url-pattern> </servlet-mapping> </web-app>index.jsp:
view plaincopy to clipboardprint?<%@ page language="java" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath =request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <mce:script language="javascript" src="script/jquery.js"mce_src="script/jquery.js"></mce:script> <mce:script language="javascript" src="script/json.js"mce_src="script/json.js"></mce:script> <mce:script language="javascript"><!-- function addPerson(){ $.getJSON("demoServlet",null,function call(data){ var list = data.person; $.each(list, function(i, p){ var row =$("#tr").clone(); row.find("#name").text(p.name); row.find("#age").text(p.age); row.find("#sex").text(p.sex); row.find("#address").text(p.address.province + p.address.city +p.address.country); row.appendTo("#tbody"); }); }); } // --></mce:script> </head> <body> <input type="button" value="JsonView"onClick="addPerson();"> <div id="dateMessage"> <table id="planTable"border="1"> <tr> <td>Name</td> <td>Sex</td> <td>Age</td> <td>Address</td> </tr> <tbody id="tbody"> <trid="tr"> <td id="name"></td> <td id="sex"></td> <td id="age"></td> <td id="address"></td> </tr> </tbody> </table> </div> </body> </html>关于JSONP的概念以及为什么要使用JSONP您可以参考JSONP教程，本文的重点在于演示下在JQUERY中的Ajax方法怎样通过JSONP进行远程调用。
首先介绍下$.ajax的参数：
服务器端我们采用MVC的ACTION来返回数据
public class HomeController : Controller { // // GET: /Home/ public ActionResult Index() { returnView(); } public ActionResult ReturnJson() { string callback = Request.QueryString["callback"]; string json = "{'name':'张三','age':'20'}"; string result = string.Format("{0}({1})", callback, json); returnContent(result); } } 客户端使用jsonp来传输数据
@{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } <script src="~/Scripts/jquery-1.7.1.min.js"type="text/javascript"> </script> <script type="text/javascript"> functionSendData() { $.ajax({ type: "get", async: false, url: "/home/ReturnJson", dataType: "jsonp", success: function(data){ alert(data.name); }, error: function(){ alert('fail'); } }); } </script> <input type="button" value="提交" onclick="SendData();"/> 点击提交按钮后，发现服务器端的Request.QueryString["callback"]返回一个随机函数名。这样就被设置成JSONP格式来传递数据了
可以在传递过程中自定义函数名，只要使用jsonpCallback参数就可以了。
<script type="text/javascript"> functionSendData() { $.ajax({ type: "get", async: false, url: "/home/ReturnJson", dataType: "jsonp", jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback) jsonpCallback: "receive",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据 success: function(data) { alert(data.name); }, error: function() { alert('fail'); } }); } functionreceive(data) { alert(data.age); } </script> Add1: 使用AJAX访问aspx页面和asmx使用方法是一样的,区别在于aspx页面中的方法必须为静态方法,而asmx不需要.
1.新建demo.aspx页面。
2.首先在该页面的后台文件demos.aspx.cs中添加引用。
using System.Web.Services;3.无参数的方法调用.
大家注意了，这个版本不能低于.net framework 2.0。2.0已下不支持的。后台代码：
[WebMethod] public static string SayHello() { //一定是要静态方法，并且声明为[WebMethod] 前端才可以访问return "Hello Ajax!"; JS代码：
$(function() { $("#btnOK").click(function() { $.ajax({ //要用post方式 type: "Post", //方法所在页面和方法名 url: "Demo.aspx/SayHello", //没有参数也一定要传一个空参数 data: "{}", contentType: "application/json; charset=utf-8", dataType: "json", success: function(data) { //返回的数据用data.d获取内容 alert(data.d); }, error: function(err) { alert(err); } }); //禁用按钮的提交 return false; }); }); 页面代码：
<form id="form1" runat="server"> <div> <%--<asp:Button ID="btnOK" runat="server" Text="验证用户" />--%> <%--因为是异步，所以只能使用html,上面的服务器控件是错误的 可以测试下--%> <input id="btnOK" type="button" value="button" /> </div></form>
运行效果如下：
3.有参数方法调用后台代码：
[WebMethod] public static string GetStr(string str, string str2) { return str + str2; }
JS代码：
$(function() { $("#btnOK").click(function() { $.ajax({ type: "Post", url: "demo.aspx/GetStr", //方法传参的写法一定要对，str为形参的名字,str2为第二个形参的名字 data: "{'str':'我是','str2':'XXX'}", contentType: "application/json; charset=utf-8", dataType: "json", success: function(data) { //返回的数据用data.d获取内容 alert(data.d); }, error: function(err) { alert(err); } }); //禁用按钮的提交 return false; }); }); 运行效果如下：
4.返回数组方法
后台代码：
[WebMethod] public static List<string> GetArray() { List<string> li = new List<string>(); for (int i = 0; i < 10; i++) li.Add(i + ""); return li; }
JS代码：
$(function() { $("#btnOK").click(function() { $.ajax({ type: "Post", url: "demo.aspx/GetArray", contentType: "application/json; charset=utf-8", dataType: "json", success: function(data) { //插入前先清空ul $("#list").html(""); //递归获取数据 $(data.d).each(function() { //插入结果到li里面 $("#list").append("<li>" + this + "</li>"); }); alert(data.d); }, error: function(err) { alert(err); } }); //禁用按钮的提交 return false; }); }); 页面代码：
<form id="form1" runat="server"><div> <asp:Button ID="btnOK" runat="server" Text="验证用户" /></div><ul id="list"></ul></form>运行结果图：
下面是Jquery中AJAX参数详细列表：
| 参数名 | 类型 | 描述 |
| url | String | (默认: 当前页地址) 发送请求的地址。 |
| type | String | (默认: "GET") 请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。 |
| timeout | Number | 设置请求超时时间（毫秒）。此设置将覆盖全局设置。 |
| async | Boolean | (默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。 |
| beforeSend | Function | 发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。 function (XMLHttpRequest) { this; // the options for this ajax request} |
| cache | Boolean | (默认: true) jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。 |
| complete | Function | 请求完成后回调函数 (请求成功或失败时均调用)。参数： XMLHttpRequest 对象，成功信息字符串。 function (XMLHttpRequest, textStatus) { this; // the options for this ajax request} |
| contentType | String | (默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。 |
| data | Object, String | 发 送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。 |
| dataType | String | 预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText，并作为回调函数参数传递，可用值: "xml": 返回 XML 文档，可用 jQuery 处理。 "html": 返回纯文本 HTML 信息；包含 script 元素。 "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。 "json": 返回 JSON 数据 。 "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。 |
| error | Function | (默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。这个方法有三个参数：XMLHttpRequest 对象，错误信息，（可能）捕获的错误对象。 function (XMLHttpRequest, textStatus, errorThrown) { // 通常情况下textStatus和errorThown只有其中一个有值 this; // the options for this ajax request} |
| global | Boolean | (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件 |
| ifModified | Boolean | (默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。 |
| processData | Boolean | (默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。 |
| success | Function | 请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态 function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc... this; // the options for this ajax request} |
代码：
$(document).ready(function() { jQuery("#clearCac").click(function() { jQuery.ajax({ url: "/Handle/Do.aspx", type: "post", data: { id: '0' }, dataType: "json", success: function(msg) { alert(msg); }, error: function(XMLHttpRequest, textStatus, errorThrown) { alert(XMLHttpRequest.status); alert(XMLHttpRequest.readyState); alert(textStatus); }, complete: function(XMLHttpRequest, textStatus) { this; // 调用本次AJAX请求时传递的options参数 } }); }); });一、error：function (XMLHttpRequest, textStatus, errorThrown) { }
(默 认: 自动判断 (xml 或 html)) 请求失败时调用时间。参数有以下三个：XMLHttpRequest 对象、错误信息、（可选）捕获的错误对象。如果发生了错误，错误信息（第二个参数）除了得到null之外，还可能是"timeout", "error", "notmodified" 和 "parsererror"。
textStatus:
"timeout", "error", "notmodified" 和 "parsererror"。
二、error事件返回的第一个参数XMLHttpRequest有一些有用的信息：
XMLHttpRequest.readyState:
状态码
0 － （未初始化）还没有调用send()方法
1 － （载入）已调用send()方法，正在发送请求
2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
3 － （交互）正在解析响应内容
4 － （完成）响应内容解析完成，可以在客户端调用了
三、data:"{}", data为空也一定要传"{}"；不然返回的是xml格式的。并提示parsererror.
四、parsererror的异常和Header 类型也有关系。及编码header('Content-type: text/html; charset=utf8');
五、XMLHttpRequest.status:
具体策略限制情况可看下表：
| URL | 说明 | 允许通信 |
|---|---|---|
| http://www.a.com/a.js http://www.a.com/b.js | 同一域名下 | 允许 |
| http://www.a.com/lab/a.js http://www.a.com/script/b.js | 同一域名下不同文件夹 | 允许 |
| http://www.a.com:8000/a.js http://www.a.com/b.js | 同一域名，不同端口 | 不允许 |
| http://www.a.com/a.js https://www.a.com/b.js | 同一域名，不同协议 | 不允许 |
| http://www.a.com/a.js http://127.0.0.100/b.js | 域名和域名对应ip | 不允许 |
| http://www.a.com/a.js http://script.a.com/b.js | 主域相同，子域不同 | 不允许 |
| http://www.a.com/a.js http://a.com/b.js | 同一域名，不同二级域名（同上） | 不允许 |
| http://www.a.com/a.js http://www.b.com/b.js | 不同域名 | 不允许 |
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，而JSONP（JSON with Padding）则是JSON 的一种“使用模式”，通过这种模式可以实现数据的跨域获取。
举个例子，假如需要从服务器（http://www.a.com/user?id=123）获取的数据如下：
那么，使用JSONP方式请求（http://www.a.com/user?id=123?callback=foo）的数据将会是如下：
- {"id": 123, "name" : 张三, "age": 17}
当然，如果服务端考虑得更加充分，返回的数据可能如下：
- foo({"id": 123, "name" : 张三, "age": 17});
- try{foo({"id": 123, "name" : 张三, "age": 17});}catch(e){}
这时候我们只要定义一个foo()函数，并动态地创建一个script标签，使其的src属性为http://www.a.com/user?id=123?callback=foo：
function executeJsonp(url){ var eleScript= document.createElement("script"); eleScript.type = "text/javascript"; eleScript.src = url; document.getElementsByTagName("head")[0].appendChild(eleScript);}function foo(data){ for(var p in data){ console.log(data[p]); }}var url = "http://www.a.com/user?id=123?callback=foo";executeJsonp(url)便可以使用foo函数来调用返回的数据了。
第二种方法是利用getJSON来实现，只要在地址中加上callback=?参数即可：
- $.ajax({
- dataType: 'jsonp',
- url: 'http://www.a.com/user?id=123',
- success: function(data){
- //处理data数据
- }
- });
- $.getJSON('http://www.a.com/user?id=123&callback=?', function(data){
- //处理data数据
- });
也可以简单地使用getScript方法：
- //此时也可以在函数外定义foo方法
- function foo(data){
- //处理data数据
- }
- $.getJSON('http://www.a.com/user?id=123&callback=foo');
JSONP在开放API中可以起到非常重要的作用，开放API是运用在开发者自己的应用上，而许多应用往往是在开发者的服务器上而不是在新浪微博的服务器上，因此跨域请求数据成为开发者们所需要解决的一大问题，广大开放平台应该实现对JSONP的支持，这一点新浪微博开放平台便做的非常好（虽然某些API里没有说明，但实际上是可以使用JSONP方式调用的）。
使用GET方式和POST方式都可以进行跨域调用
客户端代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApp.WebForm1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"><script src="jquery-1.7.1.min.js" type="text/javascript"></script><script type="text/javascript"> function aa() { $.ajax({ url: "http://localhost:12079/WebForm2.aspx", data: "p1=1&p2=2&callback=?", type: "post", processData: false, timeout: 15000, dataType: "jsonp", // not "json" we'll parse jsonp: "jsonpcallback", success: function(result) { alert(result.value1); } }); }</script> <title></title></head><body> <form id="form1" runat="server"> <div> </div> </form> <p> <input id="Button1" type="button" value="button" onclick="aa()" /></p></body></html>服务器端代码
public partial class WebForm2 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { string callback = Request["callback"]; string v1="1"; string v2="2"; string response = "{"value1":"" + v1 + "","value2":"" + v2 + ""}"; string call = callback + "(" + response + ")"; Response.Write(call); Response.End(); } }客户端页面和服务器端页面在两个项目中，以便进行跨域调用测试。
跨域实例代码（需要加载jquery，页面为utf-8编码）：
<!--拉勾招聘数据--> <script type="text/javascript"> function success_jsonpCallback(data){ var html = ''; var pos = ''; html += '<ul>'; jQuery.each(data, function(k, v) { if(k<10){ pos = '【' + v.city+ '】' + v.positionName + '('+ v.salary +') - '+v.companyName; if(pos.length > 20){ pos = pos.substring(0,19)+'...'; } html += '<li><a href="'+v.posiitonDetailUrl+'" target="_blank" title="【' + v.city+ '】' + v.positionName + '('+ v.salary +') - '+v.companyName+'">'+pos+'</a></li>'; } }); html += '</ul><div class="more-link"><a href="http://www.lagou.com/jobs/list_%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91" rel="external nofollow" target="_blank" target="_blank">更多</a></div>'; jQuery('#lagouData').html(html); } function getLagouData() { jQuery.ajax({ async:false, url: "http://www.lagou.com/join/listW3cplus?kd=%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91", type: "GET", dataType: "jsonp", jsonpCallback: 'success_jsonpCallback', contentType: "application/jsonp; charset=utf-8", success: function(data) { success_jsonpCallback(data); } }); } getLagouData(); </script> <div id="lagouData"></div>jsonp代码：
success_jsonpCallback([{"city":"广州","companyName":"POCO.CN","createTime":"15:02发布","posiitonDetailUrl":"http://www.lagou.com:80/jobs/16868.html","positionAdvantage":"身处凝聚力团队，老城区上班交通便利，双休","positionName":"商业前端开发工程师","salary":"4k-7k"},{"city":"北京","companyName":"美通云动（北京）科技有限公司","createTime":"14:47发布","posiitonDetailUrl":"http://www.lagou.com:80/jobs/16866.html","positionAdvantage":"Html5技术最棒的团队","positionName":"Web前端开发","salary":"4k-8k"},{"city":"杭州","companyName":"口袋购物","createTime":"14:42发布","posiitonDetailUrl":"http://www.lagou.com:80/jobs/13024.html","positionAdvantage":"广阔的发展平台、自我价值体现的地方","positionName":"web前端开发工程师","salary":"8k-12k"},{"city":"北京","companyName":"布丁移动","createTime":"14:02发布","posiitonDetailUrl":"http://www.lagou.com:80/jobs/1498.html","positionAdvantage":"三餐、周围美女如云","positionName":"Android开发工程师","salary":"10k-20k"},{"city":"北京","companyName":"布丁移动","createTime":"14:02发布","posiitonDetailUrl":"http://www.lagou.com:80/jobs/2539.html","positionAdvantage":"三餐，小桥流水人家，美女","positionName":"ios开发工程师","salary":"10k-20k"},{"city":"上海","companyName":"天天动听","createTime":"00:55发布","posiitonDetailUrl":"http://www.lagou.com:80/jobs/11494.html","positionAdvantage":"创业氛围 讲求小而美","positionName":"Android开发工程师","salary":"8k-16k"},{"city":"北京","companyName":"LBE安全大师","createTime":"11:39发布","posiitonDetailUrl":"http://www.lagou.com:80/jobs/5983.html","positionAdvantage":"五险一金 绩效奖金","positionName":"Android开发工程师","salary":"8k以上"},{"city":"北京","companyName":"点心移动","createTime":"11:24发布","posiitonDetailUrl":"http://www.lagou.com:80/jobs/16736.html","positionAdvantage":"技术导向的团队氛围，全方位的福利待遇","positionName":"Android","salary":"15k-25k"},{"city":"广州","companyName":"荔枝FM","createTime":"10:44发布","posiitonDetailUrl":"http://www.lagou.com:80/jobs/16634.html","positionAdvantage":"连坚持跑步、保持体重都有奖励哦！","positionName":"WP手机开发工程师","salary":"16k-25k"},{"city":"北京","companyName":"网银-京东子公司","createTime":"10:08发布","posiitonDetailUrl":"http://www.lagou.com:80/jobs/14162.html","positionAdvantage":"负责京东商城-互联网金融产品 JS开发","positionName":"Javascript 前端开发工程师","salary":"10k-20k"}])jQuery-JSONP是一个支持 JSONP 调用的 jQuery 插件，使用它是因为它支持出错时的 AJAX 回调，而 jQuery 的 $.ajax 不支持。
JSONP 调用示例代码：
var originImgSrc = 'cnbogs-logo.gif';$.jsonp({ url: '', data: { imgSrc: originImgSrc }, callbackParameter: "callback", success: function (newImgSrc, textStatus, xOptions) { console.log(xOptions.data.imgSrc); }, error: function (xOptions, textStatus) { }});第1个需要注意的地方是 callbackParameter，如果没有专门的 callback 函数，一定要写上 "callback"；
第2个需要注意的地方是在 success 回调函数中，直接通过变量名 originImgSrc 得到的是 undefined，需要通过 xOptions.data.imgSrc 获取。
简单总结：
1、JS是一门前端语言。
2、Ajax是一门技术，它提供了异步更新的机制，使用客户端与服务器间交换数据而非整个页面文档，实现页面的局部更新。
3、jQuery是一个框架，它对JS进行了封装，使其更方便使用。jQuery使得JS与Ajax的使用更方便
详细情况：
实际上, 其中只有一种是编程语言。
javascript 是一种编程语言，主要用于网页中，使网站具有交互性。当浏览器分析网页时，它将创建该网页的内存中表示形式。它是一个树结构，包含页面上的所有元素。因此，有一个根元素，其中包含头部和正文元素，其中包含其他元素，其中包含其他元素。所以它看起来基本上像一棵树。现在，使用 javascript，您可以使用此树操作页面中的元素。您可以通过元素的 id (getElementsById) 或它们的标记名称 (getElementsByTagName) 或简单地遍历树 (parentNode、firstChild、lastChild、nextSibling、previousSibling等) 来选取元素。一旦您有元素可以使用，您就可以通过更改它们在页面上的外观、内容或位置来修改它们。此接口也称为 DOM (文档对象模型)。因此，您可以使用 javascript 执行其他编程语言可以执行的所有操作，通过将其嵌入到 wepages 中，您还可以获得当前网页的内存对象，您可以通过该对象以交互方式对页面进行更改。
AJAX 是一种在页面内的浏览器和服务器之间进行通信的技术。聊天就是一个很好的例子。您写一条消息, 发送一条消息, 并强制其他消息, 而无需离开页面。您可以使用浏览器提供的 xmlhttp 对象在客户端管理与 javascript 的这种交互。
jquery 是一个库, 旨在简化客户端 web 开发的一般 (上面的另外两个)。它创建了一个抽象层, 以便您可以在 javascript 中重用诸如 css 和 html 之类的公共语言。它还包括可用于与服务器进行通信的功能 (AJAX)。它是用 Javascript 编写的，不会为你做所有的事情，只会让常见的任务变得更容易。它还隐藏了浏览器的一些误解和错误。
总结一下:
Javascript 是一种编程语言 (对象、数组、数字、字符串、计算)
AJAX 和 jQuery 使用 Javascript
jQuery 用于使用 AJAX 和页面操作 (样式、动画等) 简化常见任务
最后， 举个例子看看语法：
// javascript 中的页面操作var el = document.getElementById("box");el.style.backgroundColor = "#000";var new_el = document.createElement("div");el.innerHTML = "<p>some content</p>";el.appendChild(new_el);// 以及如何在 jQuery 中执行此操作$("#box").css({ "background-color": "#000" }).append("<div><p>some content</p></div>");1. javascript是一种在客户端执行的脚本语言。ajax是基于javascript的一种技术，它主要用途是提供异步刷新（只刷新页面的一部分，而不是整个页面都刷新）。一个是语言，一个是技术,两者有本质区别.
2. javascript是一种在浏览器端执行的脚本语言，Ajax是一种创建交互式网页应用的开发技术 ，它是利用了一系列相关的技术其中就包括javascript。
3. JavaScript可以做什么？
用JavaScript可以做很多事情，使网页更具交互性，给站点的用户提供更好,更令人兴奋的体验。JavaScript使你可以创建活跃的用户界面，当用户在页面间导航时向他们反馈。
使用JavaScript来确保用户以表单形式输入有效的信息，这可以节省你的业务时间和开支。
使用JavaScript，根据用户的操作可以创建定制的HTML页面。
JavaScript还可以处理表单，设置cookie，即时构建HTML页面以及创建基于Web的应用程序。
JavaScript不能做什么？
JavaScript是一种客户端语言。（实际上，也存有服务器端实现的JavaScript版本）。也就是说，设计它的目的是在用户的机器上执行任务，而不是在服务器上。因此，JavaScript有一些固有的限制，这些限制主要出于如下安全原因：
1.JavaScript不允许读写客户机器上的文件。这是有好处的，因为你肯定不希望网页能够读取自己硬盘上的文件，或者能够将病毒写入硬盘，或者能够操作你的计算机上的文件。唯一例外是，JavaScript可以写到浏览器的cookie文件，但是也有一些限制。
2.JavaScript不允许写服务器机器上的文件。尽管写服务器上的文件在许多方面是很方便的（比如存储页面点击数或用户填写表单的数据），但是JavaScript不允许这么做。相反，需要用服务器上的一个程序处理和存储这些数据。这个程序可以是Perl或者PHP等语言编写的CGI运行在服务器上的程序或者Java程序
3.JavaScript不能关闭不是它自己打开的窗口。这是为了避免一个站点关闭其他任何站点的窗口，从而独占浏览器。
4.JavaScript不能从来自另一个服务器的已经打开的网页中读取信息。换句话说，网页不能读取已经打开的其它窗口中的信息，因此无法探查访问这个站点冲浪者还在访问其它哪些站点。
Ajax是一种创建交互式web应用程序的方式。Ajax是ASynchronouS JavaScript and XML(异步JavaScript和xml)的缩写，这个词是由web开发人员JeSSe JameS Garrett在2005年年初首创的。严格地说，Ajax只是JavaScript的一小部分（尽管这一部分特别流行）。但是，随着频繁的使用，这个词不再指某种技术本身（比如Java或JavaScript）。
在大多数情况下，Ajax一般是指以下这些技术的组合:
应用程序的大多数处理在用户的浏览器中发生，而且对服务器的数据请求往往很短。所以可以使用Ajax建立功能丰富的应用程序，这些应用程序依赖基于web的数据，但是其性能远远超过老式的，因为老式方法要求服务器传回整个HTML页面来响应用户操作。
一些公司已经在Ajax方面投入大量资金，尤其是Google。Google已经建立了几个著名的Ajax应用程序，包括Gmail（基于web的电子邮件），Google calendar，Google docS和Google mapS。另外一个大型的Ajax支持者Yahoo！，它使用Ajax增强个性化的MY Yahoo门户，Yahoo首页，Yahoo Mail，等等。这两家公司都向公众开放了其web应用程序的接口，人们可以使用这些程序会获得地图并且在地图上加上有意思，有用或者好玩的信息，比如洛杉矶地区所有日本餐馆的位置或者电影射鹏的位置。
1、JavaScript
定义：
javaScript的简写形式就是JS，是由Netscape公司开发的一种脚本语言，一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能（其编写的程序可以被嵌入到HTML或XML页面中，并直接在浏览器中解释执行）。
组成部分：
核心（ECMAScript）、文档对象模型（Document Object Model，简称DOM）、浏览器对象模型（Browser Object Model，简称BOM)
描述：
Javascript就是适应动态网页制作的需要而诞生的一种新的编程语言，如今越来越广泛地使用于Internet网页制作上。
Javascript是由 Netscape公司开发的一种脚本语言（scripting language），或者称为描述语言。在HTML基础上，使用Javascript可以开发交互式Web网页。
Javascript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，使网页包含更多活跃的元素和更加精彩的内容。
Javascript短小精悍，又是在客户机上执行的，大大提高了网页的浏览速度和交互能力。同时它又是专门为制作Web网页而量身定做的一种简单的编程语言。
主流的javaScript框架有：YUI ,Dojo，Prototype，jQuery...
2、Ajax
定义：
AJAX即“Asynchronous JavaScript and XML”（异步JavaScript和XML)，AJAX并非缩写词，而是由Jesse James Gaiiett创造的名词，是指一种创建交互式网页应用的网页开发技术。
AJAX不是一个技术，它实际上是几种技术，每种技术都有其独特之处，合在一起就成了一个功能强大的新技术。
组成：
基于XHTML和CSS标准的表示；
使用Document Object Model进行动态显示和交互；
使用XML和XSLT做数据交互和操作；
使用XML HttpRequest与服务器进行异步通信；
使用JavaScript绑定一切。
描述：
Ajax是结合了Java技术、XML以及JavaScript等编程技术，可以让开发人员构建基于Java技术的Web应用，并打破了使用页面重载的管理。
Ajax技术使用非同步的HTTP请求，在Browser和Web Server之间传递数据，使Browser只更新部分网页内容而不重新载入整个网页.
Ajax是使用客户端脚本与Web服务器交换数据的Web应用开发方法。这样，Web页面不用打断交互流程进行重新加裁，就可以动态地更新。使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。
3、jQuery
定义：
jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
特点：
轻量级、链式语法、CSS1-3选择器、跨浏览器、简单、易扩展；
jQuery是一种独立于服务器端代码的框架，独立于ASP.NET或者JAVA；
jQuery是当前很流行的一个JavaScript框架，使用类似于CSS的选择器，可以方便的操作HTML元素，拥有很好的可扩展性，拥有不少插件。
描述：
对于程序员来说，简化javascript和ajax编程，能够使程序员从设计和书写繁杂的JS应用中解脱出来，将关注点转向功能需求而非实现细节上，从而提高项目的开发速度。
对于用户来说，改善了页面的视觉效果，增强了与页面的交互性，体验更绚丽的网页物资。
javaScript框架实际上是一系列工具和函数。
本文介绍当JSON的键名为数字的时候应该使用的调用方式，对于键名为数字或者非正常变量字符时（如有空格），必须使用obj[xx]方式获取值。
<?php//声明json数据$array = array('result'=>array("90"=>"90队列","status"=>"成功"));$json = json_encode($array);$array1 = array("90"=>"90队列","status"=>"成功");$json1 = json_encode($array1);$phpjson = json_decode($json1,true);//第二个参数是true，表示把json数据转换为数组//对于json键名是数字时，只能用数组方式处理$phpjson['90'];?><!DOCTYPE unspecified PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head></head><body><script type="text/javascript">/*** 测试json数据调用示例*/function test(){//调用方式一var data = '<?php echo $json?>';//php json数据,这里只能用单引号，因为php的json数据中有双引号了data = eval("("+data+")");//js 解析json数据,主要是因为json数据用单引号后变为字符串了alert(data['result'][90]);//对于数字需要用数组的方式访问alert(data['result'].status);//对于非数字可以使用.的方式访问//调用方式二var data1 = <?php echo $json1?>;//php json数据，这里没有用单引号，因为直接是json数据alert(data1[90]);//对于数字需要用数组的方式访问alert(data1.status);//对于非数字可以使用.的方式访问alert(data1['status']);//还可以使用数组方式调用//注：对于键名为数字或者非正常变量字符时（如有空格），必须使用obj[xx]方式获取值。}</script><input type="button" value="button" onclick="test();"/></body></html>js获取json对象键名及值
遇到{"1",:"a"},{"2","b"}这种json对象，键名不固定，然后就不知道怎么取了，监视器下面是个object，没有什么属性方法。方法如下：
d = {"1": "a", "2": "b"}for(i in d){ i 就是键，d[i]就是值}真是难者不会，会者不难啊。
<script>d = {"1": "a", "2": "b"}function GetJArray(selIndex,arr){ var index =0; for(i inarr) { if(index == selIndex){ //i就是键，arr[i]就是值 document.write(i + ',' + arr[i] +'<br/>'); } index +=1; }}GetJArray(1,d); </script>JSON和XML没什么太大区别，不过JSON有一个更大范围的应用，那就是，跨域的数据调用。由于安全性问题，AJAX不支持跨域调用，这样要调用不同域名下的数据，很麻烦。下面这个例子，足以展示php用json如何进跨域调用了。
index.html
<script type="text/javascript"> function getProfile(str) { var arr = str; document.getElementById('nick').innerHTML = arr.nick; } </script> <body> <div id="nick"></div></body> <script type="text/javascript" src="http://www.openphp.cn/demo/profile.php"></script><?php $arr = array( 'name' => 'tanteng', 'nick' => 'pony', 'contact' => array( 'email' => 'a@gmail.com', 'website' => 'http://aa.sinaapp.com', ) ); $json_string = json_encode($arr); echo "getProfile($json_string)"; ?>当index.html调用profile.php时，JSON字符串生成，并作为参数传入getProfile，然后将昵称插入到div中，这样一次跨域数据交互就完成了，是不是特别简单。
PHP json格式和js json格式 js跨域调用实现代码
先看一个js函数
function jsontest() { var json = [{'username':'crystal','userage':'20'},{'username':'candy','userage':'24'}]; alert(json[1].username); var json2 = [['crystal','20'],['candy','24']]; alert(json2[0][0]); } $arr = array ( array ( 'catid' => '4', 'catname' => '程程', 'meta_title' => '程程博客' ), array ( 'catid' => '6', 'catname' => 'climber', 'meta_title' => '攀登者', ) ); $jsonstr = json_encode($arr); echo $jsonstr; $arr = array ( array ( 'catid' => '4', 'catname' => '程程', 'meta_title' => '程程博客' ), array ( 'catid' => '6', 'catname' => 'climber', 'meta_title' => '攀登者', ) ); $jsonstr = json_encode($arr); 我们再建立一个 json.html 文件
<SCRIPT type=text/javascript src="php_json.php"></SCRIPT><SCRIPT language=javascript type=text/javascript> function loadjson(_json) { if(_json) { for(var i=0;i<_json.length;i++) { alert(_json[i].catname); } } } loadjson(jsonstr) </SCRIPT> 要点：以get的方式得到json格式数据，是$.get()的方便写法吧！
jQuery Ajax在web应用开发中很常用，它主要包括有ajax，get，post，load，getscript等等这几种常用无刷新操作方法，处理复杂的ajax请求时，jQuery使用jQuery.ajax()方法进行处理。
在jQuery中有一些简单的方法，它对jQuery.ajax()方法进行了封装，使得我们在处理一些简单的Ajax事件时，不需要使用jQuery.ajax()方法。
以下5个方法执行一般Ajax请求的简短形式，在处理复杂的Ajax请求时应该使用jQuery.ajax()。
载入远程HTML文件代码并插入至DOM中，默认使用GET方式，传递参数时自动转换为POST方式。
//无参数、无回调函数$("#showload").load("load.htm");//无回调函数$("#showload").load("load.htm", { "para": "para-value" });$("#showload").load("load.htm", { "para": "para-value" }, function() { //处理 })这里将显示加载的文件的内容Load
示例代码如下：
$.get("jqueryget.htm", { "id": this.id }, function(req) { //成功时的回调方法 $("#showget").html(req); });})使用$.get()方法，通过传递id来获取不同的logo。值得一提的是，此时是通过get方法获得请求，所以在获取参数值时要使用Request.QueryString，可以看看Request Request.QueryString的区别
这里将显示logo3.jQuery.post(url, [data], [callback])
使用POST方式来进行异步请求。同jQuery.get()相比，差别在于请求的方式，所以这里不做特别的说明了，使用方法同jQuery.get()相似。
通过 GET 方式请求载入并执行一个JavaScript文件。这个技术在前边文章中已经提到过，也是jQuery.ajax的一种简单的使用方法，可以看看ajax加载js，所以在这里也不做特别的说明了。
示例代码如下：
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function(req) { $.each(req.items, function(i, item) { if (i == vnum) { $("<img src="" + item.media.m + "" title="" + item.title + "" />").appendTo("#showjson"); } });});同样的，这也是jQuery.ajax()方法的一种简写方法，类似如下方法：
参数列表：
| 参数名 | 类型 | 描述 |
| url | String | (默认: 当前页地址) 发送请求的地址。 |
| type | String | (默认: "GET") 请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。 |
| timeout | Number | 设置请求超时时间（毫秒）。此设置将覆盖全局设置。 |
| async | Boolean | (默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。 |
| beforeSend | Function | 发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。 function (XMLHttpRequest) { this; // the options for this ajax request} |
| cache | Boolean | (默认: true) jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。 |
| complete | Function | 请求完成后回调函数 (请求成功或失败时均调用)。参数： XMLHttpRequest 对象，成功信息字符串。 function (XMLHttpRequest, textStatus) { this; // the options for this ajax request} |
| contentType | String | (默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。 |
| data | Object, String | 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。 |
| dataType | String | 预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText，并作为回调函数参数传递，可用值: "xml": 返回 XML 文档，可用 jQuery 处理。 "html": 返回纯文本 HTML 信息；包含 script 元素。 "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。 "json": 返回 JSON 数据 。 "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
|
| error | Function | (默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。这个方法有三个参数：XMLHttpRequest 对象，错误信息，（可能）捕获的错误对象。 function (XMLHttpRequest, textStatus, errorThrown) { // 通常情况下textStatus和errorThown只有其中一个有值 this; // the options for this ajax request} |
| global | Boolean | (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件 |
| ifModified | Boolean | (默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。 |
| processData | Boolean | (默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。 |
| success | Function | 请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态 function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc... this; // the options for this ajax request} |
这里有几个Ajax事件参数：beforeSend ，success ，complete ，error 。我们可以定义这些事件来很好的处理我们的每一次的Ajax请求。注意一下，这些Ajax事件里面的 this 都是指向Ajax请求的选项信息的(请参考说 get() 方法时的this的图片)。
代码如下：
$.ajax({ url: url, dataType: 'json', data: data, success: callback});可能你还没有使用过json数据，我的小站中已经好几次提到了json的使用，如果你还不熟悉json格式，可以看看jquery移动listbox的值、jQuery下json的使用实例
获得json数据
这里将随机显示一条json数据到目前为止我们总结了jQuery.ajax的五种简写方法，接下来让我们集中精神，看看jQuery.ajax()方法，在使用中，笔者也是经常使用的jQuery.ajax()，因为大多数情况，我们需要对ajax请求出错的情况进行捕捉并处理。
代码如下：
$.ajax({ url: "http://www.hzhuti.com", //请求的url地址 dataType: "json", //返回格式为json async: true, //请求是否异步，默认为异步，这也是ajax重要特性 data: { "id": "value" }, //参数值 type: "GET", //请求方式 beforeSend: function() { //请求前的处理 }, success: function(req) { //请求成功时处理 }, complete: function() { //请求完成的处理 }, error: function() { //请求出错处理 }});使用jQuery.ajax()
这里将显示数据。
$.ajax 实际应用例子：
//1.$.ajax带json数据的异步请求var aj = $.ajax( { url:'productManager_reverseUpdate',// 跳转到 action data:{ selRollBack : selRollBack, selOperatorsCode : selOperatorsCode, PROVINCECODE : PROVINCECODE, pass2 : pass2 }, type:'post', cache:false, dataType:'json', success:function(data) { if(data.msg =="true" ){ // view("修改成功！"); alert("修改成功！"); window.location.reload(); }else{ view(data.msg); } }, error : function() { // view("异常！"); alert("异常！"); } });//2.$.ajax序列化表格内容为字符串的异步请求function noTips(){ var formParam = $("#form1").serialize();//序列化表格内容为字符串 $.ajax({ type:'post', url:'Notice_noTipsNotice', data:formParam, cache:false, dataType:'json', success:function(data){ } }); } //3.$.ajax拼接url的异步请求var yz=$.ajax({ type:'post', url:'validatePwd2_checkPwd2?password2='+password2, data:{}, cache:false, dataType:'json', success:function(data){ if( data.msg =="false" ) //服务器返回false，就将validatePassword2的值改为pwd2Error，这是异步，需要考虑返回时间 { textPassword2.html("<font color='red'>业务密码不正确！</font>"); $("#validatePassword2").val("pwd2Error"); checkPassword2 = false; return; } }, error:function(){} });//4.$.ajax拼接data的异步请求$.ajax({ url:'<%=request.getContextPath()%>/kc/kc_checkMerNameUnique.action', type:'post', data:'merName='+values, async : false, //默认为true 异步 error:function(){ alert('error'); }, success:function(data){ $("#"+divs).html(data); }});<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ASP.NETA_JAX.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/jscript"> function CallServer() { //JSON发送对象 ServerSum("{name:'linyijia',age:'21'}"); } function GetRegister(rg, contex) { document.getElementById("TxtRegister").value=rg; } </script> </head> <body> <form id="form1" runat="server"> <div> <br /> 用户名:<input id="TxtNum1" type="text" /> <br /> 服务器:<input id="TxtRegister" type="text" /><br /> <button id="SumBtn" type="button" onclick="CallServer()">登录</button> </div> </form> </body> </html> using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.Script.Serialization; public partial class _Default : System.Web.UI.Page ,ICallbackEventHandler { Users u = null; protected void Page_Load(object sender, EventArgs e) { //回调GetRegister方法 string CallBackFun = Page.ClientScript.GetCallbackEventReference(this,"arg","GetRegister","context"); //创建ServerSum方法,在客户端调用的时候就,会回调GetRegister方法,把参数传给RaiseCallbackEvent(string eventArgument ),最后通过 //GetCallbackResult()方法把返回值传给客户端 string RegisterFun = string.Format("function ServerSum(arg,context){{{0};}}",CallBackFun); Page.ClientScript.RegisterClientScriptBlock(this.GetType(),"ServerSum",RegisterFun,true); } string mssage = string.Empty; #region ICallbackEventHandler 成员 public string GetCallbackResult() { return "服务器:你好,你的用户名为:" + u.Name + "你的年龄为" + u.Age; } public void RaiseCallbackEvent(string eventArgument) { JavaScriptSerializer js = new JavaScriptSerializer(); u =js.Deserialize<Users>(eventArgument); } #endregion } using System; using System.Collections.Generic; using System.Linq; using System.Web; /// <summary> ///User 的摘要说明 /// </summary> public class Users { string name; public string Name { get { return name; } set { name = value; } } string age; public string Age { get { return age; } set { age = value; } } } 使用JSON向服务器发送一个对象,服务器通过实现 ICallbackEventHandler接口后,重写GetCallbackResult和RaiseCallbackEvent方法,在回调的时候,在RaiseCallbackEvent方法中反序列化JSON,并在GetCallbackResult把结果返回给客户端.
1.建web应用程序aspnetAjax
2.建index.htm
3.建个js文件夹，把jquery.js放进去，
4.建ajax文件夹，里面放ashx
5.在js文件夹建index.js，一般我们都是一个页面对应一个js
6.在ajax文件夹，建IndexHandler.ashx，一般一个js页面对应一个一般用户控件，这样层次感很强，也很好维护。
html页面就简单了，我们要用ajax读后台做个下拉列表，所以页面就放个DIV就行了。其他的交给js.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head> <title>测试</title> <script src="js/jquery-1.2.3-intellisense.js" type="text/javascript"></script> <script src="js/index.js" type="text/javascript"></script></head><body> 企业性质<div id="vocaspec"> </div> 行业类型<div id="industr"> </div> </body></html>编写IndexHandler.ashx代码
namespace aspnetAjax.ajax{ /// <summary> /// $codebehindclassname$ 的摘要说明 /// </summary> public class IndexHandler : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "application/json"; //接收提交过来的meth参数 string meth = context.Request.Params["meth"].ToString(); //根据参数调用不同的方法 switch (meth) { case "load": loadjson(context); break; case "add": add(context); break; } } public bool IsReusable { get { return false; } } //页面加载方法，调用BLL，获得数据 private void loadjson(HttpContext context) { //实例BLL VocaSpecSortBLL vocaSpec = new VocaSpecSortBLL(); BLL.Owner ownerbll = new GYXMGL.BLL.Owner(); DataSet ds = vocaSpec.GetList(""); DataSet dsindustr = ownerbll.Getcharcte(); //实例一个StringBuilder 用来拼接一个json数据 StringBuilder sbvoca = new StringBuilder(); if (ds != null && ds.Tables[0].Rows.Count > 0) { sbvoca.Append("{"voce":["); int i = 1; int count = ds.Tables[0].Rows.Count; foreach (DataRow dr in ds.Tables[0].Rows) { if (i == count) { sbvoca.Append("{"code":"" + dr[0] + "","name":"" + dr[1] + ""}"); } else { sbvoca.Append("{"code":"" + dr[0] + "","name":"" + dr[1] + ""},"); } i++; } sbvoca.Append("]"); } if (dsindustr != null && dsindustr.Tables[0].Rows.Count > 0) { sbvoca.Append(","industr":["); int i = 1; int count = dsindustr.Tables[0].Rows.Count; foreach (DataRow dr in dsindustr.Tables[0].Rows) { if (i == count) { sbvoca.Append("{"code":"" + dr[0] + "","name":"" + dr[1] + ""}"); } else { sbvoca.Append("{"code":"" + dr[0] + "","name":"" + dr[1] + ""},"); } i++; } sbvoca.Append("]"); } sbvoca.Append("}"); context.Response.Write(sbvoca.ToString()); context.Response.End(); } }}我们把index.js改下
$(document).ready(function() { $.ajax({ type: "POST", url: "../ajax/NewOwnerHandler.ashx", //我们用text格式接收 dataType: "text", data: "meth=load", success: function(msg) { alert(msg); //显示后台数据 $("#vocaspec").html(msg); // $("#industr").html(industr); } });});看到如下数据，就是ashx中response给我们的json格式数据，现在我们要把这些数据
显示在下拉列表中。就要遍历json中的数组。
{"voce":[{"code":"1","name":"农林水利"},{"code":"10","name":"军工"},{"code":"11","name":"农林"},{"code":"12","name":"水利(电)"},{"code":"13","name":"水电站"},{"code":"14","name":"输变线"},{"code":"15","name":"煤矿"},{"code":"16","name":"气田"},{"code":"17","name":"公路"},{"code":"18","name":"铁路"},{"code":"19","name":"民航"},{"code":"2","name":"能源"},{"code":"20","name":"信息产业"},{"code":"21","name":"化工"},{"code":"22","name":"机械"},{"code":"23","name":"冶金"},{"code":"24","name":"有色金属"},{"code":"25","name":"建材"},{"code":"26","name":"医药"},{"code":"27","name":"轻工"},{"code":"28","name":"农牧产品深加工"},{"code":"3","name":"交通"},{"code":"4","name":"通讯"},{"code":"5","name":"特色产业"},{"code":"6","name":"城市基础设施"},{"code":"7","name":"商贸流通"},{"code":"8","name":"旅游"},{"code":"9","name":"文体卫"}],"industr":[{"code":"1","name":"国有"},{"code":"2","name":"私人"}]}修改index.js代码，遍历json数据把数据显示成下拉列表
$(document).ready(function() { $.ajax({ type: "POST", url: "../ajax/NewOwnerHandler.ashx", //json格式接收数据 dataType: "json", //指点后台调用什么方法 data: "meth=load", success: function(msg) { //实例2个字符串变量来拼接下拉列表 var industr = "<select name="industr"><option label="---请选择---"></option>"; var vocaspec = "<select name="vocaspec"><option label="---请选择---"></option>"; //使用jquery解析json中的数据 $.each(msg.voce, function(n, value) { vocaspec += ("<option value="" + value.code + "" label="" + value.name + "">"); vocaspec += ("</option>"); }); $.each(msg.industr, function(n, value) { industr += ("<option value="" + value.code + "" label="" + value.name + "">"); industr += ("</option>"); }); industr += ("</select>"); $("#vocaspec").html(vocaspec); $("#industr").html(industr); } });});这个实例涉及到的知识点
1、使用一般处理程序，接收request。并可以使用response数据
string meth = context.Request.Params["meth"].ToString();
因为一般处理程序
public class IndexHandler : IHttpHandler
他实现IHttpHandler接口
2、json数据格式
3、使用jquery ajax,并用jquery解析json数据。
一种为使用eval()函数。
使用Function对象来进行返回解析。
使用eval函数来解析，jquery的each方法来遍历
用JQuery解析JSON数据的方法，作为JQuery异步请求的传输对象，JQuery请求后返回的结果是json对象，这里考虑的都是服务器返回JSON形式的字符串的形式，对于利用JSONObject等插件封装的JSON对象，与此亦是大同小异，这里不再做说明。
var data="{root:[ {name:'1',value:'0'}, {name:'6101',value:'北京市'}, {name:'6102',value:'天津市'}, {name:'6103',value:'上海市'}, {name:'6104',value:'重庆市'},]}";这里以JQuery异步获取的数据类型——json对象和字符串为依据，分别介绍两种方式获取到的结果处理方式。
eval()
对于服务器返回的JSON字符串，如果jquery异步请求没做类型说明，或者以字符串方式接受，那么需要做一次对象化处理，方式不是太麻烦，就是将该字符串放于eval()中执行一次。这种方式也适合以普通javascipt方式获取json对象，以下举例说明：
// 转换为json对象var dataObj=eval("("+data+")");为什么要 eval这里要添加 ("("+data+")"); 呢？
原因在于：eval本身的问题。 由于json是以”{}”的方式来开始以及结束的，在JS中，它会被当成一个语句块来处理，所以必须强制性的将它转换成一种表达式。
加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式（expression）转化为对象，而不是作为语句（statement）来执行。举一个例子，例如对象字面量{}，如若不加外层的括号，那么eval会将大括号识别为JavaScript代码块的开始和结束标记，那么{}将会被认为是执行了一句空语句。所以下面两个执行结果是不同的：// return undefinedalert(eval("{}");// return object[Object]alert(eval("({})");对于这种写法，在JS中，可以到处看到。如: (function()) {}(); 做闭包操作时等。
//输出root的子对象数量alert(dataObj.root.length);$.each(dataObj.root,fucntion(idx,item){ if(idx==0){ return true; } //输出每个root子对象的名称和值 alert("name:"+item.name+",value:"+item.value);})对于一般的js生成json对象，只需要将$.each()方法替换为for语句即可，其他不变，服务器返回的JSON字符串。
对于服务器返回的JSON字符串，如果jquery异步请求将type（一般为这个配置属性）设为“json”，或者利 用$.getJSON()方法获得服务器返回，那么就不需要eval（）
方法了，因为这时候得到的结果已经是json对象了，只需直接调用该对象即可，这里以$.getJSON方法为例说明数据处理方法：
$.getJSON("http://www.phpzixue.cn/",{param:"gaoyusi"},function(data){ //此处返回的data已经是json对象 //以下其他操作同第一种情况 $.each(data.root,function(idx,item){ if(idx==0){ //同countinue，返回false同break return true; } alert("name:"+item.name+",value:"+item.value); });});这里特别需要注意的是方式1中的eval()方法是动态执行其中字符串（可能是js脚本）的，这样很容易会造成系统的安全问题。所以可以采用一些规避了eval()的第三方客户端脚本库，比如JSON in JavaScript就提供了一个不超过3k的脚本库。
解析方式就是使用Function对象来完成，它的典型应用就是在JQuery中的AJAX方法下的success等对于返回数据data的解析。
var json='{"name":"CJ","age":18}';data =(new Function("","return "+json))();此时的data就是一个会解析成一个json对象了。
大家知道Jquery中有serialize方法，可以将表单序列化为一个“&”连接的字符串，但却没有提供序列化为Json的方法。不过，我们可以写一个插件实现。
有人用替换的方法，先用serialize序列化后，将&替换成“：”、“‘”：
/*** 重置form表单* @param formId form的id*/function resetQuery(formId){var fid = "#" + formId;var str = $(fid).serialize();//str= cardSelectDate=3&startdate=2012-02-01&enddate=2012-02-04var ob= strToObj(str);alert(ob.startdate); //2012-02-01}function strToObj(str){str = str.replace(/&/g, "','" );str = str.replace(/=/g, "':'" );str = "({'" +str + "'})" ;obj = eval(str);return obj;}/** * 重置form表单 * @param formId form的id */ function resetQuery(formId){ var fid = "#" + formId; var str = $(fid).serialize(); //str= cardSelectDate=3&startdate=2012-02-01&enddate=2012-02-04 var ob= strToObj(str); alert(ob.startdate);//2012-02-01 } function strToObj(str){ str = str.replace(/&/g,"','"); str = str.replace(/=/g,"':'"); str = "({'"+str +"'})"; obj = eval(str); return obj; } 不过这样做有bug。
其他的方法是，先用serializeArray序列化为数组，再封装为Json对象。
< form id = "myForm" action = "#" >< input name = "name" />< input name = "age" />< input type = "submit" /></ form > <form id="myForm" action="#"> <input name="name"/> <input name="age"/> <input type="submit"/> </form> ( function ($){$.fn.serializeJson= function (){var serializeObj={};$( this .serializeArray()).each( function (){serializeObj[ this .name]= this .value;});return serializeObj;};})(jQuery); (function($){ $.fn.serializeJson=function(){ var serializeObj={}; $(this.serializeArray()).each(function(){ serializeObj[this.name]=this.value; }); return serializeObj; }; })(jQuery); $("#myForm").bind("submit",function(e){ e.preventDefault();console.log($( this ).serializeJson());}); e.preventDefault(); console.log($(this).serializeJson()); }); 测试结果：
输入a，b提交，得到序列化结果：
{age: "b",name: "a"}
上面的插件，不能适用于有多个值的输入控件，例如复选框、多选的select。下面，将插件做进一步的修改，让其支持多选。代码如下：
( function ($){$.fn.serializeJson= function (){var serializeObj={};var array= this .serializeArray();var str= this .serialize();$(array).each( function (){if (serializeObj[ this .name]){if ($.isArray(serializeObj[ this .name])){serializeObj[ this .name].push( this .value);} else {serializeObj[ this .name]=[serializeObj[ this .name], this .value];}} else {serializeObj[ this .name]= this .value;}});return serializeObj;};})(jQuery);(function($){ $.fn.serializeJson=function(){ var serializeObj={}; var array=this.serializeArray(); var str=this.serialize(); $(array).each(function(){ if(serializeObj[this.name]){ if($.isArray(serializeObj[this.name])){ serializeObj[this.name].push(this.value); }else{ serializeObj[this.name]=[serializeObj[this.name],this.value]; } }else{ serializeObj[this.name]=this.value; } }); return serializeObj; }; })(jQuery); 这里，将多选的值封装为一个数值来进行处理。如果大家使用的时候需要将多选的值封装为“,"连接的字符串或者其他形式，请自行修改相应代码。
< form id = "myForm" action = "#" >< input name = "name" />< input name = "age" />< select multiple = "multiple" name = "interest" size = "2" >< option value = "interest1" > interest1 </ option >< option value = "interest2" > interest2 </ option >< option value = "interest3" > interest3 </ option >< option value = "interest4" > interest4 </ option ></ select >< input type = "checkbox" name = "vehicle" value = "Bike" /> I have a bike< input type = "checkbox" name = "vehicle" value = "Car" /> I have a car< input type = "submit" /></ form ><form id="myForm" action="#"> <input name="name"/> <input name="age"/> <select multiple="multiple" name="interest" size="2"> <option value ="interest1">interest1</option> <option value ="interest2">interest2</option> <option value="interest3">interest3</option> <option value="interest4">interest4</option> </select> <input type="checkbox" name="vehicle" value="Bike" /> I have a bike <input type="checkbox" name="vehicle" value="Car" /> I have a car <input type="submit"/> </form> < form id = "myForm" action = "#" >< input name = "name" />< input name = "age" />< select multiple = "multiple" name = "interest" size = "2" >< option value = "interest1" > interest1 </ option >< option value = "interest2" > interest2 </ option >< option value = "interest3" > interest3 </ option >< option value = "interest4" > interest4 </ option ></ select >< input type = "checkbox" name = "vehicle" value = "Bike" /> I have a bike< input type = "checkbox" name = "vehicle" value = "Car" /> I have a car< input type = "submit" /></ form ><form id="myForm" action="#"> <input name="name"/> <input name="age"/> <select multiple="multiple" name="interest" size="2"> <option value ="interest1">interest1</option> <option value ="interest2">interest2</option> <option value="interest3">interest3</option> <option value="interest4">interest4</option> </select> <input type="checkbox" name="vehicle" value="Bike" /> I have a bike <input type="checkbox" name="vehicle" value="Car" /> I have a car <input type="submit"/> </form> 测试结果：
{age: "aa",interest: ["interest2", "interest4"],name: "dd",vehicle:["Bike","Car"]}jquery的 serialize()方法，可以对表单项进行序列化，这本来是很方便的一个功能；但是实际使用中有时会出现如下问题：
例如：
<input name="content" value="ddd 567"/>在执行 serialize()方法后，得到的却是 ddd+567这样的字符串；即jquery的序列化方法对空格进行了转义，转换成了 + 号。
由于serialize()方法对真正的“+”号转义的是 ％２Ｂ，所以可以对serialize()后的结果进行符号替换。
例如：
<input name="content" value="ddd + 567 + 987"/><script>var a= $('$frm1').serialize(); //序列化，默认会调用encodeURIComponent()进行编码alert(a); // content=ddd+++567+++987var b = a.replace(/+/g," "); // g表示对整个字符串中符合条件的都进行替换b = decodeURIComponent(b); //对serialize后的内容进行解码alert(b); // content=ddd + 567 + 987</script>$.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象注：在jQuery 3.0 及以后版本中，该方法已被删除，请使用原生方法 JSON.parse(str)
JSON.parse(jsonstr); //可以将json字符串转换成json对象 JSON.stringify(jsonobj); //可以将json对象转换成json对符串 eval('(' + jsonstr + ')'); //可以将json字符串转换成json对象,注意需要在json字符外包裹一对小括号可以在https://github.com/douglascrockford/JSON-js上获取到这个js，一般现在用json2.js。
在开发的过程中，如果对于少量参数的前后台传递，可以直接采用ajax的data函数，按json格式传递，后台Request即可，但有的时候，需要传递多个参数，这样后台
接受的时候Request多个很麻烦，此时要按照类的格式或者集合的形式进行传递。
例如：前台按类的格式传递JSON对象：
var jsonUserInfo = "{"TUserName":"" + userName + "","TInterest":"" + interest + "","TSex":"" + sex + "","TCity":"" + city + "","TDetail":"" + detail + ""}";如拼出的 jsonUserInfo 无转义符号，需要 var jsonArrayFinal = JSON.stringify(jsonArray); 进行转换后再传递。
$.ajax( { type: "post", url: "ReceiveHandler1.ashx", data: { userInfo: jsonUserInfo, flag: "123456", key: "654321" }, dataType: "text", success: function(data) { $("#divShow").html(data); } });例如：
[{"name":"a"},{"name","b"},{"name","c"}]，则无法传递，此时必须使用JSON.stringify将数组对象转换成字符串，再进行AJAX传递即可。
比如我有两个变量，我要将a转换成字符串，将b转换成JSON对象：
var a={"name":"tom","sex":"男","age":"24"}; var b='{"name":"Mike","sex":"女","age":"29"}';在Firefox，chrome，opera，safari，ie9，ie8等高级浏览器直接可以用JSON对象的stringify()和parse()方法。
JSON.stringify(obj)将JSON转为字符串。JSON.parse(string)将字符串转为JSON格式；
上面的转换可以这么写：
var a={"name":"tom","sex":"男","age":"24"}; var b='{"name":"Mike","sex":"女","age":"29"}'; var aToStr=JSON.stringify(a); var bToObj=JSON.parse(b); alert(typeof(aToStr)); //string alert(typeof(bToObj));//objectJSON.stringify()ie8(兼容模式)，ie7和ie6没有JSON对象，不过http://www.json.org/js.html提供了一个json.js，这样ie8(兼容模式)，ie7和ie6就可以支持JSON对象以及其stringify()和parse()方法；你可以在https://github.com/douglascrockford/JSON-js上获取到这个js，一般现在用json2.js。
ie8(兼容模式)，ie7和ie6可以使用eval()将字符串转为JSON对象，
var c='{"name":"Mike","sex":"女","age":"29"}'; var cToObj=eval("("+c+")"); alert(typeof(cToObj));jQuery中也有将字符串转为JSON格式的方法jQuery.parseJSON( json )，接受一个标准格式的 JSON 字符串，并返回解析后的 JavaScript （JSON）对象。当然如果有兴趣可以自己封装一个jQuery扩展，jQuery.stringifyJSON(obj)将JSON转为字符串。
使用js函数eval();
testJson=eval(testJson);是错误的转换方式。
正确的转换方式需要加(): testJson = eval("(" + testJson + ")");
eval()的速度非常快，但是他可以编译以及执行任何javaScript程序，所以会存在安全问题。在使用eval()。来源必须是值得信赖的。需要使用更安全的json解析器。在服务器不严格的编码在json或者如果不严格验证的输入，就有可能提供无效的json或者载有危险的脚本，在eval()中执行脚本，释放恶意代码。
js代码：
代码如下:
function ConvertToJsonForJs() { //var testJson = "{ name: '小强', age: 16 }";(支持) //var testJson = "{ 'name': '小强', 'age': 16 }";(支持) var testJson = '{ "name": "小强", "age": 16 }'; //testJson=eval(testJson);//错误的转换方式 testJson = eval("(" + testJson + ")"); alert(testJson.name); }第二种方式使用jquery.parseJSON()方法对json的格式要求比较高，必须符合json格式
jquery.parseJSON() js:代码 代码如下: function ConvertToJsonForJq() { var testJson = '{ "name": "小强", "age": 16 }'; //不知道 //'{ name: "小强", age: 16 }' (name 没有使用双引号包裹) //"{ 'name': "小强", 'age': 16 }"(name使用单引号) testJson = $.parseJSON(testJson); alert(testJson.name); }很多时候我们需要组装字符串为json对象，首先要组合字符串，然后转换为json对象
例子：
var convertStringToJSON = function(){ var str="{'ID':12,'Name':'Tom','Age':21}"; var stu = eval('('+str+')'); alert(stu.Name);}上面代码执行后会弹出“Tom”，说明已经成功转换为json对象了。
创建XMLHTTPRequest：
<script language="javascript" type="text/javascript">var request;function createRequest() { try { request = new XMLHttpRequest(); } catch (trymicrosoft) { try { request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (othermicrosoft) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (failed) { request = false; } } } if (!request) alert("Error initializing XMLHttpRequest!");}function getCustomerInfo() { createRequest(); // Do something with the request variable}</script>1. JavaScript代码如下：
// Changes XML to JSONfunction xmlToJson(xml) { // Create the return object var obj = {}; if (xml.nodeType == 1) { // element // do attributes if (xml.attributes.length > 0) { obj["@attributes"] = {}; for (var j = 0; j < xml.attributes.length; j++) { var attribute = xml.attributes.item(j); obj["@attributes"][attribute.nodeName] = attribute.nodeValue; } } } else if (xml.nodeType == 3) { // text obj = xml.nodeValue; } // do children if (xml.hasChildNodes()) { for(var i = 0; i < xml.childNodes.length; i++) { var item = xml.childNodes.item(i); var nodeName = item.nodeName; if (typeof(obj[nodeName]) == "undefined") { obj[nodeName] = xmlToJson(item); } else { if (typeof(obj[nodeName].length) == "undefined") { var old = obj[nodeName]; obj[nodeName] = []; obj[nodeName].push(old); } obj[nodeName].push(xmlToJson(item)); } } } return obj;};<ALEXA VER="0.9" URL="davidwalsh.name/" HOME="0" AID="="> <SD TITLE="A" FLAGS="" HOST="davidwalsh.name"> <TITLE TEXT="David Walsh Blog :: PHP, MySQL, CSS, Javascript, MooTools, and Everything Else"/> <LINKSIN NUM="1102"/> <SPEED TEXT="1421" PCT="51"/> </SD> <SD> <POPULARITY URL="davidwalsh.name/" TEXT="7131"/> <REACH RANK="5952"/> <RANK DELTA="-1648"/> </SD></ALEXA>{ "@attributes": { AID: "=", HOME: 0, URL: "davidwalsh.name/", VER: "0.9", }, SD = [ { "@attributes": { FLAGS: "", HOST: "davidwalsh.name", TITLE: A }, LINKSIN: { "@attributes": { NUM: 1102 } }, SPEED: { "@attributes": { PCT: 51, TEXT: 1421 } }, TITLE: { "@attributes": { TEXT: "David Walsh Blog :: PHP, MySQL, CSS, Javascript, MooTools, and Everything Else", } }, }, { POPULARITY: { "@attributes": { TEXT: 7131, URL: "davidwalsh.name/" } }, RANK: { "@attributes": { DELTA: "-1648" } }, REACH: { "@attributes": { RANK = 5952 } } } ]}json转换成XML后，对应的JS文件要怎么改？
$(function() { $('#logout').click(function(){ top.location.href = "../login.html"; }); $("#tree").tree( { url : "../data/menu.json", onClick : doMenuClick }); function doMenuClick(node) { if ($("#tree").tree("isLeaf", node.target) == false) return; var id = node.id; var text = node.text; if (!id) return; var elTab = parent.$('#mainTabs'); if (elTab.tabs('exists', text)) { elTab.tabs('select', text); } else { var url = '../TheReport/' + id + '.html'; var content = '<div style="width:100%;height:100%;overflow:hidden;">'+ '<iframe src="' + url + '" scrolling="auto" style="width:100%;height:100%;border:0;" ></iframe></div>'; elTab.tabs('add', { title : text, content : content, closable : true }); } }});答案：
<?xml version="1.0" encoding="GB2312"?><myfile> <title>tttt</title> <author>ajie</author> <email>ajie@aolhoo.com</email> <date>20010115</date></myfile>HTML/JS：
<html><head><script language="JavaScript" for="window" event="onload">var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");xmlDoc.async="false";xmlDoc.load("myfile.xml");root = xmlDoc.documentElement;//nodes = xmlDoc.documentElement.childNodes;document.all("title").innerText = root.childNodes.item(0).text;document.all("author").innerText = root.childNodes.item(1).text;document.all("email").innerText = root.childNodes.item(2).text;document.all("date").innerText = root.childNodes.item(3).text;</script><title>在HTML中调用XML数据</title></head><body bgcolor="#FFFFFF"><b>标题: </b><span id="title"> </span><b>作者: </b><span id="author"></span><b>信箱: </b><span id="email"></span><b>日期：</b><span id="date"></span></body></html>如果要自己实现的话要，①先转换为js中的字符串，通过参数传递的方式赋值给java中的属性。②使用低第二步的方法进行转换。如果使用struts2的话这一切都显得那么易如反掌了，你要做的就是定义action中同名的属性。
JSON：JavaScript 对象表示法（JavaScript Object Notation），其实JSON就是一个JavaScript的对象(Object)而已。
var json = {aa:true,bb:true}; var json1 = {aa:'b',bb:{cc:true,dd:true}}; for(var item in json){ alert(item); //结果是 aa,bb, 类型是 string alert(typeof(item)); alert(eval("json."+item)); //结果是true，true类型是boolean eval(("json."+item+"=false;")); //改变json对象的值 } /** * json对象转字符串形式 */ function json2str(o) { var arr = []; var fmt = function(s) { if (typeof s == 'object' && s != null) return json2str(s); return /^(string|number)$/.test(typeof s) ? "'" + s + "'" : s; } for (var i in o) arr.push("'" + i + "':" + fmt(o[i])); return '{' + arr.join(',') + '}'; } function stringToJson(stringValue) { eval("var theJsonValue = "+stringValue); return theJsonValue; } function JsonArrayToStringCfz(jsonArray) var JsonArrayString = "["; for(var i=0;i<jsonArray.length;i++){ JsonArrayString=JsonArrayString+JsonToStringCfz(jsonArray[i])+","; } JsonArrayString = JsonArrayString.substring(0,JsonArrayString.length-1)+"]"; return JsonArrayString; } <script src="json2.js"></script> <script> var date = {myArr : ["a" , "b" , "c" , "d"] , count : 4}; var str = JSON.stringify(date); alert(str); </script> 在javascript中新建一个字符串(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 + ")"); 注意：eval() 函数可编译并执行任何 JavaScript 代码。这隐藏了一个潜在的安全问题。
使用 JSON 解析器将 JSON 转换为 JavaScript 对象是更安全的做法。JSON 解析器只能识别 JSON 文本，而不会编译脚本。
在浏览器中，这提供了原生的 JSON 支持，而且 JSON 解析器的速度更快。
较新的浏览器和最新的 ECMAScript (JavaScript) 标准中均包含了原生的对 JSON 的支持。
字符串转json对象：JSON.parse(jsonstr);
json对象转json字符串：JSON.stringify(jsonObj);
JQuery方法：
json字符串转json对象：jQuery.parseJSON(jsonStr);
<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> 那么如何遍历json数组呢？可以把它当成一个普通的javascript对象来处理。
<html><body><h2>如何遍历JSON数组</h3><div id="result"></div><script type="text/javascript">var txt = '[{"firstName":"Bill","lastName":"Gates" },' +'{"firstName":"George","lastName":"Bush" },' +'{"firstName":"Thomas","lastName":"Carter" }]';var arrayJson = JSON.parse(txt);var html='';for(var p in arrayJson){html+=' firstName:'+arrayJson[p].firstName;html+=' lastName'+arrayJson[p].lastName;html+='<br />';}document.getElementById("result").innerHTML= html;</script></body></html> ie8(兼容模式)，ie7和ie6没有JSON对象，不过http://www.json.org/js.html提供了一个json.js，这样ie8(兼容模式)，ie7和ie6就可以支持JSON对象以及其stringify()和parse()方法；你可以在 https://github.com/douglascrockford/JSON-js上获取到这个js，一般现在用json2.js。
ie8(兼容模式)，ie7和ie6可以使用eval()将字符串转为JSON对象，
var c='{"name":"Mike","sex":"女","age":"29"}';var cToObj=eval("("+c+")");alert(typeof(cToObj)); 本文介绍了JavaScript中如何将Object转换为String函数，详细的代码如下文所示：
代码如下:
function obj2str(o){ var r = []; if(typeof o =="string") return """+o.replace(/(['"])/g,"$1").replace(/(
)/g,"
").replace(/(
)/g,"
").replace(/( )/g," ")+"""; if(typeof o == "object"){ if(!o.sort){ for(var i in o) r.push(i+":"+obj2str(o[i])); if(!!document.all && !/^
?functions*toString()s*{
?s*[native code]
?s*}
?s*$/.test(o.toString)){ r.push("toString:"+o.toString.toString()); } r="{"+r.join()+"}" }else{ for(var i =0;i<o.length;i++) r.push(obj2str(o[i])) r="["+r.join()+"]" } return r; } return o.toString(); } 利用原生JSON对象，将对象转为字符串
项目中碰到了用jQuery从后台获取的json格式的日期的字符串，需要将此字符串转换成JavaScript的日期对象。
//转换json格式的日期（如：{ServerDatetime:"/Date(1278930470649)/"}）为Javascript的日期对象 function ConvertJSONDateToJSDateObject(JSONDateString) { var date = new Date(parseInt(JSONDateString.replace("/Date(", "").replace(")/", ""), 10)); return date; } 开发中有时候需要从服务器端返回json格式的数据，在后台代码中如果有DateTime类型的数据使用系统自带的工具类序列化后将得到一个很长的数字表示日期数据，如下所示：
//设置服务器响应的结果为纯文本格式 context.Response.ContentType = "text/plain"; //学生对象集合 List<Student> students = new List<Student> { new Student(){Name ="Tom", Birthday =Convert.ToDateTime("2014-01-31 12:12:12")}, new Student(){Name ="Rose", Birthday =Convert.ToDateTime("2014-01-10 11:12:12")}, new Student(){Name ="Mark", Birthday =Convert.ToDateTime("2014-01-09 10:12:12")} }; //javascript序列化器 JavaScriptSerializer jss=new JavaScriptSerializer(); //序列化学生集合对象得到json字符 string studentsJson=jss.Serialize(students); //将字符串响应到客户端 context.Response.Write(studentsJson); context.Response.End();运行结果是：
其中Tom所对应生日“2014-01-31”变成了1391141532000，这其实是1970 年 1 月 1 日至今的毫秒数；1391141532000/1000/60/60/24/365=44.11年，44+1970=2014年，按这种方法可以得出年月日时分秒和毫秒。这种格式是一种可行的表示形式但不是普通人可以看懂的友好格式，怎么让这个格式变化？
解决办法：
方法1：在服务器端将日期格式使用Select方法或LINQ表达式转换后发到客户端：
using System;using System.Collections.Generic;using System.Web;using System.Web.Script.Serialization;namespace JsonDate1{ using System.Linq; /// <summary> /// 学生类，测试用 /// </summary> public class Student { /// <summary> /// 姓名 /// </summary> public String Name { get; set; } /// <summary> /// 生日 /// </summary> public DateTime Birthday { get; set; } } /// <summary> /// 返回学生集合的json字符 /// </summary> public class GetJson : IHttpHandler { public void ProcessRequest(HttpContext context) { //设置服务器响应的结果为纯文本格式 context.Response.ContentType = "text/plain"; //学生对象集合 List<Student> students = new List<Student> { new Student(){Name ="Tom",Birthday =Convert.ToDateTime("2014-01-31 12:12:12")}, new Student(){Name ="Rose",Birthday =Convert.ToDateTime("2014-01-10 11:12:12")}, new Student(){Name ="Mark",Birthday =Convert.ToDateTime("2014-01-09 10:12:12")} }; //使用Select方法重新投影对象集合将Birthday属性转换成一个新的属性 //注意属性变化后要重新命名，并立即执行 var studentSet = students.Select ( p => new { p.Name, Birthday = p.Birthday.ToString("yyyy-mm-dd") } ).ToList(); //javascript序列化器 JavaScriptSerializer jss = new JavaScriptSerializer(); //序列化学生集合对象得到json字符 string studentsJson = jss.Serialize(studentSet); //将字符串响应到客户端 context.Response.Write(studentsJson); context.Response.End(); } public bool IsReusable { get { return false; } } }}Select方法重新投影对象集合将Birthday属性转换成一个新的属性，注意属性变化后要重新命名，属性名可以相同；这里可以使用select方法也可以使用LINQ查询表达式，也可以选择别的方式达到相同的目的；这种办法可以将集合中客户端不用的属性剔除，达到简单优化性能的目的。
运行结果：
这时候的日期格式就已经变成友好格式了，不过在javascript中这只是一个字符串。
方法二：
在javascript中将"Birthday":"/Date(1391141532000)/"中的字符串转换成javascript中的日期对象，可以将Birthday这个Key所对应的Value中的非数字字符以替换的方式删除，到到一个数字1391141532000，然后实例化一个Date对象，将1391141532000毫秒作为参数，得到一个javascript中的日期对象，代码如下：
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>json日期格式处理</title> <script src="Scripts/jquery-1.10.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $.getJSON("getJson.ashx", function (students) { $.each(students, function (index, obj) { $("<li/>").html(obj.Name).appendTo("#ulStudents"); //使用正则表达式将生日属性中的非数字（D）删除 //并把得到的毫秒数转换成数字类型 var birthdayMilliseconds = parseInt(obj.Birthday.replace(/D/igm, "")); //实例化一个新的日期格式，使用1970 年 1 月 1 日至今的毫秒数为参数 var birthday = new Date(birthdayMilliseconds); $("<li/>").html(birthday.toLocaleString()).appendTo("#ulStudents"); ; }); }); }); </script></head><body> <h2>json日期格式处理</h2> <ul id="ulStudents"> </ul></body></html>运行结果：
上的使用正则/D/igm达到替换所有非数字的目的，D表示非数字，igm是参数，分别表示忽视(ignore)大小写；多次、全局(global)替换；多行替换(multi-line);有一些时候还会出现+86的情况，只需要变换正则同样可以达到目的。另外如果项目中反复出现这种需要处理日期格式的问题，可以扩展一个javascript方法，代码如下：
$(function () { $.getJSON("getJson.ashx", function (students) { $.each(students, function (index, obj) { $("<li/>").html(obj.Name).appendTo("#ulStudents"); //使用正则表达式将生日属性中的非数字（D）删除 //并把得到的毫秒数转换成数字类型 var birthdayMilliseconds = parseInt(obj.Birthday.replace(/D/igm, "")); //实例化一个新的日期格式，使用1970 年 1 月 1 日至今的毫秒数为参数 var birthday = new Date(birthdayMilliseconds); $("<li/>").html(birthday.toLocaleString()).appendTo("#ulStudents"); $("<li/>").html(obj.Birthday.toDate()).appendTo("#ulStudents"); }); }); }); //在String对象中扩展一个toDate方法，可以根据要求完善 String.prototype.toDate = function () { var dateMilliseconds; if (isNaN(this)) { //使用正则表达式将日期属性中的非数字（D）删除 dateMilliseconds =this.replace(/D/igm, ""); } else { dateMilliseconds=this; } //实例化一个新的日期格式，使用1970 年 1 月 1 日至今的毫秒数为参数 return new Date(parseInt(dateMilliseconds)); };上面扩展的方法toDate不一定合理，也不够强大，可以根据需要修改。
方法三：
可以选择一些第三方的json工具类，其中不乏有一些已经对日期格式问题已处理好了的，常见的json序列化与反序列化工具库有：
1.fastJSON.
2.JSON_checker.
3.Jayrock.
4.Json.NET - LINQ to JSON.
5.LitJSON.
6.JSON for .NET.
7.JsonFx.
8.JSONSharp.
9.JsonExSerializer.
10.fluent-json
11.Manatee Json
这里以litjson为序列化与反序列化json的工具类作示例，代码如下：
using System;using System.Collections.Generic;using System.Web;using LitJson;namespace JsonDate2{ using System.Linq; /// <summary> /// 学生类，测试用 /// </summary> public class Student { /// <summary> /// 姓名 /// </summary> public String Name { get; set; } /// <summary> /// 生日 /// </summary> public DateTime Birthday { get; set; } } /// <summary> /// 返回学生集合的json字符 /// </summary> public class GetJson : IHttpHandler { public void ProcessRequest(HttpContext context) { //设置服务器响应的结果为纯文本格式 context.Response.ContentType = "text/plain"; //学生对象集合 List<Student> students = new List<Student> { new Student(){Name ="Tom",Birthday =Convert.ToDateTime("2014-01-31 12:12:12")}, new Student(){Name ="Rose",Birthday =Convert.ToDateTime("2014-01-10 11:12:12")}, new Student(){Name ="Mark",Birthday =Convert.ToDateTime("2014-01-09 10:12:12")} }; //序列化学生集合对象得到json字符 string studentsJson = JsonMapper.ToJson(students); //将字符串响应到客户端 context.Response.Write(studentsJson); context.Response.End(); } public bool IsReusable { get { return false; } } }}运行结果如下：
这时候的日期格式就基本正确了，只要在javascript中直接实例化日期就好了，
var date = new Date("01/31/2014 12:12:12");alert(date.toLocaleString());客户端的代码如下：
$(function () { $.getJSON("GetJson2.ashx", function (students) { $.each(students, function (index, obj) { $("<li/>").html(obj.Name).appendTo("#ulStudents"); var birthday = new Date(obj.Birthday); $("<li/>").html(birthday.toLocaleString()).appendTo("#ulStudents"); }); }); }); var date = new Date("01/31/2014 12:12:12"); alert(date.toLocaleString());XMLHttpRequest 函数获取数据，它是一种 API，允许客户端 JavaScript 通过 HTTP 连接到远程服务器。Ajax 也是许多 mashup 的驱动力，它可将来自多个地方的内容集成为单一 Web 应用程序。我们都知道，由于受到浏览器的限制，AJAX 是不允许跨域请求。不过可以通过使用 JSONP 来实现。JSONP 是一种通过脚本标记注入的方式，它是可以引用跨域 URL 的 js 脚本，不过需要提供一个回调函数（必须在您自己的页面上），因此，你可以自己处理结果。 本文介绍了 JSONP 的是怎么在 jQuery，MooTools 的，Dojo Toolkit 中实现的。
要了解 JSONP，不得不提一下 JSON，那什么是 JSON？
JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript, it can be used in the language with no muss or fuss.JSONP(JSON with Padding) 是一个非官方的协议，它允许在服务器端集成 Script tags 返回至客户端，通过 javascript callback 的形式实现跨域访问（这仅仅是 JSONP 简单的实现形式）。
由于同源策略的限制，XmlHttpRequest 只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过 script 标签实现跨域请求，然后在服务端输出 JSON 数据并执行回调函数，从而解决了跨域的数据请求。
jQuery.getJSON 方法：
Js 代码如下:
jQuery.getJSON("http://search.twitter.com/search.json?callback=?",{ q: "Arsenal" },function(tweets) { // Handle response here console.info("Twitter returned: ",tweets); });或者类似
Js 代码如下:
$.ajax({ type:"get", data:"random = "+Math.random(), url:url, dataType:"jsonp", jsonp:"callback", success:function(data){ $.each(data, function(key, val) { $("#myDiv").html($("#myDiv").html()+val.cvalue+"</br>"); }); } }); 回调方法的参数通过 getJSON 就可以获取到 json 对象
MooTools 需要 Request.JSONP Class，可以从这里下载 MooTools More。选择 Request.JSONP
这样从另一个域获取 JSON 就是小菜一碟了
Js 代码如下:
new Request.JSONP({ url: "http://search.twitter.com/search.json", data: { q: "Arsenal" },//提交的参数, 没有参数可以不写 callbackKey: 'jsoncallback',//自己定义回调函数的参数名称 onComplete: function(tweets) { // Log the result to console for inspection console.info("Twitter returned: ",tweets); } }).send(); 如果自己定义了回调函数的参数名称，跟 jquery 一样
服务器端你需要这样去取得：
Js 代码如下:
String callback = request.getParameter("jsoncallback");//取得回调方法名 response.setHeader("Cache-Control", "no-cache"); response.setContentType("text/json;charset = UTF-8"); PrintWriter out; try { out = response.getWriter(); out.print(callback+"("+message+")");//这里是关键.主要就是这里 out.flush(); out.close(); } catch (IOException e) { e.printStackTrace(); } 顺便说一句：个人比较喜欢 mootools 的语法结构，和框架设计思路，再次赞美!
JSONP 在 Dojo Toolkit 中需要用上 dojo.io.script (点击可以查看示例)
Js 代码如下：
// dojo.io.script is an external dependency, so it must be required dojo.require("dojo.io.script"); // When the resource is ready dojo.ready(function() { // Use the get method dojo.io.script.get({ // The URL to get JSON from Twitter url: "http://search.twitter.com/search.json", // The callback paramater callbackParamName: "callback", // Twitter requires "callback" // The content to send content: { q: "Arsenal" }, // The success callback load: function(tweetsJson) { // Twitter sent us information! // Log the result to console for inspection console.info("Twitter returned: ",tweetsJson); } }); }); JSONP 是一种非常有效的，可靠的，容易实现的远程数据获取方式。JSONP 的策略也使开发人员能够避免繁琐的服务器代理方式,很方便的获取数据。
JSONP (JSON with Padding) 是一个非官方的协议，它允许在服务器端集成 Script tags 返回至客户端，通过 javascript callback 的形式实现跨域访问（这仅仅是 JSONP 简单的实现形式）。
客户端代码：
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <script type="text/javascript"> function jsonpCallback(result) { //alert(result); for(var i in result) { alert(i+":"+result[i]); //循环输出a:1, b:2, etc. } } var JSONP=document.createElement("script"); JSONP.type = "text/javascript"; JSONP.src = "http://crossdomain.com/services.php?callback = jsonpCallback"; document.getElementsByTagName("head")[0].appendChild(JSONP); </script>服务端代码：
<?php //服务端返回 JSON 数据 $arr=array('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5); $result=json_encode($arr); //echo $_GET['callback'].'("Hello,World!")'; //echo $_GET['callback']."($result)"; //动态执行回调函数 $callback = $_GET['callback']; echo $callback."($result)";本文提供了两个实例，其中，示例一讲解JS根据key值获取URL中的参数值及把URL的参数转换成json对象；示例二讲解js获取url传递参数，具体介绍内容请看下文：
//把url的参数部分转化成json对象parseQueryString: function (url) { var reg_url = /^[^?]+?([wW]+)$/, reg_para = /([^&=]+)=([wW]*?)(&|$|#)/g, arr_url = reg_url.exec(url), ret = {}; if (arr_url && arr_url[1]) { var str_para = arr_url[1], result; while ((result = reg_para.exec(str_para)) != null) { ret[result[1]] = result[2]; } } return ret;}// 通过key获取url中的参数值getQueryString: function (name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null;}<Script language="javascript">function GetRequest() { var url = location.search; //获取url中"?"符后的字串 var theRequest = new Object(); if (url.indexOf("?") != -1) { var str = url.substr(1); strs = str.split("&"); for(var i = 0; i < strs.length; i ++) { theRequest[strs[i].split("=")[0]]=(strs[i].split("=")[1]); } } return theRequest;}</Script>然后我们通过调用此函数获取对应参数值：
<Script language="javascript"> var Request = new Object(); Request = GetRequest(); var 参数1,参数2,参数3,参数N; 参数1 = Request[''参数1'']; 参数2 = Request[''参数2'']; 参数3 = Request[''参数3'']; 参数N = Request[''参数N''];</Script>以此获取url串中所带的同名参数
js获取url传递参数方法二 正则分析法：
function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i"); var r = window.location.search.substr(1).match(reg); if (r!=null) return (r[2]); return null;}alert(GetQueryString("参数名1"));alert(GetQueryString("参数名2"));alert(GetQueryString("参数名3"));其他参数获取介绍：//设置或获取对象指定的文件名或路径。?alert(window.location.pathname);//设置或获取整个 URL 为字符串。?alert(window.location.href);//设置或获取与 URL 关联的端口号码。?alert(window.location.port);//设置或获取 URL 的协议部分。?alert(window.location.protocol);//设置或获取 href 属性中在井号“#”后面的分段。?alert(window.location.hash);//设置或获取 location 或 URL 的 hostname 和 port 号码。?alert(window.location.host);//设置或获取 href 属性中跟在问号后面的部分。?alert(window.location.search);大家知道可以使用url传递参数值，本站几乎随便一个链接都会有传值，既然要传递值，那么自然要获取，否则就没有任何意义了，下面就通过实例介绍一下如何使用javascript获取url传递的参数和参数值。
代码实例如下:
[javascript](function(){ var urlToObject=function(url){ var urlObject = {}; if (/?/.test(url)){ var urlString=url.substring(url.indexOf("?")+1); var urlArray=urlString.split("&"); for(var i=0,len=urlArray.length;i<len;i++){ var urlItem=urlArray[i]; var item = urlItem.split("="); urlObject[item[0]]=item[1]; } return urlObject; } }; var testUrl="http://softwhy.com/index.php?a=0&b=1&c=2"; var result=urlToObject(testUrl); for (var key in result){ console.log(key+"="+result[key]); } })();
一.实现原理:
1.判断url是否含有参数。在本代码中使用正则表达式if(/?/.test(url))判断url中是否含有?，如果含有问号，那么就说明此链接中含有参数，然后执行if语句中的代码。
2.获取url中的参数和参数值。在这里是使用split()函数分割字符串，依次实现此功能。
二.代码注释:
1.(function(){})()，声明一个匿名函数并执行。
2.var urlToObject=function(url){}，声明一个函数，此函数的参数是一个超链接。
3.var urlObject={}，声明一个对象直接量。
4.if(/?/.test(url)) ，判断链接中是否含有?，也就是是否含有参数。
5.var urlString=url.substring(url.indexOf("?")+1)，截取url问号只有的字符串。
6.var urlArray=urlString.split("&")，使用split()函数以&为标记分割字符串，并生成一个数组。这样每一个数组元素就是一个参数和参数值对。
7.for(var i=0,len=urlArray.length;i<len;i++)，使用for循环遍历urlArray数组。
8.var urlItem=urlArray，将指定索引的数组值赋值给变量urlItem。
9.var item=urlItem.split("=")，再使用=分割字符串并生成一个数组，因为urlArray数组每一个元素都是一个参数和参数值对，例如"a=0",这样再经过分割，生成新数组的第一项就是参数名称，第二个项就是参数值。
10.urlObject[item[0]]=item[1]，将参数名称作为对象的属性名称，参数值作为对象的属性值。
11.return urlObject，返回对象。
12.var testUrl=http://softwhy.com/index.php?a=0&b=1&c=2，用作测试的url。
13.var result=urlToObject(testUrl)，将参数和参数值转换成对象的属性和属性值，并返回此对象。
14.for(var key in result)，遍历此对象.
本文提供的代码用于从后台获取JSON数据，并将内容填充到下拉列表中，详细的操作过程如下所示：
需求：url:链接 par：ID sel：下拉列表选择器
//获取下拉列表function BuildSelectBox(url, par, sel) { $(sel).empty(); $.getJSON(url, { id: par }, function (json, textStatus) { for (var i = json.length - 1; i >= 0; i--) { $(sel).prepend('<option value="' + json[i].Id + '">' + json[i].Name + '</option>') }; $(sel).prepend('<option value="0">请选择</option>') });}以上代码很简单吧，此问题很easy的解决了。
Jquery使用Ajax获取后台返回的Json数据页面处理过程
具体实现过程请看下面代码示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="JS/jquery-1.8.0.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $.ajax({ url: 'jsondata.ashx', type: 'GET', dataType: 'json', timeout: 1000, cache: false, beforeSend: LoadFunction, //加载执行方法 error: erryFunction, //错误执行方法 success: succFunction //成功执行方法 }) function LoadFunction() { $("#list").html('加载中...'); } function erryFunction() { alert("error"); } function succFunction(tt) { $("#list").html(''); //eval将字符串转成对象数组 //var json = { "id": "10086", "uname": "zhangsan", "email": "zhangsan@qq.com" }; //json = eval(json); //alert("===json:id=" + json.id + ",uname=" + json.uname + ",email=" + json.email); var json = eval(tt); //数组 $.each(json, function (index, item) { //循环获取数据 var name = json[index].Name; var idnumber = json[index].IdNumber; var sex = json[index].Sex; $("#list").html($("#list").html() + "<br>" + name + " - " + idnumber + " - " + sex + "<br/>"); }); } }); </script> </head> <body> <ul id="list"> </ul> </body> </html><%@ WebHandler Language="C#" Class="jsondata" %> using System; using System.Web; using System.Web.Script.Serialization; using System.IO; using System.Text; using System.Collections.Generic; using Newtonsoft.Json; using System.Data; public class jsondata : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string JsonStr = JsonConvert.SerializeObject(CreateDT()); context.Response.Write(JsonStr); context.Response.End(); } #region 创建测试数据源 //创建DataTable protected DataTable CreateDT() { DataTable tblDatas = new DataTable("Datas"); //序号列 //tblDatas.Columns.Add("ID", Type.GetType("System.Int32")); //tblDatas.Columns[0].AutoIncrement = true; //tblDatas.Columns[0].AutoIncrementSeed = 1; //tblDatas.Columns[0].AutoIncrementStep = 1; //数据列 tblDatas.Columns.Add("IdNumber", Type.GetType("System.String")); tblDatas.Columns.Add("Name", Type.GetType("System.String")); tblDatas.Columns.Add("BirthDate", Type.GetType("System.String")); tblDatas.Columns.Add("Sex", Type.GetType("System.String")); tblDatas.Columns.Add("Wage", Type.GetType("System.Decimal")); tblDatas.Columns.Add("Bonus", Type.GetType("System.Decimal")); //统计列开始 tblDatas.Columns.Add("NeedPay", Type.GetType("System.String"), "Wage+Bonus"); //统计列结束 tblDatas.Columns.Add("Address", Type.GetType("System.String")); tblDatas.Columns.Add("PostCode", Type.GetType("System.String")); //设置身份证号码为主键 tblDatas.PrimaryKey = new DataColumn[] { tblDatas.Columns["IdNumber"] }; tblDatas.Rows.Add(new object[] { "43100000000000", "张三", "1982", "0", 3000, 1000, null, "深圳市", "518000" }); tblDatas.Rows.Add(new object[] { "43100000000001", "李四", "1983", "1", 3500, 1200, null, "深圳市", "518000" }); tblDatas.Rows.Add(new object[] { "43100000000002", "王五", "1984", "1", 4000, 1300, null, "深圳市", "518000" }); tblDatas.Rows.Add(new object[] { "43100000000003", "赵六", "1985", "0", 5000, 1400, null, "深圳市", "518000" }); tblDatas.Rows.Add(new object[] { "43100000000004", "牛七", "1986", "1", 6000, 1500, null, "深圳市", "518000" }); return tblDatas; } #endregion public bool IsReusable { get { return false; } } }<!-- <script type="text/javascript"> $(function () { $.ajax({ url: 'jsondata.ashx', type: 'GET', dataType: 'json', timeout: 1000, cache: false, beforeSend: LoadFunction, //加载执行方法 error: erryFunction, //错误执行方法 success: succFunction //成功执行方法 }) function LoadFunction() { $("#list").html('加载中...'); } function erryFunction() { alert("error"); } function succFunction(tt) { $("#list").html(''); //eval将字符串转成对象数组 //var json = { "id": "10086", "uname": "zhangsan", "email": "zhangsan@qq.com" }; //json = eval(json); //alert("===json:id=" + json.id + ",uname=" + json.uname + ",email=" + json.email); var json = eval(tt); //数组 $.each(json, function (index, item) { //循环获取数据 var Key = json[index].key; var Info = json[index].info; // var idnumber = json[index].IdNumber; // var sex = json[index].Sex; $("#list").html($("#list").html() + "<br>" + Key + "----" + Info.name); //+ " - " + idnumber + " - " + sex + "<br/>"); }); } }); </script> --><%@ WebHandler Language="C#" Class="jsondata" %> using System; using System.Web; using System.Web.Script.Serialization; using System.IO; using System.Text; using System.Collections; using System.Collections.Generic; using System.Data; public class jsondata : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; context.Response.Cache.SetNoStore(); string data = "[{"key":"1","info":{"name":"222","age":"333","sex":"444"}},{"key":"2","info":{"name":"999","age":"000","sex":"111"}}]"; context.Response.Write(new JavaScriptSerializer().Serialize(data)); } public bool IsReusable { get { return false; } } }<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test2013.aspx.cs" Inherits="Test2013" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="JS/jquery-1.8.0.min.js" type="text/javascript"></script> <script type="text/javascript"> function GetPara(o) { var sortid = $(o).val(); $.ajax({ url: 'GetPara.ashx?type=get&sortid=' + sortid, type: 'GET', dataType: 'json', timeout: 3000, cache: false, beforeSend: LoadFunction, //加载执行方法 error: erryFunction, //错误执行方法 success: succFunction //成功执行方法 }) function LoadFunction() { $("#list").html('加载中...'); } function erryFunction() { alert("error"); } function succFunction(tt) { $("#list").html(''); var json = eval(tt); //数组 $.each(json, function (index, item) { //循环获取数据 var Id = json[index].id; var Name = json[index].name; $("#list").html($("#list").html() + "<br>" + Name + "<input type='text' id='" + Id + "' /><br/>"); }); } }; function SavePara() { var parameter = {}; $("#list input:text").each(function () { var key = $(this).attr("id"); var value = $(this).val(); parameter[key] = value; }); $.ajax({ url: 'GetPara.ashx?type=save', type: 'POST', dataType: 'json', data: parameter, timeout: 3000, cache: false, beforeSend: LoadFunction, //加载执行方法 error: erryFunction, //错误执行方法 success: succFunction //成功执行方法 }) function LoadFunction() { } function erryFunction() { } function succFunction(tt) { } }; </script> </head> <body> <form id="form1" runat="server"> <div> <asp:DropDownList ID="ddl1" runat="server" onchange="GetPara(this)"> </asp:DropDownList> <ul id="list"></ul> <input type="button" value="保存数据" onclick="SavePara()" /> </div> </form> </body> </html> <%@ WebHandler Language="C#" Class="GetPara" %> using System; using System.Web; using System.Data; using System.Collections.Generic; using System.Web.Script.Serialization; public class GetPara : IHttpHandler { public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; string SortId = context.Request["sortid"]; string Type = context.Request["type"]; if (Type=="get") { if (!string.IsNullOrEmpty(SortId)) { DataTable dt = MSCL.SqlHelper.GetDataTable("select * from PR_PRODUCTPARAS where sortid='" + SortId + "' "); List<Paras> list = new List<Paras>(); for (int i = 0; i < dt.Rows.Count; i++) { Paras a = new Paras(); a.id = dt.Rows[i]["PARAID"].ToString(); a.name = dt.Rows[i]["PARANAME"].ToString(); list.Add(a); } context.Response.Write(new JavaScriptSerializer().Serialize(list)); } } else if (Type == "save") { //反序列化json System.IO.Stream stream = context.Request.InputStream; System.IO.StreamReader sr = new System.IO.StreamReader(stream, System.Text.Encoding.GetEncoding("UTF-8")); string sJson = sr.ReadToEnd(); if (sJson.Contains("&")) { string[] sArr = sJson.Split('&'); for (int i = 0; i < sArr.Length; i++) { string[] sArr1 = sArr[i].Split('='); object id = sArr1[0]; object value = sArr1[1]; } } } else { } } public bool IsReusable { get { return false; } } public struct Paras { public string id; public string name; } }本文实例讲述了js获取json元素数量的方法。分享给大家供大家参考。具体实现方法如下：
<script>var keleyijson={"plug1":"myslider","plug2":"zonemenu","plug3":"javascript"}function JSONLength(obj) {var size = 0, key;for (key in obj) {if (obj.hasOwnProperty(key)) size++;}return size;};document.write("json对象的元素个数是："+JSONLength(keleyijson));</script>效果如下：
json对象的元素个数是：3
本文总结了使用JavaScript获取指定元素大小、位置的几种方式。如果你用的是JQuery，则获取元素大小是非常简单的。但是我们还是有必要知道如何通过原生JavaScript来获取，需要的朋友可以参考下。
var obj = document.getElementById("test");alert(obj.height + "
" + obj.width);// 200px 200px typeof=string只是将style属性中的值显示出来var obj = document.getElementById("test");var style = null;if (window.getComputedStyle) { style = window.getComputedStyle(obj, null); // 非IE} else { style = obj.currentStyle; // IE}alert("width=" + style.width + "
height=" + style.height);注意：如果不设置元素的宽度和高度，那么在非IE浏览器下返回默认的宽度和高度。在IE下面返回auto字符串
var obj = document.styleSheets[0]; // [object StyleSheetList] 样式表的个数<link>var rule = null;// [object CSSRule]if (obj.cssRules){ rule = obj.cssRules[0]; // 非IE [object CSSRuleList]} else { rule = obj.rules[0]; // IE [object CSSRuleList]} alert(rule.style.width);cssRules(或rules)只能获取到内联和链接样式的宽和高，不能获取到行内和计算后的样式。
总结：以上的三种CSS获取元素大小的方法，只能获取元素的CSS大小，却无法获取元素本身实际的大小。比如加上了内边距、滚动条、边框之类的。
1. clientWidth和clientHeight
这组属性可以获取元素可视区的大小，可以得到元素内容及内边距所占据的空间大小。返回了元素大小，但没有单位，默认单位是px，如果你强行设置了单位，比如100em之类，它还是会返回px的大小。(CSS获取的话，是照着你设置的样式获取)。对于元素的实际大小，clientWidth和clientHeight理解方式如下：
a. 增加边框，无变化；
b. 增加外边距，无变化；
c. 增加滚动条，最终值等于原本大小减去滚动条的大小；
d. 增加内边距，最终值等于原本大小加上内边距的大小；
<div id="test"></div>#test{ background-color: green; width: 200px; height: 200px; border: solid 5px red; /* 对应a理解，结果：200,200 */ margin: 10px; /* 对应b理解，结果：200,200*/ padding: 20px; /* 对应c理解，结果：240,240*/ overflow: scroll; /* 对应d理解，结果：223,223，223=200（css大小）+40（两边内边距）-17（滚动条宽度）*/}window.onload = function(){ var obj = document.getElementById("test"); alert(obj.clientWidth + "," + obj.clientHeight);};注意：如果说没有设置任何CSS的宽和高度，那么非IE浏览器会算上滚动条和内边距的计算后的大小，而IE浏览器则返回0（IE8已修复）。
2. scrollWidth和scrollHeight
这组属性可以获取滚动内容(可见内容)的元素大小。返回了元素大小，默认单位是px。如果没有设置任何CSS的宽和高度，它会得到计算后的宽度和高度。对于元素的实际大小，scrollWidth和scrollHeight理解如下:
1. 增加边框，不同浏览器有不同解释（下面在IE8中运行正常，IE6运行不正常）：
a) Firefox和Opera浏览器会增加边框的大小，220x220
b) IE、Chrome和Safari浏览器会忽略边框大小，200x200
c) IE浏览器只显示它本来内容的高度，200x18（IE8已经修改该问题）
2. 增加内边距，最终值会等于原本大小加上内边距大小，220x220，IE为220x38
3. 增加滚动条，最终值会等于原本大小减去滚动条大小，184x184，IE为184x18
4. 增加外边据，无变化。
5. 增加内容溢出，Firefox、Chrome和IE获取实际内容高度，Opera比前三个浏览器获取的高度偏小，Safari比前三个浏览器获取的高度偏大。
3. offsetWidth和offsetHeight
这组属性可以返回元素实际大小，包含边框、内边距和滚动条。返回了元素大小，默认单位是px。如果没有设置任何CSS的宽和高度，他会得到计算后的宽度和高度。对于元素的实际大小，offsetWidth和offsetHeight理解如下：
1.增加边框，最终值会等于原本大小加上边框大小，为220；
2.增加内边距，最终值会等于原本大小加上内边距大小，为220；
3.增加外边据，无变化；
4.增加滚动条，无变化，不会减小；
对于元素大小的获取，一般是块级(block)元素并且以设置了CSS大小的元素较为方便。如果是内联元素(inline)或者没有设置大小的元素就尤为麻烦，所以，建议使用的时候注意。
<div id="test">test div element</div>#test{ background-color: green; width: 200px; height: 200px; border: solid 10px red; /*结果：220,220*/ margin: 10px; /*结果：220,220（无变化）*/ padding: 10px; /*结果：240,240*/ overflow：scroll; /*结果：240,240（无变化）*/}window.onload = function(){ var obj = document.getElementById("test"); alert(obj.offsetWidth + "," + obj.offsetHeight);};<div id="test">test div element</div>#test{ background-color: green; width: 200px; height: 200px; border-top: solid 10px red;s border-right: solid 20px #00ff00; border-bottom: solid 30px blue; border-left: solid 40px #808080; }window.onload = function(){ var obj = document.getElementById("test"); alert(obj.clientLeft + "," + obj.clientTop); // 40,10};2. offsetLeft和offsetTop
这组属性可以获取当前元素相对于父元素的位置。获取元素当前相对于父元素的位置，最好将它设置为定位position:absolute；否则不同的浏览器会有不同的解释。
a、将position设置为absolute，则所有浏览器返回一样的值。如：
<div id="test">test div element</div> #test { background-color: green; width: 200px; height: 200px; position: absolute; left: 30px; top: 20px; } window.onload = function(){ var obj = document.getElementById("test"); alert(obj.offsetLeft + "," + obj.offsetTop); // 30， 20 };b、加上边框和内边距不会影响它的位置，但加上外边据会累加。
3、box.offsetParent得到父元素
offsetParent中，如果本身父元素是<body>，非IE返回body对象，IE（IE6）返回html对象。如果两个元素嵌套，如果上父元素没有使用定位position:absolute，那么offsetParent将返回body对象或html对象。所以，在获取offsetLeft和offsetTop时候，CSS定位很重要。
如果说，在很多层次里，外层已经定位，我们怎么获取里层的元素距离body或html元素之间的距离呢？也就是获取任意一个元素距离页面上的位置。那么我们可以编写函数，通过不停的向上回溯获取累加来实现。
box.offsetTop + box.offsetParent.offsetTop; // 只有两层的情况下 function offsetLeft(element){ var left = element.offsetLeft; // 得到第一层距离 var parent = element.offsetParent; // 得到第一个父元素 while (parent !== null) { // 如果还有上一层父元素 left += parent.offsetLeft; // 把本层的距离累加 parent = parent.offsetParent; // 得到本层的父元素 } //然后继续循环 return left;}4.scrollTop和scrollLeft
这组属性可以获取滚动条被隐藏(滚动条上方区域)的区域大小，也可设置定位到该区域。如果要让滚动条滚动到最初始的位置，那么可以写一个函数：
function scrollStart (element) { if ( element.scrollTop != 0 ) { element.scrollTop = 0; }}5、getBoundingClientRect()
这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。
var box=document.getElementById('box'); // 获取元素alert(box.getBoundingClientRect().top); // 元素上边距离页面上边的距离alert(box.getBoundingClientRect().right); // 元素右边距离页面左边的距离alert(box.getBoundingClientRect().bottom); // 元素下边距离页面上边的距离alert(box.getBoundingClientRect().left); // 元素左边距离页面左边的距离注意：IE、Firefox3+、Opera9.5、Chrome、Safari支持，在IE中，默认坐标从(2,2)开始计算，导致最终距离比其他浏览器多出两个像素，我们需要做个兼容。
document.documentElement.clientTop; //非IE为0，IE为2document.documentElement.clientLeft; //非IE为0，IE为2functiongGetRect (element) { var rect = element.getBoundingClientRect(); var top = document.documentElement.clientTop; var left= document.documentElement.clientLeft; return{ top : rect.top - top, bottom : rect.bottom - top, left : rect.left - left, right : rect.right - left }}分别加上外边据、内边距、边框和滚动条，用于测试所有浏览器是否一致。
Twitter和Facebook要求身份验证来获取文章的数量，但事实证明你可以通过JSONP来获取这些信息，本文介绍如何使用一些简单的代码来获取并跳过验证这一步，请参考下面的步骤。
我将使用基本的JavaScript来告诉你如何做到这一点:
// 获取文章数量的封装对象 var socialGetter = (function() { /* JSONP: 获取脚本的工具函数 */ function injectScript(url) { var script = document.createElement('script'); script.async = true; script.src = url; document.body.appendChild(script); } return { getFacebookCount: function(url, callbackName) { injectScript('https://graph.facebook.com/?id=' + url + '&callback=' + callbackName); }, getTwitterCount: function(url, callbackName) { injectScript('http://urls.api.twitter.com/1/urls/count.json?url=' + url + '&callback=' + callbackName); } }; })(); // 回调方法 function twitterCallback(result) { result.count && console.log('The count is: ', result.count); } function facebookCallback(result) { result.shares && console.log('The count is: ', result.shares); } // 调用 socialGetter.getFacebookCount('http://davidwalsh.name/twitter-facebook-jsonp', 'facebookCallback'); socialGetter.getTwitterCount('http://davidwalsh.name/twitter-facebook-jsonp', 'twitterCallback'); Twitter和Facebook对于这些请求肯定有数量和频率上的限制，所以如果你的网站访问量很大，则JSONP很可能会被拦截或屏蔽。一种快速的解决方案是将文章数量信息存储在sessionStorage中，但这只是针对单个用户的方式。如果你运行的网站流量较大，你最好选择在服务器端抓取数据并缓存下来，并在一定的时间内自动刷新。
GET URL:
http://cdn.api.twitter.com/1/urls/count.JSon?url=http://stylehatch.co返回结果：
{ "count":528, "url":"http://stylehatch.co/"}GET URL:
http://graph.facebook.com/?id=http://stylehatch.co返回结果：
{ "id": "http://stylehatch.co", "shares": 61}GET URL:
http://api.pinterest.com/v1/urls/count.json?callback=&url=http://stylehatch.co返回结果：
({"count": 0, "url": "http://stylehatch.co"})GET URL:
http://www.linkedin.com/countserv/count/share?url=http://stylehatch.co&format=json返回结果：
{ "count":17, "fCnt":"17", "fCntPlusOne":"18", "url":"http://stylehatch.co"}POST URL:
https://clients6.google.com/rpc?key=YOUR_API_KEYPOST body:
[{ "method":"pos.plusones.get", "id":"p", "params":{ "nolog":true, "id":"http://stylehatch.co/", "source":"widget", "userId":"@viewer", "groupId":"@self" }, "jsonrpc":"2.0", "key":"p", "apiVersion":"v1"}]返回结果：
[{ "result": { "kind": "pos#plusones", "id": "http://stylehatch.co/", "isSetByViewer": false, "metadata": { "type": "URL", "globalCounts": { "count": 3097.0 } } } , "id": "p"}]GET URL:
http://www.stumbleupon.com/services/1.01/badge.getinfo?url=http://stylehatch.co返回结果：
{ "result":{ "url":"http://stylehatch.co/", "in_index":true, "publicid":"1iOLcK", "views":39, "title":"Style Hatch - Hand Crafted Digital Goods", "thumbnail":"http://cdn.stumble-upon.com/mthumb/941/72725941.jpg", "thumbnail_b":"http://cdn.stumble-upon.com/bthumb/941/72725941.jpg", "submit_link":"http://www.stumbleupon.com/submit/?url=http://stylehatch.co/", "badge_link":"http://www.stumbleupon.com/badge/?url=http://stylehatch.co/", "info_link":"http://www.stumbleupon.com/url/stylehatch.co/" }, "timestamp":1336520555, "success":true}这里有一个网站封装了一个小插件，专门用来在页面上显示社交网站分享工具条，可以直接拿过来用，比较方便！http://sharrre.com/
Facebook，Twitter，LinkedIn比较常用，给出调用API的例子：
// Facebook$.getJSON("http://graph.facebook.com/?id=http://stylehatch.co", function (d) { $("#fackbook_count").text("The Facebook Share count is: " + d.shares);});// Twitter$.getJSON("http://cdn.api.twitter.com/1/urls/count.json?url=http://stylehatch.co&callback=?", function (d) { $("#twitter_count").text("The Twitter Share count is: " + d.count);});// LinkedIn$.getJSON("http://www.linkedin.com/countserv/count/share?url=http://stylehatch.co&callback=?", function (d) { $("#linkedin_count").text("The LinkdeIn Share count is: " + d.count);});IE浏览器可能会无法正确获取到Facebook返回的数据，可以尝试在URL后面加上&callback=?，这样JQuery会将它当成JSONP来调用。
Facebook还有另一个API返回XML数据，调用方法是这样的：
$.get("http://api.facebook.com/method/links.getStats?urls=http://stylehatch.co", function (d) { $("#fackbook_count").text("The Facebook Share count is: " + $(d).find("total_count").text());});如果在IE浏览器下出现No Transport错误而无法获取到Facebook返回的数据，尝试在JavaScript代码的最前面加上$.support.cors = true;允许跨域访问数据。
我们将上面Facebook，Twitter，LinkedIn三个社交网站的API进行封装，以方便页面调用。
$.fn.getShareCount = function (url) { var self = this; var displayShareCount = function (val, obj) { if (!isNaN(val) && val > 0) { obj.show(); if (val > 999) { obj.attr("title", val); obj.text("500+"); } else obj.text(val); } }; return { facebook: function () { $.get("http://api.facebook.com/method/links.getStats?urls=" + url, function (d) { var c = $(d).find("total_count").text(); self.each(function () { displayShareCount(c, $(this)); }); }); }, twitter: function () { $.getJSON("http://cdn.api.twitter.com/1/urls/count.json?url=" + url + "&callback=?", function (d) { self.each(function () { displayShareCount(d.count, $(this)); }); }); }, linkedin: function () { $.getJSON("http://www.linkedin.com/countserv/count/share?url=" + url + "&callback=?", function (d) { self.each(function () { displayShareCount(d.count, $(this)); }); }); } };};然后在页面上这样调用：
$(function () { var shareUrl = window.location.href.toLowerCase(); $('#fackbook_count').getShareCount(shareUrl).facebook(); $('#twitter_count').getShareCount(shareUrl).twitter(); $('#linkedin_count').getShareCount(shareUrl).linkedin();});for(var i in datares){ if (datares.hasOwnProperty(i)) { sel.append("<option value='"+datares[i].deptid+"'>"+datares[i].deptname+"</option>"); } } ajax请求返回map，并遍历
$.ajax({ type: "POST",url: "<%=path%>/account/queryRolesAndGroups.action",data: "enterpriseId="+eid,success: function(msg){var obj=eval("(" + msg + ")");$.each(obj.groupList, function(i,item){ alert(item.groupName); })}}) })发送请求到后台，然后后台通过各种操作，得到相应数据
如果数据为 map，map中包含了多个list，
pw.print(net.sf.json.JSONObject.fromObject(returnMap.get("map")).toString());
后台这样转换，然后前台转换下：var obj=eval("(" + msg + ")");
就可以遍历里面的数据了（注意：net.sf.json.JSONArray.fromObject(returnMap.get("list")).toString()）这样是转换单个集合时适用，然后前台直接遍历即可，不需要强转
success: function(msg){alert（msg.length）;$.each(msg, function(i,item){ alert(item.name); })}JSONArray转包含多个list的map时适用。
还有后台pw.print和pw.println的使用也要注意，当单个数据0,1来给后台判断时，pw.println会带换行符，永远不等于0,1.
response.setContentType("text/plain;charset=UTF-8"); PrintWriter pw =response.getWriter();这两句对返回乱码处理也要特别注意先后顺序。
PrintWriter pw =response.getWriter();在前的话，转换也不起作用！
JSON数据接收的特定过程必须的数据包：commons-lang，commons-beanutils等等，否则JSONObject 报错，并且不能接收。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page import="java.io.BufferedReader" %> <%@ page import="net.sf.json.*" %> <% BufferedReader in=request.getReader(); StringBuffer jsonStr=new StringBuffer(); String str=""; while((str=in.readLine())!=null){ jsonStr.append(str); } JSONObject jsonObj= JSONObject.fromObject(jsonStr.toString()); String name= jsonObj.getString("userName"); String pwd= jsonObj.getString("passWord"); String msg=""; if(name.equals("Tom")){ msg="登录成功"; }else { msg="登录失败"; } response.getWriter().write(msg); %> JSP（Java Server Pages)是由Sun Microsystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。JSP技术有点类似ASP技术，它是在传统的网页HTML文件(*.htm,*.html)中插入Java程序段(Scriptlet)和JSP标记(tag)，从而形成JSP文件(*.jsp)。 用JSP开发的Web应用是跨平台的，既能在Linux下运行，也能在其他操作系统上运行。
（1）一次编写，到处运行。除了系统之外，代码不用做任何更改。
（2）系统的多平台支持。基本上可以在所有平台上的任意环境中开发，在任意环境中进行系统部署，在任意环境中扩展。相比ASP.NET的局限性JSP的优势是显而易见的。
（3）强大的可伸缩性。从只有一个小的Jar文件就可以运行Servlet/JSP，到由多台服务器进行集群和负载均衡，到多台Application进行事务处理，消息处理，一台服务器到无数台服务器，Java显示了一个巨大的生命力。
（4）多样化和功能强大的开发工具支持。这一点与ASP很像，Java已经有了许多非常优秀的开发工具，而且许多可以免费得到，并且其中许多已经可以顺利的运行于多种平台之下。
（5）支持服务器端组件。web应用需要强大的服务器端组件来支持，开发人员需要利用其他工具设计实现复杂功能的组件供web页面调用，以增强系统性能。JSP可以使用成熟的JAVA BEANS 组件来实现复杂商务功能。
（1） 与ASP一样，Java的一些优势正是它致命的问题所在。正是由于为了跨平台的功能，为了极度的伸缩能力，所以极大的增加了产品的复杂性。
（2） Java的运行速度是用class常驻内存来完成的，所以它在一些情况下所使用的内存比起用户数量来说确实是“最低性能价格比”了。从另一方面，它还需要硬盘空间来储存一系列的.java文件和.class文件，以及对应的版本文件。
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。JSONM文件中包含了关于“名称”和“值”的信息。有时候我们需要读取JSON格式的数据文件，在jQuery中可以使用Ajax或者$.getJSON()方法实现。
下面就使用jQuery读取music.txt文件中的JSON数据格式信息。
首先，music.txt中的内容如下：
[ {"optionKey":"1", "optionValue":"Canon in D"}, {"optionKey":"2", "optionValue":"Wind Song"}, {"optionKey":"3", "optionValue":"Wings"} ] 下来是HTML代码：
<div>点击按钮获取JSON数据</div> <input type="button" id="button" value="确定" /> <div id="result"></div> $(document).ready(function(){ $('#button').click(function(){ $.ajax({ type:"GET", url:"music.txt", dataType:"json", success:function(data){ var music="<ul>"; //i表示在data中的索引位置，n表示包含的信息的对象 $.each(data,function(i,n){ //获取对象中属性为optionsValue的值 music+="<li>"+n["optionValue"]+"</li>"; }); music+="</ul>"; $('#result').append(music); } }); return false; }); }); 当然，也可以使用$.getJSON()方法，代码简洁一点：
$(document).ready(function(){ $('#button').click(function(){ $.getJSON('music.txt',function(data){ var music="<ul>"; $.each(data,function(i,n){ music+="<li>"+n["optionValue"]+"</li>"; }); music+="</ul>"; $('#result').append(music); }); return false; }); }); jquery ajax处理json数据其实与其它ajax处理数据没什么很大的改动，我们只要简单处理一下ajax部份的dataType数据类型等于json即可解决了。
使用 AJAX 请求来获得 JSON 数据，并输出结果：
$("button").click(function(){ $.getJSON("demo_ajax_json.js",function(result){ $.each(result, function(i, field){ $("div").append(field + " "); }); });});该函数是简写的 Ajax 函数，等价于：
$.ajax({ url: url, data: data, success: callback, dataType: json});发送到服务器的数据可作为查询字符串附加到 URL 之后。如果 data 参数的值是对象（映射），那么在附加到 URL 之前将转换为字符串，并进行 URL 编码。
传递给 callback 的返回数据，可以是 JavaScript 对象，或以 JSON 结构定义的数组，并使用 $.parseJSON() 方法进行解析。
从 test.js 载入 JSON 数据并显示 JSON 数据中一个 name 字段数据：
$.getJSON("test.js", function(json){ alert("JSON Data: " + json.users[3].name);});首先给出要传的json数据：[{"demoData":"This Is The JSON Data"}]
1、使用普通的aspx页面来处理
本人觉得这种方式处理起来是最简单的了，看下面的代码吧。
$.ajax({ type: "post", url: "Default.aspx", dataType: "json", success: function (data) { $("input#showTime").val(data[0].demoData); }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(errorThrown); } });这里是后台传递数据的代码
Response.Clear(); Response.Write("[{"demoData":"This Is The JSON Data"}]"); Response.Flush(); Response.End();这种处理的方式将传递过来的数据直接解析为json数据，也就是说这里的前台js代码可能直接把这些数据解析成json对象数据，而并非字符串数据，如data[0].demoData，这里就直接使用了这个json对象数据
2、使用webservice(asmx)来处理
这种处理方式就不会将传递过来的数据当成是json对象数据，而是作为字符串来处理的，
$.ajax({ type: "post", url: "JqueryCSMethodForm.asmx/GetDemoData", dataType: "json",/*这句可用可不用，没有影响*/contentType: "application/json; charset=utf-8", success: function (data) { $("input#showTime").val(eval('(' + data.d + ')')[0].demoData);//这里有两种对数据的转换方式，两处理方式的效果一样//$("input#showTime").val(eval(data.d)[0].demoData);}, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(errorThrown); } });下面为asmx的方法代码
[WebMethod] public static string GetDemoData() { return "[{"demoData":"This Is The JSON Data"}]"; }这里的这种处理方式就把传递回来的json数据当成了字符串来处理的，所在就要对这个数据进行eval的处理，这样才能成为真正的json对象数据，
我们先来看一下html模板：
<table id="datas" border="1" cellspacing="0" style="border-collapse: collapse"> <tr> <th>订单ID</th> <th>客户ID</th> <th>雇员ID</th> <th>订购日期</th> <th>发货日期</th> <th>货主名称</th> <th>货主地址</th> <th>货主城市</th> <th>更多信息</th> </tr> <tr id="template"> <td id="OrderID"></td> <td id="CustomerID"></td> <td id="EmployeeID"></td> <td id="OrderDate"></td> <td id="ShippedDate"></td> <td id="ShippedName"></td> <td id="ShippedAddress"></td> <td id="ShippedCity"></td> <td id="more"></td> </tr></table>一定要注意的就是里面所有的id属性，这个是一个关键。再来看一下AJAX请求和绑定数据的代码
$.ajax({ type: "get",//使用get方法访问后台 dataType: "json",//返回json格式的数据 url: "BackHandler.ashx",//要访问的后台地址 data: "pageIndex=" + pageIndex,//要发送的数据 complete :function(){$("#load").hide();},//AJAX请求完成时隐藏loading提示 success: function(msg){//msg为返回的数据，在这里做数据绑定 var data = msg.table; $.each(data, function(i, n){ var row = $("#template").clone(); row.find("#OrderID").text(n.订单ID); row.find("#CustomerID").text(n.客户ID); row.find("#EmployeeID").text(n.雇员ID); row.find("#OrderDate").text(ChangeDate(n.订购日期)); if(n.发货日期!== undefined) row.find("#ShippedDate").text(ChangeDate(n.发货日期)); row.find("#ShippedName").text(n.货主名称); row.find("#ShippedAddress").text(n.货主地址); row.find("#ShippedCity").text(n.货主城市); row.find("#more").html("<a href=OrderInfo.aspx?id=" + n.订单ID + "&pageindex="+pageIndex+"> More</a>"); row.attr("id","ready");//改变绑定好数据的行的id row.appendTo("#datas");//添加到模板的容器中 });这个是jQuery的AJAX方法，返回数据并不复杂，主要说明一下怎么把数据按模板的定义显示到到页面上。首先是这个“var row = $("#template").clone();”先把模板复制一份，接下来row.find("#OrderID").text(n.订单ID);，表示找到id=OrderID的标记，设置它的innerText为相应的数据，当然也可以设置为html格式的数据。或者是通过外部的函数把数据转换成需要的格式，比如这里row.find("#OrderDate").text(ChangeDate(n.订购日期));有点服务器控件做模板绑定数据的感觉。
所有的这些，都是放在一个静态的页面里，只通过AJAX方法从后台获取数据，所有html代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>test1</title> <script language="javascript" type="text/javascript" src="js/jquery-latest.pack.js"></script> <script language="javascript" type="text/javascript" src="js/PageDate.js"></script></head><body> <div> <div> <br /> <input id="first" type="button" value=" << " /><input id="previous" type="button" value=" < " /><input id="next" type="button" value=" > " /><input id="last" type="button" value=" >> " /> <span id="pageinfo"></span> <table id="datas" border="1" cellspacing="0" style="border-collapse: collapse"> <tr> <th> 订单ID</th> <th> 客户ID</th> <th> 雇员ID</th> <th> 订购日期</th> <th> 发货日期</th> <th> 货主名称</th> <th> 货主地址</th> <th> 货主城市</th> <th> 更多信息</th> </tr> <tr id="template"> <td id="OrderID"> </td> <td id="CustomerID"> </td> <td id="EmployeeID"> </td> <td id="OrderDate"> </td> <td id="ShippedDate"> </td> <td id="ShippedName"> </td> <td id="ShippedAddress"> </td> <td id="ShippedCity"> </td> <td id="more"> </td> </tr> </table> </div> <div id="load" style="left: 0px; position: absolute; top: 0px; background-color: red"> LOADING.... </div> <input type="hidden" id="pagecount" /> </div></body></html>PageData.js就是包括上面AJAX请求和绑定数据代码的js，整个页面连form都不用，这样做有什么好处呢。再看下面一个模板
<ul id="datas"> <li id="template"> <span id="OrderID"> fsdfasdf </span> <span id="CustomerID"> </span> <span id="EmployeeID"> </span> <span id="OrderDate"> </span> <span id="ShippedDate"> </span> <span id="ShippedName"> </span> <span id="ShippedAddress"> </span> <span id="ShippedCity"> </span> <span id="more"> </span> </li></ul> 还是要注意id属性。大家看到这里应该明白了，不管用什么样的表现形式，只要id属性相同，就可以把数据绑定到对应的位置。这样的话，我们这些做程序的就不会因为美工的修改而修改代码了，而且美工也只要做出html就可以了，不需要为服务器控件做模板。
function SelectProject() { var a = new Array; var r = window.showModalDialog('SelProject.aspx', a, "dialogWidth=1000px; dialogHeight=600px; resizable: yes"); if (typeof (r) != 'undefined') { var arr = r.split(";"); $("#hidProjectInnerID").val(arr[0]); $("#txtProjectNo").val(arr[1]); $.getJSON("../Handler/GetProjectInfor.ashx", { key: "PaymentStatement", InnerID: $("#hidProjectInnerID").val() }, function (json) { $("#labFinalCustomer").text(json.finalclient); $("#labOrderNo").text(json.orderno); var strDeviceTr = ""; $.each(json.workinghours, function (i, item) { strDeviceTr += "<tr><td><lable name="infor"> " + item.description + "</lable> </td>"; strDeviceTr += "<td> </td>"; strDeviceTr += " <td><lable name="infor"> " + item.hoursdays + "</lable></td>"; strDeviceTr += "<td> 0.8</td>"; strDeviceTr += "<td><lable name="infor"> " + item.workinghour + " </lable></td>"; strDeviceTr += "<td> 0.8</td>"; strDeviceTr += "<td><lable name="infor"> " + item.workinghour + "</lable></td>"; strDeviceTr += "<td> </td>"; strDeviceTr += "</tr>"; }); $("#infor").append(strDeviceTr); }); } }string innerid = CommonClass.Request.GetRequest<string>("InnerID", ""); string key = CommonClass.Request.GetRequest<string>("key", ""); string result = ""; if (key == "StockOutApp" && innerid != "") { result = StockOutApp(innerid); context.Response.Write(result); } else if (key == "PaymentStatement" && innerid != "") { result = PaymentStatement(innerid); context.Response.Write(result); }#region 结算单信息 public string PaymentStatement(string _innerid) { try { string sql = @"select InnerID,pFinalClient,pOrderNo from se_ProjectMain where InnerID='" + _innerid + "'"; DataTable dt = SqlShift.GetDataTable(sql); if (!CommonClass.DTRow.CheckDtIsEmpty(dt)) { StringBuilder json = new StringBuilder(); json.Append(""innerid":""+dt.Rows[0]["InnerID"].ToString()+"""); json.Append(","finalclient":"" + dt.Rows[0]["pFinalClient"].ToString() + """); json.Append(","orderno":"" + dt.Rows[0]["pOrderNo"].ToString() + """); json.Append(","workinghours":" + GetWorkingHours(_innerid)); return "{" + json.ToString().Trim(',') + "}"; } else { return string.Empty; } } catch (Exception ex) { AppLog.Write("项目获取异常！[异常信息：" + ex.Message + "]", AppLog.LogMessageType.Info); return string.Empty; } } public string GetWorkingHours(string _innerid) { try { string sql = @"select InnerID, wDescription,wWorkingHour,wHours_Days from se_ProjectWorkingHour where wProjectID='" + _innerid + "'"; DataTable dt = SqlShift.GetDataTable(sql); if (!CommonClass.DTRow.CheckDtIsEmpty(dt)) { StringBuilder json = new StringBuilder(); for (int i = 0; i < dt.Rows.Count; i++) { json.Append("{"); json.Append(""innerid":"" + dt.Rows[0]["InnerID"].ToString() + """); json.Append(","description":"" + dt.Rows[0]["wDescription"].ToString() + """); json.Append(","workinghour":"" + dt.Rows[0]["wWorkingHour"].ToString() + """); json.Append(","hoursdays":"" + dt.Rows[0]["wHours_Days"].ToString() + """); json.Append("},"); } return "[" + json.ToString().Trim(',') + "]"; } else { return string.Empty; } } catch (Exception ex) { AppLog.Write("项目获取异常！[异常信息：" + ex.Message + "]", AppLog.LogMessageType.Info); return string.Empty; } }#endregion /*预约登记 执行 接口*/ case "yuyue_interface": $name = trim($_GET['name']); $phone = trim($_GET['phone']); $addr = trim($_GET['addr']); $dt = date("Y-m-d H:i:s"); $cb = $_GET['callback']; if($name == "" || $name == NULL){ echo $cb."({code:".json_encode(1)."})"; }elseif($phone == "" || $phone == NULL){ echo $cb."({code:".json_encode(2)."})"; }elseif($addr == "" || $addr == NULL){ echo $cb."({code:".json_encode(3)."})"; }else{ $db->execute("insert into tb_yuyue (realname,telphone,danwei,dt,ischeck) values ('$name','$phone','$addr','$dt',0)"); echo $cb."({code:".json_encode(0)."})"; } exit; break; $(document).ready(function(){ //以下3个为预约登记需要的参数 var name = "name"; //varchar类型，长度最多为8位（4个汉字） var phone = "phone"; //varchar类型，长度为11位 var addr = "addr"; //varchar类型，长度最多为500位（250个汉字） $.getJSON("http://请求网站地址/data.php?ac=yuyue_interface&name="+name+"&phone="+phone+"&addr="+addr+"&callback=?", function(data){ if(data.code==1){ //自定义代码 alert("姓名不能为空"); }else if(data.code==2){ //自定义代码 alert("手机不能为空"); }else if(data.code==3){ //自定义代码 alert("所在单位不能为空"); }else{ //自定义代码 alert("预约成功"); } }); }); $cb = $_GET['callback']; echo $cb."({code:".json_encode(4)."})"; 代码如下:
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript"> var obj = new Object(); obj.Name = "八戒" obj.Age = 500; //通过字面量的形式来定义对象 var obj1 = { "Name": "八戒", "Age": "500" }; var arr = [{ "Name": "八戒", "Age": "500" }, { "Name": "八戒1", "Age": "1000" }]; //JSON格式：将json的字面量表示形式，当做字符串存放，则为json格式字符串 var str = '{ "Name": "八戒", "Age": "500" }'; var jsonstrarr = '[{ "Name": "八戒", "Age": "500" }, { "Name": "八戒1", "Age": "1000" }];'; //将json字符串转换成js对象（数组） var resobj = JSON.parse(str); alert(resobj.Name); </script></head><body></body></html>在前端js对象和json对象的互转：
处理：引用一个json2.js文件，调用JSON.stringify()方法。例如：
var data = new Object();var json_data = JSON.stringify(data);PS：json2.js这个文件在网上搜一下就能下载到。
1.处理：用jQuery的一个方法$.parseJSON()将JSON格式的数据转成JS对象。例如：
var json_data = $.getJSON();var data = $.parseJSON(json_data);（可用来成转换js数组）
2.将json转换成js对象的方法：
var json = eval('(' + result + ')');示例：
//将param反序列列list集合List<ApplyPart> _ApplyPart = new JavaScriptSerializer().Deserialize<List<ApplyPart>>(param);$.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象反过来，使用 serialize 系列方法：如：var fields = $("select, :radio").serializeArray();浏览器支持的转换方式(Firefox，chrome，opera，safari，ie9，ie8)等浏览器
代码如下:
JSON.parse(jsonstr); //可以将json字符串转换成json对象 JSON.stringify(jsonobj); //可以将json对象转换成json对符串注：ie8(兼容模式),ie7和ie6没有JSON对象，需要引入 json.js 或 json2.js。
JavaScript中字符串(string)转json的方法主要有四种，详细介绍如下：
第一种方式：使用js函数eval();
testJson=eval(testJson);是错误的转换方式。
正确的转换方式需要加(): testJson = eval("(" + testJson + ")");
eval()的速度非常快，但是他可以编译以及执行任何javaScript程序，所以会存在安全问题。在使用eval()。来源必须是值得信赖的。需要使用更安全的json解析器。在服务器不严格的编码在json或者如果不严格验证的输入，就有可能提供无效的json或者载有危险的脚本，在eval()中执行脚本，释放恶意代码。
js代码：
代码如下:
function ConvertToJsonForJs() {//var testJson = "{ name: '小强', age: 16 }";(支持)//var testJson = "{ 'name': '小强', 'age': 16 }";(支持)var testJson = '{ "name": "小强", "age": 16 }';//testJson=eval(testJson);//错误的转换方式testJson = eval("(" + testJson + ")");alert(testJson.name);}第二种方式：使用jquery.parseJSON()方法对json的格式要求比较高，必须符合json格式
jquery.parseJSON()
js:代码
代码如下:
function ConvertToJsonForJq() {var testJson = '{ "name": "小强", "age": 16 }';//不知道//'{ name: "小强", age: 16 }' (name 没有使用双引号包裹)//"{ 'name': "小强", 'age': 16 }"(name使用单引号)testJson = $.parseJSON(testJson);alert(testJson.name);}第三种方式：使用Function来进行转换
js:代码
代码如下:
var jsonStr = '{"userName": "tiu","userAge": 26,"isMale": true}';var json = (new Function("return " + jsonStr))();可以看到其原理就是拼接js代码字符串，然后使用Function创建一个匿名方法然后调用之！
第四种方式：使用JSON全局对象，不过比较可惜的是IE8以下的版本没有这个对象，如果不考虑兼容IE8一下版本的话JSON全局对象是个很有用的东西
代码如下：
var jsonStr = '{"userName": "tiu","userAge": 26,"isMale": true}';var json = JSON.parse(jsonStr);var str = JSON.stringify(json);使用Jquery Ui Datapicker做显示签到日历功能的时候，出现了Js问题，在IE8/IE9以及FF、Chrome下都显示正常，但是在IE6/IE7以及IE8兼容视图下显示有问题，提示“页面上有错误”，进一步查看显示错误信息“缺少标识符、字符串或数字”，一开始以为是Jquery和Jquery Ui的版本不匹配导致的，后来尝试了其他支持的版本也是不行，然后将自己的Js代码逐段调式，在花了两个多小时后终于意外的发现是由Json最后一个键值后加了逗号引起的问题。
好多人也遇到的这种问题
var obj = { 'name': 'qqyumidi', 'gender': 'male' //此处不能加上, ！！ }alert(obj.name);
<!-- 引入相应的jquery的UI文件 --> <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.7.1.min.js"></script> <!-- 引入此js文件将日历中内容转化成中文 --> <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.ui.datepicker-zh-CN.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-ui-1.8.18.custom.min.js"></script> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/ui-lightness/jquery-ui-1.8.18.custom.css"><div class="demo"> <p>Date:<input type="text" id="datepicker"></p> </div> 然后使用js代码对插件进行调用：
<script type="text/javascript"> $(function() { //插件的调用 $("#datepicker").datepicker({ //在这里进行插件的属性设置 }); }); </script> 效果截图：
<div class="demo"> <p>Date: <input type="text" id="datepicker"> <input type="text" id="alternate" size="30"/></p> </div> Js代码：
$(function() {$( "#datepicker" ).datepicker({altField: "#alternate",altFormat: "DD, d MM, yy"});});
2、showAnim：设置日期面板显示或隐藏的动画名
js代码的编写：
$(function() {$( "#datepicker" ).datepicker();$( "#anim" ).change(function() {$( "#datepicker" ).datepicker( "option", "showAnim", $( this ).val() );});});[javascript] view plaincopyprint?$( "#datepicker" ).datepicker({showButtonPanel:true});
4、dateFormat：指定显示日期的格式
Js代码：
$( "#datepicker" ).datepicker({dateFormat:"yy/mm/dd"});
通过图像可以看到，文本框中日期格式由以前的“yy-mm-dd”转变成了“by/mm/dd”。当然还有别的格式，可以根据自己的喜好进行设置。
5、changeMonth：是否使用下拉列表选择月份
changeYear：是否使用下拉列表选择年份
在js代码中添加此属性：changeMonth:true 或者 changeYear:true
其中标题栏的月份或者年份会出现下拉菜单的形式：
6、yearRange：设置下拉列表框中显示的年份范围，可以是相对今年（-nn:+nn）或相对于选择的年份（c-nn:c+nn）或绝对年份（nnnn:nnnn）
在js代码中添加属性：
$( "#datepicker" ).datepicker({changeYear: true,yearRange:"2011:2012"});
从图中可以看到年的位置为下拉菜单的形式，其中下拉菜单只会出现2011与2012年的选项。
注：yearRange属性只有在changeYear为true的情况下才使用。
7、numberOfMonths：设置一次要显示几个月。可以为包含两个数字的数组，表示显示的行数和列数
Js代码：
$( "#datepicker" ).datepicker({numberOfMonths: 3});
8、showOn：设置触发选择器的事件名称
buttonText：指定触发按钮上显示的文本，showOn属性应设置为button或both
buttonImage：指定弹出按钮图像的URL，若设置则buttonText将成为alt值
buttonImageOnly：是否将图像放在控件后面，作为触发器，如果设置为true那么按钮将只剩下图片作为按钮，是页面更加美观
这里我编写三个文本框进行以上属性的对比：
1) Js代码：
$( "#datepicker2" ).datepicker({showOn: "both",buttonText:"日历按钮"});
2）将按钮设置为图片：
Js代码：
$( "#datepicker" ).datepicker({showOn: "button",buttonImage: "images/calendar.gif",buttonImageOnly: true});
通过以上对比，可以理解buttonImageOnly属性的作用。
9、minDate：可以选择的最小日期，null表示无限制
maxDate：可以选择的最大日期。null表示无限制
两者都是根据以当天日期为基础的。
Js代码：
$(function() {$( "#datepicker" ).datepicker({//表示以当天为准，只有在20天之前和10天之后的日期之间的时间可以选择minDate: -20,maxDate: "+10D"});});如下图在7号之前都不可选择（当前日期为27）：
<script src="jquery.min.js"></script> <script src="jquery.json-2.2.js"></script> <script src="GetPostAjax.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#form").submit(function(e){ e.preventDefault(); var username,email,password,gender; username=$("#username").val(); email=$("#email").val(); password=$("#username").val(); gender=$("#gender").val(); if(username.length>0 && email.length>0 && password.length>0 &&gender.length>0) { //Creating Objects var request = new Object(); var userDetails = new Object(); var user = new Object(); var websites=new Array(); user.name=username; user.email=email; user.password=password; user.gender=gender; //Array Push if(website1.length>0) websites.push(website1); if(website2.length>0) websites.push(website2); if(website3.length>0) websites.push(website3); user.websites=websites; userDetails.user = user; request.userDetails = userDetails; var jsonfy = $.toJSON(request); // Encodes special characters var encodedata = 'jsondata='+encodeURIComponent(jsonfy); //Ajax Call var url='website API URL'; post_data(url,encodedata, function(data) { alert("Success"); }); } }); }); </script"> <form method='post' action='' id='form'> Name <input type='text' name='username' id='username' /> Email <input type='text' name='email' id='email' /> Password <input type='text' name='password' id='password' /> Gender <select name='gender' id='gender'><option value='male'>Male</option><option value='female'>Female</option></select> Websites <input type='text' id='website1' /> <input type='text' id='website2' /> <input type='text' id='website3' /> <input type='submit' id='submit'/> </form> { "userDetails":{ "user":{ "name":"Srinivas Tamada", "email":"srinivas@9lessons.info", "password":"Srinivas Tamada", "gender":"male", "websites":["www.software8.co","www.heatpress123.net","www.0769zzw.com"] } } }, / ? : @ & = + $ # jsondata=%7B%22userDetails%22%3A%7B%22user%22%3A%7B%22name%22%3A%22Srinivas%20Tamada%22%2C%22email%22%3A%22srinivas%409lessons.info%22%2C%22password%22%3A%22Srinivas%20Tamada%22%2C%22gender%22%3A%22male%22%2C%22websites%22%3A%5B%22www.9lessons.info%22%2C%22www.egglabs.in%22%2C%22www.fglogin.com%22%5D%7D%7D%7Dfunction post_data(url,encodedata, success){ $.ajax({ type:"POST", url:url, data :encodedata, dataType:"json", restful:true, contentType: 'application/json', cache:false, timeout:20000, async:true, beforeSend :function(data) { }, success:function(data){ success.call(this, data); }, error:function(data){ alert("Error In Connecting"); } }); }// 声明两个json数组 [java] view plain copy print? JSONArray gResTable = new JSONArray(); JSONArray gCmtTable = new JSONArray(); // 声明json对象 ONObject outData = new JSONObject(); //把json数组加到json对象中 [java] view plain copy print?outData.put("ResTable", gResTable); outData.put("CmtTable", gCmtTable); //此时创建出来的如下:jsonData={"ResTable":[],"CmtTable":[]}; 把json数据加到json数组中 for (int i = 0; i < 2; i ++) { JSONObject node = new JSONObject(); node.put("thumb_path", "./Image/" + i +".gif"); node.put("flash_path", "./Image/" + i +".gif"); node.put("desc1", "可疑车辆" + i); node.put("desc2", ""); node.put("desc3", ""); node.put("desc4", ""); node.put("title", "hello"); node.put("upload_time", (new java.util.Date()).toString()); node.put("uploader", "王二"); gResTable.put(node); } for (int i = 0; i < 2; i ++) { JSONObject node = new JSONObject(); node.put("logo_path", "./Image/" + i +".gif"); node.put("comment", "hello"); node.put("comment_time", (new java.util.Date()).toString()); node.put("author", "王二"); gCmtTable.put(node); }[java] view plain copy print?/* jsonData={"ResTable":[ {"upload_time":"Sat May 26 20:16:37 CST 2012","title":"hello","flash_path":"./Image/0.gif","uploader":"王二","thumb_path":"./Image/0.gif","desc3":"","desc4":"","desc1":"可疑车辆0","desc2":""}, {"upload_time":"Sat May 26 20:16:37 CST 2012","title":"hello","flash_path":"./Image/1.gif","uploader":"王二","thumb_path":"./Image/1.gif","desc3":"","desc4":"","desc1":"可疑车辆1","desc2":""}], "CmtTable": [{"author":"王二","logo_path":"./Image/0.gif","comment":"hello","comment_time":"Sat May 26 20:16:37 CST 2012"}, {"author":"王二","logo_path":"./Image/1.gif","comment":"hello","comment_time":"Sat May 26 20:16:37 CST 2012"} ]}; */ 我们在使用AJAX来做服务器端和客户端交互的时候，一般的做法是让服务器端返回一段JSON字符串，然后在客户端把它解析成JavaScript对象。
解析时用到的方法一般是eval或者new function，而目前IE8和Firefox3.1又内置了原生的JSON对象（据说会有一定的性能提升）。那我们在实际使用的时候怎样从这三种方法（因为性能问题，不考虑用javascript实现的解析）里面来选择呢？面对众多的浏览器，哪种方式的性能是最好的呢？
var count = 10000, o = null, i = 0, jsonString = '{"value":{"items": [{"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}]},"error":null}'; 2、循环解析并记录时间
var beginTime = new Date(); for ( i = 0; i < count; i++ ) { o = eval( "(" + jsonString + ")" ); } Console.output( "eval:" + ( new Date() - beginTime ) ); var beginTime = new Date(); for ( i = 0; i < count; i++ ) { o = new Function( "return " + jsonString )(); } Console.output( "new Function:" + ( new Date() - beginTime ) ); if ( typeof JSON !== "undefined" ) { var beginTime = new Date(); for ( i = 0; i < count; i++ ) { o = JSON.parse( jsonString ); } Console.output( "native:" + ( new Date() - beginTime ) ); } else { Console.output( "native:not support!" ); } 
*数值越小越好
*在当前列中绿色背景的表示性能最好，红色性能最差：
1、Firefox2、3全部垫底，IE6的性能优于IE7（可能和机器不一致有关），Chrome和Safari4的性能远远超出其它浏览器。
2、不同的浏览器下eval和new Function的性能不一致，总的来说eval更好，但Firefox下new Function的性能是eval的一倍，为了更好的兼容各个浏览器，我们把对JSON的解析单独封装成一个对象来处理：
var __json = null; if ( typeof JSON !== "undefined" ) { __json = JSON; } var browser = Browser; var JSON = { parse: function( text ) { if ( __json !== null ) { return __json.parse( text ); } if ( browser.gecko ) { return new Function( "return " + text )(); } return eval( "(" + text + ")" ) } }; var beginTime = new Date(); for ( i = 0; i < count; i++ ) { o = JSON.parse( jsonString ); } Console.output( "wrapper:" + ( new Date() - beginTime ) ); 
由于涉及到调用对象的开销，封装后JSON对象会比单独调用更慢，但它能保证在各个浏览器下使用最适合的方法。
2009.03.23：屏蔽所有Firefox的Add-Ons再进行测试
由于Known在Firefox下运行代码得到了完全不一致的结果，怀疑是Firefox的插件导致，于是禁掉所有插件后（后来表明几乎由Firebug导致），重新在Firefox2、3下测试了一下，结果如下：
这表明Firefox本身的性能并不是象我们先前测试的那样低，在去掉插件后性能还是很不错。但是没有Firebug一类的插件支持，Firefox对我们的吸引力也大大降低了。
2009.03.31：循环中每次使用新的json字符串
根据Oliver的描述，他猜测是由于Safari4和Chrome缓存了eval的结果从而导致它们的测试成绩“虚”高，测试结果证明了他的推测:
从这个结果中我们可以看到，Opera的性能最好，Ie8其次。
主要修改的代码：
//eval 2: var beginTime = new Date(); for ( i = 0; i < count; i++ ) { o = eval("(" + '{"value":{"items": [{"x":' + i + ',"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}]},"error":null}' + ")"); } Console.output( "eval:" + ( new Date() - beginTime ) ); //new Function beginTime = new Date(); for ( i = 0; i < count; i++ ) { o = new Function("return " + '{"value":{"items": [{"x":' + i + ',"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}]},"error":null}')(); } Console.output( "new Function:" + ( new Date() - beginTime ) ); //native if ( typeof JSON !== "undefined" ) { beginTime = new Date(); for ( i = 0; i < count; i++ ) { o = JSON.parse('{"value":{"items": [{"x":' + i + ',"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}]},"error":null}'); } Console.output( "native:" + ( new Date() - beginTime ) ); } else { Console.output( "native:not support!" ); } //wrapper var __json = null; if ( typeof JSON !== "undefined" ) { __json = JSON; } var browser = Browser; var JSON = { parse: function( text ) { if ( __json !== null ) { return __json.parse( text ); } if ( browser.gecko ) { return new Function( "return " + text )(); } return eval( "(" + text + ")" ) } }; beginTime = new Date(); for ( i = 0; i < count; i++ ) { o = JSON.parse('{"value":{"items": [{"x":' + i + ',"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}]},"error":null}'); } Console.output( "wrapper:" + ( new Date() - beginTime ) );<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Parse JsonString</title> </head> <body> <div id="consoleRegion"></div> <script type="text/javascript"> //yui var Browser = function() { var o = { ie: 0, opera: 0, gecko: 0, webkit: 0 }; var ua = navigator.userAgent, m; if ( ( /KHTML/ ).test( ua ) ) { o.webkit = 1; } // Modern WebKit browsers are at least X-Grade m = ua.match(/AppleWebKit/([^s]*)/); if (m&&m[1]) { o.webkit=parseFloat(m[1]); } if (!o.webkit) { // not webkit // @todo check Opera/8.01 (J2ME/MIDP; Opera Mini/2.0.4509/1316; fi; U; ssr) m=ua.match(/Opera[s/]([^s]*)/); if (m&&m[1]) { o.opera=parseFloat(m[1]); } else { // not opera or webkit m=ua.match(/MSIEs([^;]*)/); if (m&&m[1]) { o.ie=parseFloat(m[1]); } else { // not opera, webkit, or ie m=ua.match(/Gecko/([^s]*)/); if (m) { o.gecko=1; // Gecko detected, look for revision m=ua.match(/rv:([^s)]*)/); if (m&&m[1]) { o.gecko=parseFloat(m[1]); } } } } } return o; }(); var Console = { consoleRegion: null, getRegion: function() { if ( this.consoleRegion === null ) { this.consoleRegion = document.getElementById( "consoleRegion" ); } return this.consoleRegion; }, output: function( text ) { this.getRegion().innerHTML += "<br/>" + text; } }; //test code var count = 10000, o = null, i = 0, jsonString = '{"value":{"items": [{"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}]},"error":null}'; //eval var beginTime = new Date(); for ( i = 0; i < count; i++ ) { o = eval( "(" + jsonString + ")" ); } Console.output( "eval:" + ( new Date() - beginTime ) ); //new Function beginTime = new Date(); for ( i = 0; i < count; i++ ) { o = new Function( "return " + jsonString )(); } Console.output( "new Function:" + ( new Date() - beginTime ) ); //native if ( typeof JSON !== "undefined" ) { beginTime = new Date(); for ( i = 0; i < count; i++ ) { o = JSON.parse( jsonString ); } Console.output( "native:" + ( new Date() - beginTime ) ); } else { Console.output( "native:not support!" ); } //wrapper var __json = null; if ( typeof JSON !== "undefined" ) { __json = JSON; } var browser = Browser; var JSON = { parse: function( text ) { if ( __json !== null ) { return __json.parse( text ); } if ( browser.gecko ) { return new Function( "return " + text )(); } return eval( "(" + text + ")" ) } }; beginTime = new Date(); for ( i = 0; i < count; i++ ) { o = JSON.parse( jsonString ); } Console.output( "wrapper:" + ( new Date() - beginTime ) ); //alert( o.value.items[0].z ); </script> </body> </html>在ajax方式做web开发时，经常会遇到会保存前，收集表单输入项，组成json对象，然后把对象直接post到服务端的场景。
常规做法是在js里写类似如下的代码:
var myObj = {};myObj.x = document.getElementById("x").value;myObj.y = document.getElementById("y").value;//... //然后ajax post或get提交表单元素不多的时候，这样还好，但是如果一个表单有好几十项甚至更多输入项的时候，写这种代码就太费劲了。
好在javascript中有一个邪恶的eval函数，可以帮我们完成一些类似c#反射的工作，比如下面这样：
eval('A={}');if (A.b==undefined){ A.b = {};}eval('A.b.c = 1');alert(A.b.c);这样，我们就动态创建了一个复合对象A，明白其中原理后，可以对表单做些改进:
运单号：
<input type="text" name="AwbPre" value="112" style="width:40px"/>-<input type="text" name="AwbNo" value="12312311"/><br/>结算方式：
<select name="SettlementMode" style="width:100px"> <option value="CASH" selected="selected">现金</option> <option value="MONTH">月结</option></select><br/>不需要赋值的属性：
<input type="input" name="NotMe" value="NotMe ..." isModel="false"/><script type="text/javascript"> function setFormModel(modelName){ eval(modelName + "={}"); var inputArr = document.getElementsByTagName("INPUT"); for(var i=0;i<inputArr.length;i++){ var isModel = inputArr[i].getAttribute("isModel"); var itemName = inputArr[i].name; var itemValue = inputArr[i].value; if(isModel!="false"){ eval(modelName + "." + itemName + "='" + itemValue + "';"); } } var selectArr = document.getElementsByTagName("SELECT"); for(var i=0;i<selectArr.length;i++){ var isModel = selectArr[i].getAttribute("isModel"); var itemName = selectArr[i].name; var itemValue = selectArr[i].value; if(isModel!="false"){ eval(modelName + "." + itemName + "='" + itemValue + "';"); } } return modelName; } setFormModel("AwbModel"); alert("单号：" + AwbModel.AwbPre + "-" + AwbModel.AwbNo + "
结算方式：" + AwbModel.SettlementMode + "
不该有的属性：" + AwbModel.NotMe); </script>这样，只要form元素的name属性正确设置，需要收集表单对象时，调用一下setFormModel函数，就能快速得到一个json对象(当然这只是示例，仅处理了一级属性的情况，如果有多级属性，大家自己去扩展吧，无非就是字符串上做些文章)
首先来个最简单的理解
eval可以将字符串生成语句执行，和SQL的exec()类似。
eval的使用场合是什么呢？有时候我们预先不知道要执行什么语句，只有当条件和参数给时才知道执行什么语句，这时候eval就派上用场了。举个例子：
我们要做一个function()，功能是输入网页中两个个对象的名称，然后程序就将这两个对象的值联接起来输出。
function output(a,b) { var tmpa,tmpb; tmpa=document.all.a.value; tmpb=document.all.b.value; document.write(tmpa+tmpb); } output('input1','input2');这样你执行的时候就会提示错误“document.all.a不是对象”以及“document.all.b不是对象”。原来javascript把a和b当成对象名称了，怎样能让javascript把a里面的值作为对象名称呢？这时候就要用eval了，把代码改成这样：
function output(a,b) { var tmpa,tmpb; tmpa=eval("document.all."+a+".value"); tmpb=eval("document.all."+b+".value"); document.write(tmpa+tmpb); } output('input1','input2'); 这样javascript就会先取出a,b的值，然后和前面的document.all.以及后面的.value组合运行，于是就可以顺利取出input1和input2的值。
看完上面的基本理解eval是什么含义了吧
然后看下面的理解
稍微晋级一点点，用到了DOM中替换图片的例子
【eval()函数】
JavaScript有许多小窍门来使编程更加容易。
其中之一就是eval()函数，这个函数可以把一个字符串当作一个JavaScript表达式一样去执行它。
举个小例子：
var the_unevaled_answer = "2 + 3"; var the_evaled_answer = eval("2 + 3"); alert("the un-evaled answer is " + the_unevaled_answer + " and the evaled answer is " + the_evaled_answer);如果你运行这段eval程序, 你将会看到在JavaScript里字符串"2 + 3"实际上被执行了。
所以当你把the_evaled_answer的值设成 eval("2 + 3")时，JavaScript将会明白并把2和3的和返回给the_evaled_answer。
这个看起来似乎有点傻，其实可以做出很有趣的事。比如使用eval你可以根据用户的输入直接创建函数。
这可以使程序根据时间或用户输入的不同而使程序本身发生变化，通过举一反三，你可以获得惊人的效果。
在实际中，eval很少被用到，但也许你见过有人使用eval来获取难以索引的对象。
文档对象模型（DOM)的问题之一是:有时你要获取你要求的对象简直就是痛苦。
例如，这里有一个函数询问用户要变换哪个图象:变换哪个图象你可以用下面这个函数：
function swapOne() { var the_image = prompt("change parrot or cheese",""); var the_image_object; if (the_image == "parrot") { the_image_object = window.document.parrot; } else { the_image_object = window.document.cheese; } the_image_object.src = "ant.gif"; } 连同这些image标记: [img src="/stuff3a/parrot.gif" name="parrot"] [img src="/stuff3a/cheese.gif" name="cheese"]请注意像这样的几行语句：
the_image_object = window.document.parrot;它把一个图象对象敷给了一个变量。虽然看起来有点儿奇怪，它在语法上却毫无问题。
但当你有100个而不是两个图象时怎么办？你只好写上一大堆的 if-then-else语句，要是能象这样就好了：
function swapTwo() { var the_image = prompt("change parrot or cheese",""); window.document.the_image.src = "ant.gif"; }不幸的是, JavaScript将会寻找名字叫 the_image而不是你所希望的"cheese"或者"parrot"的图象，于是你得到了错误信息：”没听说过一个名为the_image的对象”。
还好，eval能够帮你得到你想要的对象。
function simpleSwap() { var the_image = prompt("change parrot or cheese",""); var the_image_name = "window.document." + the_image; var the_image_object = eval(the_image_name); the_image_object.src = "ant.gif"; }如果用户在提示框里填入"parrot"，在第二行里创建了一个字符串即window.document.parrot.
然后包含了eval的第三行意思是： "给我对象window.document.parrot" - 也就是你要的那个图象对象。一旦你获取了这个图象对象，你可以把它的src属性设为ant.gif. 有点害怕？用不着。其实这相当有用，人们也经常使用它。
我们常常在Javascript中间到Eval这个函数，有些人觉得这个函数很奇怪，可以把一些字符串变的功能很强大。
在我们需要将普通的字符串转变成具体的对象的时候，就会用到这个函数eval 函数对作为数字表达式的一个字符串进行求值，其语法为：
eval(expr)此处 expr 是一个被求值的字符串参数。如果该字符串是一个表达式，eval 求该表达式的值；如果该参数代表一个或多个 JavaScript 语句，那么 eval 执行这些语句。eval 函数可以用来把一个日期从一种格式（总是字符串）转换为数值表达式或数字。
==============================
功能：先解释Javascript代码，然后在执行它
用法：Eval(codeString)
codeString是包含有Javascript语句的字符串，在eval之后使用Javascript引擎编译。
注释：
例子：eval(id + "_icon.src="/imgs/collapse_up.gif'");
id是之前设定的参数，而在双引号中的字符串则是需要编译的
引用:
--------------------------------------------------------------------------------
function tophide(id) //id indicates menu{ if (top.topframeset.rows == "31,*") { top.topframeset.rows = "86,*"; eval(id + "_icon.src="/imgs/collapse_up.gif'"); eval(id + "_icon.alt='Collapse The Head'"); head.style.display = "block" } else { top.topframeset.rows = "31,*"; eval(id + "_icon.src="/imgs/collapse_down.gif'"); eval(id + "_icon.alt='Expand The Head'"); head.style.display = "none" }}如果还是不明白深入认识javascript中的eval函数
发现为本文起一个合适的标题还不是那么容易，呵呵，所以在此先说明下本文的两个目的：
（1）介绍javascript中的eval函数的用法
（2）如何在函数内执行全局代码
先来说eval的用法，内容比较简单，熟悉的可以跳过。
eval的用法
eval函数接收一个参数s，如果s不是字符串，则直接返回s。否则执行s语句。如果s语句执行结果是一个值，则返回此值，否则返回undefined。
需要特别注意的是对象声明语法“{}”并不能返回一个值，需要用括号括起来才会返回值，简单示例如下：
var code1='"a" + 2'; //表达式var code2='{a:2}'; //语句alert(eval(code1)); //->'a2'alert(eval(code2)); //->undefinedalert(eval('(' + code2 + ')')); //->[object Object]可以看到，对于对象声明语句来说，仅仅是执行，并不能返回值。为了返回常用的“{}”这样的对象声明语句，必须用括号括住，以将其转换为表达式，才能返回其值。这也是使用JSON来进行Ajax开发的基本原理之一。在例子中可以清楚的看到，第二个alert语句输出的是undefined，而第三个加了括号后输出的是语句表示的对象。
►现在来说本文的重点，如何在函数内执行全局代码。为了说明这个问题，先看一个例子：
var s='global'; //定义一个全局变量function demo1(){ eval('var s="local"');}demo1();alert(s); //->global很好理解，上面的demo1函数等价于：function demo1(){var s='local';}，其中定义了一个局部变量s。
所以最后的输出是global并不是什么奇怪的事情，毕竟大家都能很清楚的区分局部变量和全局变量。
仔细体会一下，可以发现eval函数的特点，它总是在调用它的上下文变量空间（也称为：包，closure）内执行，无论是变量定义还是函数定义都是如此，所以如下的代码会产生函数未定义的错误：
var s='function test(){return 1;}'; //一个函数定义语句function demo2(){ eval(s);}demo2();alert(test()); //->error:test is not defined这是因为test函数在局部空间定义，demo2函数内可以访问到，外面就访问不到了。
而在实际的Ajax开发中，有时我们需要从服务器动态获取代码来执行，以减轻一次载入代码过多的问题，或者是一些代码是通过Javascript自身生成的，希望用eval函数来使其执行。
但这样的动态获取代码的工作一般在函数内完成，比如：
function loadCode(){ var code=getCode(); eval(code);}可见eval不可能在全局空间内执行，这就给开发带来了不少问题，也看到过很多人为此郁闷。
不过现在偶终于找到了解决办法，嘿嘿，可以同时兼容IE和Firefox，方法如下：
var X2={} //my namespace:)X2.Eval=function(code){if(!!(window.attachEvent && !window.opera)){ //ie execScript(code);}else{ //not ie window.eval(code);}}现在如果要想在函数内定义全局代码，就可以通过调用X2.Eval(code)方法，一个例子如下：
var s='global';function demo3(){X2.Eval('var s="local"');}demo3();alert(s); //->'local'可见，在demo3函数内重新定义了全局变量s="local"。
需要注意的是X2.Eval并不返回值，如果要进行表达式的求值，还是用系统的eval函数。X2.Eval设计为仅做全局代码定义用。
其实看到这里，或许有人感觉问题也太容易解决了点，呵呵，但发现这个办法倒是需要些运气和技巧的：
（1）对于IE浏览器，默认已经提供了这样的函数：execScript，用于在全局空间执行代码，只是知道的人还不多。
（2）对于Firefox浏览器，直接调用eval函数，则在调用者的空间执行；如果调用window.eval则在全局空间执行。这个知道的人估计就更少了。毕竟alert(eval==window.eval)返回true！
Firefox的eval函数的特点的确是很令人奇怪的，但从javascript规范中倒也能找到其来源：
If value of the eval property is used in any way other than a direct call (that is, other than by the explicit use of itsname as an Identifier which is the MemberExpression in a CallExpression), or if the eval property is assigned to,an EvalError exception may be thrown.意思大概就是说eval函数的执行是和调用者相关的，但并没有说其执行上下文的问题。所以IE和Firefox孰是孰非也就很难说了，大家知道解决办法就好。
代码如下所示：
<!DOCTYPE HTML> <html> <head> <title>test1</title> </head> <body> <script> var arr={ "name":"zhansan", "age":23, "address":{ "city":"beijing", "gas":{ "gasSheet":"气态流出物月报", "H_adjust":1 }, "time":{ "duration":31 } }, "units":{"title":"function"} } function show(obj){ var tmp={}; for(var i in obj){ if(obj[i]=="object"){ <span style="color:#ff0000;">tmp[i]=show(obj[i]);</span> } else{ <span style="color:#ff0000;">tmp[i]=obj[i]</span> } } return tmp; } var result=show(arr); console.log(result);</script> </body> </html></pre><p></p><p>利用递归思想，其中注意赋值语句</p><p>可用于不同的环境</p><p></p><pre>假设其中jSON对象是var kpis = {"A": [1,2,3,4,5],"B": [ 2,3,4,5,6]}， jSON 数组是var series = [{name:null,data:null}, {name:null,data:null}]
>>>第一种方法：
[javascript] view plain copyvar index=0; for( var tests in kpis){ series[index].name=tests; series[index].data=kpis[tests]; }点评：第一种方法对于超过两个名称/值对的情况不适用，只能手动增加jSON数组的长度，比较麻烦。经过boss的指导，有了第二种方法。
>>>第二种方法：
[html] view plain copyseries=[]; for(var tests in kpis){ //定义一个新的jSON对象，改变成jSON数组中jSON数据的格式 var json = {name:tests, data:kpis[tests]}; //通过数组的push()方法向数组中增加jSON数据 series.push(json); } 点评：第二种方法，在遍历kpis这个jSON对象的时候，生成新的格式的jSON对象，不断push到数组中，这样就达到了目的，而且即使是有名称/值对也不怕，通用性增强。
所以推荐第二种方法。
var chaomao=[1,2,3,4,5]var chaomao.shift()//得到1alert(chaomao)//[2,3,4,5]var chaomao=[1,2,3,4,5]var chaomao.pop()//得到5alert(chaomao)//[1,2,3,4]前面的方法只能操作数组开头和结尾，无法操作中间项，如果要操作中间的项，使用splice方法
修改操作：
var chaomao=[1,2,3,4,5]chaomao.splice(2,1,8,9)alert(chaomao)//1,2,8,9,4,5第一个参数是准备操作的数组位置，第二个参数是操作位置后面的数组项数，第三个以后的就是，被替换后的内容
例子就是表示：从chaomao这个数组位置2开始（也就是值为3的那一项，数组下标从0开始的），位置2后的一项，替换成成8，9
如果把第二个参数改为2，也就是chaomao.splice(2,2,8,9)，也就是说位置2后面的两项换成8，9，打印出来的结果就是1,2,8,9,5，3和4这2两项被换掉了
这里需要说明的是，被替换的项数不一定要和替换的项数相等，1项可以被换成3项，5项也可以被换成2项，基于这个原理，我们就用这个方法来对数组进行添加和删除操作
删除操作：
var chaomao=[1,2,3,4,5]chaomao.splice(2,1)alert(chaomao)//1,2,4,5上面例子中，把chaomao中的位置2后的1项替换成空的，因为后面没有内容，结果可以看到，把3这项删除了
添加操作：
var chaomao=[1,2,3,4,5]chaomao.splice(2,0,8,9)alert(chaomao)//1,2,8,9,3,4,5上面例子中，把chaomao中位置2后的0项换成8,9，也就等于添加了两项
其实，删除和添加操作都只是splice修改方法的两种衍生罢了
var p ={"name": “chaomao”,"age":45,"sex":"male"};delete p.namefor(var i in p){console.log(i);//输出age,sex，name项已经被删除了}var json = {}; // 如果json已经定义就跳过json[text] = value;json.text2 = value2; // 此时text2必须符合变量名标准，否则得使用数组方式赋值var json = {}; // 如果json已经定义就跳过json[text] = value;json.text2 = value2; // 此时text2必须符合变量名标准，否则得使用数组方式赋值1. 定义一维数组：
var s1=new Array();
s1=[1,2,3,4]或者s1[0]=1,s1[1]=2,s1[3]=3,s1[4]=4;
alert(s1[0]);
结果为1；
2.定义二维素组：
var s1=new Array();
var s1=[[3,1],[2,3,4],3,[4,5,6,7,8]];
alert(s1[1][0]);
结果为2；
var status_process = {" name5" : '闲置期',"name1" : '播种期',"name2" : '苗期',"name3" : '生长期',"name4" : '采收期' } alert(status_process);var s1="{";var s2 = " 'name5' : '闲置期', 'name1' : '播种期','name2' : '苗期','name3' : '生长期','name4' : '采收期'";var s3="}";var status_process=s1+s2 +s3；var status_process = {name5 : '闲置期',name1 : '播种期',name2 : '苗期',name3 : '生长期',name4 : '采收期'};alert(status_process["name5"]);alert(status_process.name5);var status_process = { name5 : {name3:'空闲闲置期'}, name1 : '播种期', name2 : '苗期', name3 : '生长期', name4 : '采收期'};alert(status_process["name5"]["name3"]);alert(status_process.name5.name3);js数组添加json数据的方式有如下两种：
第一种方式
personInfo : []; for(var i = 0; i < _STAGE.passengerInfoArray.length; i++){ var name = _STAGE.passengerInfoArray[i]; var person = {v:name, text:name}; this.personInfo.push(person);}第二种方式
var passengerInfo = {}; passengerInfo.psgTypeDesc = psgTypeDesc; passengerInfo.flightPrice = flightPrice; _STAGE.passengerInfoArray.push(passengerInfo);JS解析json数据（如何将json字符串转化为数组）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <SCRIPT LANGUAGE="JavaScript"> var t="{'firstName': 'cyra', 'lastName': 'richardson', 'address': { 'streetAddress': '1 Microsoft way', 'city': 'Redmond', 'state': 'WA', 'postalCode': 98052 },'phoneNumbers': [ '425-777-7777','206-777-7777' ] }"; var jsonobj=eval('('+t+')'); alert(jsonobj.firstName); alert(jsonobj.lastName); var t2="[{name:'zhangsan',age:'24'},{name:'lisi',age:'30'},{name:'wangwu',age:'16'},{name:'tianqi',age:'7'}] "; var myobj=eval(t2); for(var i=0;i<myobj.length;i++){ alert(myobj[i].name); alert(myobj[i].age); } var t3="[['<a href=# onclick=openLink(14113295100,社旗县国税局桥头税务所,14113295100,d6d223892dc94f5bb501d4408a68333d,swjg_dm);>14113295100</a>','社旗县国税局桥头税务所','社旗县城郊乡长江路西段']]"; //通过eval() 函数可以将JSON字符串转化为对象 var obj = eval(t3); for(var i=0;i<obj.length;i++){ for(var j=0;j<obj[i].length;j++){ alert(obj[i][j]); } } /* //stringifier 函数的作用跟 parse 相反， 用来将一个js对象转换为 JSON 文本。 var jsonText = JSON.stringify(obj); alert(jsonText); //如果基于安全的考虑的话，最好是使用一个 JSON 解析器。 一个 JSON 解析器将只接受 JSON 文本。所以是更安全的。 var myObject = JSON.parse(myJSONtext, filter); //可选的 filter 参数将遍历每一个value key 值对， 并进行相关的处理。如： //如 myData = JSON.parse(text, function (key, value) { return key.indexOf('date') >= 0 ? new Date(value) : value; }); //stringifier 函数的作用跟 parse 相反， 用来将一个js对象转换为 JSON 文本。 var myJSONText = JSON.stringifier(myObject); */ </SCRIPT> </HEAD> <BODY> </BODY> </HTML> 在解析之前，我们必须弄清楚几个概念：数组，关联数组以及json之间有哪些区别和联系点？
语法：
ECMAScript v3规定了数组直接量的语法，JavaScript 1.2和JScript 3.0实现了它。可以把—个用逗号分隔的表达式列表放在方括号中，创建并初始化—个数组。这些表达式的值将成为数组元素。例如：
var a = [1, true, 'abc'];
具体操作查看API.
ps:必须方括号隔开。
2、关联数组
（1）语法：
var myhash= {”key1″:”val1″, “key2″:”val2″ };//obj（2）var
myhash= {key1:”val1″, key2:”val2″ };//obj-也可以ps：跟json格式几乎相同，但是json格式要求更加严格(里面的键值对必须使用双引号)，但json只能作为一种格式标准，如果要对其进行操作必须转换成关联数组对象(obj)。
2、简单操作
（1）向Hash关联数组添加键值
// 添加一个新键 newkey ，键值为 newval myhash[”newkey”] = “newval”;（2）删除Hash关联数组已有键值
// 删除一个键 newkey ，同时，该键值对应的 newval 也就消失了 delete myhash[”newkey”];（3）遍历Hash关联数组
// 遍历整个hash 数组 for (key in myhash) { val = myhash[key]; }（4）获得值 方式1.myhash.key1 方式2.myhash.key23、json
格式要求：
{”key1″:”val1″, “key2″:”val2″ };//严格按照此格式，操作可依照关联数组的操作
2.至始至终服务器给客户端的数据都只是字符串，因此为了让其能够在js中对其进行必要的操作，可以通过eval()进行转换成js可执行的对象。
因此jQuey中提供的$.parseJSON()是有局限的，如果是上面1提到的这种情况则就必须使用eval()进行转换，然后再通过$.each(objs,function(i,o){...})进行操作
页面代码：
代码如下：
<body> <input type="button" value="send ajax json" onclick="sendAjaxByjson();"/> <input type="button" value="send ajax array" onclick="sendAjaxByarray();"/></body> <script type="text/javascript"> function sendAjaxByjson(){ $.post("json",{},function(data){ var obj=data; alert(typeof obj);//string //var a=eval(obj);不解，不注释则会报错.. var strToobj=$.parseJSON(obj); alert(strToobj.name); alert(typeof strToobj)//obj var obja={'name':'techbirds','age':'23','sex':'male'}; alert(typeof obja);//obj alert(obja['name']+":"+obja.age); delete obja['name']; }); } function sendAjaxByarray(){ $.post("array",{},function(data){ var str=data; alert(typeof str);//string alert(typeof eval(str));//object var obja=[1,2,3,4,5]; alert(typeof obja);//object }); } </script>后台代码：
代码如下：
@Override protected void service(HttpServletRequest req, HttpServletResponse reps) throws ServletException, IOException { Map<String, Object> jsonMap=new HashMap<String, Object>(); jsonMap.put("name", "techbirds"); jsonMap.put("age", 23); jsonMap.put("sex", "male"); reps.getWriter().print(JSONObject.fromObject(jsonMap).toString()); reps.getWriter().flush(); reps.getWriter().close(); }代码如下：
@Override protected void service(HttpServletRequest req, HttpServletResponse reps) throws ServletException, IOException { String array="[1,2,3,4,5,6]"; reps.getWriter().print(array); reps.getWriter().flush(); reps.getWriter().close(); }一个json对象数组的json字符串:
var str=[{"Price":12,"Name":"aaa","Age",22},{"Price":24,"Name":"bbb","Age",33}];在前台，使用jquery的parseJSON方法来进行解析，并用jquery的foreach的方法来进行解析，代码如下：
var jsonarray= $.parseJSON(str);alert(jsonarray);$.each(jsonarray, function (i, n){ alert(n.Price);}var jsonarray= $.parseJSON(str);$.each(eval("(" + jsonarray+ ")"), function (i, n) { alert(n.Price);}JSON: JavaScript Object Notation(JavaScript 对象表示法)
JSON 是存储和交换文本信息的语法，类似 XML。
JSON 比 XML 更小、更快，更易解析。
JSON实例：
{ "employees": [ { "firstName":"John" , "lastName":"Doe" }, { "firstName":"Anna" , "lastName":"Smith" }, { "firstName":"Peter" , "lastName":"Jones" } ]}这个 employee 对象是包含 3 个员工记录（对象）的数组。
把任何 JavaScript 对象变成 JSON，就是把这个对象序列化成一个 JSON 格式的字符串，这样才能够通过网络传递给其他计算机。
JSON 使用 Javascript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。
JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。
由于这种相似性，无需解析器，JavaScript 程序能够使用内建的 eval() 函数，用 JSON 数据来生成原生的 JavaScript 对象。
JSON 或者 JavaScript 对象表示法是一种轻量级的基于文本的开放标准，被设计用于可读的数据交换。约定使用 JSON 的程序包括 C，C++，Java，Python，Perl 等等。
鉴于书籍数据有语言和版本信息，下面的例子展示了使用 JSON 存储书籍信息：
{ "book": [ { "id":"01", "language": "Java", "edition": "third", "author": "Herbert Schildt" }, { "id":"07", "language": "C++", "edition": "second", "author": "E.Balagurusamy" }]}理解上述程序之后我们来看另外一个例子，让我们把下面的代码保存为 json.htm：
<html><head><title>JSON example</title><script language="javascript" > var object1 = { "language" : "Java", "author" : "herbert schildt" }; document.write("<h1>JSON with JavaScript example</h1>"); document.write("<br/>"); document.write("<h3>Language = " + object1.language+"</h3>"); document.write("<h3>Author = " + object1.author+"</h3>"); var object2 = { "language" : "C++", "author" : "E-Balagurusamy" }; document.write("<br/>"); document.write("<h3>Language = " + object2.language+"</h3>"); document.write("<h3>Author = " + object2.author+"</h3>"); document.write("<hr />"); document.write(object2.language + " programming language can be studied " + "from book written by " + object2.author); document.write("<hr />");</script></head><body></body></html>现在尝试使用 IE 或者其他任何启用了 JavaScript 的浏览器打开这个页面，它会生成如下所示结果：
你可以参考 JSON 对象 来了解更多关于 JSON 对象的信息。
通过我们的编辑器，您可以在线编辑 JavaScript 代码，然后通过点击一个按钮来查看结果：
<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>
var JSONObject= {
"name":"John Johnson",
"street":"Oslo West 555",
"age":33,
"phone":"555 1234567"};
document.getElementById("jname").innerHTML=JSONObject.name
document.getElementById("jage").innerHTML=JSONObject.age
document.getElementById("jstreet").innerHTML=JSONObject.street
document.getElementById("jphone").innerHTML=JSONObject.phone
</script>
</body>
</html>
对于 AJAX 应用程序来说，JSON 比 XML 更快更易使用：
有关JSON的介绍到此为止，在接下来的章节中，我们将开始学习与使用JSON！
JSON 使用 JavaScript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。
JSON 语法是 JavaScript 语法的子集。
我们来快速浏览一下 JSON 的基本语法。JSON 的语法基本上可以视为 JavaScript 语法的一个子集，包括以下内容：
下面是一个简单的示例：
{ "book": [ { "id":"01", "language": "Java", "edition": "third", "author": "Herbert Schildt" }, { "id":"07", "language": "C++", "edition": "second", "author": "E.Balagurusamy" }]}JSON 支持以下两种数据结构：
JSON 语法是 JavaScript 对象表示法语法的子集。
JSON 语法规则不复杂，它参考了 C 语言家族的一些习惯，学习起来并不会感到陌生。
JSON 数据的书写格式是：名称/值对。
{ "flag":true }名称/值对包括字段名称（在双引号中），后面写一个冒号，然后是值：
"firstName" : "John"这很容易理解，等价于这条 JavaScript 语句：
firstName = "John"JSON 值可以是：
JSON 对象在花括号（{}）中书写：
对象可以包含多个名称/值对：
{ "firstName":"John" , "lastName":"Doe" }这一点也容易理解，与这条 JavaScript 语句等价：
firstName = "John" lastName = "Doe"JSON 数组在方括号中书写：
数组可包含多个对象：
{ "employees": [ { "firstName":"John" , "lastName":"Doe" }, { "firstName":"Anna" , "lastName":"Smith" }, { "firstName":"Peter" , "lastName":"Jones" } ]}在上面的例子中，对象 "employees" 是包含三个对象的数组。每个对象代表一条关于某人（有姓和名）的记录。
JSON 布尔值可以是 true 或者 false：
{ "51coolma":true }JSON 可以设置 null 值：
{ "51coolma":null }因为 JSON 使用 JavaScript 语法，所以无需额外的软件就能处理 JavaScript 中的 JSON。
通过 JavaScript，您可以创建一个对象数组，并像这样进行赋值：
可以像这样访问 JavaScript 对象数组中的第一项：
返回的内容是：
可以像这样修改数据：
在下面的章节，您将学到如何把 JSON 文本转换为 JavaScript 对象。
在下节内容中，我们将介绍如何使用JSON把文本转换为JavaScript对象。
JSON 最常见的用法之一，是从 web 服务器上读取 JSON 数据（作为文件或作为 HttpRequest），将 JSON 数据转换为 JavaScript 对象，然后在网页中使用该数据。
为了更简单地为您讲解，我们使用字符串作为输入进行演示（而不是文件）。
创建包含 JSON 语法的 JavaScript 字符串：
var txt = '{ "employees" : [' + '{ "firstName":"John" , "lastName":"Doe" },' + '{ "firstName":"Anna" , "lastName":"Smith" },' + '{ "firstName":"Peter" , "lastName":"Jones" } ]}';由于 JSON 语法是 JavaScript 语法的子集，JavaScript 函数 eval() 可用于将 JSON 文本转换为 JavaScript 对象。
eval() 函数使用的是 JavaScript 编译器，可解析 JSON 文本，然后生成 JavaScript 对象。必须把文本包围在括号中，这样才能避免语法错误：
var obj = eval ("(" + txt + ")");在网页中使用 JavaScript 对象：
eval() 函数可编译并执行任何 JavaScript 代码。这隐藏了一个潜在的安全问题。
使用 JSON 解析器将 JSON 转换为 JavaScript 对象是更安全的做法。JSON 解析器只能识别 JSON 文本，而不会编译脚本。
在浏览器中，这提供了原生的 JSON 支持，而且 JSON 解析器的速度更快。
较新的浏览器和最新的 ECMAScript (JavaScript) 标准中均包含了原生的对 JSON 的支持。
| Web 浏览器支持 | Web 软件支持 |
|---|---|
|
|
对于较老的浏览器，可使用 JavaScript 库： https://github.com/douglascrockford/JSON-js
本章节我们将向大家介绍 JSONP 的知识。
Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
为什么我们从不同的域（网站）访问数据需要一个特殊的技术(JSONP )呢？这是因为同源策略。
什么是同源策略？它是由Netscape提出的一个著名的安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策略。
Jsonp 的实现原理是利用 <script> 标签可以获取不同源资源的特点，来达到跨域访问某个资源的目的。
如客户想访问 : /try/ajax/jsonp.php?jsonp=callbackFunction。
假设客户期望返回JSON数据：["customername1","customername2"]。
真正返回到客户端的数据显示为: callbackFunction(["customername1","customername2"])。
服务端文件jsonp.php代码为：
<?php header('Content-type: application/json'); //获取回调函数名 $jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']); //json数据 $json_data = '["customername1","customername2"]'; //输出jsonp格式的数据 echo $jsoncallback . "(" . $json_data . ")"; ?><script type="text/javascript">function onCustomerLoaded(result, methodName){ var html = '<ul>'; for(var i = 0; i < result.length; i++){ html += '<li>' + result[i] + '</li>'; } html += '</ul>'; document.getElementById('divCustomers').innerHTML = html;}</script><div id="divCustomers"></div><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head> <title>JSONP 实例</title></head><body> <div id="divCustomers"></div> <script type="text/javascript"> function callbackFunction(result, methodName){ var html = '<ul>'; for(var i = 0; i < result.length; i++){ html += '<li>' + result[i] + '</li>'; } html += '</ul>'; document.getElementById('divCustomers').innerHTML = html; } </script><script type="text/javascript" src="/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script></body></html>以上代码可以使用 jQuery 代码实例：
<!DOCTYPE html><html><head> <title>JSONP 实例</title> <script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.js" rel="external nofollow" ></script> </head><body><div id="divCustomers"></div><script>$.getJSON("/try/ajax/jsonp.php?jsoncallback=?", function(data) { var html = '<ul>'; for(var i = 0; i < data.length; i++){ html += '<li>' + data[i] + '</li>'; } html += '</ul>'; $('#divCustomers').html(html); });</script></body></html> 很多网站都有提供一些很不错的JSON在线校验工具，我们也提供了一些JSON在线工具：
这是一款可将Excel/csv数据在线转换成json格式的工具，用户只需复制Excel/csv中的数据粘贴到上面一个文本框，再点击【转换】按钮即可实现快速转换json功能，还可根据需要选择转换成对象还是转换成数组格式，欢迎需要的朋友使用。
JSON和XML和我们最常用的两种信息传输格式，但是有些时候，我们却需要两者之间的转换，方便我们的工作。
JSON检验工具是一款集在线解析、格式化、验证功能于一体的在线工具，你可以实用该工具在线验证、编辑和格式化JSON数据，格式化后的JSON数据将更易于阅读。
JSON 格式支持以下数据类型：
| 类型 | 描述 |
|---|---|
| 数字型（Number） | JavaScript 中的双精度浮点型格式 |
| 字符串型（String） | 双引号包裹的 Unicode 字符和反斜杠转义字符 |
| 布尔型（Boolean） | true 或 false |
| 数组（Array） | 有序的值序列 |
| 值（Value） | 可以是字符串，数字，true 或 false，null 等等 |
| 对象（Object） | 无序的键:值对集合 |
| 空格（Whitespace） | 可用于任意符号对之间 |
| null | 空 |
下表展示了数字类型：
| 类型 | 描述 |
|---|---|
| 整形（Integer） | 数字1-9，0和正负数 |
| 分数（Fraction） | 分数，比如 .3，.9 |
| 指数（Exponent） | 指数，比如 e，e+，e-，E，E+，E- |
语法：
var json-object-name = { string : number_value, .......}示例：
下面的示例展示了数字类型，其值不应该使用引号包裹：
var obj = {marks: 97}下表展示了字符串类型：
| 类型 | 描述 |
|---|---|
| " | 双引号 |
| 反斜线 | |
| / | 斜线 |
| b | 退格符 |
| f | 换页符 |
| n | 换行符 |
| r | 回车符 |
| t | 水平制表符 |
| u | 四位十六进制数字 |
语法：
var json-object-name = { string : "string value", .......}示例：
下面的示例展示了字符串数据类型：
var obj = {name: 'Amit'}它包含 true 和 false 两个值。
语法：
var json-object-name = { string : true/false, .......}示例：
var obj = {name: 'Amit', marks: 97, distinction: true}语法：
[ value, .......]示例：
下面的示例展示了一个包含多个对象的数组：
{ "books": [ { "language":"Java" , "edition":"second" }, { "language":"C++" , "lastName":"fifth" }, { "language":"C" , "lastName":"third" } ]}语法：
{ string : value, .......}示例：
下面的例子展示了对象：
{ "id": "011A", "language": "JAVA", "price": 500,}可以在任意一对符号之间插入。可以添加用来让代码更可读。下面的例子展示了使用空格和不使用空格的声明：
语法：
{string:" ",....}示例：
var i= " sachin";var j = " saurav"意味着空类型。
语法：
null示例：
var i = null;if(i==1) { document.write("<h1>value is 1</h1>"); } else { document.write("<h1>value is null</h1>");}包括：
语法：
String | Number | Object | Array | TRUE | FALSE | NULL示例：
var i =1;var j = "sachin";var k = null;一个简单的 JSON 对象语法：
{ "name":"51coolma", "alexa":8000, "site":null }JSON 对象使用在大括号({})中书写，对象可以包含多个 key/value（键/值）对。
其中：
JSON 对象可以使用 JavaScript 创建。我们来看看使用 JavaScript 创建 JSON 对象的各种方式：
var JSONObj = {};var JSONObj = new Object();var JSONObj = { "bookname ":"VB BLACK BOOK", "price":500 };这里有一个例子，展示了在 JavaScript 中使用 JSON 创建对象，可以将下面的代码保存为 json_object_51coolma.htm：
注：.htm格式是早期的.html格式，此处内容无误。
<html><head><title>在JavaScript中使用JSON创建对象（51coolma.cn）</title><script language="javascript" > var JSONObj = { "name" : "编程狮（51coolma.cn）", "time" : 2020 }; document.write("<h1>JSON和JavaScript的例子</h1>"); document.write("<h3>网站的名字="+JSONObj.name+"</h3>"); document.write("<h3>时间="+JSONObj.time+"</h3>"); </script></head><body></body></html>现在让我们尝试使用 IE 或者任何其他启用了 JavaScript 的浏览器打开这个页面，这会生成如下所示结果：
你可以使用点号（.）来访问对象的值：
你也可以使用中括号（[]）来访问对象的值：
你可以使用 for-in 来循环对象的属性：
在 for-in 循环对象的属性时，使用中括号（[]）来访问属性的值：
下面的例子展示了在 JavaScript 中使用 JSON 创建数组对象，可以将下面的代码保存为 json_array_object_51coolma.htm：
<html><head><title>在 JavaScript 中使用 JSON 创建数组对象(51coolma.cn)</title><script language="javascript" >document.writeln("<h2>JSON数组对象(51coolma.cn)</h2>");var books = { "Pascal" : [ { "Name" : "Pascal Made Simple", "price" : 700 }, { "Name" : "Guide to Pascal", "price" : 400 } ], "Scala" : [ { "Name" : "Scala for the Impatient", "price" : 1000 }, { "Name" : "Scala in Depth", "price" : 1300 } ] } var i = 0document.writeln("<table border='2'><tr>");for(i=0;i<books.Pascal.length;i++){ document.writeln("<td>"); document.writeln("<table border='1' width=100 >"); document.writeln("<tr><td><b>Name</b></td><td width=50>" + books.Pascal[i].Name+"</td></tr>"); document.writeln("<tr><td><b>Price</b></td><td width=50>" + books.Pascal[i].price +"</td></tr>"); document.writeln("</table>"); document.writeln("</td>");}for(i=0;i<books.Scala.length;i++){ document.writeln("<td>"); document.writeln("<table border='1' width=100 >"); document.writeln("<tr><td><b>Name</b></td><td width=50>" + books.Scala[i].Name+"</td></tr>"); document.writeln("<tr><td><b>Price</b></td><td width=50>" + books.Scala[i].price+"</td></tr>"); document.writeln("</table>"); document.writeln("</td>");}document.writeln("</tr></table>");</script></head><body></body></html>现在让我们尝试使用 IE 或者任意其他启用了 JavaScript 的浏览器打开这个页面，和会生成如下所示结果：
JSON 对象中可以包含另外一个 JSON 对象：
myObj = { "name":"51coolma", "alexa":10000, "sites": { "site1":"www.51coolma.cn", "site2":"m.51coolma.cn", "site3":"c.51coolma.cn" }}你可以使用点号(.)或者中括号([])来访问嵌套的 JSON 对象。
你可以使用点号(.)来修改 JSON 对象的值：
你可以使用中括号([])来修改 JSON 对象的值：
JSON 对象和 JSON 字符串的区别：
JSON 对象
var str2 = { "name": "asan", "sex": "man" };JSON 字符串
var str1 = '{ "name": "deyuyi", "sex": "man" }';JSON 模式是一种基于 JSON 格式定义 JSON 数据结构的规范。它被写在 IETF 草案下并于 2011 年到期。JSON 模式：
目前有好几个验证器可用于不同的编程语言。但是目前最完整和兼容 JSON 模式的验证器是 JSV。
| 语言 | 程序库 |
|---|---|
| C | WJElement (LGPLv3) |
| Java | json-schema-validator (LGPLv3) |
| .NET | Json.NET (MIT) |
| ActionScript 3 | Frigga (MIT) |
| Haskell | aeson-schema (MIT) |
| Python | Jsonschema |
| Ruby | autoparse (ASL 2.0); ruby-jsonschema (MIT) |
| PHP | php-json-schema (MIT). json-schema (Berkeley) |
| JavaScript | Orderly (BSD); JSV; json-schema; Matic (MIT); Dojo; Persevere (modified BSD or AFL 2.0); schema.js. |
下面是一个基本的 JSON 模式，其中涵盖了一个经典的产品目录说明：
{ "$schema": "http://json-schema.org/draft-04/schema#", "title": "Product", "description": "A product from Acme's catalog", "type": "object", "properties": { "id": { "description": "The unique identifier for a product", "type": "integer" }, "name": { "description": "Name of the product", "type": "string" }, "price": { "type": "number", "minimum": 0, "exclusiveMinimum": true } }, "required": ["id", "name", "price"]}我们来看一下可以用于这一模式中的各种重要关键字：
| 关键字 | 描述 |
|---|---|
| $schema | $schema 关键字状态，表示这个模式与 v4 规范草案书写一致。 |
| title | 用它给我们的模式提供了标题。 |
| description | 关于模式的描述。 |
| type | type 关键字在我们的 JSON 数据上定义了第一个约束：必须是一个 JSON 对象。 |
| properties | 定义各种键和他们的值类型，以及用于 JSON 文件中的最小值和最大值。 |
| required | 存放必要属性列表。 |
| minimum | 给值设置的约束条件，表示可以接受的最小值。 |
| exclusiveMinimum | 如果存在 "exclusiveMinimum" 并且具有布尔值 true，如果它严格意义上大于 "minimum" 的值则实例有效。 |
| maximum | 给值设置的约束条件，表示可以接受的最大值。 |
| exclusiveMaximum | 如果存在 "exclusiveMinimum" 并且具有布尔值 true，如果它严格意义上小于 "maximum" 的值则实例有效。 |
| multipleOf | 如果通过这个关键字的值分割实例的结果是一个数字则表示紧靠 "multipleOf" 的数字实例是有效的。 |
| maxLength | 字符串实例字符的最大长度数值。 |
| minLength | 字符串实例字符的最小长度数值。 |
| pattern | 如果正则表达式匹配实例成功则字符串实例被认为是有效的。 |
可以在 http://json-schema.org 上检出可用于定义 JSON 模式的完整关键字列表。上面的模式可用于测试下面给出的 JSON 代码的有效性：
[ { "id": 2, "name": "An ice sculpture", "price": 12.50, }, { "id": 3, "name": "A blue mouse", "price": 25.50, }]XML：扩展标记语言 (Extensible Markup Language, XML) ，用于标记电子文件使其具有结构性的标记语言，可以用来标记数据、定义数据类型，是一种允许用户对自己的标记语言进行定义的源语言。
JSON(JavaScript Object Notation)是一种轻量级的文本数据交换格式，具有良好的可读和便于快速编写的特性，可在不同平台之间进行数据交换。
JSON 和 XML 都是人类可读的格式并且与语言无关。在现实环境中它们都支持创建，读取和解码。我们可以通过以下的因素来比较 JSON 和 XML：
XML 文件庞大，文件格式复杂，传输占带宽；JSON 数据格式比较简单，易于读写，格式都是压缩的，占用带宽小。
XML 比 JSON 冗余，因此对我们来说编写 JSON 会更快。
XML 被用来描述结构化数据，不包含数组；而 JSON 包含数组。
可以使用 JavaScript 的 eval 方法解析 JSON。当针对 JSON 应用这个方法时，eval 返回描述的对象。
下面分别展示了一个 XML 和 JSON 示例：
{ "company":"Volkswagen", "name": "Vento", "price": 800000}<car> <company>Volkswagen</company> <name>Vento</name> <price>800000</price></car>更多关于XML的知识，请参考：XML教程
JSON，说白了就是JavaScript用来处理数据的一种格式，这种格式非常简单易用。
JSON，大部分都是用来处理JavaScript和web服务器端之间的数据交换，把后台web服务器的数据传递到前台，然后使用JavaScript进行处理，例如ajax等。
JSON支持的语言非常多，包括JavaScript、C#、PHP、Java等等，这是由于JSON独立于语言的轻量级的数据交换格式，这个特点有点类似于SQL语言。
JSON结构共有2种：
对象结构是使用大括号“{}”括起来的，大括号内是由0个或多个用英文逗号分隔的“关键字:值”对（key:value）构成的。
语法：
var jsonObj ={ "键名1":值1, "键名2":值2, …… "键名n":值n}说明：
jsonObj指的是json对象。对象结构是以“{”开始，到“}”结束。其中“键名”和“值”之间用英文冒号构成对，两个“键名:值”之间用英文逗号分隔。
注意，这里的键名是字符串，但是值可以是数值、字符串、对象、数组或逻辑true和false。
JSON数组结构是用中括号“[]”括起来，中括号内部由0个或多个以英文逗号“,”分隔的值列表组成。
语法：
var arr =[ { "键名1":值1, "键名2":值2 }, { "键名3":值3, "键名4":值4 }, ……]说明：
arr指的是json数组。数组结构是以“[”开始，到“]”结束，这一点跟JSON对象不同。在JSON数组中，每一对“{}”相当于一个JSON对象，大家看看像不像？而且语法都非常类似。
注意，这里的键名是字符串，但是值可以是数值、字符串、对象、数组或逻辑true和false。
对于JSON对象结构和JSON数组结构的读取、写入、修改、删除和遍历等操作请到相应章节认真查看。
代码片断1
{ "button":[ { "type":"click", "name":"今日歌曲", "key":"V1001_TODAY_MUSIC" }, { "type":"click", "name":"歌手简介", "key":"V1001_TODAY_SINGER" }, { "name":"菜单", "sub_button":[ { "type":"view", "name":"搜索", "url":"http://www.soso.com/" }, { "type":"view", "name":"视频", "url":"http://v.qq.com/" }, { "type":"click", "name":"赞一下我们", "key":"V1001_GOOD" }] }] }然后用PHP的json_encode()函数，对一二维数组转换成JSON形式
但转换出来的JSON形式:
代码片断2
{ "button": { "1": { "type": "click", "name": "今日歌曲", "key": "V1001_TODAY_MUSIC" }, "2": { "type": "click", "name": "歌手简介", "key": "V1001_TODAY_SINGER" }, "3": { "name": "菜单", "sub_button": [ { "type": "view", "name": "搜索", "url": "http://www.soso.com/" }, { "type": "view", "name": "视频", "url": "http://v.qq.com/" }, { "type": "click", "name": "赞一下我们", "key": "V1001_GOOD" } ] } }}看出来形式是不一致的。
只能来了解一下JSON的结构形式。
JSON有两种数据：1.无序的对象结构；2.有序的数组结构
1.无序的对象结构
无序的对象结构在不同语言中称法不同，比如在Python中称为字典，在JS中称为JSON对象……
总之就是键/值对组合形式。
刚才我转换出来的JSON结构就是无序的键/值对组合
2.有序的数组结构
有序的的数组结构，即代码片断2所展示的结构。
将数组作为有序数组进行转换JSON，就可以得到有序的JSON数组结构。
在下一节内容中，我们一起来认识 JSON 数据格式！
JSON 是 JavaScript Object Notation 的简称，是一种轻量的数据表示方法。json格式采用key:value的方式记录数据，非常直观，比XML简洁，因而大受欢迎
介绍json格式前，先让我们看看XML格式。显然，XML 得到了相当多的关注（正面和负面的评价都有），已经在 Ajax 应用程序中广泛使用：
<request> <firstName>Brett</firstName> <lastName>McLaughlin</lastName> <email>brett@newInstance.com</email></request>这里的数据与前面看到的相同，但是这一次采用 XML 格式。这没什么了不起的；这只是另一种数据格式，使我们能够使用 XML 而不是纯文本和名称/值对。
本文讨论另一种数据格式，JavaScript Object Notation（JSON）。JSON 看起来既熟悉又陌生。它提供了另一种选择，选择范围更大总是好事情。
在使用名称/值对或 XML 时，实际上是使用 JavaScript 从应用程序中取得数据并将数据转换成另一种数据格式。在这些情况下，JavaScript 在很大程度上作为一种数据操纵语言，用来移动和操纵来自 Web 表单的数据，并将数据转换为一种适合发送给服务器端程序的格式。
但是，有时候 JavaScript 不仅仅作为格式化语言使用。在这些情况下，实际上使用 JavaScript 语言中的对象来表示数据，而不仅是将来自 Web 表单的数据放进请求中。在这些情况下，从 JavaScript 对象中提取数据，然后再将数据放进名称/值对或 XML，就有点儿多此一举了。这时就适合使用 JSON：JSON 允许轻松地将 JavaScript对象转换成可以随请求发送的数据（同步或异步都可以）。
JSON 并不是某种银弹；但是，它对于某些非常特殊的情况是很好的选择。
简单地说，JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串，然后就可以在函数之间轻松地传递这个字符串，或者在异步应用程序中将字符串从 Web 客户机传递给服务器端程序。这个字符串看起来有点儿古怪（稍后会看到几个示例），但是 JavaScript 很容易解释它，而且 JSON 可以表示比名称/值对更复杂的结构。例如，可以表示数组和复杂的对象，而不仅仅是键和值的简单列表。JSON 基础
按照最简单的形式，可以用下面这样的 JSON 表示名称/值对：
{ "firstName": "Brett" }这个示例非常基本，而且实际上比等效的纯文本名称/值对占用更多的空间：
firstName="Brett"但是，当将多个名称/值对串在一起时，JSON 就会体现出它的价值了。首先，可以创建包含多个名称/值对的记录，比如：
{"firstName": "Brett","lastName":"McLaughlin","email": "brett@newInstance.com"}从语法方面来看，这与名称/值对相比并没有很大的优势，但是在这种情况下 JSON 更容易使用，而且可读性更好。例如，它明确地表示以上三个值都是同一记录的一部分；花括号使这些值有了某种联系。
当需要表示一组值时，JSON 不但能够提高可读性，而且可以减少复杂性。例如，假设您希望表示一个人名列表。在 XML 中，需要许多开始标记和结束标记；如果使用典型的名称/值对（就像在本系列前面文章中看到的那种名称/值对），那么必须建立一种专有的数据格式，或者将键名称修改为 person1-firstName 这样的形式。
如果使用 JSON，就只需将多个带花括号的记录分组在一起：
{ "people": [ { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" }, { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" }, { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }]}这不难理解。在这个示例中，只有一个名为 people 的变量，值是包含三个条目的数组，每个条目是一个人的记录，其中包含名、姓和电子邮件地址。上面的示例演示如何用括号将记录组合成一个值。当然，可以使用相同的语法表示多个值（每个值包含多个记录）：
{ "programmers": [ { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" }, { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" }, { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" } ],"authors": [ { "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" }, { "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" }, { "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" } ],"musicians": [ { "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" }, { "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" } ]}这里最值得注意的是，能够表示多个值，每个值进而包含多个值。但是还应该注意，在不同的主条目（programmers、authors 和 musicians）之间，记录中实际的名称/值对可以不一样。JSON 是完全动态的，允许在 JSON 结构的中间改变表示数据的方式。
在处理 JSON 格式的数据时，没有需要遵守的预定义的约束。所以，在同样的数据结构中，可以改变表示数据的方式，甚至可以以不同方式表示同一事物。
将 JSON 数据赋值给变量掌握了 JSON 格式之后，在 JavaScript 中使用它就很简单了。JSON 是 JavaScript 原生格式，这意味着在JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。在 JavaScript 中使用 JSON
例如，可以创建一个新的 JavaScript 变量，然后将 JSON 格式的数据字符串直接赋值给它：
var people = { "programmers": [ { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" }, { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" }, { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" } ], "authors": [ { "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" }, { "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" }, { "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" } ], "musicians": [ { "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" }, { "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" } ] }这非常简单；现在 people 包含前面看到的 JSON 格式的数据。但是，这还不够，因为访问数据的方式似乎还不明显。
尽管看起来不明显，但是上面的长字符串实际上只是一个数组；将这个数组放进 JavaScript 变量之后，就可以很轻松地访问它。实际上，只需用点号表示法来表示数组元素。所以，要想访问 programmers 列表的第一个条目的姓氏，只需在 JavaScript 中使用下面这样的代码：
people.programmers[0].lastName;注意，数组索引是从零开始的。所以，这行代码首先访问 people 变量中的数据；然后移动到称为 programmers的条目，再移动到第一个记录（[0]）；最后，访问 lastName 键的值。结果是字符串值 “McLaughlin”。
下面是使用同一变量的几个示例。
people.authors[1].genre // Value is "fantasy"people.musicians[3].lastName // Undefined. This refers to the fourth entry, and there isn't onepeople.programmers.[2].firstName // Value is "Elliotte"利用这样的语法，可以处理任何 JSON 格式的数据，而不需要使用任何额外的 JavaScript 工具包或 API。
正如可以用点号和括号访问数据，也可以按照同样的方式轻松地修改数据：
people.musicians[1].lastName = "Rachmaninov";在将字符串转换为 JavaScript 对象之后，就可以像这样修改变量中的数据。
当然，如果不能轻松地将对象转换回本文提到的文本格式，那么所有数据修改都没有太大的价值。在 JavaScript中这种转换也很简单：
String newJSONtext = people.toJSONString();这样就行了！现在就获得了一个可以在任何地方使用的文本字符串，例如，可以将它用作 Ajax 应用程序中的请求字符串。
更重要的是，可以将任何 JavaScript 对象转换为 JSON 文本。并非只能处理原来用 JSON 字符串赋值的变量。为了对名为 myObject 的对象进行转换，只需执行相同形式的命令：
String myObjectInJSON = myObject.toJSONString();这就是 JSON 与本系列讨论的其他数据格式之间最大的差异。如果使用 JSON，只需调用一个简单的函数，就可以获得经过格式化的数据，可以直接使用了。对于其他数据格式，需要在原始数据和格式化数据之间进行转换。即使使用 Document Object Model 这样的 API（提供了将自己的数据结构转换为文本的函数），也需要学习这个API 并使用 API 的对象，而不是使用原生的 JavaScript 对象和语法。
最终结论是，如果要处理大量 JavaScript 对象，那么 JSON 几乎肯定是一个好选择，这样就可以轻松地将数据转换为可以在请求中发送给服务器端程序的格式。
本教程将会教我们如何使用 PHP 编程语言编码和解码 JSON 对象。让我们先来准备环境以便针对 JSON 进行 PHP 编程。
从 PHP 5.2.0 开始默认捆绑了 JSON 扩展并被编译到 PHP 中。
| 函数 | 程序库 |
|---|---|
| json_encode | 返回一个值的 JSON 表示形式。 |
| json_decode | 解码为一个 JSON 字符串。 |
| json_last_error | 返回最后一次出现的错误。 |
PHP 的 json_encode() 函数用于在 PHP 中编码 JSON。编码成功时这个函数返回给定值的 JSON 表示形式，失败则返回 FALSE。
语法：
string json_encode ( $value [, $options = 0 ] )参数：
示例：
下面的例子展示了如何使用 PHP 将一个数组转换为 JSON：
<?php $arr = array('a' => 1, 'b' => 2, 'c' => 3, 'd' => 4, 'e' => 5); echo json_encode($arr);?>执行时会生成如下结果：
{"a":1,"b":2,"c":3,"d":4,"e":5}下面的例子展示了 PHP 对象也可以被转换为 JSON：
<?php class Emp { public $name = ""; public $hobbies = ""; public $birthdate = ""; } $e = new Emp(); $e->name = "sachin"; $e->hobbies = "sports"; $e->birthdate = date('m/d/Y h:i:s a', strtotime("8/5/1974 12:20:03")); echo json_encode($e);?>执行时会生成如下所示结果：
{"name":"sachin","hobbies":"sports","birthdate":"08/05/1974 12:20:03 pm"}PHP 的 json-decode() 函数用于在 PHP 中解码 JSON。这个函数返回从 JSON 解码到适当 PHP 类型的值。
语法：
mixed json_decode ($json [,$assoc = false [, $depth = 512 [, $options = 0 ]]])参数：
示例：
下面例子展示了如何使用 PHP 解码 JSON 对象：
<?php $json = '{"a":1,"b":2,"c":3,"d":4,"e":5}'; var_dump(json_decode($json)); var_dump(json_decode($json, true));?>执行时生成如下所示结果：
object(stdClass)#1 (5) { ["a"] => int(1) ["b"] => int(2) ["c"] => int(3) ["d"] => int(4) ["e"] => int(5)}array(5) { ["a"] => int(1) ["b"] => int(2) ["c"] => int(3) ["d"] => int(4) ["e"] => int(5)}本教程将会教我们如何使用 Perl 编程语言编码和解码 JSON 对象。让我们先来准备环境以便针对 JSON 进行 Perl 编程。
在开始使用 Perl 编码和解码 JSON 之前，我们需要安装 JSON 模块，可以从 CPAN 中获取。下载 JSON-2.53.tar.gz 或者其他任意最新版本之后请按照下列步骤操作：
$tar xvfz JSON-2.53.tar.gz$cd JSON-2.53$perl Makefile.PL$make$make install| 函数 | 程序库 |
|---|---|
| encode_json | 将给定的 Perl 数据结构转为 UTF-8 编码的二进制字符串。 |
| decode_json | 解码 JSON 字符串。 |
| to_json | 将给定的 Perl 数据结构转换为 JSON 字符串。 |
| from_json | 接受一个 JSON 字符串并试图解析它，返回结果引用。 |
| convert_blessed | 给这个函数传递 true，则 Perl 可以使用这个对象类的 TO_JSON 方法将对象转换为 JSON。 |
Perl 的 encode_json() 函数可以将给定的 Perl 数据结构转换为 UTF-8 编码的二进制字符串。
语法：
$json_text = encode_json ($perl_scalar );or$json_text = JSON->new->utf8->encode($perl_scalar);示例：
下面的例子展示了使用 Perl 将数组转换为 JSON：
#!/usr/bin/perluse JSON;my %rec_hash = ('a' => 1, 'b' => 2, 'c' => 3, 'd' => 4, 'e' => 5);my $json = encode_json \%rec_hash;print "$json
";执行时生成如下所示结果：
{"e":5,"c":3,"a":1,"b":2,"d":4}下面的例子展示了如何将 Perl 对象转换为 JSON：
#!/usr/bin/perlpackage Emp;sub new{ my $class = shift; my $self = { name => shift, hobbies => shift, birthdate => shift, }; bless $self, $class; return $self;}sub TO_JSON { return { %{ shift() } }; }package main;use JSON;my $JSON = JSON->new->utf8;$JSON->convert_blessed(1);$e = new Emp( "sachin", "sports", "8/5/1974 12:20:03 pm");$json = $JSON->encode($e);print "$json
";执行时生成如下所示结果：
{"birthdate":"8/5/1974 12:20:03 pm","name":"sachin","hobbies":"sports"}Perl 的 decode_json() 函数用于在 Perl 中解码 JSON。这个函数返回从 JSON 解码到适当 Perl 类型的值。
语法：
$perl_scalar = decode_json $json_textor$perl_scalar = JSON->new->utf8->decode($json_text)示例：
下面的例子展示了如何使用 Perl 解码 JSON 对象。如果你的机器上没有 Data::Dumper 模块那么你需要安装这个模块。
#!/usr/bin/perluse JSON;use Data::Dumper;$json = '{"a":1,"b":2,"c":3,"d":4,"e":5}';$text = decode_json($json);print Dumper($text);执行时生成如下所示结果：
$VAR1 = { 'e' => 5, 'c' => 3, 'a' => 1, 'b' => 2, 'd' => 4};本教程将会教我们如何使用 Python 编程语言编码和解码 JSON。让我们先来准备环境以便针对 JSON 进行 Python 编程。
在我们使用 Python 编码和解码 JSON 之前，我们需要安装一个可用 JSON 模块。对于本教程请按照如下方式下载和安装 Demjson：
$tar xvfz demjson-1.6.tar.gz$cd demjson-1.6$python setup.py installpython在2.6版本后内置了JSON模块，使用方法与下文类似，详细的内容可以前往这篇文章中进行查看：python如何解析JSON？JSON模块详解！
| 函数 | 程序库 |
|---|---|
| encode | 将 Python 对象编码为 JSON 字符串表示。 |
| decode | 将 JSON 编码的字符串解码为 Python 对象。 |
Python 的 encode() 函数用于将 Python 对象编码为 JSON 字符串表示。
语法：
demjson.encode(self, obj, nest_level=0)示例：
下面的例子展示了使用 Python 将数组转换为 JSON：
#!/usr/bin/pythonimport demjsondata = [ { 'a' : 1, 'b' : 2, 'c' : 3, 'd' : 4, 'e' : 5 } ]json = demjson.encode(data)print json执行时会生成如下所示结果：
{'a': 1, 'b': 2, 'c': 3, 'd': 4, 'e': 5}Python 可以使用 demjson.decode() 函数处理 JSON 解码。这个函数返回从 JSON 解码到适当 Python 类型的值。
语法：
demjson.decode(self, txt)示例：
下面的例子展示了如何使用 Python 解码 JSON 对象。
#!/usr/bin/pythonimport demjsonjson = '{"a":1,"b":2,"c":3,"d":4,"e":5}';text = demjson.decode(json)print text执行时生成如下所示结果：
{'a': 1, 'b': 2, 'c': 3, 'd': 4, 'e': 5}本教程将会教我们如何使用 Python 编程语言编码和解码 JSON。
在python3中（以及python2.6版本后的python2版本）内置了JSON模块，无需额外安装另外的JSON模块。
JSON模块是python内置的用来进行python对象序列化和反序列化的模块。
序列化，指将python对象转换为json格式的数据流，反序列化则是将json格式的数据流转换为python对象。
该模块中常用的方法有以下四个：
两个dump函数是将python对象转换为json，可以理解为编码（类似demjson的encode函数），两个load函数是将json转换为python对象，可以理解为JSON解析（类似demjson的code函数）。因为两个dump和两个load的功能相似，所以小编只介绍其中一个（介绍JSON格式数据的字符串的编码与解析，也就是dumps和loads函数）。
dumps可以传递的参数如下：
json.dumps(obj, skipkeys=False, ensure_ascii=True, check_circular=True, allow_nan=True, cls=None, indent=None, separators=None, default=None, sort_keys=False)在日常使用中，更多的情况我们只传递必须的obj参数（这是一个对象），其他参数为可选参数，下表是该函数的所有参数的作用：
| 参数 | 作用 | |||
obj（必选项） | 要序列化的python对象 | |||
skipkeys=False | 是否跳过要序列化的对象中字典元素的key不是基本类型的数据； 如果为 True，则跳过，如果为 False，将抛出 TypeError异常。 | |||
ensure_ascii=True | 是否将要序列化的对象中的字符串中的非ascii字符进行转义。 如果该参数为 | |||
check_circular=True | 是否进行容器类型的循环引用检查。 如果该参数设置为 如果该参数设置为 | |||
allow_nan=True | 是否允许序列化超出范围的float 类型的值（如float('inf') 、float('-inf') 、float('nan') ）。 如果该参数设置为 如果该参数设置为 | |||
indent=None | 是否在数组元素和对象成员前增加缩进以便使格式更加美观。 如果该参数设置为大于等于1的整数，则添加换行符和对应数量的空格表示缩进，如果设置为 | |||
separators=None | 设置Json中各项之间、对象的键和值之间的分隔符； 该参数必须是一个2元组，元组第一个元素表示Json数据中各项之间的分隔符，元组的第二个元素表示Json对象的键和值之间的分隔符。默认的分隔符为（’,’, ‘:’） | |||
default=None | 指定一个函数，用来将不可进行序列化的Python对象转化为可序列化的Python对象。 | |||
cls=None | 指定一个定制的JSONEncoder 的子类（例如，重写了.default() 方法用来序列化附加的类型），指定该参数时请使用cls 关键字参数。如果未指定该参数，则将使用默认的JSONEncoder 。 | |||
sort_keys=False | 是否要将对象中字典元素按照key进行排序。 默认为 | |||
举个简单的例子：
#!/usr/bin/python3import json# Python 字典类型转换为 JSON 对象data = { 'no' : 1, 'name' : 'W3CSchool', 'url' : 'http://www.51coolma.cn'}json_str = json.dumps(data)print ("Python 原始数据：", repr(data))print ("JSON 对象：", json_str)python对象转化为JSON字符串的时候遵循以下转换规则：
| Python | Json |
|---|---|
| dict | object |
| list, tuple | array |
| str | string |
| int, float | number |
| True | true |
| False | false |
| None | null |
loads可以传递的参数如下：
json.loads(s,encoding=None, cls=None, object_hook=None, parse_float=None, parse_int=None, parse_constant=None, object_pairs_hook=None)在日常使用中，更多的情况我们只传递必须的s参数（这是一个字符串），其他参数为可选参数，下表是该函数的所有参数的作用：
| 参数 | 作用 | |||
s（必选项） | 要反序列化的JSON字符串 | |||
| encoding=None | 该参数已弃用，将会被忽略 | |||
| cls=None | 指定一个定制的JsonDecoder 子类，以便实现特定的反序列化需求； | |||
| object_hook=None | 接受一个可调用对象，用于处理解码后生成的Python对象中 注意，这个处理过程是递归进行的，即返回的Python对象内部所有的字典结构都将被这个方法处理 | |||
parse_float=None | 用于处理解码后的Python对象中的 | |||
parse_int=None | 接受一个可调用对象，用于处理解码后的Python对象中的int 类型的值。 | |||
parse_constant=None | 接受一个可调用对象，用于解码时对 Infinity、 -Infinity、 NaN或其他非法的Json数值的处理。 | |||
object_parse_hook=None | 如果指定了该参数并且设置为一个可调用对象，那么Json对象将被解码成一个元素为二元组的列表，二元组的两个元素分别为Json对象中的键值对的键和值，并且列表中元素的顺序与Json对象中键值对的顺序一致。 | |||
举个简单的例子：
#!/usr/bin/python3import json# Python 字典类型转换为 JSON 对象data1 = { 'no' : 1, 'name' : 'W3CSchool', 'url' : 'http://www.51coolma.cn'}json_str = json.dumps(data1)print ("Python 原始数据：", repr(data1))print ("JSON 对象：", json_str)# 将 JSON 对象转换为 Python 字典data2 = json.loads(json_str)print ("data2['name']: ", data2['name'])print ("data2['url']: ", data2['url'])与序列化的过程类似，JSON转化为python对象也遵循一定的规则：
| Json | Python |
|---|---|
| object | dict |
| array | list |
| string | str |
| number（int） | int |
| number（real） | float |
| true | True |
| false | False |
| null | None |
本教程将会教我们如何使用 Ruby 编程语言编码和解码 JSON。让我们先来准备环境以便针对 JSON 进行 Ruby 编程。
在我们使用 Ruby 编码和解码 JSON 之前，我们需要安装一个可用于 Ruby 的 JSON 模块。你可能需要安装 Ruby gem，我们使用 Ruby gem 安装 JSON 模块，如果你使用的是最新版的 Ruby，那么可能已经安装了 gem，安装好 gem 之后请按照下面的步骤操作：
$gem install json下面的例子展示了前 2 个键持有字符串值，最后 3 个键持有字符串数组。我们把下面的内容保存为叫做 input.json 的文件。
{ "President": "Alan Isaac", "CEO": "David Richardson", "India": [ "Sachin Tendulkar", "Virender Sehwag", "Gautam Gambhir" ], "Srilanka": [ "Lasith Malinga", "Angelo Mathews", "Kumar Sangakkara" ], "England": [ "Alastair Cook", "Jonathan Trott", "Kevin Pietersen" ]}下面是用于解析上述 JSON 文档的 Ruby 程序：
#!/usr/bin/rubyrequire 'rubygems'require 'json'require 'pp'json = File.read('input.json')obj = JSON.parse(json)pp obj执行时生成如下所示结果：
{ "President"=>"Alan Isaac", "CEO"=>"David Richardson", "India"=> ["Sachin Tendulkar", "Virender Sehwag", "Gautam Gambhir"], "Srilanka"=> ["Lasith Malinga ", "Angelo Mathews", "Kumar Sangakkara"], "England"=> ["Alastair Cook", "Jonathan Trott", "Kevin Pietersen"]}本教程将会教我们如何使用 Java 编程语言编码和解码 JSON。让我们先来准备环境以便针对 JSON 进行 Java 编程。
在我们使用 Java 编码和解码 JSON 之前，我们需要安装一个可用的 JSON 模块。对于这个教程请下载和安装 JSON.simple，然后把 jsonsimple-1.1.1.jar 文件的路径添加到环境变量 CLASSPATH 中。
JSON.simple 实体映射从左侧到右侧为解码或解析，实体映射从右侧到左侧为编码。
| JSON | Java |
|---|---|
| string | java.lang.String |
| number | java.lang.Number |
| true | false | java.lang.Boolean |
| null | null |
| array | java.util.List |
| object | java.util.Map |
解码时，java.util.List 的默认具体类是 org.json.simple.JSONArray，java.util.Map 的默认具体类是 org.simple.JSONObject。
下面这个简单的示例展示了使用 java.util.HashMap 的子类 JSONObject 编码一个 JSON 对象。这里并没有提供顺序。如果你需要严格的元素顺序，请使用 JSONValue.toJSONString(map) 方法的有序映射实现，比如 java.util.LinkedHashMap。
import org.json.simple.JSONObject;class JsonEncodeDemo { public static void main(String[] args) { JSONObject obj = new JSONObject(); obj.put("name", "foo"); obj.put("num", new Integer(100)); obj.put("balance", new Double(1000.21)); obj.put("is_vip", new Boolean(true)); System.out.print(obj); }}编译和执行上面的程序时，会生成如下所示结果：
{"balance": 1000.21, "num":100, "is_vip":true, "name":"foo"}下面是另一个示例，使用 Java JSONObject 展示了 JSON 对象流：
import org.json.simple.JSONObject;class JsonEncodeDemo{ public static void main(String[] args) { JSONObject obj = new JSONObject(); obj.put("name","foo"); obj.put("num",new Integer(100)); obj.put("balance",new Double(1000.21)); obj.put("is_vip",new Boolean(true)); StringWriter out = new StringWriter(); obj.writeJSONString(out); String jsonText = out.toString(); System.out.print(jsonText); }}编译和执行上面的程序时，会生成如下所示结果：
{"balance": 1000.21, "num":100, "is_vip":true, "name":"foo"}下面的例子使用了 JSONObject 和 JSONArray，其中 JSONObject 就是 java.util.Map，JSONArray 就是 java.util.List，因此我们可以使用 Map 或 List 的标准操作访问它们。
import org.json.simple.JSONObject;import org.json.simple.JSONArray;import org.json.simple.parser.ParseException;import org.json.simple.parser.JSONParser;class JsonDecodeDemo{ public static void main(String[] args) { JSONParser parser=new JSONParser(); String s = "[0,{"1":{"2":{"3":{"4":[5,{"6":7}]}}}}]"; try{ Object obj = parser.parse(s); JSONArray array = (JSONArray)obj; System.out.println("The 2nd element of array"); System.out.println(array.get(1)); System.out.println(); JSONObject obj2 = (JSONObject)array.get(1); System.out.println("Field "1""); System.out.println(obj2.get("1")); s = "{}"; obj = parser.parse(s); System.out.println(obj); s= "[5,]"; obj = parser.parse(s); System.out.println(obj); s= "[5,,2]"; obj = parser.parse(s); System.out.println(obj); }catch(ParseException pe){ System.out.println("position: " + pe.getPosition()); System.out.println(pe); } }}编译和执行上面的程序时，会生成如下所示结果：
The 2nd element of array{"1":{"2":{"3":{"4":[5,{"6":7}]}}}}Field "1"{"2":{"3":{"4":[5,{"6":7}]}}}{}[5][5,2]AJAX 就是异步 JavaScript 和 XML，它是一组用于客户端的相互关联的 Web 开发技术，以创建异步 Web 应用程序。遵循 AJAX 模型，Web 应用程序可以以异步的方式发送数据以及从服务器上检索数据，而不影响现有页面的显示行为。
许多开发人员都在客户端和服务器之间使用 JSON 传递 AJAX 更新。实时更新体育成绩的站点就可以视为一个 AJAX 例子。如果这些成绩要更新到站点上，那么必须要把它们存储到服务器上便于需要时网页能取回这些成绩。这里我们可以使用 JSON 格式的数据。
任何使用 AJAX 更新的数据都可以使用 JSON 格式存储在 Web 服务器上。使用 AJAX，那么 JavaScript 就可以在必要时取回这些 JSON 文件，解析它们，然后做以下两件事情：
下面的代码展示了 JSON 和 AJAX，请把它们保存为 ajax.html 文件。这里的加载函数 loadJSON() 将会使用异步的方式上传 JSON 数据。
<!DOCTYPE html><html lang="en"><head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><script type="application/javascript">function loadJSON(){ var data_file = "https://atts.51coolma.cn/articles/user.json"; var http_request = new XMLHttpRequest(); try{ // Opera 8.0+, Firefox, Chrome, Safari http_request = new XMLHttpRequest(); }catch (e){ // IE 浏览器处理 try{ http_request = new ActiveXObject("Msxml2.XMLHTTP"); }catch (e) { try{ http_request = new ActiveXObject("Microsoft.XMLHTTP"); }catch (e){ // 错误处理 alert("Your browser broke!"); return false; } } } http_request.onreadystatechange = function(){ if (http_request.readyState == 4 ) { // 使用 JSON.parse 解析 JSON 数据 var jsonObj = JSON.parse(http_request.responseText); // jsonObj 变量现在包含数组结构，可以通过 jsonObj.name 和 jsonObj.country 的方式访问 document.getElementById("Name").innerHTML = jsonObj.name; document.getElementById("Country").innerHTML = jsonObj.country; } } http_request.open("GET", data_file, true); http_request.send();}</script><title>tutorialspoint.com JSON</title></head><body><h1>Cricketer Details</h1><table class="src"><tr><th>Name</th><th>Country</th></tr><tr><td><div id="Name">Sachin</div></td><td><div id="Country">India</div></td></tr></table><div class="central"><button type="button" onclick="loadJSON()">Update Details </button></div></body></html>下面就是包含 JSON 格式数据的输入文件 user.json，当我们点击 Update Detail 按钮时会以异步的方式请求这个json。这个文件已经保存到https://atts.51coolma.cn/articles/user.json上了。
{"name": "brett", "country": "Australia"}上面的 HTML 代码会生成如下所示屏幕显示，这里你可以进行 AJAX 实战：
当我们点击 Update Detail 按钮时，应该会得到如下所示的结果，你也可以自己尝试 JSON 和 AJAX，提供你自己的浏览器支持的 JavaScript。
由于CROS的存在，跨域请求处理会被浏览器屏蔽掉，所以ajax请求只能在相同域名下进行请求（比如本站的网页请求本站的Ajax），以上代码在在线运行情况下是可以运行的，但在本地情况下不能运行，望知悉。
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C、C++、C#、Java、JavaScript、Perl、Python等）。这些特性使JSON成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成(一般用于提升网络传输速率)。
JSON的规则很简单： 对象是一个无序的“‘名称/值'对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值' 对”之间使用“,”（逗号）分隔。具体细节参考http://www.json.org/json-zh.html
举个简单的例子：
js 代码
function showJSON() { var user = { "username": "andy", "age": 20, "info": { "tel": "123456", "cellphone": "98765" }, "address": [{ "city": "beijing", "postcode": "222333" }, { "city": "newyork", "postcode": "555666" } ] } alert(user.username); alert(user.age); alert(user.info.cellphone); alert(user.address[0].city); alert(user.address[0].postcode);}这表示一个user对象，拥有username, age, info, address 等属性。
同样也可以用JSON来简单的修改数据，修改上面的例子，得到：
js 代码
function showJSON() { var user = { "username": "andy", "age": 20, "info": { "tel": "123456", "cellphone": "98765" }, "address": [{ "city": "beijing", "postcode": "222333" }, { "city": "newyork", "postcode": "555666" } ] } alert(user.username); alert(user.age); alert(user.info.cellphone); alert(user.address[0].city); alert(user.address[0].postcode); user.username = "Tom"; alert(user.username);}JSON提供了json.js包，下载http://www.json.org/json.js 后，将其引入然后就可以简单的使用object.toJSONString()转换成JSON数据。
js 代码
function showCar() { var carr = new Car("Dodge", "Coronet R/T", 1968, "yellow"); alert(carr.toJSONString());}function Car(make, model, year, color) { this.make = make; this.model = model; this.year = year; this.color = color;}可以使用eval来转换JSON字符到Object
js 代码
function myEval() { var str = '{ "name": "Violet", "occupation": "character" }'; var obj = eval('(' + str + ')'); alert(obj.toJSONString()); }或者使用parseJSON()方法
js 代码
function myEval() { var str = '{ "name": "Violet", "occupation": "character" }'; var obj = str.parseJSON(); alert(obj.toJSONString());}下面使用prototype写一个JSON的ajax例子。
先写一个servlet (我的是servlet.ajax.JSONTest1.java)就写一句话
java 代码
response.getWriter().print("{ "name": "Violet", "occupation": "character" }");再在页面中写一个ajax的请求
js 代码
function sendRequest() {
var url = "/MyWebApp/JSONTest1";
var mailAjax = new Ajax.Request(
url, {
method: 'get',
onComplete: jsonResponse
});
}
function jsonResponse(originalRequest) {
alert(originalRequest.responseText);
var myobj = originalRequest.responseText.parseJSON();
alert(myobj.name);
}
prototype-1.5.1.js中提供了JSON的方法，String.evalJSON(), 可以不使用json.js, 修改上面的方法
js 代码
function jsonResponse(originalRequest) { alert(originalRequest.responseText); var myobj = originalRequest.responseText.evalJSON(true); alert(myobj.name);}JSON还提供了java的jar包 http://www.json.org/java/index.html API也很简单，下面举个例子
在javascript中填加请求参数
js 代码
function sendRequest() { var carr = new Car("Dodge", "Coronet R/T", 1968, "yellow"); var pars = "car=" + carr.toJSONString(); var url = "/MyWebApp/JSONTest1"; var mailAjax = new Ajax.Request( url, { method: 'get', parameters: pars, onComplete: jsonResponse });}使用JSON请求字符串就可以简单的生成JSONObject并进行解析,修改servlet添加JSON的处理(要使用json.jar)
java 代码
private void doService(HttpServletRequest request, HttpServletResponse response) throws IOException {
String s3 = request.getParameter("car");
try {
JSONObject jsonObj = new JSONObject(s3);
System.out.println(jsonObj.getString("model"));
System.out.println(jsonObj.getInt("year"));
} catch (JSONException e) {
e.printStackTrace();
}
response.getWriter().print("{ "name": "Violet", "occupation": "character" }");
}
同样可以使用JSONObject生成JSON字符串，修改servlet
java 代码
private void doService(HttpServletRequest request, HttpServletResponse response) throws IOException { String s3 = request.getParameter("car"); try { JSONObject jsonObj = new JSONObject(s3); System.out.println(jsonObj.getString("model")); System.out.println(jsonObj.getInt("year")); } catch (JSONException e) { e.printStackTrace(); } JSONObject resultJSON = new JSONObject(); try { resultJSON.append("name", "Violet") .append("occupation", "developer") .append("age", new Integer(22)); System.out.println(resultJSON.toString()); } catch (JSONException e) { e.printStackTrace(); } response.getWriter().print(resultJSON.toString());}
js 代码
function jsonResponse(originalRequest) {
alert(originalRequest.responseText);
var myobj = originalRequest.responseText.evalJSON(true);
alert(myobj.name);
alert(myobj.age);
}
下面在重点给大家介绍JS中json数据的处理：
1、 json数据结构(对象和数组)
json对象：var obj = {"name":"xiao","age":12};
json数组：
var objArray = [{"name":"xiao","age":12},{"name":"xiao","age":12}];2、 处理json数据，依赖文件有：jQuery.js
3、Note：数据传输过程中，json数据是以文本，即字符串格式形式存在；
JS语言操作的是JS对象；
所以json字符串与JS对象之间的转换是关键；
4、数据格式
Json字符串：var json_str = ‘{"name":"xiao","age":12}';
Josn对象：var obj = {"name":"xiao","age":12};
JS对象：Object {name: "xiao", age: 12}
5、类型转换
Json字符串——>JS对象，使用方法：
注明：json_str、obj代表的是在本文子标题4中的数据类型；
obj = JSON.parse(json_str);
obj = jQuery.parseJSON(json_str);
Note:传入畸形json字符串(例如：‘{name:"xiao",age:12}')，会抛出异常；
Json字符串格式，严格格式：‘{"name":"xiao","age":12}'
JS对象——>Json字符串：
json_str = JSON. stringify(obj);
NOTE：
1、eval()是JS原生函数，使用该形式：eval(‘('+‘{name:"xiao",age:12}'+')')，并不安全,无法保证类型转换为JS对象；
2、上面3中方法，都经过chrome浏览器测试，下面是测试结果截图；
Json字符串——>JS对象;
JS对象——>Json字符串：
在JavaScript中将JSON的字符串解析成JSON数据格式，一般有两种方式：
一种为使用eval()函数。
使用Function对象来进行返回解析。
使用eval函数来解析，jquery的each方法来遍历
用JQuery解析JSON数据的方法，作为JQuery异步请求的传输对象，JQuery请求后返回的结果是json对象，这里考虑的都是服务器返回JSON形式的字符串的形式，对于利用JSONObject等插件封装的JSON对象，与此亦是大同小异，这里不再做说明。
这里首先给出JSON字符串集，字符串集如下：
var data = "{root:[ {name:'1',value:'0'}, {name:'6101',value:'北京市'}, {name:'6102',value:'天津市'}, {name:'6103',value:'上海市'}, {name:'6104',value:'重庆市'},]}";这里以JQuery异步获取的数据类型——json对象和字符串为依据，分别介绍两种方式获取到的结果处理方式。
eval()
对于服务器返回的JSON字符串，如果jquery异步请求没做类型说明，或者以字符串方式接受，那么需要做一次对象化处理，方式不是太麻烦，就是将该字符串放于eval()中执行一次。这种方式也适合以普通javascipt方式获取json对象，以下举例说明：
// 转换为json对象
var dataObj=eval("("+data+")");
为什么要 eval这里要添加 ("("+data+")"); 呢？
原因在于：eval本身的问题。 由于json是以”{}”的方式来开始以及结束的，在JS中，它会被当成一个语句块来处理，所以必须强制性的将它转换成一种表达式。
加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式（expression）转化为对象，而不是作为语句（statement）来执行。举一个例子，例如对象字面量{}，如若不加外层的括号，那么eval会将大括号识别为JavaScript代码块的开始和结束标记，那么{}将会被认为是执行了一句空语句。所以下面两个执行结果是不同的：
// return undefinedalert(eval("{}");// return object[Object]alert(eval("({})");对于这种写法，在JS中，可以到处看到。如: (function()) {}(); 做闭包操作时等。//输出root的子对象数量alert(dataObj.root.length);$.each(dataObj.root,fucntion(idx,item){ if(idx==0){ return true; } //输出每个root子对象的名称和值 alert("name:"+item.name+",value:"+item.value);});对于一般的js生成json对象，只需要将$.each()方法替换为for语句即可，其他不变。
服务器返回的JSON字符串
对于服务器返回的JSON字符串，如果jquery异步请求将type（一般为这个配置属性）设为“json”，或者利 用$.getJSON()方法获得服务器返回，那么就不需要eval（）方法了，因为这时候得到的结果已经是json对象了，只需直接调用该对象即可，这里以$.getJSON方法为例说明数据处理方法：
$.getJSON("http://www.phpzixue.cn/",{param:"gaoyusi"},function(data){ //此处返回的data已经是json对象 //以下其他操作同第一种情况 $.each(data.root,function(idx,item){ if(idx==0){ //同countinue，返回false同break return true; } alert("name:"+item.name+",value:"+item.value); });});这里特别需要注意的是方式1中的eval()方法是动态执行其中字符串（可能是js脚本）的，这样很容易会造成系统的安全问题。所以可以采用一些规避了eval()的第三方客户端脚本库，比如JSON in JavaScript就提供了一个不超过3k的脚本库。
第二种解析方式就是使用Function对象来完成，它的典型应用就是在JQuery中的AJAX方法下的success等对于返回数据data的解析。
var json='{"name":"CJ","age":18}';data =(new Function("","return "+json))();此时的data就是一个会解析成一个json对象了。
使用JSON
JSON也就是JavaScript Object Notation，是一个描述数据的轻量级语法。JSON的优雅是因为它是JavaScript语言的一个子集。接下来你将看到它为什么如此重要。首先，来比较一下JSON和XML语法。
JSON和XML都使用结构化方法描述数据。例如一个地址簿应用程序可以提供用来产生XML格式的地址卡的web服务：
<?xml version='1.0' encoding='UTF-8'?>
<card>
<fullname>Sean Kelly</fullname>
<org>SK Consulting</org>
<emailaddrs>
<address type='work'>kelly@seankelly.biz</address>
<address type='home' pref='1'>kelly@seankelly.tv</address>
</emailaddrs>
<telephones>
<tel type='work' pref='1'>+1 214 555 1212</tel>
<tel type='fax'>+1 214 555 1213</tel>
<tel type='mobile'>+1 214 555 1214</tel>
</telephones>
<addresses>
<address type='work' format='us'>1234 Main St
Springfield, TX 78080-1216</address>
<address type='home' format='us'>5678 Main St
Springfield, TX 78080-1316</address>
</addresses>
<urls>
<address type='work'>http://seankelly.biz/</address>
<address type='home'>http://seankelly.tv/</address>
</urls>
</card>
使用JSON, 形式如下:
{
"fullname": "Sean Kelly",
"org": "SK Consulting",
"emailaddrs": [
{"type": "work", "value": "kelly@seankelly.biz"},
{"type": "home", "pref": 1, "value": "kelly@seankelly.tv"}
],
"telephones": [
{"type": "work", "pref": 1, "value": "+1 214 555 1212"},
{"type": "fax", "value": "+1 214 555 1213"},
{"type": "mobile", "value": "+1 214 555 1214"}
],
"addresses": [
{"type": "work", "format": "us",
"value": "1234 Main StnSpringfield, TX 78080-1216"},
{"type": "home", "format": "us",
"value": "5678 Main StnSpringfield, TX 78080-1316"}
],
"urls": [
{"type": "work", "value": "http://seankelly.biz/"},
{"type": "home", "value": "http://seankelly.tv/"}
]
}
如你所看到的，JSON有结构化的嵌套数据元素，这一点和XML相似。JSON也是基于文本的，XML也是如此。两者都使用Unicode。 JSON和XML都很容易阅读。主观上，JSON更清晰，冗余更少。JSON WEB站点严格地描述了JSON语法，目前就是这样的。它确实是一个简单的小语言！ XML确实适合标记文档，但是JSON是数据交互的理想格式。每个JSON文档描述了一个这样一个对象，该对象包含有：嵌套对象、数组、字符串、数字、布 尔值或空值。
在这些地址卡例子代码中，JSON版本是更轻量级的，只占用了682字节的空间，而XML版本需要744字节空间。尽管这不是一个可观的节省。而实际的好处则来自解析过程。
XML对比JSON：地位丧失
通过使用XMLHttpRequest对象，可以从你的基于AJAX的应用程序取得XML和JSON文件。典型的，交互代码如下：
var req = new XMLHttpRequest();req.open("GET", "http://localhost/addr?cardID=32", /*async*/true);req.onreadystatechange = myHandler;req.send(/*no params*/null);作为WEB服务器响应，你提供的处理器函数（myHandler函数）被多次调用，为你提供提前终止事务，更新进度条等机会。通常的，只有在web请求完成以后才起作用：那时，你就可以使用返回的数据了。
为了处理XML版本的地址卡数据，myHandler的代码如下：
function myHandler() { if (req.readyState == 4 /*complete*/) { // Update address field in a form with first street address var addrField = document.getElementById('addr'); var root = req.responseXML; var addrsElem = root.getElementsByTagName('addresses')[0]; var firstAddr = addrsElem.getElementsByTagName('address')[0]; var addrText = fistAddr.firstChild; var addrValue = addrText.nodeValue; addrField.value = addrValue; }}值得注意的是你不必解析XML文档：XMLHttpRequest对象自动地解析了，并使responseXML中的DOM树可用。通过使用 responseXML属性，可以调用getElementsByTagName方法查找文档的地址部分，你还可以使用第一个去找到它。然后，可以再次调 用getElementsByTagName在地址部分查找第一个地址元素。这就取得了文档的第一个DOM子节点，就是一个文本节点，并取得节点的值，这 就是你想要的街道地址。最后，可以在表单域中显示结果。
确实不是一个简单的工作，现在，使用JSON再试一下：
function myHandler() { if (req.readyState == 4 /*complete*/) { var addrField = document.getElementById('addr'); var card = eval('(' + req.responseText + ')'); addrField.value = card.addresses[0].value; }}你所做的第一件事情就是解析JSON响应。但是，因为JSON是JavaScript的一个子集，你可以使用JavaScript自己的编译器来解析它， 通过调用eval函数。解析JSON仅需要一行！此外，操纵JSON中的对象就像操纵其他JavaScript对象一样。这显然要比通过DOM树来操纵简 单，例如：
card.addresses[0].value 是第一个街道地址, "1234 Main Stb &"
card.addresses[0].type 是地址类型, "work"
card.addresses[1] 是家庭地址对象
card.fullname 是card的名称, "Sean Kelly"
如果更仔细观察，你可能会发现XML格式中文档至少有一个跟元素，card。这在JSON里是不存在的，为什么？ 大概就是，如果你正在开发JavaScript来访问Web服务，你已经知道你想要得到的。然而，你可以在JSON中这么使用：
{"card": {"fullname": ...}}
使用这个技术，你的JSON文件总是以一个带有单一命名属性的对象开始，该属性标识了对象的种类。
JSON是快速可靠的吗？
JSON提供轻量的小文档，并且JSON在JavaScript更容易使用。XMLHttpRequest自动为你解析了XML文档，而你还要手工解析 JSON文件，但是解析JSON比解析XML更慢么？作者通过几千次的反复测试，使用XMLHttpRequest解析XML和解析JSON，结果是解析 JSON比XML要快10倍！当把AJAX当作桌面应用看待时，速度是最重要的因素，很明显，JSON更优秀。
当然，你不能总是控制服务器端来为AJAX程序产生数据。你还可以使用第三方服务器代替服务器提供XML格式的输出。并且，如果服务器恰好提供JSON，你可以确定你真的想使用它吗?
代码中值得注意的是，你将响应文本直接传入到eval中。如果你控制着服务器，就可以这么做。如果不是，一个恶意服务器可以使你的浏览器执行危险操作。在这样的情况下，你最好使用写在JavaScript中的代码来解析JSON。幸运地，这已经有了。
说到解析，Python爱好者可能注意到JSON不只是JavaScript的子集，它还是Python的一个子集。你可以在Python中直接执行JSON，或者使用安全JSON解析代替。JSON.org网站列举了许多常用JSON解析器。
服务器端的JSON
到现在为止，你或许将焦点注意在运行在客户浏览器中的基于AJAX的web应用程序使用JSON。自然地，首先，JSON格式的数据必须在服务器端产生。 幸运地是，创建JSON或将其他存在的数据转换成JSON是相当简单的。一些WEB应用程序框架，例如TurboGears，自动包括对JSON输出的支 持。
此外商业WEB服务提供商也注意到了JSON。Yahoo最近创建了许多基于JSON的web服务。Yahoo的多种搜索服务，履行计 划，del.icio.us，还有高速公路交通服务也都支持JSON输出。毫无疑问，其他主要WEB服务提供商也将加入到对JSON的支持中。
问题：请编写一个JavaScript函数parseQueryString，它的用途是把URL参数解析为一个对象。
例如：var obj=parseQueryString(url);
创建对象的三种形式：
一：
var Person=new Object();Person.name="Sun";Person.age=24;
二：
var Person=new Object();Person["name"]="Sun";Person["age"]=24;
三：
对象字面量表达式
var Person={name: "Sun",age: 24}
PS：
1、在这个例子中，比较适合使用第二种形式，向obj中添加元素
2、split("&") , 如果url只有一个参数的时候，没有“&”的时候，也不会报错，只会返回array[0]
function parseQueryString(url) { var obj = {}; var keyvalue = []; var key = "", value = ""; var paraString = url.substring(url.indexOf("?") + 1, url.length).split("&"); for (var i in paraString) { keyvalue = paraString[i].split("="); key = keyvalue[0]; value = keyvalue[1]; obj[key] = value; } return obj;}以下介绍了JS根据key值获取URL中的参数值及把URL的参数转换成json对象，js通过两种方式获取url传递参数，代码
示例一：
//把url的参数部分转化成json对象
parseQueryString: function(url) { var reg_url = /^[^/?]+/ ? ([wW] + ) $ / , reg_para = /([^&=]+)=([wW]*?)(&|$|#)/g, arr_url = reg_url.exec(url), ret = {}; if (arr_url && arr_url[1]) { var str_para = arr_url[1], result; while ((result = reg_para.exec(str_para)) != null) { ret[result[1]] = result[2]; } } return ret; }// 通过key获取url中的参数值
getQueryString: function(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null;}示例二：
js通过两种方法获取url传递参数：
js获取url传递参数方法一：
这里是一个获取URL带QUESTRING参数的JAVASCRIPT客户端解决方案，相当于asp的request.querystring，PHP的$_GET
函数:
function GetRequest() { var url = location.search; //获取url中"?"符后的字串 var theRequest = new Object(); if (url.indexOf("?") != -1) { var str = url.substr(1); strs = str.split("&"); for (var i = 0; i < strs.length; i++) { theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]); } } return theRequest;}然后我们通过调用此函数获取对应参数值：
var Request = new Object();Request = GetRequest();var 参数1,参数2,参数3,参数N;参数1 = Request[''参数1''];参数2 = Request[''参数2''];参数3 = Request[''参数3''];参数N = Request[''参数N''];以此获取url串中所带的同名参数
js获取url传递参数方法二 正则分析法：
function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) return (r[2]); return null;}alert(GetQueryString("参数名1"));alert(GetQueryString("参数名2"));alert(GetQueryString("参数名3"));其他参数获取介绍：
//设置或获取对象指定的文件名或路径。
alert(window.location.pathname);
//设置或获取整个 URL 为字符串。
alert(window.location.href);
//设置或获取与 URL 关联的端口号码。
alert(window.location.port);
//设置或获取 URL 的协议部分。
alert(window.location.protocol);
//设置或获取 href 属性中在井号“#”后面的分段。
alert(window.location.hash);
//设置或获取 location 或 URL 的 hostname 和 port 号码。
alert(window.location.host);
//设置或获取 href 属性中跟在问号后面的部分。
alert(window.location.search);
javasscript删除数组的3种方法
1，用shift()方法
shift：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined
var chaomao=[1,2,3,4,5]
var chaomao.shift()//得到1
alert(chaomao)//[2,3,4,5]
2，用pop()方法
pop：删除原数组最后一项，并返回删除元素的值；如果数组为空则返回undefined
var chaomao=[1,2,3,4,5]
var chaomao.pop()//得到5
alert(chaomao)//[1,2,3,4]
前面的方法只能操作数组开头和结尾，无法操作中间项，如果要操作中间的项，使用splice方法
3，用splice方法
这个方法很强大，可以对数组任意项进行增加，删除，替换操作
修改操作：
var chaomao=[1,2,3,4,5]
chaomao.splice(2,1,8,9)
alert(chaomao)//1,2,8,9,4,5
第一个参数是准备操作的数组位置，第二个参数是操作位置后面的数组项数，第三个以后的就是，被替换后的内容
例子就是表示：从chaomao这个数组位置2开始（也就是值为3的那一项，数组下标从0开始的），位置2后的一项，替换成成8，9
如果把第二个参数改为2，也就是chaomao.splice(2,2,8,9)，也就是说位置2后面的两项换成8，9，打印出来的结果就是1,2,8,9,5，3和4这2两项被换掉了
这里需要说明的是，被替换的项数不一定要和替换的项数相等，1项可以被换成3项，5项也可以被换成2项，基于这个原理，我们就用这个方法来对数组进行添加和删除操作
删除操作：
var chaomao=[1,2,3,4,5]
chaomao.splice(2,1)
alert(chaomao)//1,2,4,5
上面例子中，把chaomao中的位置2后的1项替换成空的，因为后面没有内容，结果可以看到，把3这项删除了
添加操作：
var chaomao=[1,2,3,4,5]
chaomao.splice(2,0,8,9)
alert(chaomao)//1,2,8,9,3,4,5
上面例子中，把chaomao中位置2后的0项换成8,9，也就等于添加了两项
其实，删除和添加操作都只是splice修改方法的两种衍生罢了
javasscript删除对象的方法
js中删除对象元素用delete操作符
我们来看看一个例子
var p ={"name": “chaomao”,"age":45,"sex":"male"};delete p.namefor(var i in p){console.log(i);//输出age,sex，name项已经被删除了}<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>javascript里面的数组，json对象，动态添加，修改，删除示例</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> var a = JSON.parse("{"title":"","data":[]}"); var b = JSON.parse("{"id":"2"}"); var c = JSON.parse("{"id":"3"}"); var d = JSON.parse("{"id":"4"}"); var e = JSON.parse("{"id":"5"}"); var f = JSON.parse("{"id":"6"}"); function myObjectPush() { debugger; /* javascript里面的数组，json对象，动态添加，修改，删除示例 只要适合Javascript的方法都是可以用在JSON对象的数组中的！所以还有另外的方法splice( )进行crud操作！*/ //增加属性 $(a).attr("id", "1"); //增加子对象 a.data.push(b); //数组最后加一条记录 a.data.push(c); a.data.push(d); a.data.unshift(d); //数组最前面加一条记录 //修改子对象及属性 a.title = "这是json名字"; //删除子对象 //json的删除有很多种，直接用过 delete json对象方式: delete a.data[1]; a.data.pop(); //删除最后一项 a.data.shift(); //删除第一项 a.data.splice(0, 1); //删除指定子对象，参数：开始位置,删除个数 //替换不删除 a.data.splice(1, 0, e, f); //开始位置,删除个数,插入对象 //替换并删除 a.data.splice(0, 1, e, f);//开始位置,删除个数,插入对象 } </script> </head> <body onload="myObjectPush()"></body></html>现在JSON格式在web开发中越来越受重视，特别是在使用ajax开发项目的过程中，经常需要将json格式的字符串返回到前端，前端解析成JS对象（JSON ）。
ECMA-262(E3)中没有将JSON概念写到标准中，还好在 ECMA-262(E5)中JSON的概念被正式引入了，包括全局的JSON对象和Date的toJSON方法。
解析JSON数据的三种方法的介绍如下：
解析JSON数据的最常用方法是使用javascript的eval()方法，代码如下：
function toJson(str){ var json = eval('(' + str + ')'); return json;}该方法存在性能和安全方面的问题，不建议使用。
function toJson(str){ var json = (new Function("return " + str))(); return json;}function toJson(str){ return JSON.parse(str);}json2.js会在浏览器原生支持JSON.parse的时候选用原生版本，而且它跟ES5是API兼容的。在ES5还没完全普及的现状下，John Resig大神推荐用json2.js主要是为了现在就能用跟ES5兼容的API，日后能平滑过渡到ES5——只要去掉一个import就换过来了。
下载json库
http://www.json.org/json-zh.html自己找javascript的
或者直接去下面的
https://github.com/douglascrockford/JSON-js
php生成json格式
使用页面
代码如下:
<script src="scripts/json.js"></script> alert(data.toJSONString());js 代码
代码如下:
functionshowJSON() { varuser = { "username":"tom", "age":20, "info": {"tel":"123456","cellphone":"98765"}, "address": [ {"city":"shanghai","postcode":"201203"}, {"city":"suzhou","postcode":"200000"} ] } alert(user.username); alert(user.age); alert(user.info.cellphone); alert(user.address[0].city); alert(user.address[0].postcode); }修改
代码如下:
user.username ="jerry";可以使用eval来转换JSON字符到Object
代码如下:
functionmyEval() { varstr = '{"name":"Violet","occupation":"character"}'; varbj = eval('(' + str + ')'); alert(obj.toJSONString()); }functionmyEval() { varstr = '{"name":"Violet","occupation":"character"}'; varbj = str.parseJSON(); alert(obj.toJSONString()); }我们在使用AJAX来做服务器端和客户端交互的时候，一般的做法是让服务器端返回一段JSON字符串，然后在客户端把它解析成JavaScript对象。
解析时用到的方法一般是eval或者new function，而目前IE8和Firefox3.1又内置了原生的JSON对象（据说会有一定的性能提升）。那我们在实际使用的时候怎样从这三种方法（因为性能问题，不考虑用javascript实现的解析）里面来选择呢？面对众多的浏览器，哪种方式的性能是最好的呢？
var count = 10000, o = null, i = 0, jsonString = '{"value":{"items": [{"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}]},"error":null}';eval 解析
代码如下:
var beginTime = new Date(); for ( i = 0; i < count; i++ ) { o = eval( "(" + jsonString + ")" ); } Console.output( "eval:" + ( new Date() - beginTime ) ); new Function 函数解析
代码如下:
var beginTime = new Date(); for ( i = 0; i < count; i++ ) { o = new Function( "return " + jsonString )(); } Console.output( "new Function:" + ( new Date() - beginTime ) ); native 原生解析
代码如下:
if ( typeof JSON !== "undefined" ) { var beginTime = new Date(); for ( i = 0; i < count; i++ ) { o = JSON.parse( jsonString ); } Console.output( "native:" + ( new Date() - beginTime ) ); } else { Console.output( "native:not support!" ); }
1、Firefox2、3全部垫底，IE6的性能优于IE7（可能和机器不一致有关），Chrome和Safari4的性能远远超出其它浏览器。
2、不同的浏览器下eval和new Function的性能不一致，总的来说eval更好，但Firefox下new Function的性能是eval的一倍，为了更好的兼容各个浏览器，我们把对JSON的解析单独封装成一个对象来处理：
wrapper
var __json = null;if (typeof JSON !== "undefined") { __json = JSON;}var browser = Browser;var JSON = { parse: function(text) { if (__json !== null) { return __json.parse(text); } if (browser.gecko) { return new Function("return " + text)(); } return eval("(" + text + ")") }};var beginTime = new Date();for (i = 0; i < count; i++) { o = JSON.parse(jsonString);}Console.output("wrapper:" + (new Date() - beginTime));
主要修改的代码：
//eval 2: var beginTime = new Date(); for (i = 0; i < count; i++) { o = eval("(" + '{"value":{"items": [{"x":' + i + ',"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}]},"error":null}' + ")");}Console.output("eval:" + (new Date() - beginTime));//new Function beginTime = new Date();for (i = 0; i < count; i++) { o = new Function("return " + '{"value":{"items": [{"x":' + i + ',"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}]},"error":null}')();}Console.output("new Function:" + (new Date() - beginTime));//native if (typeof JSON !== "undefined") { beginTime = new Date(); for (i = 0; i < count; i++) { o = JSON.parse('{"value":{"items": [{"x":' + i + ',"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}]},"error":null}'); } Console.output("native:" + (new Date() - beginTime));} else { Console.output("native:not support!");}//wrapper var __json = null;if (typeof JSON !== "undefined") { __json = JSON;}var browser = Browser;var JSON = { parse: function(text) { if (__json !== null) { return __json.parse(text); } if (browser.gecko) { return new Function("return " + text)(); } return eval("(" + text + ")") }};beginTime = new Date();for (i = 0; i < count; i++) { o = JSON.parse('{"value":{"items": [{"x":' + i + ',"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}]},"error":null}');}Console.output("wrapper:" + (new Date() - beginTime));<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Parse JsonString</title> </head> <body> <div id="consoleRegion"></div> <script type="text/javascript"> //yui var Browser = function() { var o = { ie: 0, opera: 0, gecko: 0, webkit: 0 }; var ua = navigator.userAgent, m; if ( ( /KHTML/ ).test( ua ) ) { o.webkit = 1; } // Modern WebKit browsers are at least X-Grade m = ua.match(/AppleWebKit/([^s]*)/); if (m&&m[1]) { o.webkit=parseFloat(m[1]); } if (!o.webkit) { // not webkit // @todo check Opera/8.01 (J2ME/MIDP; Opera Mini/2.0.4509/1316; fi; U; ssr) m=ua.match(/Opera[s/]([^s]*)/); if (m&&m[1]) { o.opera=parseFloat(m[1]); } else { // not opera or webkit m=ua.match(/MSIEs([^;]*)/); if (m&&m[1]) { o.ie=parseFloat(m[1]); } else { // not opera, webkit, or ie m=ua.match(/Gecko/([^s]*)/); if (m) { o.gecko=1; // Gecko detected, look for revision m=ua.match(/rv:([^s)]*)/); if (m&&m[1]) { o.gecko=parseFloat(m[1]); } } } } } return o; }(); var Console = { consoleRegion: null, getRegion: function() { if ( this.consoleRegion === null ) { this.consoleRegion = document.getElementById( "consoleRegion" ); } return this.consoleRegion; }, output: function( text ) { this.getRegion().innerHTML += "<br/>" + text; } }; //test code var count = 10000, o = null, i = 0, jsonString = '{"value":{"items": [{"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}]},"error":null}'; //eval var beginTime = new Date(); for ( i = 0; i < count; i++ ) { o = eval( "(" + jsonString + ")" ); } Console.output( "eval:" + ( new Date() - beginTime ) ); //new Function beginTime = new Date(); for ( i = 0; i < count; i++ ) { o = new Function( "return " + jsonString )(); } Console.output( "new Function:" + ( new Date() - beginTime ) ); //native if ( typeof JSON !== "undefined" ) { beginTime = new Date(); for ( i = 0; i < count; i++ ) { o = JSON.parse( jsonString ); } Console.output( "native:" + ( new Date() - beginTime ) ); } else { Console.output( "native:not support!" ); } //wrapper var __json = null; if ( typeof JSON !== "undefined" ) { __json = JSON; } var browser = Browser; var JSON = { parse: function( text ) { if ( __json !== null ) { return __json.parse( text ); } if ( browser.gecko ) { return new Function( "return " + text )(); } return eval( "(" + text + ")" ) } }; beginTime = new Date(); for ( i = 0; i < count; i++ ) { o = JSON.parse( jsonString ); } Console.output( "wrapper:" + ( new Date() - beginTime ) ); //alert( o.value.items[0].z ); </script> </body> </html> package com.ghj.servlet; import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.google.gson.Gson; public class JsonServlet extends HttpServlet { private static final long serialVersionUID = -699926309344319475L; public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/json;charset=utf-8"); PrintWriter out = response.getWriter(); Map<String, List<String>> dataMap = new HashMap<String, List<String>>(); List<String > gradeList = new ArrayList<String>();//年级 gradeList.add("初中一年级"); gradeList.add("初中二年级"); gradeList.add("初中三年级"); dataMap.put("gradeList", gradeList); List<String> courseList = new ArrayList<String>();//课程 courseList.add("语文"); courseList.add("数学"); courseList.add("物理"); dataMap.put("courseList", courseList); out.write(new Gson().toJson(dataMap)); out.flush(); out.close(); } } <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>首页</title> <script type="text/javascript" src="<%=basePath%>js/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function(){ $("#json").click(function(){ $.ajax({ type: "POST", url: "<%=basePath%>JsonServlet", success: function(data){ var grades = data.gradeList; for(var index in grades){//年级 console.log(grades[index]); } var courses = data.courseList; for(var index in courses){//课程 console.log(courses[index]); } }, error:function(){ alert("数据请求失败！"); } }); }); }); </script> </head> <body> <button id="json">JavaScript解析JSON字符串</button> </body> </html> 本文通过for循环来获取json结点数据，需要的朋友可以参考以下这串json数据用来存储预加载的图片路径：
var imgData = [{ name: "p1", src: "images/p1.jpg" }, { name: "p2", src: "images/p2.jpg" }, { name: "p3", src: "images/p3.jpg" }, { name: "p4", src: "images/p4.jpg" }, { name: "p5", src: "images/p5.jpg" }]下面这个函数可通过json每行的name来获取该行的路径src，让我们看一下代码：
function getData(name) { var picArr = imgData; var picSrc; for (var i = 0; i < picArr.length; i++) { var cur_person = picArr[i]; if (cur_person.name == name) { picSrc = cur_person.src; } } return picSrc;}函数执行后将返回该行的src。
var g = getData("p1");console.log(g);输出后即可看到结果为：images/p1.jpg
JS对象和JSON格式数据的相互转换其实就是两个问题：JS对象转换成为JSON格式数据、JSON格式数据转换成为JS对象。目前的项目数据交互几乎都用JQuery，所以处理流程是：前端页面数据-》JS对象-》jQuery提交-》python处理，另外一种就是倒过来。python肯定不能直接处理JS对象数据，所以要把JS对象转换成为python能处理的一种数据格式（通常是字典dict），同样，python取数据反馈到前端也要把字典数据转换成JS能处理的对象，这个中间转换数据格式通常就是JSON。
object 本身就是无对象的集合，因此在用 for-in 语句遍历对象的属性时，遍历出的属性顺序与对象定义时不同。
var json1 = { "2":{"name":"第1条"}, "1":{"name":"第2条"}, "3":{"name":"第3条"}}var json2 = [ {"name":"第1条"}, {"name":"第2条"}, {"name":"第3条"}]for(var i in json1){ alert(json1[i].name);}//正确for(var i in json2){ alert(json2[i].name);}看看for-in代码在个浏览器差异：
下面通过一段代码单独给大家介绍JS 循环遍历JSON数据
JSON数据如：
{"options":"[{/"text/":/"王家湾/",/"value/":/"9/"},{/"text/":/"李家湾/",/"valu
e/":/"10/"},{/"text/":/"邵家湾/",/"value/":/"13/"}]"}
用js可以写成：
var data=[{name:"a",age:12},{name:"b",age:11},{name:"c",age:13},{name:"d",age:14}]; for(var o in data){ alert(o); alert(data[o]); alert("text:"+data[o].name+" value:"+data[o].age ); }或者是：
<script type="text/javascript"> function text(){ var json = {"options":"[{/"text/":/"王家湾/",/"value/":/"9/"},{/"text/":/"李家湾/",/"value/":/"10/"},{/"text/":/"邵家湾/",/"value/":/"13/"}]"} json = eval(json.options) for(var i=0; i<json.length; i++) { alert(json[i].text+" " + json[i].value) } } </script>js中遍历数组的有两种方式
var array = ['a']//标准的for循环for (var i = 1; i < array.length; i++) { alert(array[i])}//foreach循环for (var i in array) { alert(array[i])}正常情况下上面两种遍历数组的方式结果一样。首先说两者的第一个区别
标准的for循环中的i是number类型,表示的是数组的下标,但是foreach循环中的i表示的是数组的key是string类型,因为js中一切皆为对象。自己试试 alert(typeof i);这个区别是小问题。现在我加上如下代码，上面的执行结果就不一样了。
//扩展了js原生的ArrayArray.prototype.test=function(){ }再此建议两点
1.不要用for in遍历数组，全部统一采用标准的for循环变量数组(我们无法保证我们引入的js是否会采用prototype扩展原生的Array)
2.如果要对js的原生类扩展的时候，不要采用prototype了
代码如下:
/* author: liulf function: var __db_cpcj=vCpcj; var __db_cp=vCp; var vCp={"cppage":[ {"cpdh":"A01000101","page":"1","ca":"1309-36-0","mc":"硫铁矿","ename":"Pyrite","bm":"黄铁矿"}, {"cpdh":"A01000201","page":"1","ca":"1309-36-0","mc":"硫精砂","ename":"Pyrite concentrate;Sulfur concentrate","bm":""}, {"cpdh":"A01000202","page":"1","ca":"1309-36-0","mc":"硫精矿粉","ename": "Powdered pyrite concentrate;Pyrites concentrate,powder;Sulfur concentrate,powder","bm":"硫精矿"},{"cpdh":"A02000101","page":"1","ca":"","mc":"磷矿石","ename":"Phosphorus ore","bm":""}, {"cpdh":"A02000111","page":"2","ca":"","mc":"磷矿砂","ename":"Phosphorite grit","bm":""}, {"cpdh":"A02000201","page":"2","ca":"","mc":"磷矿粉","ename":"Phosphate rock powder","bm":""},{"cpdh":"A03000101","page":"2","ca":"12447-04-0","mc":"硼矿石","ename":"Ascharite;Boric ore","bm":"硼镁矿"}, {"cpdh":"A04000101","page":"2","ca":"","mc":"钾长石","ename":"Potash feldspar;Potassium feldspars","bm":""}, {"cpdh":"A04000201","page":"2","ca":"12003-63-3","mc":"长石粉","ename":"Feldspar powder","bm":""}, {"cpdh":"A04000301","page":"2","ca":"","mc":"光卤石","ename":"Carnallite","bm":""} ]} */function ObjSearch() { this.kw = ''; this.searchCpcj = function() { $(vCpcj).each(function() {}); } this.searchCp = function() { // var json = eval(vCp.cppage) // for(var i=0; i<json.length; i++) // { // alert(json[i].cpdh+" " + json[i].page) // break; // } $.each(vCp.cppage, function(index, content) { document.write('<div>' + content.cpdh + '</div><br />'); }); }}js 如何遍历jsonc对象？其实方法很简单。
比如有如下json对象：var obj ={”name”:”冯娟”,”password”:”123456″,”department”:”技术部”,”sex”:”女”,”old”:30};
for (var p in obj) { str = str + obj[p] + ','; return str;}综合实例：
var array = { "a": "abc", "b": [1, 2, 3, 4, 5, 6], "c": 3, "d": { "name": "james", "age": 28 }, "e": null, "f": true};var arrayObj = { "a": { "name": "kobe", "age": 34 }, "b": { "name": "lofo", "age": 28 }};//遍历array方式1for (var x in array) { if (typeof array[x] == 'object' && array[x] != null) { for (var y in array[x]) { alert("key = " + y + " value = " + array[x][y]); } } else { alert("key = " + x + " value = " + array[x]); // 非array object }}//遍历array方式2$.each(array, function(k, v) { var a = typeof(v); //数组与对象为object类型，其他分别是string与number类型 //此时的k代表a、b、c、d，v代表对应的值 if (typeof(v) == "object") { //获取数组与对象后，再去遍历这个数组与对象 $.each(v, function(k1, v1) { window.alert("key = " + k1 + " value=" + v1); }); } else { window.alert("key = " + k + " value=" + v); }});//遍历arrayObj方式1for (var x in arrayObj) { for (var key in arrayObj[x]) { window.alert("key=" + key + " value=" + arrayObj[x][key]); }}//遍历arrayObj方式2$.each(arrayObj, function(key, value) { $.each(value, function(k, v) { window.alert("key=" + k + " value=" + v); });});//遍历arrayObj方式3$.each(arrayObj, function(key, value) { window.alert("key=" + key + " valueName=" + value.name + " valueAge=" + value.age);});var UserList = [ { "UserID": 11, "Name": { "FirstName": "Truly", "LastName": "Zhu" }, "Email": "" }, { "UserID": 12, "Name": { "FirstName": "Jeffrey", "LastName": "Richter" }, "Email": "" }, { "UserID": 13, "Name": { "FirstName": "Scott", "LastName": "Gu" }, "Email": "" }]$.each(UserList, function(k, v) { $.each(v, function(k1, v1) { if (typeof(v1) == "object") { $.each(v1, function(k2, v2) { window.alert("key=" + k2 + " value=" + v2); }); } else { window.alert("key=" + k1 + " value=" + v1); } });});var userArray = [ { "UserID": 11, "Name": { "FirstName": "Truly", "LastName": "Zhu" }, "Email": "" }, { "UserID": 12, "Name": { "FirstName": "Jeffrey", "LastName": "Richter" }, "Email": "" }, { "UserID": 13, "Name": { "FirstName": "Scott", "LastName": "Gu" }, "Email": "" }];for (var i in userArray) { for (var k in userArray[i]) { if (typeof userArray[i][k] == "object" && userArray[i][k] != null) { for (var j in userArray[i][k]) { window.alert("key=" + j + "--value=" + userArray[i][k][j]); } } else { window.alert("key=" + k + "--value=" + userArray[i][k]); } }}代码示例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><SCRIPT LANGUAGE="JavaScript"> var t="{'firstName': 'cyra', 'lastName': 'richardson', 'address': { 'streetAddress': '1 Microsoft way', 'city': 'Redmond', 'state': 'WA', 'postalCode': 98052 },'phoneNumbers': [ '425-777-7777','206-777-7777' ] }";var jsonobj=eval('('+t+')');//单个JSON对象时要加括号，JSON数组就不需要了 alert(jsonobj.firstName); alert(jsonobj.lastName);var t2="[{name:'zhangsan',age:'24'},{name:'lisi',age:'30'},{name:'wangwu',age:'16'},{name:'tianqi',age:'7'}] ";var myobj=eval(t2);for(var i=0;i<myobj.length;i++){ alert(myobj[i].name); alert(myobj[i].age);}var t3="[['<a href=# onclick=openLink(14113295100,社旗县国税局桥头税务所,14113295100,d6d223892dc94f5bb501d4408a68333d,swjg_dm);>14113295100</a>','社旗县国税局桥头税务所','社旗县城郊乡长江路西段']]";//通过eval() 函数可以将JSON字符串转化为对象var obj = eval(t3);for(var i=0;i<obj.length;i++){ for(var j=0;j<obj[i].length;j++){alert(obj[i][j]); }}/*stringifier 函数的作用跟 parse 相反， 用来将一个js对象转换为 JSON 文本。var jsonText = JSON.stringify(obj);alert(jsonText);//如果基于安全的考虑的话，最好是使用一个 JSON 解析器。 一个 JSON 解析器将只接受 JSON 文本。所以是更安全的。var myObject = JSON.parse(myJSONtext, filter); //可选的 filter 参数将遍历每一个value key 值对， 并进行相关的处理。如：//如myData = JSON.parse(text, function (key, value) { return key.indexOf('date') >= 0 ? new Date(value) : value; });//stringifier 函数的作用跟 parse 相反， 用来将一个js对象转换为 JSON 文本。var myJSONText = JSON.stringifier(myObject);*/</SCRIPT></HEAD><BODY></BODY></HTML>
附加JSP后台拼JSON字符串
<%@ page contentType="text/html;charset=GBK" %><%@ taglib uri="/tags/web-flex" prefix="flex"%><%@ taglib uri="/tags/web-grid" prefix="grid"%><%@ taglib uri="/tags/web-html" prefix="html"%><%@ taglib uri="/tags/web-sotower" prefix="sotower"%><%@ taglib uri="/tags/sotower-bsp" prefix="bsp"%><%@page import="java.util.List"%><%@page import="com.wuynw.ygxx.po.WyYuang"%><% List reslist=(List)request.getAttribute("flexgrid.data");StringBuilder sb=new StringBuilder();sb.append("["); for(int i=0;i<reslist.size();i++) { WyYuang w=(WyYuang)reslist.get(i); if(i>0) { sb.append(","); } sb.append("{").append(""").append("id").append(""").append(":"); sb.append(""").append(w.getId()).append(""").append(","); sb.append(""").append("name").append(""").append(":"); sb.append(""").append(w.getXingm()).append(""").append(","); sb.append(""").append("gongh").append(""").append(":"); sb.append(""").append(w.getGongh()).append(""").append(","); sb.append(""").append("zhiw").append(""").append(":"); sb.append(""").append(w.getZhiw()).append(""").append(","); sb.append(""").append("ruzrq").append(""").append(":"); sb.append(""").append(w.getRuzrq()).append(""").append("}");}sb.append("]");out.print(sb.toString());%>直接在JS里创建JSON数据，然后遍历使用~
创建代码如下：（创建的是JSON对象）
var YearSelect = {}; var Year = 2014; var DateOption; for (var i = Year; i < Year + 12; i++) { DateOption = {'Year':i, 'Month':i-Year+1}; / alert(DateOption.Year) YearSelect[i] = DateOption; }这里是创建一个JSON对象，包括了年份和月份的数据。
我为什么创建JSON对象，是因为我对JSON对象比较熟悉。php后台返回的也是json对象。
json对象没有length属性~~
所以遍历的话要：
for(var key in YearSelect){ alert(YearSelect[key].Year); alert(YearSelect[key].Month); }这样就可以了~
记住一定要分辨好json的对象和数组~不然就一直是undenfined
下面给大家介绍js数组添加json数据的两种方式。
// 第一种方式
personInfo: [],for(var i = 0; i < _STAGE.passengerInfoArray.length; i++){var name = _STAGE.passengerInfoArray[i];var person = {v:name, text:name};this.personInfo.push(person);}// 第二种方式
var passengerInfo = {};passengerInfo.psgTypeDesc = psgTypeDesc;passengerInfo.flightPrice = flightPrice;_STAGE.passengerInfoArray.push(passengerInfo);1. 定义一维数组：var s1=new Array();
s1=[1,2,3,4]或者s1[0]=1,s1[1]=2,s1[3]=3,s1[4]=4;
alert(s1[0]);
结果为1；
2. 定义二维素组：var s1=new Array();
var s1=[[3,1],[2,3,4],3,[4,5,6,7,8]];
alert(s1[1][0]);
结果为2；
1. json对象
var status_process = { " name5" : '闲置期', "name1" : '播种期', "name2" : '苗期', "name3" : '生长期', "name4" : '采收期' } alert(status_process);结果为：Object:Object;
2. json字符串
所谓json字符串，是指该字符串变量的值与json的格式相同，但是不是json对象，比如：
var s1="{";var s2 = " 'name5' : '闲置期', 'name1' : '播种期','name2' : '苗期','name3' : '生长期','name4' : '采收期'";var s3="}";var status_process=s1+s2 +s3；虽然status_process的值符合json对象的格式，但是它不是对象，只是一个字符串(是拼凑出来的)；
将字符串转换为json对象使用函数eval，eval("(" + status_process+ ")")；
结论：从后台传入到前台的是json字符串，不是真正的json对象，因此需要使用eval函数转换。
3. json对象的使用
var status_process = { name5 : '闲置期', name1 : '播种期', name2 : '苗期', name3 : '生长期', name4 : '采收期' }; alert(status_process["name5"]); alert(status_process.name5);两个都为:闲置期
4. json二维对象
var status_process = { name5 : {name3:'空闲闲置期'}, name1 : '播种期', name2 : '苗期', name3 : '生长期', name4 : '采收期'};alert(status_process["name5"]["name3"]);alert(status_process.name5.name3);结果都为：'空闲闲置期'
本文提供了 JS 循环 JSON 数据列，以及 JS 循环遍历 JSON 数据的例子，供大家学习参考。
var len = json.length;for (var i = 0; i < len; i++){for (obj in json[i]){var obj2 = obj;}}
用js循环遍历的方法如下：
//方法1，var data=[{name:"a",age:12},{name:"b",age:11},{name:"c",age:13},{name:"d",age:14}]; for(var o in data){ alert(o); alert(data[o]); alert("text:"+data[o].name+" value:"+data[o].age ); } //方法2，<script type="text/javascript"> function text(){ var json = {"options":"[{/"text/":/"王家湾/",/"value/":/"9/"},{/"text/":/"李家湾/",/"value/":/"10/"},{/"text/":/"邵家湾/",/"value/":/"13/"}]"} json = eval(json.options) for(var i=0; i<json.length; i++) { alert(json[i].text+" " + json[i].value) } } </script>JS 遍历 JSON 返回的 map 内容示例代码
代码如下:
var yData = [];//Y轴数据 var xData = [];//X轴数据 $(data.rows).each(function(i){ var obj = data.rows[i]; // alert(obj.key); // alert(obj.value); yData.push(obj.key); //动态取值 xData.push(obj.value); //动态取值 }); 由于JS不能直接遍历Map，但是可以遍历JSON对象，所以先将Map转为JSON数据，再由JS去解析遍历JSON对象，就达到了间接遍历Map的目的：
代码如下：var proIdArray = new Array();var proNameArray = new Array();// Deal with the project names. var theProjectsObj = JSON.parse(result.data["projectIdsNames"]);for (var proId in theProjectsObj) { proNameArray.push(theProjectsObj[proId]); proIdArray.push(proId);}本文实例讲述了JSP+jQuery使用Ajax方式调用JSON的实现方法，在这里分享给大家以供大家参考，具体的实现以及代码如下所示：
前台：
<script type="text/javascript" src="jquery-1.5.1.min.js"></script><script type="text/javascript"> //test function test(uid) { if(confirm("确定该用户操作"+uid+"吗？")) { var date = new Date(); var param = {uid:uid}; jQuery.get("test.jsp?para=" + date, param, function(data){ if(data != null) { var result = data.result; //alert("data==="+data); if(result == 1) { alert("操作失败"); } if(result == 0) { alert("操作失败。"); //document.location.href = document.location; //window.location.reload(); } } }); } }</script><a href="javascript:void(0);" onclick="test(111111111111111111);">submit</a>后台：
test.jsp：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%response.setContentType("application/x-json;charset=UTF-8");String uid=request.getParameter("uid");int ret=0;String result = "{"result":" + ret + "}";out.print(result);%>注意：返回json格式
如{"result":0}
需要设置 ：
代码如下:
response.setContentType("application/x-json;charset=UTF-8");jsp+jquery+ajax+json
Person、Address 2个类描述一个人，用ajax把数据取回显示在页面上，在DemoServlet里组装数据，项目用到的文件
json-lib-2.1-jkd15.jar
commons-lang-2.1.jar
commons-logging.jar
commons-collections-3.2.jar
commons-beanutils.jar
jquery.js
json.js
下面是详细代码：
Person:
public class Person implements java.io.Serializable{ private String name; private String sex; private Integer age; private Address address; public String getName() { return name; } public void setName(String name) { this.name = name; } public String getSex() { return sex; } public void setSex(String sex) { this.sex = sex; } public Integer getAge() { return age; } public void setAge(Integer age) { this.age = age; } public Address getAddress() { return address; } public void setAddress(Address address) { this.address = address; } }
Address:
public class Address implements java.io.Serializable{ private String province; private String city; private String country; public Address() { } public Address(String province, String city, String country){ this.province =province; this.city = city; this.country = country; } public String getProvince() { return province; } public void setProvince(String province) { this.province =province; } public String getCity() { return city; } public void setCity(String city) { this.city = city; } public String getCountry() { return country; } public void setCountry(String country) { this.country = country; } }
DemoServlet:
import java.io.IOException; import java.util.ArrayList; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONArray; import net.sf.json.JSONObject; import org.wncnke.json.pojo.Address; import org.wncnke.json.pojo.Person; public class DemoServlet extends HttpServlet{ @Override protected void doGet(HttpServletRequest request,HttpServletResponse response) throwsServletException, IOException { doPost(request, response); } @Override protected void doPost(HttpServletRequest request,HttpServletResponse response) throwsServletException, IOException { response.setContentType("text/xml;charset=utf-8"); response.setHeader("Cache-Control","no-cache"); try{ Personperson1 = new Person(); person1.setName("小王"); person1.setSex("女"); person1.setAge(23); person1.setAddress(newAddress("辽宁省","大连市","高新园区")); List<Person> list = new ArrayList<Person>(); list.add(person1); try{ //取集合 JSONArray jsonArray = JSONArray.fromObject(list); JSONObject jsonObject = new JSONObject(); jsonObject.put("person", jsonArray); response.getWriter().write(jsonObject.toString()); } catch(IOException e) { e.printStackTrace(); } }catch(Exception e){ e.printStackTrace(); } } }web.xml:
<?xml version="1.0"encoding="UTF-8"?> <web-app xmlns="http://caucho.com/ns/resin" xmlns:resin="http://caucho.com/ns/resin/core"> <display-name>json</display-name> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> <servlet> <servlet-name>DemoServlet</servlet-name> <servlet-class>org.wncnke.json.servlet.DemoServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>DemoServlet</servlet-name> <url-pattern>/demoServlet</url-pattern> </servlet-mapping> </web-app>index.jsp:
view plaincopy to clipboardprint?<%@ page language="java" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath =request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <mce:script language="javascript" src="script/jquery.js"mce_src="script/jquery.js"></mce:script> <mce:script language="javascript" src="script/json.js"mce_src="script/json.js"></mce:script> <mce:script language="javascript"><!-- function addPerson(){ $.getJSON("demoServlet",null,function call(data){ var list = data.person; $.each(list, function(i, p){ var row =$("#tr").clone(); row.find("#name").text(p.name); row.find("#age").text(p.age); row.find("#sex").text(p.sex); row.find("#address").text(p.address.province + p.address.city +p.address.country); row.appendTo("#tbody"); }); }); } // --></mce:script> </head> <body> <input type="button" value="JsonView"onClick="addPerson();"> <div id="dateMessage"> <table id="planTable"border="1"> <tr> <td>Name</td> <td>Sex</td> <td>Age</td> <td>Address</td> </tr> <tbody id="tbody"> <trid="tr"> <td id="name"></td> <td id="sex"></td> <td id="age"></td> <td id="address"></td> </tr> </tbody> </table> </div> </body> </html>关于JSONP的概念以及为什么要使用JSONP您可以参考JSONP教程，本文的重点在于演示下在JQUERY中的Ajax方法怎样通过JSONP进行远程调用。
首先介绍下$.ajax的参数：
服务器端我们采用MVC的ACTION来返回数据
public class HomeController : Controller { // // GET: /Home/ public ActionResult Index() { returnView(); } public ActionResult ReturnJson() { string callback = Request.QueryString["callback"]; string json = "{'name':'张三','age':'20'}"; string result = string.Format("{0}({1})", callback, json); returnContent(result); } } 客户端使用jsonp来传输数据
@{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } <script src="~/Scripts/jquery-1.7.1.min.js"type="text/javascript"> </script> <script type="text/javascript"> functionSendData() { $.ajax({ type: "get", async: false, url: "/home/ReturnJson", dataType: "jsonp", success: function(data){ alert(data.name); }, error: function(){ alert('fail'); } }); } </script> <input type="button" value="提交" onclick="SendData();"/> 点击提交按钮后，发现服务器端的Request.QueryString["callback"]返回一个随机函数名。这样就被设置成JSONP格式来传递数据了
可以在传递过程中自定义函数名，只要使用jsonpCallback参数就可以了。
<script type="text/javascript"> functionSendData() { $.ajax({ type: "get", async: false, url: "/home/ReturnJson", dataType: "jsonp", jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback) jsonpCallback: "receive",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据 success: function(data) { alert(data.name); }, error: function() { alert('fail'); } }); } functionreceive(data) { alert(data.age); } </script> Add1: 使用AJAX访问aspx页面和asmx使用方法是一样的,区别在于aspx页面中的方法必须为静态方法,而asmx不需要.
1.新建demo.aspx页面。
2.首先在该页面的后台文件demos.aspx.cs中添加引用。
using System.Web.Services;3.无参数的方法调用.
大家注意了，这个版本不能低于.net framework 2.0。2.0已下不支持的。后台代码：
[WebMethod] public static string SayHello() { //一定是要静态方法，并且声明为[WebMethod] 前端才可以访问return "Hello Ajax!"; JS代码：
$(function() { $("#btnOK").click(function() { $.ajax({ //要用post方式 type: "Post", //方法所在页面和方法名 url: "Demo.aspx/SayHello", //没有参数也一定要传一个空参数 data: "{}", contentType: "application/json; charset=utf-8", dataType: "json", success: function(data) { //返回的数据用data.d获取内容 alert(data.d); }, error: function(err) { alert(err); } }); //禁用按钮的提交 return false; }); }); 页面代码：
<form id="form1" runat="server"> <div> <%--<asp:Button ID="btnOK" runat="server" Text="验证用户" />--%> <%--因为是异步，所以只能使用html,上面的服务器控件是错误的 可以测试下--%> <input id="btnOK" type="button" value="button" /> </div></form>
运行效果如下：
3.有参数方法调用后台代码：
[WebMethod] public static string GetStr(string str, string str2) { return str + str2; }
JS代码：
$(function() { $("#btnOK").click(function() { $.ajax({ type: "Post", url: "demo.aspx/GetStr", //方法传参的写法一定要对，str为形参的名字,str2为第二个形参的名字 data: "{'str':'我是','str2':'XXX'}", contentType: "application/json; charset=utf-8", dataType: "json", success: function(data) { //返回的数据用data.d获取内容 alert(data.d); }, error: function(err) { alert(err); } }); //禁用按钮的提交 return false; }); }); 运行效果如下：
4.返回数组方法
后台代码：
[WebMethod] public static List<string> GetArray() { List<string> li = new List<string>(); for (int i = 0; i < 10; i++) li.Add(i + ""); return li; }
JS代码：
$(function() { $("#btnOK").click(function() { $.ajax({ type: "Post", url: "demo.aspx/GetArray", contentType: "application/json; charset=utf-8", dataType: "json", success: function(data) { //插入前先清空ul $("#list").html(""); //递归获取数据 $(data.d).each(function() { //插入结果到li里面 $("#list").append("<li>" + this + "</li>"); }); alert(data.d); }, error: function(err) { alert(err); } }); //禁用按钮的提交 return false; }); }); 页面代码：
<form id="form1" runat="server"><div> <asp:Button ID="btnOK" runat="server" Text="验证用户" /></div><ul id="list"></ul></form>运行结果图：
下面是Jquery中AJAX参数详细列表：
| 参数名 | 类型 | 描述 |
| url | String | (默认: 当前页地址) 发送请求的地址。 |
| type | String | (默认: "GET") 请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。 |
| timeout | Number | 设置请求超时时间（毫秒）。此设置将覆盖全局设置。 |
| async | Boolean | (默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。 |
| beforeSend | Function | 发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。 function (XMLHttpRequest) { this; // the options for this ajax request} |
| cache | Boolean | (默认: true) jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。 |
| complete | Function | 请求完成后回调函数 (请求成功或失败时均调用)。参数： XMLHttpRequest 对象，成功信息字符串。 function (XMLHttpRequest, textStatus) { this; // the options for this ajax request} |
| contentType | String | (默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。 |
| data | Object, String | 发 送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。 |
| dataType | String | 预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText，并作为回调函数参数传递，可用值: "xml": 返回 XML 文档，可用 jQuery 处理。 "html": 返回纯文本 HTML 信息；包含 script 元素。 "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。 "json": 返回 JSON 数据 。 "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。 |
| error | Function | (默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。这个方法有三个参数：XMLHttpRequest 对象，错误信息，（可能）捕获的错误对象。 function (XMLHttpRequest, textStatus, errorThrown) { // 通常情况下textStatus和errorThown只有其中一个有值 this; // the options for this ajax request} |
| global | Boolean | (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件 |
| ifModified | Boolean | (默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。 |
| processData | Boolean | (默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。 |
| success | Function | 请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态 function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc... this; // the options for this ajax request} |
代码：
$(document).ready(function() { jQuery("#clearCac").click(function() { jQuery.ajax({ url: "/Handle/Do.aspx", type: "post", data: { id: '0' }, dataType: "json", success: function(msg) { alert(msg); }, error: function(XMLHttpRequest, textStatus, errorThrown) { alert(XMLHttpRequest.status); alert(XMLHttpRequest.readyState); alert(textStatus); }, complete: function(XMLHttpRequest, textStatus) { this; // 调用本次AJAX请求时传递的options参数 } }); }); });一、error：function (XMLHttpRequest, textStatus, errorThrown) { }
(默 认: 自动判断 (xml 或 html)) 请求失败时调用时间。参数有以下三个：XMLHttpRequest 对象、错误信息、（可选）捕获的错误对象。如果发生了错误，错误信息（第二个参数）除了得到null之外，还可能是"timeout", "error", "notmodified" 和 "parsererror"。
textStatus:
"timeout", "error", "notmodified" 和 "parsererror"。
二、error事件返回的第一个参数XMLHttpRequest有一些有用的信息：
XMLHttpRequest.readyState:
状态码
0 － （未初始化）还没有调用send()方法
1 － （载入）已调用send()方法，正在发送请求
2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
3 － （交互）正在解析响应内容
4 － （完成）响应内容解析完成，可以在客户端调用了
三、data:"{}", data为空也一定要传"{}"；不然返回的是xml格式的。并提示parsererror.
四、parsererror的异常和Header 类型也有关系。及编码header('Content-type: text/html; charset=utf8');
五、XMLHttpRequest.status:
具体策略限制情况可看下表：
| URL | 说明 | 允许通信 |
|---|---|---|
| http://www.a.com/a.js http://www.a.com/b.js | 同一域名下 | 允许 |
| http://www.a.com/lab/a.js http://www.a.com/script/b.js | 同一域名下不同文件夹 | 允许 |
| http://www.a.com:8000/a.js http://www.a.com/b.js | 同一域名，不同端口 | 不允许 |
| http://www.a.com/a.js https://www.a.com/b.js | 同一域名，不同协议 | 不允许 |
| http://www.a.com/a.js http://127.0.0.100/b.js | 域名和域名对应ip | 不允许 |
| http://www.a.com/a.js http://script.a.com/b.js | 主域相同，子域不同 | 不允许 |
| http://www.a.com/a.js http://a.com/b.js | 同一域名，不同二级域名（同上） | 不允许 |
| http://www.a.com/a.js http://www.b.com/b.js | 不同域名 | 不允许 |
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，而JSONP（JSON with Padding）则是JSON 的一种“使用模式”，通过这种模式可以实现数据的跨域获取。
举个例子，假如需要从服务器（http://www.a.com/user?id=123）获取的数据如下：
那么，使用JSONP方式请求（http://www.a.com/user?id=123?callback=foo）的数据将会是如下：
- {"id": 123, "name" : 张三, "age": 17}
当然，如果服务端考虑得更加充分，返回的数据可能如下：
- foo({"id": 123, "name" : 张三, "age": 17});
- try{foo({"id": 123, "name" : 张三, "age": 17});}catch(e){}
这时候我们只要定义一个foo()函数，并动态地创建一个script标签，使其的src属性为http://www.a.com/user?id=123?callback=foo：
function executeJsonp(url){ var eleScript= document.createElement("script"); eleScript.type = "text/javascript"; eleScript.src = url; document.getElementsByTagName("head")[0].appendChild(eleScript);}function foo(data){ for(var p in data){ console.log(data[p]); }}var url = "http://www.a.com/user?id=123?callback=foo";executeJsonp(url)便可以使用foo函数来调用返回的数据了。
第二种方法是利用getJSON来实现，只要在地址中加上callback=?参数即可：
- $.ajax({
- dataType: 'jsonp',
- url: 'http://www.a.com/user?id=123',
- success: function(data){
- //处理data数据
- }
- });
- $.getJSON('http://www.a.com/user?id=123&callback=?', function(data){
- //处理data数据
- });
也可以简单地使用getScript方法：
- //此时也可以在函数外定义foo方法
- function foo(data){
- //处理data数据
- }
- $.getJSON('http://www.a.com/user?id=123&callback=foo');
JSONP在开放API中可以起到非常重要的作用，开放API是运用在开发者自己的应用上，而许多应用往往是在开发者的服务器上而不是在新浪微博的服务器上，因此跨域请求数据成为开发者们所需要解决的一大问题，广大开放平台应该实现对JSONP的支持，这一点新浪微博开放平台便做的非常好（虽然某些API里没有说明，但实际上是可以使用JSONP方式调用的）。
使用GET方式和POST方式都可以进行跨域调用
客户端代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApp.WebForm1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"><script src="jquery-1.7.1.min.js" type="text/javascript"></script><script type="text/javascript"> function aa() { $.ajax({ url: "http://localhost:12079/WebForm2.aspx", data: "p1=1&p2=2&callback=?", type: "post", processData: false, timeout: 15000, dataType: "jsonp", // not "json" we'll parse jsonp: "jsonpcallback", success: function(result) { alert(result.value1); } }); }</script> <title></title></head><body> <form id="form1" runat="server"> <div> </div> </form> <p> <input id="Button1" type="button" value="button" onclick="aa()" /></p></body></html>服务器端代码
public partial class WebForm2 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { string callback = Request["callback"]; string v1="1"; string v2="2"; string response = "{"value1":"" + v1 + "","value2":"" + v2 + ""}"; string call = callback + "(" + response + ")"; Response.Write(call); Response.End(); } }客户端页面和服务器端页面在两个项目中，以便进行跨域调用测试。
跨域实例代码（需要加载jquery，页面为utf-8编码）：
<!--拉勾招聘数据--> <script type="text/javascript"> function success_jsonpCallback(data){ var html = ''; var pos = ''; html += '<ul>'; jQuery.each(data, function(k, v) { if(k<10){ pos = '【' + v.city+ '】' + v.positionName + '('+ v.salary +') - '+v.companyName; if(pos.length > 20){ pos = pos.substring(0,19)+'...'; } html += '<li><a href="'+v.posiitonDetailUrl+'" target="_blank" title="【' + v.city+ '】' + v.positionName + '('+ v.salary +') - '+v.companyName+'">'+pos+'</a></li>'; } }); html += '</ul><div class="more-link"><a href="http://www.lagou.com/jobs/list_%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91" rel="external nofollow" target="_blank" target="_blank">更多</a></div>'; jQuery('#lagouData').html(html); } function getLagouData() { jQuery.ajax({ async:false, url: "http://www.lagou.com/join/listW3cplus?kd=%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91", type: "GET", dataType: "jsonp", jsonpCallback: 'success_jsonpCallback', contentType: "application/jsonp; charset=utf-8", success: function(data) { success_jsonpCallback(data); } }); } getLagouData(); </script> <div id="lagouData"></div>jsonp代码：
success_jsonpCallback([{"city":"广州","companyName":"POCO.CN","createTime":"15:02发布","posiitonDetailUrl":"http://www.lagou.com:80/jobs/16868.html","positionAdvantage":"身处凝聚力团队，老城区上班交通便利，双休","positionName":"商业前端开发工程师","salary":"4k-7k"},{"city":"北京","companyName":"美通云动（北京）科技有限公司","createTime":"14:47发布","posiitonDetailUrl":"http://www.lagou.com:80/jobs/16866.html","positionAdvantage":"Html5技术最棒的团队","positionName":"Web前端开发","salary":"4k-8k"},{"city":"杭州","companyName":"口袋购物","createTime":"14:42发布","posiitonDetailUrl":"http://www.lagou.com:80/jobs/13024.html","positionAdvantage":"广阔的发展平台、自我价值体现的地方","positionName":"web前端开发工程师","salary":"8k-12k"},{"city":"北京","companyName":"布丁移动","createTime":"14:02发布","posiitonDetailUrl":"http://www.lagou.com:80/jobs/1498.html","positionAdvantage":"三餐、周围美女如云","positionName":"Android开发工程师","salary":"10k-20k"},{"city":"北京","companyName":"布丁移动","createTime":"14:02发布","posiitonDetailUrl":"http://www.lagou.com:80/jobs/2539.html","positionAdvantage":"三餐，小桥流水人家，美女","positionName":"ios开发工程师","salary":"10k-20k"},{"city":"上海","companyName":"天天动听","createTime":"00:55发布","posiitonDetailUrl":"http://www.lagou.com:80/jobs/11494.html","positionAdvantage":"创业氛围 讲求小而美","positionName":"Android开发工程师","salary":"8k-16k"},{"city":"北京","companyName":"LBE安全大师","createTime":"11:39发布","posiitonDetailUrl":"http://www.lagou.com:80/jobs/5983.html","positionAdvantage":"五险一金 绩效奖金","positionName":"Android开发工程师","salary":"8k以上"},{"city":"北京","companyName":"点心移动","createTime":"11:24发布","posiitonDetailUrl":"http://www.lagou.com:80/jobs/16736.html","positionAdvantage":"技术导向的团队氛围，全方位的福利待遇","positionName":"Android","salary":"15k-25k"},{"city":"广州","companyName":"荔枝FM","createTime":"10:44发布","posiitonDetailUrl":"http://www.lagou.com:80/jobs/16634.html","positionAdvantage":"连坚持跑步、保持体重都有奖励哦！","positionName":"WP手机开发工程师","salary":"16k-25k"},{"city":"北京","companyName":"网银-京东子公司","createTime":"10:08发布","posiitonDetailUrl":"http://www.lagou.com:80/jobs/14162.html","positionAdvantage":"负责京东商城-互联网金融产品 JS开发","positionName":"Javascript 前端开发工程师","salary":"10k-20k"}])jQuery-JSONP是一个支持 JSONP 调用的 jQuery 插件，使用它是因为它支持出错时的 AJAX 回调，而 jQuery 的 $.ajax 不支持。
JSONP 调用示例代码：
var originImgSrc = 'cnbogs-logo.gif';$.jsonp({ url: '', data: { imgSrc: originImgSrc }, callbackParameter: "callback", success: function (newImgSrc, textStatus, xOptions) { console.log(xOptions.data.imgSrc); }, error: function (xOptions, textStatus) { }});第1个需要注意的地方是 callbackParameter，如果没有专门的 callback 函数，一定要写上 "callback"；
第2个需要注意的地方是在 success 回调函数中，直接通过变量名 originImgSrc 得到的是 undefined，需要通过 xOptions.data.imgSrc 获取。
简单总结：
1、JS是一门前端语言。
2、Ajax是一门技术，它提供了异步更新的机制，使用客户端与服务器间交换数据而非整个页面文档，实现页面的局部更新。
3、jQuery是一个框架，它对JS进行了封装，使其更方便使用。jQuery使得JS与Ajax的使用更方便
详细情况：
实际上, 其中只有一种是编程语言。
javascript 是一种编程语言，主要用于网页中，使网站具有交互性。当浏览器分析网页时，它将创建该网页的内存中表示形式。它是一个树结构，包含页面上的所有元素。因此，有一个根元素，其中包含头部和正文元素，其中包含其他元素，其中包含其他元素。所以它看起来基本上像一棵树。现在，使用 javascript，您可以使用此树操作页面中的元素。您可以通过元素的 id (getElementsById) 或它们的标记名称 (getElementsByTagName) 或简单地遍历树 (parentNode、firstChild、lastChild、nextSibling、previousSibling等) 来选取元素。一旦您有元素可以使用，您就可以通过更改它们在页面上的外观、内容或位置来修改它们。此接口也称为 DOM (文档对象模型)。因此，您可以使用 javascript 执行其他编程语言可以执行的所有操作，通过将其嵌入到 wepages 中，您还可以获得当前网页的内存对象，您可以通过该对象以交互方式对页面进行更改。
AJAX 是一种在页面内的浏览器和服务器之间进行通信的技术。聊天就是一个很好的例子。您写一条消息, 发送一条消息, 并强制其他消息, 而无需离开页面。您可以使用浏览器提供的 xmlhttp 对象在客户端管理与 javascript 的这种交互。
jquery 是一个库, 旨在简化客户端 web 开发的一般 (上面的另外两个)。它创建了一个抽象层, 以便您可以在 javascript 中重用诸如 css 和 html 之类的公共语言。它还包括可用于与服务器进行通信的功能 (AJAX)。它是用 Javascript 编写的，不会为你做所有的事情，只会让常见的任务变得更容易。它还隐藏了浏览器的一些误解和错误。
总结一下:
Javascript 是一种编程语言 (对象、数组、数字、字符串、计算)
AJAX 和 jQuery 使用 Javascript
jQuery 用于使用 AJAX 和页面操作 (样式、动画等) 简化常见任务
最后， 举个例子看看语法：
// javascript 中的页面操作var el = document.getElementById("box");el.style.backgroundColor = "#000";var new_el = document.createElement("div");el.innerHTML = "<p>some content</p>";el.appendChild(new_el);// 以及如何在 jQuery 中执行此操作$("#box").css({ "background-color": "#000" }).append("<div><p>some content</p></div>");1. javascript是一种在客户端执行的脚本语言。ajax是基于javascript的一种技术，它主要用途是提供异步刷新（只刷新页面的一部分，而不是整个页面都刷新）。一个是语言，一个是技术,两者有本质区别.
2. javascript是一种在浏览器端执行的脚本语言，Ajax是一种创建交互式网页应用的开发技术 ，它是利用了一系列相关的技术其中就包括javascript。
3. JavaScript可以做什么？
用JavaScript可以做很多事情，使网页更具交互性，给站点的用户提供更好,更令人兴奋的体验。JavaScript使你可以创建活跃的用户界面，当用户在页面间导航时向他们反馈。
使用JavaScript来确保用户以表单形式输入有效的信息，这可以节省你的业务时间和开支。
使用JavaScript，根据用户的操作可以创建定制的HTML页面。
JavaScript还可以处理表单，设置cookie，即时构建HTML页面以及创建基于Web的应用程序。
JavaScript不能做什么？
JavaScript是一种客户端语言。（实际上，也存有服务器端实现的JavaScript版本）。也就是说，设计它的目的是在用户的机器上执行任务，而不是在服务器上。因此，JavaScript有一些固有的限制，这些限制主要出于如下安全原因：
1.JavaScript不允许读写客户机器上的文件。这是有好处的，因为你肯定不希望网页能够读取自己硬盘上的文件，或者能够将病毒写入硬盘，或者能够操作你的计算机上的文件。唯一例外是，JavaScript可以写到浏览器的cookie文件，但是也有一些限制。
2.JavaScript不允许写服务器机器上的文件。尽管写服务器上的文件在许多方面是很方便的（比如存储页面点击数或用户填写表单的数据），但是JavaScript不允许这么做。相反，需要用服务器上的一个程序处理和存储这些数据。这个程序可以是Perl或者PHP等语言编写的CGI运行在服务器上的程序或者Java程序
3.JavaScript不能关闭不是它自己打开的窗口。这是为了避免一个站点关闭其他任何站点的窗口，从而独占浏览器。
4.JavaScript不能从来自另一个服务器的已经打开的网页中读取信息。换句话说，网页不能读取已经打开的其它窗口中的信息，因此无法探查访问这个站点冲浪者还在访问其它哪些站点。
Ajax是一种创建交互式web应用程序的方式。Ajax是ASynchronouS JavaScript and XML(异步JavaScript和xml)的缩写，这个词是由web开发人员JeSSe JameS Garrett在2005年年初首创的。严格地说，Ajax只是JavaScript的一小部分（尽管这一部分特别流行）。但是，随着频繁的使用，这个词不再指某种技术本身（比如Java或JavaScript）。
在大多数情况下，Ajax一般是指以下这些技术的组合:
应用程序的大多数处理在用户的浏览器中发生，而且对服务器的数据请求往往很短。所以可以使用Ajax建立功能丰富的应用程序，这些应用程序依赖基于web的数据，但是其性能远远超过老式的，因为老式方法要求服务器传回整个HTML页面来响应用户操作。
一些公司已经在Ajax方面投入大量资金，尤其是Google。Google已经建立了几个著名的Ajax应用程序，包括Gmail（基于web的电子邮件），Google calendar，Google docS和Google mapS。另外一个大型的Ajax支持者Yahoo！，它使用Ajax增强个性化的MY Yahoo门户，Yahoo首页，Yahoo Mail，等等。这两家公司都向公众开放了其web应用程序的接口，人们可以使用这些程序会获得地图并且在地图上加上有意思，有用或者好玩的信息，比如洛杉矶地区所有日本餐馆的位置或者电影射鹏的位置。
1、JavaScript
定义：
javaScript的简写形式就是JS，是由Netscape公司开发的一种脚本语言，一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能（其编写的程序可以被嵌入到HTML或XML页面中，并直接在浏览器中解释执行）。
组成部分：
核心（ECMAScript）、文档对象模型（Document Object Model，简称DOM）、浏览器对象模型（Browser Object Model，简称BOM)
描述：
Javascript就是适应动态网页制作的需要而诞生的一种新的编程语言，如今越来越广泛地使用于Internet网页制作上。
Javascript是由 Netscape公司开发的一种脚本语言（scripting language），或者称为描述语言。在HTML基础上，使用Javascript可以开发交互式Web网页。
Javascript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，使网页包含更多活跃的元素和更加精彩的内容。
Javascript短小精悍，又是在客户机上执行的，大大提高了网页的浏览速度和交互能力。同时它又是专门为制作Web网页而量身定做的一种简单的编程语言。
主流的javaScript框架有：YUI ,Dojo，Prototype，jQuery...
2、Ajax
定义：
AJAX即“Asynchronous JavaScript and XML”（异步JavaScript和XML)，AJAX并非缩写词，而是由Jesse James Gaiiett创造的名词，是指一种创建交互式网页应用的网页开发技术。
AJAX不是一个技术，它实际上是几种技术，每种技术都有其独特之处，合在一起就成了一个功能强大的新技术。
组成：
基于XHTML和CSS标准的表示；
使用Document Object Model进行动态显示和交互；
使用XML和XSLT做数据交互和操作；
使用XML HttpRequest与服务器进行异步通信；
使用JavaScript绑定一切。
描述：
Ajax是结合了Java技术、XML以及JavaScript等编程技术，可以让开发人员构建基于Java技术的Web应用，并打破了使用页面重载的管理。
Ajax技术使用非同步的HTTP请求，在Browser和Web Server之间传递数据，使Browser只更新部分网页内容而不重新载入整个网页.
Ajax是使用客户端脚本与Web服务器交换数据的Web应用开发方法。这样，Web页面不用打断交互流程进行重新加裁，就可以动态地更新。使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。
3、jQuery
定义：
jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
特点：
轻量级、链式语法、CSS1-3选择器、跨浏览器、简单、易扩展；
jQuery是一种独立于服务器端代码的框架，独立于ASP.NET或者JAVA；
jQuery是当前很流行的一个JavaScript框架，使用类似于CSS的选择器，可以方便的操作HTML元素，拥有很好的可扩展性，拥有不少插件。
描述：
对于程序员来说，简化javascript和ajax编程，能够使程序员从设计和书写繁杂的JS应用中解脱出来，将关注点转向功能需求而非实现细节上，从而提高项目的开发速度。
对于用户来说，改善了页面的视觉效果，增强了与页面的交互性，体验更绚丽的网页物资。
javaScript框架实际上是一系列工具和函数。
本文介绍当JSON的键名为数字的时候应该使用的调用方式，对于键名为数字或者非正常变量字符时（如有空格），必须使用obj[xx]方式获取值。
<?php//声明json数据$array = array('result'=>array("90"=>"90队列","status"=>"成功"));$json = json_encode($array);$array1 = array("90"=>"90队列","status"=>"成功");$json1 = json_encode($array1);$phpjson = json_decode($json1,true);//第二个参数是true，表示把json数据转换为数组//对于json键名是数字时，只能用数组方式处理$phpjson['90'];?><!DOCTYPE unspecified PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head></head><body><script type="text/javascript">/*** 测试json数据调用示例*/function test(){//调用方式一var data = '<?php echo $json?>';//php json数据,这里只能用单引号，因为php的json数据中有双引号了data = eval("("+data+")");//js 解析json数据,主要是因为json数据用单引号后变为字符串了alert(data['result'][90]);//对于数字需要用数组的方式访问alert(data['result'].status);//对于非数字可以使用.的方式访问//调用方式二var data1 = <?php echo $json1?>;//php json数据，这里没有用单引号，因为直接是json数据alert(data1[90]);//对于数字需要用数组的方式访问alert(data1.status);//对于非数字可以使用.的方式访问alert(data1['status']);//还可以使用数组方式调用//注：对于键名为数字或者非正常变量字符时（如有空格），必须使用obj[xx]方式获取值。}</script><input type="button" value="button" onclick="test();"/></body></html>js获取json对象键名及值
遇到{"1",:"a"},{"2","b"}这种json对象，键名不固定，然后就不知道怎么取了，监视器下面是个object，没有什么属性方法。方法如下：
d = {"1": "a", "2": "b"}for(i in d){ i 就是键，d[i]就是值}真是难者不会，会者不难啊。
<script>d = {"1": "a", "2": "b"}function GetJArray(selIndex,arr){ var index =0; for(i inarr) { if(index == selIndex){ //i就是键，arr[i]就是值 document.write(i + ',' + arr[i] +'<br/>'); } index +=1; }}GetJArray(1,d); </script>JSON和XML没什么太大区别，不过JSON有一个更大范围的应用，那就是，跨域的数据调用。由于安全性问题，AJAX不支持跨域调用，这样要调用不同域名下的数据，很麻烦。下面这个例子，足以展示php用json如何进跨域调用了。
index.html
<script type="text/javascript"> function getProfile(str) { var arr = str; document.getElementById('nick').innerHTML = arr.nick; } </script> <body> <div id="nick"></div></body> <script type="text/javascript" src="http://www.openphp.cn/demo/profile.php"></script><?php $arr = array( 'name' => 'tanteng', 'nick' => 'pony', 'contact' => array( 'email' => 'a@gmail.com', 'website' => 'http://aa.sinaapp.com', ) ); $json_string = json_encode($arr); echo "getProfile($json_string)"; ?>当index.html调用profile.php时，JSON字符串生成，并作为参数传入getProfile，然后将昵称插入到div中，这样一次跨域数据交互就完成了，是不是特别简单。
PHP json格式和js json格式 js跨域调用实现代码
先看一个js函数
function jsontest() { var json = [{'username':'crystal','userage':'20'},{'username':'candy','userage':'24'}]; alert(json[1].username); var json2 = [['crystal','20'],['candy','24']]; alert(json2[0][0]); } $arr = array ( array ( 'catid' => '4', 'catname' => '程程', 'meta_title' => '程程博客' ), array ( 'catid' => '6', 'catname' => 'climber', 'meta_title' => '攀登者', ) ); $jsonstr = json_encode($arr); echo $jsonstr; $arr = array ( array ( 'catid' => '4', 'catname' => '程程', 'meta_title' => '程程博客' ), array ( 'catid' => '6', 'catname' => 'climber', 'meta_title' => '攀登者', ) ); $jsonstr = json_encode($arr); 我们再建立一个 json.html 文件
<SCRIPT type=text/javascript src="php_json.php"></SCRIPT><SCRIPT language=javascript type=text/javascript> function loadjson(_json) { if(_json) { for(var i=0;i<_json.length;i++) { alert(_json[i].catname); } } } loadjson(jsonstr) </SCRIPT> 要点：以get的方式得到json格式数据，是$.get()的方便写法吧！
jQuery Ajax在web应用开发中很常用，它主要包括有ajax，get，post，load，getscript等等这几种常用无刷新操作方法，处理复杂的ajax请求时，jQuery使用jQuery.ajax()方法进行处理。
在jQuery中有一些简单的方法，它对jQuery.ajax()方法进行了封装，使得我们在处理一些简单的Ajax事件时，不需要使用jQuery.ajax()方法。
以下5个方法执行一般Ajax请求的简短形式，在处理复杂的Ajax请求时应该使用jQuery.ajax()。
载入远程HTML文件代码并插入至DOM中，默认使用GET方式，传递参数时自动转换为POST方式。
//无参数、无回调函数$("#showload").load("load.htm");//无回调函数$("#showload").load("load.htm", { "para": "para-value" });$("#showload").load("load.htm", { "para": "para-value" }, function() { //处理 })这里将显示加载的文件的内容Load
示例代码如下：
$.get("jqueryget.htm", { "id": this.id }, function(req) { //成功时的回调方法 $("#showget").html(req); });})使用$.get()方法，通过传递id来获取不同的logo。值得一提的是，此时是通过get方法获得请求，所以在获取参数值时要使用Request.QueryString，可以看看Request Request.QueryString的区别
这里将显示logo3.jQuery.post(url, [data], [callback])
使用POST方式来进行异步请求。同jQuery.get()相比，差别在于请求的方式，所以这里不做特别的说明了，使用方法同jQuery.get()相似。
通过 GET 方式请求载入并执行一个JavaScript文件。这个技术在前边文章中已经提到过，也是jQuery.ajax的一种简单的使用方法，可以看看ajax加载js，所以在这里也不做特别的说明了。
示例代码如下：
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function(req) { $.each(req.items, function(i, item) { if (i == vnum) { $("<img src="" + item.media.m + "" title="" + item.title + "" />").appendTo("#showjson"); } });});同样的，这也是jQuery.ajax()方法的一种简写方法，类似如下方法：
参数列表：
| 参数名 | 类型 | 描述 |
| url | String | (默认: 当前页地址) 发送请求的地址。 |
| type | String | (默认: "GET") 请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。 |
| timeout | Number | 设置请求超时时间（毫秒）。此设置将覆盖全局设置。 |
| async | Boolean | (默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。 |
| beforeSend | Function | 发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。 function (XMLHttpRequest) { this; // the options for this ajax request} |
| cache | Boolean | (默认: true) jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。 |
| complete | Function | 请求完成后回调函数 (请求成功或失败时均调用)。参数： XMLHttpRequest 对象，成功信息字符串。 function (XMLHttpRequest, textStatus) { this; // the options for this ajax request} |
| contentType | String | (默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。 |
| data | Object, String | 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。 |
| dataType | String | 预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText，并作为回调函数参数传递，可用值: "xml": 返回 XML 文档，可用 jQuery 处理。 "html": 返回纯文本 HTML 信息；包含 script 元素。 "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。 "json": 返回 JSON 数据 。 "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
|
| error | Function | (默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。这个方法有三个参数：XMLHttpRequest 对象，错误信息，（可能）捕获的错误对象。 function (XMLHttpRequest, textStatus, errorThrown) { // 通常情况下textStatus和errorThown只有其中一个有值 this; // the options for this ajax request} |
| global | Boolean | (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件 |
| ifModified | Boolean | (默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。 |
| processData | Boolean | (默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。 |
| success | Function | 请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态 function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc... this; // the options for this ajax request} |
这里有几个Ajax事件参数：beforeSend ，success ，complete ，error 。我们可以定义这些事件来很好的处理我们的每一次的Ajax请求。注意一下，这些Ajax事件里面的 this 都是指向Ajax请求的选项信息的(请参考说 get() 方法时的this的图片)。
代码如下：
$.ajax({ url: url, dataType: 'json', data: data, success: callback});可能你还没有使用过json数据，我的小站中已经好几次提到了json的使用，如果你还不熟悉json格式，可以看看jquery移动listbox的值、jQuery下json的使用实例
获得json数据
这里将随机显示一条json数据到目前为止我们总结了jQuery.ajax的五种简写方法，接下来让我们集中精神，看看jQuery.ajax()方法，在使用中，笔者也是经常使用的jQuery.ajax()，因为大多数情况，我们需要对ajax请求出错的情况进行捕捉并处理。
代码如下：
$.ajax({ url: "http://www.hzhuti.com", //请求的url地址 dataType: "json", //返回格式为json async: true, //请求是否异步，默认为异步，这也是ajax重要特性 data: { "id": "value" }, //参数值 type: "GET", //请求方式 beforeSend: function() { //请求前的处理 }, success: function(req) { //请求成功时处理 }, complete: function() { //请求完成的处理 }, error: function() { //请求出错处理 }});使用jQuery.ajax()
这里将显示数据。
$.ajax 实际应用例子：
//1.$.ajax带json数据的异步请求var aj = $.ajax( { url:'productManager_reverseUpdate',// 跳转到 action data:{ selRollBack : selRollBack, selOperatorsCode : selOperatorsCode, PROVINCECODE : PROVINCECODE, pass2 : pass2 }, type:'post', cache:false, dataType:'json', success:function(data) { if(data.msg =="true" ){ // view("修改成功！"); alert("修改成功！"); window.location.reload(); }else{ view(data.msg); } }, error : function() { // view("异常！"); alert("异常！"); } });//2.$.ajax序列化表格内容为字符串的异步请求function noTips(){ var formParam = $("#form1").serialize();//序列化表格内容为字符串 $.ajax({ type:'post', url:'Notice_noTipsNotice', data:formParam, cache:false, dataType:'json', success:function(data){ } }); } //3.$.ajax拼接url的异步请求var yz=$.ajax({ type:'post', url:'validatePwd2_checkPwd2?password2='+password2, data:{}, cache:false, dataType:'json', success:function(data){ if( data.msg =="false" ) //服务器返回false，就将validatePassword2的值改为pwd2Error，这是异步，需要考虑返回时间 { textPassword2.html("<font color='red'>业务密码不正确！</font>"); $("#validatePassword2").val("pwd2Error"); checkPassword2 = false; return; } }, error:function(){} });//4.$.ajax拼接data的异步请求$.ajax({ url:'<%=request.getContextPath()%>/kc/kc_checkMerNameUnique.action', type:'post', data:'merName='+values, async : false, //默认为true 异步 error:function(){ alert('error'); }, success:function(data){ $("#"+divs).html(data); }});<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ASP.NETA_JAX.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/jscript"> function CallServer() { //JSON发送对象 ServerSum("{name:'linyijia',age:'21'}"); } function GetRegister(rg, contex) { document.getElementById("TxtRegister").value=rg; } </script> </head> <body> <form id="form1" runat="server"> <div> <br /> 用户名:<input id="TxtNum1" type="text" /> <br /> 服务器:<input id="TxtRegister" type="text" /><br /> <button id="SumBtn" type="button" onclick="CallServer()">登录</button> </div> </form> </body> </html> using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.Script.Serialization; public partial class _Default : System.Web.UI.Page ,ICallbackEventHandler { Users u = null; protected void Page_Load(object sender, EventArgs e) { //回调GetRegister方法 string CallBackFun = Page.ClientScript.GetCallbackEventReference(this,"arg","GetRegister","context"); //创建ServerSum方法,在客户端调用的时候就,会回调GetRegister方法,把参数传给RaiseCallbackEvent(string eventArgument ),最后通过 //GetCallbackResult()方法把返回值传给客户端 string RegisterFun = string.Format("function ServerSum(arg,context){{{0};}}",CallBackFun); Page.ClientScript.RegisterClientScriptBlock(this.GetType(),"ServerSum",RegisterFun,true); } string mssage = string.Empty; #region ICallbackEventHandler 成员 public string GetCallbackResult() { return "服务器:你好,你的用户名为:" + u.Name + "你的年龄为" + u.Age; } public void RaiseCallbackEvent(string eventArgument) { JavaScriptSerializer js = new JavaScriptSerializer(); u =js.Deserialize<Users>(eventArgument); } #endregion } using System; using System.Collections.Generic; using System.Linq; using System.Web; /// <summary> ///User 的摘要说明 /// </summary> public class Users { string name; public string Name { get { return name; } set { name = value; } } string age; public string Age { get { return age; } set { age = value; } } } 使用JSON向服务器发送一个对象,服务器通过实现 ICallbackEventHandler接口后,重写GetCallbackResult和RaiseCallbackEvent方法,在回调的时候,在RaiseCallbackEvent方法中反序列化JSON,并在GetCallbackResult把结果返回给客户端.
1.建web应用程序aspnetAjax
2.建index.htm
3.建个js文件夹，把jquery.js放进去，
4.建ajax文件夹，里面放ashx
5.在js文件夹建index.js，一般我们都是一个页面对应一个js
6.在ajax文件夹，建IndexHandler.ashx，一般一个js页面对应一个一般用户控件，这样层次感很强，也很好维护。
html页面就简单了，我们要用ajax读后台做个下拉列表，所以页面就放个DIV就行了。其他的交给js.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head> <title>测试</title> <script src="js/jquery-1.2.3-intellisense.js" type="text/javascript"></script> <script src="js/index.js" type="text/javascript"></script></head><body> 企业性质<div id="vocaspec"> </div> 行业类型<div id="industr"> </div> </body></html>编写IndexHandler.ashx代码
namespace aspnetAjax.ajax{ /// <summary> /// $codebehindclassname$ 的摘要说明 /// </summary> public class IndexHandler : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "application/json"; //接收提交过来的meth参数 string meth = context.Request.Params["meth"].ToString(); //根据参数调用不同的方法 switch (meth) { case "load": loadjson(context); break; case "add": add(context); break; } } public bool IsReusable { get { return false; } } //页面加载方法，调用BLL，获得数据 private void loadjson(HttpContext context) { //实例BLL VocaSpecSortBLL vocaSpec = new VocaSpecSortBLL(); BLL.Owner ownerbll = new GYXMGL.BLL.Owner(); DataSet ds = vocaSpec.GetList(""); DataSet dsindustr = ownerbll.Getcharcte(); //实例一个StringBuilder 用来拼接一个json数据 StringBuilder sbvoca = new StringBuilder(); if (ds != null && ds.Tables[0].Rows.Count > 0) { sbvoca.Append("{"voce":["); int i = 1; int count = ds.Tables[0].Rows.Count; foreach (DataRow dr in ds.Tables[0].Rows) { if (i == count) { sbvoca.Append("{"code":"" + dr[0] + "","name":"" + dr[1] + ""}"); } else { sbvoca.Append("{"code":"" + dr[0] + "","name":"" + dr[1] + ""},"); } i++; } sbvoca.Append("]"); } if (dsindustr != null && dsindustr.Tables[0].Rows.Count > 0) { sbvoca.Append(","industr":["); int i = 1; int count = dsindustr.Tables[0].Rows.Count; foreach (DataRow dr in dsindustr.Tables[0].Rows) { if (i == count) { sbvoca.Append("{"code":"" + dr[0] + "","name":"" + dr[1] + ""}"); } else { sbvoca.Append("{"code":"" + dr[0] + "","name":"" + dr[1] + ""},"); } i++; } sbvoca.Append("]"); } sbvoca.Append("}"); context.Response.Write(sbvoca.ToString()); context.Response.End(); } }}我们把index.js改下
$(document).ready(function() { $.ajax({ type: "POST", url: "../ajax/NewOwnerHandler.ashx", //我们用text格式接收 dataType: "text", data: "meth=load", success: function(msg) { alert(msg); //显示后台数据 $("#vocaspec").html(msg); // $("#industr").html(industr); } });});看到如下数据，就是ashx中response给我们的json格式数据，现在我们要把这些数据
显示在下拉列表中。就要遍历json中的数组。
{"voce":[{"code":"1","name":"农林水利"},{"code":"10","name":"军工"},{"code":"11","name":"农林"},{"code":"12","name":"水利(电)"},{"code":"13","name":"水电站"},{"code":"14","name":"输变线"},{"code":"15","name":"煤矿"},{"code":"16","name":"气田"},{"code":"17","name":"公路"},{"code":"18","name":"铁路"},{"code":"19","name":"民航"},{"code":"2","name":"能源"},{"code":"20","name":"信息产业"},{"code":"21","name":"化工"},{"code":"22","name":"机械"},{"code":"23","name":"冶金"},{"code":"24","name":"有色金属"},{"code":"25","name":"建材"},{"code":"26","name":"医药"},{"code":"27","name":"轻工"},{"code":"28","name":"农牧产品深加工"},{"code":"3","name":"交通"},{"code":"4","name":"通讯"},{"code":"5","name":"特色产业"},{"code":"6","name":"城市基础设施"},{"code":"7","name":"商贸流通"},{"code":"8","name":"旅游"},{"code":"9","name":"文体卫"}],"industr":[{"code":"1","name":"国有"},{"code":"2","name":"私人"}]}修改index.js代码，遍历json数据把数据显示成下拉列表
$(document).ready(function() { $.ajax({ type: "POST", url: "../ajax/NewOwnerHandler.ashx", //json格式接收数据 dataType: "json", //指点后台调用什么方法 data: "meth=load", success: function(msg) { //实例2个字符串变量来拼接下拉列表 var industr = "<select name="industr"><option label="---请选择---"></option>"; var vocaspec = "<select name="vocaspec"><option label="---请选择---"></option>"; //使用jquery解析json中的数据 $.each(msg.voce, function(n, value) { vocaspec += ("<option value="" + value.code + "" label="" + value.name + "">"); vocaspec += ("</option>"); }); $.each(msg.industr, function(n, value) { industr += ("<option value="" + value.code + "" label="" + value.name + "">"); industr += ("</option>"); }); industr += ("</select>"); $("#vocaspec").html(vocaspec); $("#industr").html(industr); } });});这个实例涉及到的知识点
1、使用一般处理程序，接收request。并可以使用response数据
string meth = context.Request.Params["meth"].ToString();
因为一般处理程序
public class IndexHandler : IHttpHandler
他实现IHttpHandler接口
2、json数据格式
3、使用jquery ajax,并用jquery解析json数据。
一种为使用eval()函数。
使用Function对象来进行返回解析。
使用eval函数来解析，jquery的each方法来遍历
用JQuery解析JSON数据的方法，作为JQuery异步请求的传输对象，JQuery请求后返回的结果是json对象，这里考虑的都是服务器返回JSON形式的字符串的形式，对于利用JSONObject等插件封装的JSON对象，与此亦是大同小异，这里不再做说明。
var data="{root:[ {name:'1',value:'0'}, {name:'6101',value:'北京市'}, {name:'6102',value:'天津市'}, {name:'6103',value:'上海市'}, {name:'6104',value:'重庆市'},]}";这里以JQuery异步获取的数据类型——json对象和字符串为依据，分别介绍两种方式获取到的结果处理方式。
eval()
对于服务器返回的JSON字符串，如果jquery异步请求没做类型说明，或者以字符串方式接受，那么需要做一次对象化处理，方式不是太麻烦，就是将该字符串放于eval()中执行一次。这种方式也适合以普通javascipt方式获取json对象，以下举例说明：
// 转换为json对象var dataObj=eval("("+data+")");为什么要 eval这里要添加 ("("+data+")"); 呢？
原因在于：eval本身的问题。 由于json是以”{}”的方式来开始以及结束的，在JS中，它会被当成一个语句块来处理，所以必须强制性的将它转换成一种表达式。
加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式（expression）转化为对象，而不是作为语句（statement）来执行。举一个例子，例如对象字面量{}，如若不加外层的括号，那么eval会将大括号识别为JavaScript代码块的开始和结束标记，那么{}将会被认为是执行了一句空语句。所以下面两个执行结果是不同的：// return undefinedalert(eval("{}");// return object[Object]alert(eval("({})");对于这种写法，在JS中，可以到处看到。如: (function()) {}(); 做闭包操作时等。
//输出root的子对象数量alert(dataObj.root.length);$.each(dataObj.root,fucntion(idx,item){ if(idx==0){ return true; } //输出每个root子对象的名称和值 alert("name:"+item.name+",value:"+item.value);})对于一般的js生成json对象，只需要将$.each()方法替换为for语句即可，其他不变，服务器返回的JSON字符串。
对于服务器返回的JSON字符串，如果jquery异步请求将type（一般为这个配置属性）设为“json”，或者利 用$.getJSON()方法获得服务器返回，那么就不需要eval（）
方法了，因为这时候得到的结果已经是json对象了，只需直接调用该对象即可，这里以$.getJSON方法为例说明数据处理方法：
$.getJSON("http://www.phpzixue.cn/",{param:"gaoyusi"},function(data){ //此处返回的data已经是json对象 //以下其他操作同第一种情况 $.each(data.root,function(idx,item){ if(idx==0){ //同countinue，返回false同break return true; } alert("name:"+item.name+",value:"+item.value); });});这里特别需要注意的是方式1中的eval()方法是动态执行其中字符串（可能是js脚本）的，这样很容易会造成系统的安全问题。所以可以采用一些规避了eval()的第三方客户端脚本库，比如JSON in JavaScript就提供了一个不超过3k的脚本库。
解析方式就是使用Function对象来完成，它的典型应用就是在JQuery中的AJAX方法下的success等对于返回数据data的解析。
var json='{"name":"CJ","age":18}';data =(new Function("","return "+json))();此时的data就是一个会解析成一个json对象了。
大家知道Jquery中有serialize方法，可以将表单序列化为一个“&”连接的字符串，但却没有提供序列化为Json的方法。不过，我们可以写一个插件实现。
有人用替换的方法，先用serialize序列化后，将&替换成“：”、“‘”：
/*** 重置form表单* @param formId form的id*/function resetQuery(formId){var fid = "#" + formId;var str = $(fid).serialize();//str= cardSelectDate=3&startdate=2012-02-01&enddate=2012-02-04var ob= strToObj(str);alert(ob.startdate); //2012-02-01}function strToObj(str){str = str.replace(/&/g, "','" );str = str.replace(/=/g, "':'" );str = "({'" +str + "'})" ;obj = eval(str);return obj;}/** * 重置form表单 * @param formId form的id */ function resetQuery(formId){ var fid = "#" + formId; var str = $(fid).serialize(); //str= cardSelectDate=3&startdate=2012-02-01&enddate=2012-02-04 var ob= strToObj(str); alert(ob.startdate);//2012-02-01 } function strToObj(str){ str = str.replace(/&/g,"','"); str = str.replace(/=/g,"':'"); str = "({'"+str +"'})"; obj = eval(str); return obj; } 不过这样做有bug。
其他的方法是，先用serializeArray序列化为数组，再封装为Json对象。
< form id = "myForm" action = "#" >< input name = "name" />< input name = "age" />< input type = "submit" /></ form > <form id="myForm" action="#"> <input name="name"/> <input name="age"/> <input type="submit"/> </form> ( function ($){$.fn.serializeJson= function (){var serializeObj={};$( this .serializeArray()).each( function (){serializeObj[ this .name]= this .value;});return serializeObj;};})(jQuery); (function($){ $.fn.serializeJson=function(){ var serializeObj={}; $(this.serializeArray()).each(function(){ serializeObj[this.name]=this.value; }); return serializeObj; }; })(jQuery); $("#myForm").bind("submit",function(e){ e.preventDefault();console.log($( this ).serializeJson());}); e.preventDefault(); console.log($(this).serializeJson()); }); 测试结果：
输入a，b提交，得到序列化结果：
{age: "b",name: "a"}
上面的插件，不能适用于有多个值的输入控件，例如复选框、多选的select。下面，将插件做进一步的修改，让其支持多选。代码如下：
( function ($){$.fn.serializeJson= function (){var serializeObj={};var array= this .serializeArray();var str= this .serialize();$(array).each( function (){if (serializeObj[ this .name]){if ($.isArray(serializeObj[ this .name])){serializeObj[ this .name].push( this .value);} else {serializeObj[ this .name]=[serializeObj[ this .name], this .value];}} else {serializeObj[ this .name]= this .value;}});return serializeObj;};})(jQuery);(function($){ $.fn.serializeJson=function(){ var serializeObj={}; var array=this.serializeArray(); var str=this.serialize(); $(array).each(function(){ if(serializeObj[this.name]){ if($.isArray(serializeObj[this.name])){ serializeObj[this.name].push(this.value); }else{ serializeObj[this.name]=[serializeObj[this.name],this.value]; } }else{ serializeObj[this.name]=this.value; } }); return serializeObj; }; })(jQuery); 这里，将多选的值封装为一个数值来进行处理。如果大家使用的时候需要将多选的值封装为“,"连接的字符串或者其他形式，请自行修改相应代码。
< form id = "myForm" action = "#" >< input name = "name" />< input name = "age" />< select multiple = "multiple" name = "interest" size = "2" >< option value = "interest1" > interest1 </ option >< option value = "interest2" > interest2 </ option >< option value = "interest3" > interest3 </ option >< option value = "interest4" > interest4 </ option ></ select >< input type = "checkbox" name = "vehicle" value = "Bike" /> I have a bike< input type = "checkbox" name = "vehicle" value = "Car" /> I have a car< input type = "submit" /></ form ><form id="myForm" action="#"> <input name="name"/> <input name="age"/> <select multiple="multiple" name="interest" size="2"> <option value ="interest1">interest1</option> <option value ="interest2">interest2</option> <option value="interest3">interest3</option> <option value="interest4">interest4</option> </select> <input type="checkbox" name="vehicle" value="Bike" /> I have a bike <input type="checkbox" name="vehicle" value="Car" /> I have a car <input type="submit"/> </form> < form id = "myForm" action = "#" >< input name = "name" />< input name = "age" />< select multiple = "multiple" name = "interest" size = "2" >< option value = "interest1" > interest1 </ option >< option value = "interest2" > interest2 </ option >< option value = "interest3" > interest3 </ option >< option value = "interest4" > interest4 </ option ></ select >< input type = "checkbox" name = "vehicle" value = "Bike" /> I have a bike< input type = "checkbox" name = "vehicle" value = "Car" /> I have a car< input type = "submit" /></ form ><form id="myForm" action="#"> <input name="name"/> <input name="age"/> <select multiple="multiple" name="interest" size="2"> <option value ="interest1">interest1</option> <option value ="interest2">interest2</option> <option value="interest3">interest3</option> <option value="interest4">interest4</option> </select> <input type="checkbox" name="vehicle" value="Bike" /> I have a bike <input type="checkbox" name="vehicle" value="Car" /> I have a car <input type="submit"/> </form> 测试结果：
{age: "aa",interest: ["interest2", "interest4"],name: "dd",vehicle:["Bike","Car"]}jquery的 serialize()方法，可以对表单项进行序列化，这本来是很方便的一个功能；但是实际使用中有时会出现如下问题：
例如：
<input name="content" value="ddd 567"/>在执行 serialize()方法后，得到的却是 ddd+567这样的字符串；即jquery的序列化方法对空格进行了转义，转换成了 + 号。
由于serialize()方法对真正的“+”号转义的是 ％２Ｂ，所以可以对serialize()后的结果进行符号替换。
例如：
<input name="content" value="ddd + 567 + 987"/><script>var a= $('$frm1').serialize(); //序列化，默认会调用encodeURIComponent()进行编码alert(a); // content=ddd+++567+++987var b = a.replace(/+/g," "); // g表示对整个字符串中符合条件的都进行替换b = decodeURIComponent(b); //对serialize后的内容进行解码alert(b); // content=ddd + 567 + 987</script>$.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象注：在jQuery 3.0 及以后版本中，该方法已被删除，请使用原生方法 JSON.parse(str)
JSON.parse(jsonstr); //可以将json字符串转换成json对象 JSON.stringify(jsonobj); //可以将json对象转换成json对符串 eval('(' + jsonstr + ')'); //可以将json字符串转换成json对象,注意需要在json字符外包裹一对小括号可以在https://github.com/douglascrockford/JSON-js上获取到这个js，一般现在用json2.js。
在开发的过程中，如果对于少量参数的前后台传递，可以直接采用ajax的data函数，按json格式传递，后台Request即可，但有的时候，需要传递多个参数，这样后台
接受的时候Request多个很麻烦，此时要按照类的格式或者集合的形式进行传递。
例如：前台按类的格式传递JSON对象：
var jsonUserInfo = "{"TUserName":"" + userName + "","TInterest":"" + interest + "","TSex":"" + sex + "","TCity":"" + city + "","TDetail":"" + detail + ""}";如拼出的 jsonUserInfo 无转义符号，需要 var jsonArrayFinal = JSON.stringify(jsonArray); 进行转换后再传递。
$.ajax( { type: "post", url: "ReceiveHandler1.ashx", data: { userInfo: jsonUserInfo, flag: "123456", key: "654321" }, dataType: "text", success: function(data) { $("#divShow").html(data); } });例如：
[{"name":"a"},{"name","b"},{"name","c"}]，则无法传递，此时必须使用JSON.stringify将数组对象转换成字符串，再进行AJAX传递即可。
比如我有两个变量，我要将a转换成字符串，将b转换成JSON对象：
var a={"name":"tom","sex":"男","age":"24"}; var b='{"name":"Mike","sex":"女","age":"29"}';在Firefox，chrome，opera，safari，ie9，ie8等高级浏览器直接可以用JSON对象的stringify()和parse()方法。
JSON.stringify(obj)将JSON转为字符串。JSON.parse(string)将字符串转为JSON格式；
上面的转换可以这么写：
var a={"name":"tom","sex":"男","age":"24"}; var b='{"name":"Mike","sex":"女","age":"29"}'; var aToStr=JSON.stringify(a); var bToObj=JSON.parse(b); alert(typeof(aToStr)); //string alert(typeof(bToObj));//objectJSON.stringify()ie8(兼容模式)，ie7和ie6没有JSON对象，不过http://www.json.org/js.html提供了一个json.js，这样ie8(兼容模式)，ie7和ie6就可以支持JSON对象以及其stringify()和parse()方法；你可以在https://github.com/douglascrockford/JSON-js上获取到这个js，一般现在用json2.js。
ie8(兼容模式)，ie7和ie6可以使用eval()将字符串转为JSON对象，
var c='{"name":"Mike","sex":"女","age":"29"}'; var cToObj=eval("("+c+")"); alert(typeof(cToObj));jQuery中也有将字符串转为JSON格式的方法jQuery.parseJSON( json )，接受一个标准格式的 JSON 字符串，并返回解析后的 JavaScript （JSON）对象。当然如果有兴趣可以自己封装一个jQuery扩展，jQuery.stringifyJSON(obj)将JSON转为字符串。
使用js函数eval();
testJson=eval(testJson);是错误的转换方式。
正确的转换方式需要加(): testJson = eval("(" + testJson + ")");
eval()的速度非常快，但是他可以编译以及执行任何javaScript程序，所以会存在安全问题。在使用eval()。来源必须是值得信赖的。需要使用更安全的json解析器。在服务器不严格的编码在json或者如果不严格验证的输入，就有可能提供无效的json或者载有危险的脚本，在eval()中执行脚本，释放恶意代码。
js代码：
代码如下:
function ConvertToJsonForJs() { //var testJson = "{ name: '小强', age: 16 }";(支持) //var testJson = "{ 'name': '小强', 'age': 16 }";(支持) var testJson = '{ "name": "小强", "age": 16 }'; //testJson=eval(testJson);//错误的转换方式 testJson = eval("(" + testJson + ")"); alert(testJson.name); }第二种方式使用jquery.parseJSON()方法对json的格式要求比较高，必须符合json格式
jquery.parseJSON() js:代码 代码如下: function ConvertToJsonForJq() { var testJson = '{ "name": "小强", "age": 16 }'; //不知道 //'{ name: "小强", age: 16 }' (name 没有使用双引号包裹) //"{ 'name': "小强", 'age': 16 }"(name使用单引号) testJson = $.parseJSON(testJson); alert(testJson.name); }很多时候我们需要组装字符串为json对象，首先要组合字符串，然后转换为json对象
例子：
var convertStringToJSON = function(){ var str="{'ID':12,'Name':'Tom','Age':21}"; var stu = eval('('+str+')'); alert(stu.Name);}上面代码执行后会弹出“Tom”，说明已经成功转换为json对象了。
创建XMLHTTPRequest：
<script language="javascript" type="text/javascript">var request;function createRequest() { try { request = new XMLHttpRequest(); } catch (trymicrosoft) { try { request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (othermicrosoft) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (failed) { request = false; } } } if (!request) alert("Error initializing XMLHttpRequest!");}function getCustomerInfo() { createRequest(); // Do something with the request variable}</script>1. JavaScript代码如下：
// Changes XML to JSONfunction xmlToJson(xml) { // Create the return object var obj = {}; if (xml.nodeType == 1) { // element // do attributes if (xml.attributes.length > 0) { obj["@attributes"] = {}; for (var j = 0; j < xml.attributes.length; j++) { var attribute = xml.attributes.item(j); obj["@attributes"][attribute.nodeName] = attribute.nodeValue; } } } else if (xml.nodeType == 3) { // text obj = xml.nodeValue; } // do children if (xml.hasChildNodes()) { for(var i = 0; i < xml.childNodes.length; i++) { var item = xml.childNodes.item(i); var nodeName = item.nodeName; if (typeof(obj[nodeName]) == "undefined") { obj[nodeName] = xmlToJson(item); } else { if (typeof(obj[nodeName].length) == "undefined") { var old = obj[nodeName]; obj[nodeName] = []; obj[nodeName].push(old); } obj[nodeName].push(xmlToJson(item)); } } } return obj;};<ALEXA VER="0.9" URL="davidwalsh.name/" HOME="0" AID="="> <SD TITLE="A" FLAGS="" HOST="davidwalsh.name"> <TITLE TEXT="David Walsh Blog :: PHP, MySQL, CSS, Javascript, MooTools, and Everything Else"/> <LINKSIN NUM="1102"/> <SPEED TEXT="1421" PCT="51"/> </SD> <SD> <POPULARITY URL="davidwalsh.name/" TEXT="7131"/> <REACH RANK="5952"/> <RANK DELTA="-1648"/> </SD></ALEXA>{ "@attributes": { AID: "=", HOME: 0, URL: "davidwalsh.name/", VER: "0.9", }, SD = [ { "@attributes": { FLAGS: "", HOST: "davidwalsh.name", TITLE: A }, LINKSIN: { "@attributes": { NUM: 1102 } }, SPEED: { "@attributes": { PCT: 51, TEXT: 1421 } }, TITLE: { "@attributes": { TEXT: "David Walsh Blog :: PHP, MySQL, CSS, Javascript, MooTools, and Everything Else", } }, }, { POPULARITY: { "@attributes": { TEXT: 7131, URL: "davidwalsh.name/" } }, RANK: { "@attributes": { DELTA: "-1648" } }, REACH: { "@attributes": { RANK = 5952 } } } ]}json转换成XML后，对应的JS文件要怎么改？
$(function() { $('#logout').click(function(){ top.location.href = "../login.html"; }); $("#tree").tree( { url : "../data/menu.json", onClick : doMenuClick }); function doMenuClick(node) { if ($("#tree").tree("isLeaf", node.target) == false) return; var id = node.id; var text = node.text; if (!id) return; var elTab = parent.$('#mainTabs'); if (elTab.tabs('exists', text)) { elTab.tabs('select', text); } else { var url = '../TheReport/' + id + '.html'; var content = '<div style="width:100%;height:100%;overflow:hidden;">'+ '<iframe src="' + url + '" scrolling="auto" style="width:100%;height:100%;border:0;" ></iframe></div>'; elTab.tabs('add', { title : text, content : content, closable : true }); } }});答案：
<?xml version="1.0" encoding="GB2312"?><myfile> <title>tttt</title> <author>ajie</author> <email>ajie@aolhoo.com</email> <date>20010115</date></myfile>HTML/JS：
<html><head><script language="JavaScript" for="window" event="onload">var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");xmlDoc.async="false";xmlDoc.load("myfile.xml");root = xmlDoc.documentElement;//nodes = xmlDoc.documentElement.childNodes;document.all("title").innerText = root.childNodes.item(0).text;document.all("author").innerText = root.childNodes.item(1).text;document.all("email").innerText = root.childNodes.item(2).text;document.all("date").innerText = root.childNodes.item(3).text;</script><title>在HTML中调用XML数据</title></head><body bgcolor="#FFFFFF"><b>标题: </b><span id="title"> </span><b>作者: </b><span id="author"></span><b>信箱: </b><span id="email"></span><b>日期：</b><span id="date"></span></body></html>如果要自己实现的话要，①先转换为js中的字符串，通过参数传递的方式赋值给java中的属性。②使用低第二步的方法进行转换。如果使用struts2的话这一切都显得那么易如反掌了，你要做的就是定义action中同名的属性。
JSON：JavaScript 对象表示法（JavaScript Object Notation），其实JSON就是一个JavaScript的对象(Object)而已。
var json = {aa:true,bb:true}; var json1 = {aa:'b',bb:{cc:true,dd:true}}; for(var item in json){ alert(item); //结果是 aa,bb, 类型是 string alert(typeof(item)); alert(eval("json."+item)); //结果是true，true类型是boolean eval(("json."+item+"=false;")); //改变json对象的值 } /** * json对象转字符串形式 */ function json2str(o) { var arr = []; var fmt = function(s) { if (typeof s == 'object' && s != null) return json2str(s); return /^(string|number)$/.test(typeof s) ? "'" + s + "'" : s; } for (var i in o) arr.push("'" + i + "':" + fmt(o[i])); return '{' + arr.join(',') + '}'; } function stringToJson(stringValue) { eval("var theJsonValue = "+stringValue); return theJsonValue; } function JsonArrayToStringCfz(jsonArray) var JsonArrayString = "["; for(var i=0;i<jsonArray.length;i++){ JsonArrayString=JsonArrayString+JsonToStringCfz(jsonArray[i])+","; } JsonArrayString = JsonArrayString.substring(0,JsonArrayString.length-1)+"]"; return JsonArrayString; } <script src="json2.js"></script> <script> var date = {myArr : ["a" , "b" , "c" , "d"] , count : 4}; var str = JSON.stringify(date); alert(str); </script> 在javascript中新建一个字符串(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 + ")"); 注意：eval() 函数可编译并执行任何 JavaScript 代码。这隐藏了一个潜在的安全问题。
使用 JSON 解析器将 JSON 转换为 JavaScript 对象是更安全的做法。JSON 解析器只能识别 JSON 文本，而不会编译脚本。
在浏览器中，这提供了原生的 JSON 支持，而且 JSON 解析器的速度更快。
较新的浏览器和最新的 ECMAScript (JavaScript) 标准中均包含了原生的对 JSON 的支持。
字符串转json对象：JSON.parse(jsonstr);
json对象转json字符串：JSON.stringify(jsonObj);
JQuery方法：
json字符串转json对象：jQuery.parseJSON(jsonStr);
<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> 那么如何遍历json数组呢？可以把它当成一个普通的javascript对象来处理。
<html><body><h2>如何遍历JSON数组</h3><div id="result"></div><script type="text/javascript">var txt = '[{"firstName":"Bill","lastName":"Gates" },' +'{"firstName":"George","lastName":"Bush" },' +'{"firstName":"Thomas","lastName":"Carter" }]';var arrayJson = JSON.parse(txt);var html='';for(var p in arrayJson){html+=' firstName:'+arrayJson[p].firstName;html+=' lastName'+arrayJson[p].lastName;html+='<br />';}document.getElementById("result").innerHTML= html;</script></body></html> ie8(兼容模式)，ie7和ie6没有JSON对象，不过http://www.json.org/js.html提供了一个json.js，这样ie8(兼容模式)，ie7和ie6就可以支持JSON对象以及其stringify()和parse()方法；你可以在 https://github.com/douglascrockford/JSON-js上获取到这个js，一般现在用json2.js。
ie8(兼容模式)，ie7和ie6可以使用eval()将字符串转为JSON对象，
var c='{"name":"Mike","sex":"女","age":"29"}';var cToObj=eval("("+c+")");alert(typeof(cToObj)); 本文介绍了JavaScript中如何将Object转换为String函数，详细的代码如下文所示：
代码如下:
function obj2str(o){ var r = []; if(typeof o =="string") return """+o.replace(/(['"])/g,"$1").replace(/(
)/g,"
").replace(/(
)/g,"
").replace(/( )/g," ")+"""; if(typeof o == "object"){ if(!o.sort){ for(var i in o) r.push(i+":"+obj2str(o[i])); if(!!document.all && !/^
?functions*toString()s*{
?s*[native code]
?s*}
?s*$/.test(o.toString)){ r.push("toString:"+o.toString.toString()); } r="{"+r.join()+"}" }else{ for(var i =0;i<o.length;i++) r.push(obj2str(o[i])) r="["+r.join()+"]" } return r; } return o.toString(); } 利用原生JSON对象，将对象转为字符串
项目中碰到了用jQuery从后台获取的json格式的日期的字符串，需要将此字符串转换成JavaScript的日期对象。
//转换json格式的日期（如：{ServerDatetime:"/Date(1278930470649)/"}）为Javascript的日期对象 function ConvertJSONDateToJSDateObject(JSONDateString) { var date = new Date(parseInt(JSONDateString.replace("/Date(", "").replace(")/", ""), 10)); return date; } 开发中有时候需要从服务器端返回json格式的数据，在后台代码中如果有DateTime类型的数据使用系统自带的工具类序列化后将得到一个很长的数字表示日期数据，如下所示：
//设置服务器响应的结果为纯文本格式 context.Response.ContentType = "text/plain"; //学生对象集合 List<Student> students = new List<Student> { new Student(){Name ="Tom", Birthday =Convert.ToDateTime("2014-01-31 12:12:12")}, new Student(){Name ="Rose", Birthday =Convert.ToDateTime("2014-01-10 11:12:12")}, new Student(){Name ="Mark", Birthday =Convert.ToDateTime("2014-01-09 10:12:12")} }; //javascript序列化器 JavaScriptSerializer jss=new JavaScriptSerializer(); //序列化学生集合对象得到json字符 string studentsJson=jss.Serialize(students); //将字符串响应到客户端 context.Response.Write(studentsJson); context.Response.End();运行结果是：
其中Tom所对应生日“2014-01-31”变成了1391141532000，这其实是1970 年 1 月 1 日至今的毫秒数；1391141532000/1000/60/60/24/365=44.11年，44+1970=2014年，按这种方法可以得出年月日时分秒和毫秒。这种格式是一种可行的表示形式但不是普通人可以看懂的友好格式，怎么让这个格式变化？
解决办法：
方法1：在服务器端将日期格式使用Select方法或LINQ表达式转换后发到客户端：
using System;using System.Collections.Generic;using System.Web;using System.Web.Script.Serialization;namespace JsonDate1{ using System.Linq; /// <summary> /// 学生类，测试用 /// </summary> public class Student { /// <summary> /// 姓名 /// </summary> public String Name { get; set; } /// <summary> /// 生日 /// </summary> public DateTime Birthday { get; set; } } /// <summary> /// 返回学生集合的json字符 /// </summary> public class GetJson : IHttpHandler { public void ProcessRequest(HttpContext context) { //设置服务器响应的结果为纯文本格式 context.Response.ContentType = "text/plain"; //学生对象集合 List<Student> students = new List<Student> { new Student(){Name ="Tom",Birthday =Convert.ToDateTime("2014-01-31 12:12:12")}, new Student(){Name ="Rose",Birthday =Convert.ToDateTime("2014-01-10 11:12:12")}, new Student(){Name ="Mark",Birthday =Convert.ToDateTime("2014-01-09 10:12:12")} }; //使用Select方法重新投影对象集合将Birthday属性转换成一个新的属性 //注意属性变化后要重新命名，并立即执行 var studentSet = students.Select ( p => new { p.Name, Birthday = p.Birthday.ToString("yyyy-mm-dd") } ).ToList(); //javascript序列化器 JavaScriptSerializer jss = new JavaScriptSerializer(); //序列化学生集合对象得到json字符 string studentsJson = jss.Serialize(studentSet); //将字符串响应到客户端 context.Response.Write(studentsJson); context.Response.End(); } public bool IsReusable { get { return false; } } }}Select方法重新投影对象集合将Birthday属性转换成一个新的属性，注意属性变化后要重新命名，属性名可以相同；这里可以使用select方法也可以使用LINQ查询表达式，也可以选择别的方式达到相同的目的；这种办法可以将集合中客户端不用的属性剔除，达到简单优化性能的目的。
运行结果：
这时候的日期格式就已经变成友好格式了，不过在javascript中这只是一个字符串。
方法二：
在javascript中将"Birthday":"/Date(1391141532000)/"中的字符串转换成javascript中的日期对象，可以将Birthday这个Key所对应的Value中的非数字字符以替换的方式删除，到到一个数字1391141532000，然后实例化一个Date对象，将1391141532000毫秒作为参数，得到一个javascript中的日期对象，代码如下：
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>json日期格式处理</title> <script src="Scripts/jquery-1.10.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $.getJSON("getJson.ashx", function (students) { $.each(students, function (index, obj) { $("<li/>").html(obj.Name).appendTo("#ulStudents"); //使用正则表达式将生日属性中的非数字（D）删除 //并把得到的毫秒数转换成数字类型 var birthdayMilliseconds = parseInt(obj.Birthday.replace(/D/igm, "")); //实例化一个新的日期格式，使用1970 年 1 月 1 日至今的毫秒数为参数 var birthday = new Date(birthdayMilliseconds); $("<li/>").html(birthday.toLocaleString()).appendTo("#ulStudents"); ; }); }); }); </script></head><body> <h2>json日期格式处理</h2> <ul id="ulStudents"> </ul></body></html>运行结果：
上的使用正则/D/igm达到替换所有非数字的目的，D表示非数字，igm是参数，分别表示忽视(ignore)大小写；多次、全局(global)替换；多行替换(multi-line);有一些时候还会出现+86的情况，只需要变换正则同样可以达到目的。另外如果项目中反复出现这种需要处理日期格式的问题，可以扩展一个javascript方法，代码如下：
$(function () { $.getJSON("getJson.ashx", function (students) { $.each(students, function (index, obj) { $("<li/>").html(obj.Name).appendTo("#ulStudents"); //使用正则表达式将生日属性中的非数字（D）删除 //并把得到的毫秒数转换成数字类型 var birthdayMilliseconds = parseInt(obj.Birthday.replace(/D/igm, "")); //实例化一个新的日期格式，使用1970 年 1 月 1 日至今的毫秒数为参数 var birthday = new Date(birthdayMilliseconds); $("<li/>").html(birthday.toLocaleString()).appendTo("#ulStudents"); $("<li/>").html(obj.Birthday.toDate()).appendTo("#ulStudents"); }); }); }); //在String对象中扩展一个toDate方法，可以根据要求完善 String.prototype.toDate = function () { var dateMilliseconds; if (isNaN(this)) { //使用正则表达式将日期属性中的非数字（D）删除 dateMilliseconds =this.replace(/D/igm, ""); } else { dateMilliseconds=this; } //实例化一个新的日期格式，使用1970 年 1 月 1 日至今的毫秒数为参数 return new Date(parseInt(dateMilliseconds)); };上面扩展的方法toDate不一定合理，也不够强大，可以根据需要修改。
方法三：
可以选择一些第三方的json工具类，其中不乏有一些已经对日期格式问题已处理好了的，常见的json序列化与反序列化工具库有：
1.fastJSON.
2.JSON_checker.
3.Jayrock.
4.Json.NET - LINQ to JSON.
5.LitJSON.
6.JSON for .NET.
7.JsonFx.
8.JSONSharp.
9.JsonExSerializer.
10.fluent-json
11.Manatee Json
这里以litjson为序列化与反序列化json的工具类作示例，代码如下：
using System;using System.Collections.Generic;using System.Web;using LitJson;namespace JsonDate2{ using System.Linq; /// <summary> /// 学生类，测试用 /// </summary> public class Student { /// <summary> /// 姓名 /// </summary> public String Name { get; set; } /// <summary> /// 生日 /// </summary> public DateTime Birthday { get; set; } } /// <summary> /// 返回学生集合的json字符 /// </summary> public class GetJson : IHttpHandler { public void ProcessRequest(HttpContext context) { //设置服务器响应的结果为纯文本格式 context.Response.ContentType = "text/plain"; //学生对象集合 List<Student> students = new List<Student> { new Student(){Name ="Tom",Birthday =Convert.ToDateTime("2014-01-31 12:12:12")}, new Student(){Name ="Rose",Birthday =Convert.ToDateTime("2014-01-10 11:12:12")}, new Student(){Name ="Mark",Birthday =Convert.ToDateTime("2014-01-09 10:12:12")} }; //序列化学生集合对象得到json字符 string studentsJson = JsonMapper.ToJson(students); //将字符串响应到客户端 context.Response.Write(studentsJson); context.Response.End(); } public bool IsReusable { get { return false; } } }}运行结果如下：
这时候的日期格式就基本正确了，只要在javascript中直接实例化日期就好了，
var date = new Date("01/31/2014 12:12:12");alert(date.toLocaleString());客户端的代码如下：
$(function () { $.getJSON("GetJson2.ashx", function (students) { $.each(students, function (index, obj) { $("<li/>").html(obj.Name).appendTo("#ulStudents"); var birthday = new Date(obj.Birthday); $("<li/>").html(birthday.toLocaleString()).appendTo("#ulStudents"); }); }); }); var date = new Date("01/31/2014 12:12:12"); alert(date.toLocaleString());XMLHttpRequest 函数获取数据，它是一种 API，允许客户端 JavaScript 通过 HTTP 连接到远程服务器。Ajax 也是许多 mashup 的驱动力，它可将来自多个地方的内容集成为单一 Web 应用程序。我们都知道，由于受到浏览器的限制，AJAX 是不允许跨域请求。不过可以通过使用 JSONP 来实现。JSONP 是一种通过脚本标记注入的方式，它是可以引用跨域 URL 的 js 脚本，不过需要提供一个回调函数（必须在您自己的页面上），因此，你可以自己处理结果。 本文介绍了 JSONP 的是怎么在 jQuery，MooTools 的，Dojo Toolkit 中实现的。
要了解 JSONP，不得不提一下 JSON，那什么是 JSON？
JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript, it can be used in the language with no muss or fuss.JSONP(JSON with Padding) 是一个非官方的协议，它允许在服务器端集成 Script tags 返回至客户端，通过 javascript callback 的形式实现跨域访问（这仅仅是 JSONP 简单的实现形式）。
由于同源策略的限制，XmlHttpRequest 只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过 script 标签实现跨域请求，然后在服务端输出 JSON 数据并执行回调函数，从而解决了跨域的数据请求。
jQuery.getJSON 方法：
Js 代码如下:
jQuery.getJSON("http://search.twitter.com/search.json?callback=?",{ q: "Arsenal" },function(tweets) { // Handle response here console.info("Twitter returned: ",tweets); });或者类似
Js 代码如下:
$.ajax({ type:"get", data:"random = "+Math.random(), url:url, dataType:"jsonp", jsonp:"callback", success:function(data){ $.each(data, function(key, val) { $("#myDiv").html($("#myDiv").html()+val.cvalue+"</br>"); }); } }); 回调方法的参数通过 getJSON 就可以获取到 json 对象
MooTools 需要 Request.JSONP Class，可以从这里下载 MooTools More。选择 Request.JSONP
这样从另一个域获取 JSON 就是小菜一碟了
Js 代码如下:
new Request.JSONP({ url: "http://search.twitter.com/search.json", data: { q: "Arsenal" },//提交的参数, 没有参数可以不写 callbackKey: 'jsoncallback',//自己定义回调函数的参数名称 onComplete: function(tweets) { // Log the result to console for inspection console.info("Twitter returned: ",tweets); } }).send(); 如果自己定义了回调函数的参数名称，跟 jquery 一样
服务器端你需要这样去取得：
Js 代码如下:
String callback = request.getParameter("jsoncallback");//取得回调方法名 response.setHeader("Cache-Control", "no-cache"); response.setContentType("text/json;charset = UTF-8"); PrintWriter out; try { out = response.getWriter(); out.print(callback+"("+message+")");//这里是关键.主要就是这里 out.flush(); out.close(); } catch (IOException e) { e.printStackTrace(); } 顺便说一句：个人比较喜欢 mootools 的语法结构，和框架设计思路，再次赞美!
JSONP 在 Dojo Toolkit 中需要用上 dojo.io.script (点击可以查看示例)
Js 代码如下：
// dojo.io.script is an external dependency, so it must be required dojo.require("dojo.io.script"); // When the resource is ready dojo.ready(function() { // Use the get method dojo.io.script.get({ // The URL to get JSON from Twitter url: "http://search.twitter.com/search.json", // The callback paramater callbackParamName: "callback", // Twitter requires "callback" // The content to send content: { q: "Arsenal" }, // The success callback load: function(tweetsJson) { // Twitter sent us information! // Log the result to console for inspection console.info("Twitter returned: ",tweetsJson); } }); }); JSONP 是一种非常有效的，可靠的，容易实现的远程数据获取方式。JSONP 的策略也使开发人员能够避免繁琐的服务器代理方式,很方便的获取数据。
JSONP (JSON with Padding) 是一个非官方的协议，它允许在服务器端集成 Script tags 返回至客户端，通过 javascript callback 的形式实现跨域访问（这仅仅是 JSONP 简单的实现形式）。
客户端代码：
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <script type="text/javascript"> function jsonpCallback(result) { //alert(result); for(var i in result) { alert(i+":"+result[i]); //循环输出a:1, b:2, etc. } } var JSONP=document.createElement("script"); JSONP.type = "text/javascript"; JSONP.src = "http://crossdomain.com/services.php?callback = jsonpCallback"; document.getElementsByTagName("head")[0].appendChild(JSONP); </script>服务端代码：
<?php //服务端返回 JSON 数据 $arr=array('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5); $result=json_encode($arr); //echo $_GET['callback'].'("Hello,World!")'; //echo $_GET['callback']."($result)"; //动态执行回调函数 $callback = $_GET['callback']; echo $callback."($result)";本文提供了两个实例，其中，示例一讲解JS根据key值获取URL中的参数值及把URL的参数转换成json对象；示例二讲解js获取url传递参数，具体介绍内容请看下文：
//把url的参数部分转化成json对象parseQueryString: function (url) { var reg_url = /^[^?]+?([wW]+)$/, reg_para = /([^&=]+)=([wW]*?)(&|$|#)/g, arr_url = reg_url.exec(url), ret = {}; if (arr_url && arr_url[1]) { var str_para = arr_url[1], result; while ((result = reg_para.exec(str_para)) != null) { ret[result[1]] = result[2]; } } return ret;}// 通过key获取url中的参数值getQueryString: function (name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null;}<Script language="javascript">function GetRequest() { var url = location.search; //获取url中"?"符后的字串 var theRequest = new Object(); if (url.indexOf("?") != -1) { var str = url.substr(1); strs = str.split("&"); for(var i = 0; i < strs.length; i ++) { theRequest[strs[i].split("=")[0]]=(strs[i].split("=")[1]); } } return theRequest;}</Script>然后我们通过调用此函数获取对应参数值：
<Script language="javascript"> var Request = new Object(); Request = GetRequest(); var 参数1,参数2,参数3,参数N; 参数1 = Request[''参数1'']; 参数2 = Request[''参数2'']; 参数3 = Request[''参数3'']; 参数N = Request[''参数N''];</Script>以此获取url串中所带的同名参数
js获取url传递参数方法二 正则分析法：
function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i"); var r = window.location.search.substr(1).match(reg); if (r!=null) return (r[2]); return null;}alert(GetQueryString("参数名1"));alert(GetQueryString("参数名2"));alert(GetQueryString("参数名3"));其他参数获取介绍：//设置或获取对象指定的文件名或路径。?alert(window.location.pathname);//设置或获取整个 URL 为字符串。?alert(window.location.href);//设置或获取与 URL 关联的端口号码。?alert(window.location.port);//设置或获取 URL 的协议部分。?alert(window.location.protocol);//设置或获取 href 属性中在井号“#”后面的分段。?alert(window.location.hash);//设置或获取 location 或 URL 的 hostname 和 port 号码。?alert(window.location.host);//设置或获取 href 属性中跟在问号后面的部分。?alert(window.location.search);大家知道可以使用url传递参数值，本站几乎随便一个链接都会有传值，既然要传递值，那么自然要获取，否则就没有任何意义了，下面就通过实例介绍一下如何使用javascript获取url传递的参数和参数值。
代码实例如下:
[javascript](function(){ var urlToObject=function(url){ var urlObject = {}; if (/?/.test(url)){ var urlString=url.substring(url.indexOf("?")+1); var urlArray=urlString.split("&"); for(var i=0,len=urlArray.length;i<len;i++){ var urlItem=urlArray[i]; var item = urlItem.split("="); urlObject[item[0]]=item[1]; } return urlObject; } }; var testUrl="http://softwhy.com/index.php?a=0&b=1&c=2"; var result=urlToObject(testUrl); for (var key in result){ console.log(key+"="+result[key]); } })();
一.实现原理:
1.判断url是否含有参数。在本代码中使用正则表达式if(/?/.test(url))判断url中是否含有?，如果含有问号，那么就说明此链接中含有参数，然后执行if语句中的代码。
2.获取url中的参数和参数值。在这里是使用split()函数分割字符串，依次实现此功能。
二.代码注释:
1.(function(){})()，声明一个匿名函数并执行。
2.var urlToObject=function(url){}，声明一个函数，此函数的参数是一个超链接。
3.var urlObject={}，声明一个对象直接量。
4.if(/?/.test(url)) ，判断链接中是否含有?，也就是是否含有参数。
5.var urlString=url.substring(url.indexOf("?")+1)，截取url问号只有的字符串。
6.var urlArray=urlString.split("&")，使用split()函数以&为标记分割字符串，并生成一个数组。这样每一个数组元素就是一个参数和参数值对。
7.for(var i=0,len=urlArray.length;i<len;i++)，使用for循环遍历urlArray数组。
8.var urlItem=urlArray，将指定索引的数组值赋值给变量urlItem。
9.var item=urlItem.split("=")，再使用=分割字符串并生成一个数组，因为urlArray数组每一个元素都是一个参数和参数值对，例如"a=0",这样再经过分割，生成新数组的第一项就是参数名称，第二个项就是参数值。
10.urlObject[item[0]]=item[1]，将参数名称作为对象的属性名称，参数值作为对象的属性值。
11.return urlObject，返回对象。
12.var testUrl=http://softwhy.com/index.php?a=0&b=1&c=2，用作测试的url。
13.var result=urlToObject(testUrl)，将参数和参数值转换成对象的属性和属性值，并返回此对象。
14.for(var key in result)，遍历此对象.
本文提供的代码用于从后台获取JSON数据，并将内容填充到下拉列表中，详细的操作过程如下所示：
需求：url:链接 par：ID sel：下拉列表选择器
//获取下拉列表function BuildSelectBox(url, par, sel) { $(sel).empty(); $.getJSON(url, { id: par }, function (json, textStatus) { for (var i = json.length - 1; i >= 0; i--) { $(sel).prepend('<option value="' + json[i].Id + '">' + json[i].Name + '</option>') }; $(sel).prepend('<option value="0">请选择</option>') });}以上代码很简单吧，此问题很easy的解决了。
Jquery使用Ajax获取后台返回的Json数据页面处理过程
具体实现过程请看下面代码示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="JS/jquery-1.8.0.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $.ajax({ url: 'jsondata.ashx', type: 'GET', dataType: 'json', timeout: 1000, cache: false, beforeSend: LoadFunction, //加载执行方法 error: erryFunction, //错误执行方法 success: succFunction //成功执行方法 }) function LoadFunction() { $("#list").html('加载中...'); } function erryFunction() { alert("error"); } function succFunction(tt) { $("#list").html(''); //eval将字符串转成对象数组 //var json = { "id": "10086", "uname": "zhangsan", "email": "zhangsan@qq.com" }; //json = eval(json); //alert("===json:id=" + json.id + ",uname=" + json.uname + ",email=" + json.email); var json = eval(tt); //数组 $.each(json, function (index, item) { //循环获取数据 var name = json[index].Name; var idnumber = json[index].IdNumber; var sex = json[index].Sex; $("#list").html($("#list").html() + "<br>" + name + " - " + idnumber + " - " + sex + "<br/>"); }); } }); </script> </head> <body> <ul id="list"> </ul> </body> </html><%@ WebHandler Language="C#" Class="jsondata" %> using System; using System.Web; using System.Web.Script.Serialization; using System.IO; using System.Text; using System.Collections.Generic; using Newtonsoft.Json; using System.Data; public class jsondata : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string JsonStr = JsonConvert.SerializeObject(CreateDT()); context.Response.Write(JsonStr); context.Response.End(); } #region 创建测试数据源 //创建DataTable protected DataTable CreateDT() { DataTable tblDatas = new DataTable("Datas"); //序号列 //tblDatas.Columns.Add("ID", Type.GetType("System.Int32")); //tblDatas.Columns[0].AutoIncrement = true; //tblDatas.Columns[0].AutoIncrementSeed = 1; //tblDatas.Columns[0].AutoIncrementStep = 1; //数据列 tblDatas.Columns.Add("IdNumber", Type.GetType("System.String")); tblDatas.Columns.Add("Name", Type.GetType("System.String")); tblDatas.Columns.Add("BirthDate", Type.GetType("System.String")); tblDatas.Columns.Add("Sex", Type.GetType("System.String")); tblDatas.Columns.Add("Wage", Type.GetType("System.Decimal")); tblDatas.Columns.Add("Bonus", Type.GetType("System.Decimal")); //统计列开始 tblDatas.Columns.Add("NeedPay", Type.GetType("System.String"), "Wage+Bonus"); //统计列结束 tblDatas.Columns.Add("Address", Type.GetType("System.String")); tblDatas.Columns.Add("PostCode", Type.GetType("System.String")); //设置身份证号码为主键 tblDatas.PrimaryKey = new DataColumn[] { tblDatas.Columns["IdNumber"] }; tblDatas.Rows.Add(new object[] { "43100000000000", "张三", "1982", "0", 3000, 1000, null, "深圳市", "518000" }); tblDatas.Rows.Add(new object[] { "43100000000001", "李四", "1983", "1", 3500, 1200, null, "深圳市", "518000" }); tblDatas.Rows.Add(new object[] { "43100000000002", "王五", "1984", "1", 4000, 1300, null, "深圳市", "518000" }); tblDatas.Rows.Add(new object[] { "43100000000003", "赵六", "1985", "0", 5000, 1400, null, "深圳市", "518000" }); tblDatas.Rows.Add(new object[] { "43100000000004", "牛七", "1986", "1", 6000, 1500, null, "深圳市", "518000" }); return tblDatas; } #endregion public bool IsReusable { get { return false; } } }<!-- <script type="text/javascript"> $(function () { $.ajax({ url: 'jsondata.ashx', type: 'GET', dataType: 'json', timeout: 1000, cache: false, beforeSend: LoadFunction, //加载执行方法 error: erryFunction, //错误执行方法 success: succFunction //成功执行方法 }) function LoadFunction() { $("#list").html('加载中...'); } function erryFunction() { alert("error"); } function succFunction(tt) { $("#list").html(''); //eval将字符串转成对象数组 //var json = { "id": "10086", "uname": "zhangsan", "email": "zhangsan@qq.com" }; //json = eval(json); //alert("===json:id=" + json.id + ",uname=" + json.uname + ",email=" + json.email); var json = eval(tt); //数组 $.each(json, function (index, item) { //循环获取数据 var Key = json[index].key; var Info = json[index].info; // var idnumber = json[index].IdNumber; // var sex = json[index].Sex; $("#list").html($("#list").html() + "<br>" + Key + "----" + Info.name); //+ " - " + idnumber + " - " + sex + "<br/>"); }); } }); </script> --><%@ WebHandler Language="C#" Class="jsondata" %> using System; using System.Web; using System.Web.Script.Serialization; using System.IO; using System.Text; using System.Collections; using System.Collections.Generic; using System.Data; public class jsondata : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; context.Response.Cache.SetNoStore(); string data = "[{"key":"1","info":{"name":"222","age":"333","sex":"444"}},{"key":"2","info":{"name":"999","age":"000","sex":"111"}}]"; context.Response.Write(new JavaScriptSerializer().Serialize(data)); } public bool IsReusable { get { return false; } } }<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test2013.aspx.cs" Inherits="Test2013" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="JS/jquery-1.8.0.min.js" type="text/javascript"></script> <script type="text/javascript"> function GetPara(o) { var sortid = $(o).val(); $.ajax({ url: 'GetPara.ashx?type=get&sortid=' + sortid, type: 'GET', dataType: 'json', timeout: 3000, cache: false, beforeSend: LoadFunction, //加载执行方法 error: erryFunction, //错误执行方法 success: succFunction //成功执行方法 }) function LoadFunction() { $("#list").html('加载中...'); } function erryFunction() { alert("error"); } function succFunction(tt) { $("#list").html(''); var json = eval(tt); //数组 $.each(json, function (index, item) { //循环获取数据 var Id = json[index].id; var Name = json[index].name; $("#list").html($("#list").html() + "<br>" + Name + "<input type='text' id='" + Id + "' /><br/>"); }); } }; function SavePara() { var parameter = {}; $("#list input:text").each(function () { var key = $(this).attr("id"); var value = $(this).val(); parameter[key] = value; }); $.ajax({ url: 'GetPara.ashx?type=save', type: 'POST', dataType: 'json', data: parameter, timeout: 3000, cache: false, beforeSend: LoadFunction, //加载执行方法 error: erryFunction, //错误执行方法 success: succFunction //成功执行方法 }) function LoadFunction() { } function erryFunction() { } function succFunction(tt) { } }; </script> </head> <body> <form id="form1" runat="server"> <div> <asp:DropDownList ID="ddl1" runat="server" onchange="GetPara(this)"> </asp:DropDownList> <ul id="list"></ul> <input type="button" value="保存数据" onclick="SavePara()" /> </div> </form> </body> </html> <%@ WebHandler Language="C#" Class="GetPara" %> using System; using System.Web; using System.Data; using System.Collections.Generic; using System.Web.Script.Serialization; public class GetPara : IHttpHandler { public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; string SortId = context.Request["sortid"]; string Type = context.Request["type"]; if (Type=="get") { if (!string.IsNullOrEmpty(SortId)) { DataTable dt = MSCL.SqlHelper.GetDataTable("select * from PR_PRODUCTPARAS where sortid='" + SortId + "' "); List<Paras> list = new List<Paras>(); for (int i = 0; i < dt.Rows.Count; i++) { Paras a = new Paras(); a.id = dt.Rows[i]["PARAID"].ToString(); a.name = dt.Rows[i]["PARANAME"].ToString(); list.Add(a); } context.Response.Write(new JavaScriptSerializer().Serialize(list)); } } else if (Type == "save") { //反序列化json System.IO.Stream stream = context.Request.InputStream; System.IO.StreamReader sr = new System.IO.StreamReader(stream, System.Text.Encoding.GetEncoding("UTF-8")); string sJson = sr.ReadToEnd(); if (sJson.Contains("&")) { string[] sArr = sJson.Split('&'); for (int i = 0; i < sArr.Length; i++) { string[] sArr1 = sArr[i].Split('='); object id = sArr1[0]; object value = sArr1[1]; } } } else { } } public bool IsReusable { get { return false; } } public struct Paras { public string id; public string name; } }本文实例讲述了js获取json元素数量的方法。分享给大家供大家参考。具体实现方法如下：
<script>var keleyijson={"plug1":"myslider","plug2":"zonemenu","plug3":"javascript"}function JSONLength(obj) {var size = 0, key;for (key in obj) {if (obj.hasOwnProperty(key)) size++;}return size;};document.write("json对象的元素个数是："+JSONLength(keleyijson));</script>效果如下：
json对象的元素个数是：3
本文总结了使用JavaScript获取指定元素大小、位置的几种方式。如果你用的是JQuery，则获取元素大小是非常简单的。但是我们还是有必要知道如何通过原生JavaScript来获取，需要的朋友可以参考下。
var obj = document.getElementById("test");alert(obj.height + "
" + obj.width);// 200px 200px typeof=string只是将style属性中的值显示出来var obj = document.getElementById("test");var style = null;if (window.getComputedStyle) { style = window.getComputedStyle(obj, null); // 非IE} else { style = obj.currentStyle; // IE}alert("width=" + style.width + "
height=" + style.height);注意：如果不设置元素的宽度和高度，那么在非IE浏览器下返回默认的宽度和高度。在IE下面返回auto字符串
var obj = document.styleSheets[0]; // [object StyleSheetList] 样式表的个数<link>var rule = null;// [object CSSRule]if (obj.cssRules){ rule = obj.cssRules[0]; // 非IE [object CSSRuleList]} else { rule = obj.rules[0]; // IE [object CSSRuleList]} alert(rule.style.width);cssRules(或rules)只能获取到内联和链接样式的宽和高，不能获取到行内和计算后的样式。
总结：以上的三种CSS获取元素大小的方法，只能获取元素的CSS大小，却无法获取元素本身实际的大小。比如加上了内边距、滚动条、边框之类的。
1. clientWidth和clientHeight
这组属性可以获取元素可视区的大小，可以得到元素内容及内边距所占据的空间大小。返回了元素大小，但没有单位，默认单位是px，如果你强行设置了单位，比如100em之类，它还是会返回px的大小。(CSS获取的话，是照着你设置的样式获取)。对于元素的实际大小，clientWidth和clientHeight理解方式如下：
a. 增加边框，无变化；
b. 增加外边距，无变化；
c. 增加滚动条，最终值等于原本大小减去滚动条的大小；
d. 增加内边距，最终值等于原本大小加上内边距的大小；
<div id="test"></div>#test{ background-color: green; width: 200px; height: 200px; border: solid 5px red; /* 对应a理解，结果：200,200 */ margin: 10px; /* 对应b理解，结果：200,200*/ padding: 20px; /* 对应c理解，结果：240,240*/ overflow: scroll; /* 对应d理解，结果：223,223，223=200（css大小）+40（两边内边距）-17（滚动条宽度）*/}window.onload = function(){ var obj = document.getElementById("test"); alert(obj.clientWidth + "," + obj.clientHeight);};注意：如果说没有设置任何CSS的宽和高度，那么非IE浏览器会算上滚动条和内边距的计算后的大小，而IE浏览器则返回0（IE8已修复）。
2. scrollWidth和scrollHeight
这组属性可以获取滚动内容(可见内容)的元素大小。返回了元素大小，默认单位是px。如果没有设置任何CSS的宽和高度，它会得到计算后的宽度和高度。对于元素的实际大小，scrollWidth和scrollHeight理解如下:
1. 增加边框，不同浏览器有不同解释（下面在IE8中运行正常，IE6运行不正常）：
a) Firefox和Opera浏览器会增加边框的大小，220x220
b) IE、Chrome和Safari浏览器会忽略边框大小，200x200
c) IE浏览器只显示它本来内容的高度，200x18（IE8已经修改该问题）
2. 增加内边距，最终值会等于原本大小加上内边距大小，220x220，IE为220x38
3. 增加滚动条，最终值会等于原本大小减去滚动条大小，184x184，IE为184x18
4. 增加外边据，无变化。
5. 增加内容溢出，Firefox、Chrome和IE获取实际内容高度，Opera比前三个浏览器获取的高度偏小，Safari比前三个浏览器获取的高度偏大。
3. offsetWidth和offsetHeight
这组属性可以返回元素实际大小，包含边框、内边距和滚动条。返回了元素大小，默认单位是px。如果没有设置任何CSS的宽和高度，他会得到计算后的宽度和高度。对于元素的实际大小，offsetWidth和offsetHeight理解如下：
1.增加边框，最终值会等于原本大小加上边框大小，为220；
2.增加内边距，最终值会等于原本大小加上内边距大小，为220；
3.增加外边据，无变化；
4.增加滚动条，无变化，不会减小；
对于元素大小的获取，一般是块级(block)元素并且以设置了CSS大小的元素较为方便。如果是内联元素(inline)或者没有设置大小的元素就尤为麻烦，所以，建议使用的时候注意。
<div id="test">test div element</div>#test{ background-color: green; width: 200px; height: 200px; border: solid 10px red; /*结果：220,220*/ margin: 10px; /*结果：220,220（无变化）*/ padding: 10px; /*结果：240,240*/ overflow：scroll; /*结果：240,240（无变化）*/}window.onload = function(){ var obj = document.getElementById("test"); alert(obj.offsetWidth + "," + obj.offsetHeight);};<div id="test">test div element</div>#test{ background-color: green; width: 200px; height: 200px; border-top: solid 10px red;s border-right: solid 20px #00ff00; border-bottom: solid 30px blue; border-left: solid 40px #808080; }window.onload = function(){ var obj = document.getElementById("test"); alert(obj.clientLeft + "," + obj.clientTop); // 40,10};2. offsetLeft和offsetTop
这组属性可以获取当前元素相对于父元素的位置。获取元素当前相对于父元素的位置，最好将它设置为定位position:absolute；否则不同的浏览器会有不同的解释。
a、将position设置为absolute，则所有浏览器返回一样的值。如：
<div id="test">test div element</div> #test { background-color: green; width: 200px; height: 200px; position: absolute; left: 30px; top: 20px; } window.onload = function(){ var obj = document.getElementById("test"); alert(obj.offsetLeft + "," + obj.offsetTop); // 30， 20 };b、加上边框和内边距不会影响它的位置，但加上外边据会累加。
3、box.offsetParent得到父元素
offsetParent中，如果本身父元素是<body>，非IE返回body对象，IE（IE6）返回html对象。如果两个元素嵌套，如果上父元素没有使用定位position:absolute，那么offsetParent将返回body对象或html对象。所以，在获取offsetLeft和offsetTop时候，CSS定位很重要。
如果说，在很多层次里，外层已经定位，我们怎么获取里层的元素距离body或html元素之间的距离呢？也就是获取任意一个元素距离页面上的位置。那么我们可以编写函数，通过不停的向上回溯获取累加来实现。
box.offsetTop + box.offsetParent.offsetTop; // 只有两层的情况下 function offsetLeft(element){ var left = element.offsetLeft; // 得到第一层距离 var parent = element.offsetParent; // 得到第一个父元素 while (parent !== null) { // 如果还有上一层父元素 left += parent.offsetLeft; // 把本层的距离累加 parent = parent.offsetParent; // 得到本层的父元素 } //然后继续循环 return left;}4.scrollTop和scrollLeft
这组属性可以获取滚动条被隐藏(滚动条上方区域)的区域大小，也可设置定位到该区域。如果要让滚动条滚动到最初始的位置，那么可以写一个函数：
function scrollStart (element) { if ( element.scrollTop != 0 ) { element.scrollTop = 0; }}5、getBoundingClientRect()
这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。
var box=document.getElementById('box'); // 获取元素alert(box.getBoundingClientRect().top); // 元素上边距离页面上边的距离alert(box.getBoundingClientRect().right); // 元素右边距离页面左边的距离alert(box.getBoundingClientRect().bottom); // 元素下边距离页面上边的距离alert(box.getBoundingClientRect().left); // 元素左边距离页面左边的距离注意：IE、Firefox3+、Opera9.5、Chrome、Safari支持，在IE中，默认坐标从(2,2)开始计算，导致最终距离比其他浏览器多出两个像素，我们需要做个兼容。
document.documentElement.clientTop; //非IE为0，IE为2document.documentElement.clientLeft; //非IE为0，IE为2functiongGetRect (element) { var rect = element.getBoundingClientRect(); var top = document.documentElement.clientTop; var left= document.documentElement.clientLeft; return{ top : rect.top - top, bottom : rect.bottom - top, left : rect.left - left, right : rect.right - left }}分别加上外边据、内边距、边框和滚动条，用于测试所有浏览器是否一致。
Twitter和Facebook要求身份验证来获取文章的数量，但事实证明你可以通过JSONP来获取这些信息，本文介绍如何使用一些简单的代码来获取并跳过验证这一步，请参考下面的步骤。
我将使用基本的JavaScript来告诉你如何做到这一点:
// 获取文章数量的封装对象 var socialGetter = (function() { /* JSONP: 获取脚本的工具函数 */ function injectScript(url) { var script = document.createElement('script'); script.async = true; script.src = url; document.body.appendChild(script); } return { getFacebookCount: function(url, callbackName) { injectScript('https://graph.facebook.com/?id=' + url + '&callback=' + callbackName); }, getTwitterCount: function(url, callbackName) { injectScript('http://urls.api.twitter.com/1/urls/count.json?url=' + url + '&callback=' + callbackName); } }; })(); // 回调方法 function twitterCallback(result) { result.count && console.log('The count is: ', result.count); } function facebookCallback(result) { result.shares && console.log('The count is: ', result.shares); } // 调用 socialGetter.getFacebookCount('http://davidwalsh.name/twitter-facebook-jsonp', 'facebookCallback'); socialGetter.getTwitterCount('http://davidwalsh.name/twitter-facebook-jsonp', 'twitterCallback'); Twitter和Facebook对于这些请求肯定有数量和频率上的限制，所以如果你的网站访问量很大，则JSONP很可能会被拦截或屏蔽。一种快速的解决方案是将文章数量信息存储在sessionStorage中，但这只是针对单个用户的方式。如果你运行的网站流量较大，你最好选择在服务器端抓取数据并缓存下来，并在一定的时间内自动刷新。
GET URL:
http://cdn.api.twitter.com/1/urls/count.JSon?url=http://stylehatch.co返回结果：
{ "count":528, "url":"http://stylehatch.co/"}GET URL:
http://graph.facebook.com/?id=http://stylehatch.co返回结果：
{ "id": "http://stylehatch.co", "shares": 61}GET URL:
http://api.pinterest.com/v1/urls/count.json?callback=&url=http://stylehatch.co返回结果：
({"count": 0, "url": "http://stylehatch.co"})GET URL:
http://www.linkedin.com/countserv/count/share?url=http://stylehatch.co&format=json返回结果：
{ "count":17, "fCnt":"17", "fCntPlusOne":"18", "url":"http://stylehatch.co"}POST URL:
https://clients6.google.com/rpc?key=YOUR_API_KEYPOST body:
[{ "method":"pos.plusones.get", "id":"p", "params":{ "nolog":true, "id":"http://stylehatch.co/", "source":"widget", "userId":"@viewer", "groupId":"@self" }, "jsonrpc":"2.0", "key":"p", "apiVersion":"v1"}]返回结果：
[{ "result": { "kind": "pos#plusones", "id": "http://stylehatch.co/", "isSetByViewer": false, "metadata": { "type": "URL", "globalCounts": { "count": 3097.0 } } } , "id": "p"}]GET URL:
http://www.stumbleupon.com/services/1.01/badge.getinfo?url=http://stylehatch.co返回结果：
{ "result":{ "url":"http://stylehatch.co/", "in_index":true, "publicid":"1iOLcK", "views":39, "title":"Style Hatch - Hand Crafted Digital Goods", "thumbnail":"http://cdn.stumble-upon.com/mthumb/941/72725941.jpg", "thumbnail_b":"http://cdn.stumble-upon.com/bthumb/941/72725941.jpg", "submit_link":"http://www.stumbleupon.com/submit/?url=http://stylehatch.co/", "badge_link":"http://www.stumbleupon.com/badge/?url=http://stylehatch.co/", "info_link":"http://www.stumbleupon.com/url/stylehatch.co/" }, "timestamp":1336520555, "success":true}这里有一个网站封装了一个小插件，专门用来在页面上显示社交网站分享工具条，可以直接拿过来用，比较方便！http://sharrre.com/
Facebook，Twitter，LinkedIn比较常用，给出调用API的例子：
// Facebook$.getJSON("http://graph.facebook.com/?id=http://stylehatch.co", function (d) { $("#fackbook_count").text("The Facebook Share count is: " + d.shares);});// Twitter$.getJSON("http://cdn.api.twitter.com/1/urls/count.json?url=http://stylehatch.co&callback=?", function (d) { $("#twitter_count").text("The Twitter Share count is: " + d.count);});// LinkedIn$.getJSON("http://www.linkedin.com/countserv/count/share?url=http://stylehatch.co&callback=?", function (d) { $("#linkedin_count").text("The LinkdeIn Share count is: " + d.count);});IE浏览器可能会无法正确获取到Facebook返回的数据，可以尝试在URL后面加上&callback=?，这样JQuery会将它当成JSONP来调用。
Facebook还有另一个API返回XML数据，调用方法是这样的：
$.get("http://api.facebook.com/method/links.getStats?urls=http://stylehatch.co", function (d) { $("#fackbook_count").text("The Facebook Share count is: " + $(d).find("total_count").text());});如果在IE浏览器下出现No Transport错误而无法获取到Facebook返回的数据，尝试在JavaScript代码的最前面加上$.support.cors = true;允许跨域访问数据。
我们将上面Facebook，Twitter，LinkedIn三个社交网站的API进行封装，以方便页面调用。
$.fn.getShareCount = function (url) { var self = this; var displayShareCount = function (val, obj) { if (!isNaN(val) && val > 0) { obj.show(); if (val > 999) { obj.attr("title", val); obj.text("500+"); } else obj.text(val); } }; return { facebook: function () { $.get("http://api.facebook.com/method/links.getStats?urls=" + url, function (d) { var c = $(d).find("total_count").text(); self.each(function () { displayShareCount(c, $(this)); }); }); }, twitter: function () { $.getJSON("http://cdn.api.twitter.com/1/urls/count.json?url=" + url + "&callback=?", function (d) { self.each(function () { displayShareCount(d.count, $(this)); }); }); }, linkedin: function () { $.getJSON("http://www.linkedin.com/countserv/count/share?url=" + url + "&callback=?", function (d) { self.each(function () { displayShareCount(d.count, $(this)); }); }); } };};然后在页面上这样调用：
$(function () { var shareUrl = window.location.href.toLowerCase(); $('#fackbook_count').getShareCount(shareUrl).facebook(); $('#twitter_count').getShareCount(shareUrl).twitter(); $('#linkedin_count').getShareCount(shareUrl).linkedin();});for(var i in datares){ if (datares.hasOwnProperty(i)) { sel.append("<option value='"+datares[i].deptid+"'>"+datares[i].deptname+"</option>"); } } ajax请求返回map，并遍历
$.ajax({ type: "POST",url: "<%=path%>/account/queryRolesAndGroups.action",data: "enterpriseId="+eid,success: function(msg){var obj=eval("(" + msg + ")");$.each(obj.groupList, function(i,item){ alert(item.groupName); })}}) })发送请求到后台，然后后台通过各种操作，得到相应数据
如果数据为 map，map中包含了多个list，
pw.print(net.sf.json.JSONObject.fromObject(returnMap.get("map")).toString());
后台这样转换，然后前台转换下：var obj=eval("(" + msg + ")");
就可以遍历里面的数据了（注意：net.sf.json.JSONArray.fromObject(returnMap.get("list")).toString()）这样是转换单个集合时适用，然后前台直接遍历即可，不需要强转
success: function(msg){alert（msg.length）;$.each(msg, function(i,item){ alert(item.name); })}JSONArray转包含多个list的map时适用。
还有后台pw.print和pw.println的使用也要注意，当单个数据0,1来给后台判断时，pw.println会带换行符，永远不等于0,1.
response.setContentType("text/plain;charset=UTF-8"); PrintWriter pw =response.getWriter();这两句对返回乱码处理也要特别注意先后顺序。
PrintWriter pw =response.getWriter();在前的话，转换也不起作用！
JSON数据接收的特定过程必须的数据包：commons-lang，commons-beanutils等等，否则JSONObject 报错，并且不能接收。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page import="java.io.BufferedReader" %> <%@ page import="net.sf.json.*" %> <% BufferedReader in=request.getReader(); StringBuffer jsonStr=new StringBuffer(); String str=""; while((str=in.readLine())!=null){ jsonStr.append(str); } JSONObject jsonObj= JSONObject.fromObject(jsonStr.toString()); String name= jsonObj.getString("userName"); String pwd= jsonObj.getString("passWord"); String msg=""; if(name.equals("Tom")){ msg="登录成功"; }else { msg="登录失败"; } response.getWriter().write(msg); %> JSP（Java Server Pages)是由Sun Microsystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。JSP技术有点类似ASP技术，它是在传统的网页HTML文件(*.htm,*.html)中插入Java程序段(Scriptlet)和JSP标记(tag)，从而形成JSP文件(*.jsp)。 用JSP开发的Web应用是跨平台的，既能在Linux下运行，也能在其他操作系统上运行。
（1）一次编写，到处运行。除了系统之外，代码不用做任何更改。
（2）系统的多平台支持。基本上可以在所有平台上的任意环境中开发，在任意环境中进行系统部署，在任意环境中扩展。相比ASP.NET的局限性JSP的优势是显而易见的。
（3）强大的可伸缩性。从只有一个小的Jar文件就可以运行Servlet/JSP，到由多台服务器进行集群和负载均衡，到多台Application进行事务处理，消息处理，一台服务器到无数台服务器，Java显示了一个巨大的生命力。
（4）多样化和功能强大的开发工具支持。这一点与ASP很像，Java已经有了许多非常优秀的开发工具，而且许多可以免费得到，并且其中许多已经可以顺利的运行于多种平台之下。
（5）支持服务器端组件。web应用需要强大的服务器端组件来支持，开发人员需要利用其他工具设计实现复杂功能的组件供web页面调用，以增强系统性能。JSP可以使用成熟的JAVA BEANS 组件来实现复杂商务功能。
（1） 与ASP一样，Java的一些优势正是它致命的问题所在。正是由于为了跨平台的功能，为了极度的伸缩能力，所以极大的增加了产品的复杂性。
（2） Java的运行速度是用class常驻内存来完成的，所以它在一些情况下所使用的内存比起用户数量来说确实是“最低性能价格比”了。从另一方面，它还需要硬盘空间来储存一系列的.java文件和.class文件，以及对应的版本文件。
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。JSONM文件中包含了关于“名称”和“值”的信息。有时候我们需要读取JSON格式的数据文件，在jQuery中可以使用Ajax或者$.getJSON()方法实现。
下面就使用jQuery读取music.txt文件中的JSON数据格式信息。
首先，music.txt中的内容如下：
[ {"optionKey":"1", "optionValue":"Canon in D"}, {"optionKey":"2", "optionValue":"Wind Song"}, {"optionKey":"3", "optionValue":"Wings"} ] 下来是HTML代码：
<div>点击按钮获取JSON数据</div> <input type="button" id="button" value="确定" /> <div id="result"></div> $(document).ready(function(){ $('#button').click(function(){ $.ajax({ type:"GET", url:"music.txt", dataType:"json", success:function(data){ var music="<ul>"; //i表示在data中的索引位置，n表示包含的信息的对象 $.each(data,function(i,n){ //获取对象中属性为optionsValue的值 music+="<li>"+n["optionValue"]+"</li>"; }); music+="</ul>"; $('#result').append(music); } }); return false; }); }); 当然，也可以使用$.getJSON()方法，代码简洁一点：
$(document).ready(function(){ $('#button').click(function(){ $.getJSON('music.txt',function(data){ var music="<ul>"; $.each(data,function(i,n){ music+="<li>"+n["optionValue"]+"</li>"; }); music+="</ul>"; $('#result').append(music); }); return false; }); }); jquery ajax处理json数据其实与其它ajax处理数据没什么很大的改动，我们只要简单处理一下ajax部份的dataType数据类型等于json即可解决了。
使用 AJAX 请求来获得 JSON 数据，并输出结果：
$("button").click(function(){ $.getJSON("demo_ajax_json.js",function(result){ $.each(result, function(i, field){ $("div").append(field + " "); }); });});该函数是简写的 Ajax 函数，等价于：
$.ajax({ url: url, data: data, success: callback, dataType: json});发送到服务器的数据可作为查询字符串附加到 URL 之后。如果 data 参数的值是对象（映射），那么在附加到 URL 之前将转换为字符串，并进行 URL 编码。
传递给 callback 的返回数据，可以是 JavaScript 对象，或以 JSON 结构定义的数组，并使用 $.parseJSON() 方法进行解析。
从 test.js 载入 JSON 数据并显示 JSON 数据中一个 name 字段数据：
$.getJSON("test.js", function(json){ alert("JSON Data: " + json.users[3].name);});首先给出要传的json数据：[{"demoData":"This Is The JSON Data"}]
1、使用普通的aspx页面来处理
本人觉得这种方式处理起来是最简单的了，看下面的代码吧。
$.ajax({ type: "post", url: "Default.aspx", dataType: "json", success: function (data) { $("input#showTime").val(data[0].demoData); }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(errorThrown); } });这里是后台传递数据的代码
Response.Clear(); Response.Write("[{"demoData":"This Is The JSON Data"}]"); Response.Flush(); Response.End();这种处理的方式将传递过来的数据直接解析为json数据，也就是说这里的前台js代码可能直接把这些数据解析成json对象数据，而并非字符串数据，如data[0].demoData，这里就直接使用了这个json对象数据
2、使用webservice(asmx)来处理
这种处理方式就不会将传递过来的数据当成是json对象数据，而是作为字符串来处理的，
$.ajax({ type: "post", url: "JqueryCSMethodForm.asmx/GetDemoData", dataType: "json",/*这句可用可不用，没有影响*/contentType: "application/json; charset=utf-8", success: function (data) { $("input#showTime").val(eval('(' + data.d + ')')[0].demoData);//这里有两种对数据的转换方式，两处理方式的效果一样//$("input#showTime").val(eval(data.d)[0].demoData);}, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(errorThrown); } });下面为asmx的方法代码
[WebMethod] public static string GetDemoData() { return "[{"demoData":"This Is The JSON Data"}]"; }这里的这种处理方式就把传递回来的json数据当成了字符串来处理的，所在就要对这个数据进行eval的处理，这样才能成为真正的json对象数据，
我们先来看一下html模板：
<table id="datas" border="1" cellspacing="0" style="border-collapse: collapse"> <tr> <th>订单ID</th> <th>客户ID</th> <th>雇员ID</th> <th>订购日期</th> <th>发货日期</th> <th>货主名称</th> <th>货主地址</th> <th>货主城市</th> <th>更多信息</th> </tr> <tr id="template"> <td id="OrderID"></td> <td id="CustomerID"></td> <td id="EmployeeID"></td> <td id="OrderDate"></td> <td id="ShippedDate"></td> <td id="ShippedName"></td> <td id="ShippedAddress"></td> <td id="ShippedCity"></td> <td id="more"></td> </tr></table>一定要注意的就是里面所有的id属性，这个是一个关键。再来看一下AJAX请求和绑定数据的代码
$.ajax({ type: "get",//使用get方法访问后台 dataType: "json",//返回json格式的数据 url: "BackHandler.ashx",//要访问的后台地址 data: "pageIndex=" + pageIndex,//要发送的数据 complete :function(){$("#load").hide();},//AJAX请求完成时隐藏loading提示 success: function(msg){//msg为返回的数据，在这里做数据绑定 var data = msg.table; $.each(data, function(i, n){ var row = $("#template").clone(); row.find("#OrderID").text(n.订单ID); row.find("#CustomerID").text(n.客户ID); row.find("#EmployeeID").text(n.雇员ID); row.find("#OrderDate").text(ChangeDate(n.订购日期)); if(n.发货日期!== undefined) row.find("#ShippedDate").text(ChangeDate(n.发货日期)); row.find("#ShippedName").text(n.货主名称); row.find("#ShippedAddress").text(n.货主地址); row.find("#ShippedCity").text(n.货主城市); row.find("#more").html("<a href=OrderInfo.aspx?id=" + n.订单ID + "&pageindex="+pageIndex+"> More</a>"); row.attr("id","ready");//改变绑定好数据的行的id row.appendTo("#datas");//添加到模板的容器中 });这个是jQuery的AJAX方法，返回数据并不复杂，主要说明一下怎么把数据按模板的定义显示到到页面上。首先是这个“var row = $("#template").clone();”先把模板复制一份，接下来row.find("#OrderID").text(n.订单ID);，表示找到id=OrderID的标记，设置它的innerText为相应的数据，当然也可以设置为html格式的数据。或者是通过外部的函数把数据转换成需要的格式，比如这里row.find("#OrderDate").text(ChangeDate(n.订购日期));有点服务器控件做模板绑定数据的感觉。
所有的这些，都是放在一个静态的页面里，只通过AJAX方法从后台获取数据，所有html代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>test1</title> <script language="javascript" type="text/javascript" src="js/jquery-latest.pack.js"></script> <script language="javascript" type="text/javascript" src="js/PageDate.js"></script></head><body> <div> <div> <br /> <input id="first" type="button" value=" << " /><input id="previous" type="button" value=" < " /><input id="next" type="button" value=" > " /><input id="last" type="button" value=" >> " /> <span id="pageinfo"></span> <table id="datas" border="1" cellspacing="0" style="border-collapse: collapse"> <tr> <th> 订单ID</th> <th> 客户ID</th> <th> 雇员ID</th> <th> 订购日期</th> <th> 发货日期</th> <th> 货主名称</th> <th> 货主地址</th> <th> 货主城市</th> <th> 更多信息</th> </tr> <tr id="template"> <td id="OrderID"> </td> <td id="CustomerID"> </td> <td id="EmployeeID"> </td> <td id="OrderDate"> </td> <td id="ShippedDate"> </td> <td id="ShippedName"> </td> <td id="ShippedAddress"> </td> <td id="ShippedCity"> </td> <td id="more"> </td> </tr> </table> </div> <div id="load" style="left: 0px; position: absolute; top: 0px; background-color: red"> LOADING.... </div> <input type="hidden" id="pagecount" /> </div></body></html>PageData.js就是包括上面AJAX请求和绑定数据代码的js，整个页面连form都不用，这样做有什么好处呢。再看下面一个模板
<ul id="datas"> <li id="template"> <span id="OrderID"> fsdfasdf </span> <span id="CustomerID"> </span> <span id="EmployeeID"> </span> <span id="OrderDate"> </span> <span id="ShippedDate"> </span> <span id="ShippedName"> </span> <span id="ShippedAddress"> </span> <span id="ShippedCity"> </span> <span id="more"> </span> </li></ul> 还是要注意id属性。大家看到这里应该明白了，不管用什么样的表现形式，只要id属性相同，就可以把数据绑定到对应的位置。这样的话，我们这些做程序的就不会因为美工的修改而修改代码了，而且美工也只要做出html就可以了，不需要为服务器控件做模板。
function SelectProject() { var a = new Array; var r = window.showModalDialog('SelProject.aspx', a, "dialogWidth=1000px; dialogHeight=600px; resizable: yes"); if (typeof (r) != 'undefined') { var arr = r.split(";"); $("#hidProjectInnerID").val(arr[0]); $("#txtProjectNo").val(arr[1]); $.getJSON("../Handler/GetProjectInfor.ashx", { key: "PaymentStatement", InnerID: $("#hidProjectInnerID").val() }, function (json) { $("#labFinalCustomer").text(json.finalclient); $("#labOrderNo").text(json.orderno); var strDeviceTr = ""; $.each(json.workinghours, function (i, item) { strDeviceTr += "<tr><td><lable name="infor"> " + item.description + "</lable> </td>"; strDeviceTr += "<td> </td>"; strDeviceTr += " <td><lable name="infor"> " + item.hoursdays + "</lable></td>"; strDeviceTr += "<td> 0.8</td>"; strDeviceTr += "<td><lable name="infor"> " + item.workinghour + " </lable></td>"; strDeviceTr += "<td> 0.8</td>"; strDeviceTr += "<td><lable name="infor"> " + item.workinghour + "</lable></td>"; strDeviceTr += "<td> </td>"; strDeviceTr += "</tr>"; }); $("#infor").append(strDeviceTr); }); } }string innerid = CommonClass.Request.GetRequest<string>("InnerID", ""); string key = CommonClass.Request.GetRequest<string>("key", ""); string result = ""; if (key == "StockOutApp" && innerid != "") { result = StockOutApp(innerid); context.Response.Write(result); } else if (key == "PaymentStatement" && innerid != "") { result = PaymentStatement(innerid); context.Response.Write(result); }#region 结算单信息 public string PaymentStatement(string _innerid) { try { string sql = @"select InnerID,pFinalClient,pOrderNo from se_ProjectMain where InnerID='" + _innerid + "'"; DataTable dt = SqlShift.GetDataTable(sql); if (!CommonClass.DTRow.CheckDtIsEmpty(dt)) { StringBuilder json = new StringBuilder(); json.Append(""innerid":""+dt.Rows[0]["InnerID"].ToString()+"""); json.Append(","finalclient":"" + dt.Rows[0]["pFinalClient"].ToString() + """); json.Append(","orderno":"" + dt.Rows[0]["pOrderNo"].ToString() + """); json.Append(","workinghours":" + GetWorkingHours(_innerid)); return "{" + json.ToString().Trim(',') + "}"; } else { return string.Empty; } } catch (Exception ex) { AppLog.Write("项目获取异常！[异常信息：" + ex.Message + "]", AppLog.LogMessageType.Info); return string.Empty; } } public string GetWorkingHours(string _innerid) { try { string sql = @"select InnerID, wDescription,wWorkingHour,wHours_Days from se_ProjectWorkingHour where wProjectID='" + _innerid + "'"; DataTable dt = SqlShift.GetDataTable(sql); if (!CommonClass.DTRow.CheckDtIsEmpty(dt)) { StringBuilder json = new StringBuilder(); for (int i = 0; i < dt.Rows.Count; i++) { json.Append("{"); json.Append(""innerid":"" + dt.Rows[0]["InnerID"].ToString() + """); json.Append(","description":"" + dt.Rows[0]["wDescription"].ToString() + """); json.Append(","workinghour":"" + dt.Rows[0]["wWorkingHour"].ToString() + """); json.Append(","hoursdays":"" + dt.Rows[0]["wHours_Days"].ToString() + """); json.Append("},"); } return "[" + json.ToString().Trim(',') + "]"; } else { return string.Empty; } } catch (Exception ex) { AppLog.Write("项目获取异常！[异常信息：" + ex.Message + "]", AppLog.LogMessageType.Info); return string.Empty; } }#endregion /*预约登记 执行 接口*/ case "yuyue_interface": $name = trim($_GET['name']); $phone = trim($_GET['phone']); $addr = trim($_GET['addr']); $dt = date("Y-m-d H:i:s"); $cb = $_GET['callback']; if($name == "" || $name == NULL){ echo $cb."({code:".json_encode(1)."})"; }elseif($phone == "" || $phone == NULL){ echo $cb."({code:".json_encode(2)."})"; }elseif($addr == "" || $addr == NULL){ echo $cb."({code:".json_encode(3)."})"; }else{ $db->execute("insert into tb_yuyue (realname,telphone,danwei,dt,ischeck) values ('$name','$phone','$addr','$dt',0)"); echo $cb."({code:".json_encode(0)."})"; } exit; break; $(document).ready(function(){ //以下3个为预约登记需要的参数 var name = "name"; //varchar类型，长度最多为8位（4个汉字） var phone = "phone"; //varchar类型，长度为11位 var addr = "addr"; //varchar类型，长度最多为500位（250个汉字） $.getJSON("http://请求网站地址/data.php?ac=yuyue_interface&name="+name+"&phone="+phone+"&addr="+addr+"&callback=?", function(data){ if(data.code==1){ //自定义代码 alert("姓名不能为空"); }else if(data.code==2){ //自定义代码 alert("手机不能为空"); }else if(data.code==3){ //自定义代码 alert("所在单位不能为空"); }else{ //自定义代码 alert("预约成功"); } }); }); $cb = $_GET['callback']; echo $cb."({code:".json_encode(4)."})"; 代码如下:
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript"> var obj = new Object(); obj.Name = "八戒" obj.Age = 500; //通过字面量的形式来定义对象 var obj1 = { "Name": "八戒", "Age": "500" }; var arr = [{ "Name": "八戒", "Age": "500" }, { "Name": "八戒1", "Age": "1000" }]; //JSON格式：将json的字面量表示形式，当做字符串存放，则为json格式字符串 var str = '{ "Name": "八戒", "Age": "500" }'; var jsonstrarr = '[{ "Name": "八戒", "Age": "500" }, { "Name": "八戒1", "Age": "1000" }];'; //将json字符串转换成js对象（数组） var resobj = JSON.parse(str); alert(resobj.Name); </script></head><body></body></html>在前端js对象和json对象的互转：
处理：引用一个json2.js文件，调用JSON.stringify()方法。例如：
var data = new Object();var json_data = JSON.stringify(data);PS：json2.js这个文件在网上搜一下就能下载到。
1.处理：用jQuery的一个方法$.parseJSON()将JSON格式的数据转成JS对象。例如：
var json_data = $.getJSON();var data = $.parseJSON(json_data);（可用来成转换js数组）
2.将json转换成js对象的方法：
var json = eval('(' + result + ')');示例：
//将param反序列列list集合List<ApplyPart> _ApplyPart = new JavaScriptSerializer().Deserialize<List<ApplyPart>>(param);$.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象反过来，使用 serialize 系列方法：如：var fields = $("select, :radio").serializeArray();浏览器支持的转换方式(Firefox，chrome，opera，safari，ie9，ie8)等浏览器
代码如下:
JSON.parse(jsonstr); //可以将json字符串转换成json对象 JSON.stringify(jsonobj); //可以将json对象转换成json对符串注：ie8(兼容模式),ie7和ie6没有JSON对象，需要引入 json.js 或 json2.js。
JavaScript中字符串(string)转json的方法主要有四种，详细介绍如下：
第一种方式：使用js函数eval();
testJson=eval(testJson);是错误的转换方式。
正确的转换方式需要加(): testJson = eval("(" + testJson + ")");
eval()的速度非常快，但是他可以编译以及执行任何javaScript程序，所以会存在安全问题。在使用eval()。来源必须是值得信赖的。需要使用更安全的json解析器。在服务器不严格的编码在json或者如果不严格验证的输入，就有可能提供无效的json或者载有危险的脚本，在eval()中执行脚本，释放恶意代码。
js代码：
代码如下:
function ConvertToJsonForJs() {//var testJson = "{ name: '小强', age: 16 }";(支持)//var testJson = "{ 'name': '小强', 'age': 16 }";(支持)var testJson = '{ "name": "小强", "age": 16 }';//testJson=eval(testJson);//错误的转换方式testJson = eval("(" + testJson + ")");alert(testJson.name);}第二种方式：使用jquery.parseJSON()方法对json的格式要求比较高，必须符合json格式
jquery.parseJSON()
js:代码
代码如下:
function ConvertToJsonForJq() {var testJson = '{ "name": "小强", "age": 16 }';//不知道//'{ name: "小强", age: 16 }' (name 没有使用双引号包裹)//"{ 'name': "小强", 'age': 16 }"(name使用单引号)testJson = $.parseJSON(testJson);alert(testJson.name);}第三种方式：使用Function来进行转换
js:代码
代码如下:
var jsonStr = '{"userName": "tiu","userAge": 26,"isMale": true}';var json = (new Function("return " + jsonStr))();可以看到其原理就是拼接js代码字符串，然后使用Function创建一个匿名方法然后调用之！
第四种方式：使用JSON全局对象，不过比较可惜的是IE8以下的版本没有这个对象，如果不考虑兼容IE8一下版本的话JSON全局对象是个很有用的东西
代码如下：
var jsonStr = '{"userName": "tiu","userAge": 26,"isMale": true}';var json = JSON.parse(jsonStr);var str = JSON.stringify(json);使用Jquery Ui Datapicker做显示签到日历功能的时候，出现了Js问题，在IE8/IE9以及FF、Chrome下都显示正常，但是在IE6/IE7以及IE8兼容视图下显示有问题，提示“页面上有错误”，进一步查看显示错误信息“缺少标识符、字符串或数字”，一开始以为是Jquery和Jquery Ui的版本不匹配导致的，后来尝试了其他支持的版本也是不行，然后将自己的Js代码逐段调式，在花了两个多小时后终于意外的发现是由Json最后一个键值后加了逗号引起的问题。
好多人也遇到的这种问题
var obj = { 'name': 'qqyumidi', 'gender': 'male' //此处不能加上, ！！ }alert(obj.name);<!-- 引入相应的jquery的UI文件 --> <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.7.1.min.js"></script> <!-- 引入此js文件将日历中内容转化成中文 --> <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.ui.datepicker-zh-CN.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-ui-1.8.18.custom.min.js"></script> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/ui-lightness/jquery-ui-1.8.18.custom.css"><div class="demo"> <p>Date:<input type="text" id="datepicker"></p> </div> 然后使用js代码对插件进行调用：
<script type="text/javascript"> $(function() { //插件的调用 $("#datepicker").datepicker({ //在这里进行插件的属性设置 }); }); </script> 效果截图：
<div class="demo"> <p>Date: <input type="text" id="datepicker"> <input type="text" id="alternate" size="30"/></p> </div> Js代码：
$(function() {$( "#datepicker" ).datepicker({altField: "#alternate",altFormat: "DD, d MM, yy"});});
2、showAnim：设置日期面板显示或隐藏的动画名
js代码的编写：
$(function() {$( "#datepicker" ).datepicker();$( "#anim" ).change(function() {$( "#datepicker" ).datepicker( "option", "showAnim", $( this ).val() );});});[javascript] view plaincopyprint?$( "#datepicker" ).datepicker({showButtonPanel:true});
4、dateFormat：指定显示日期的格式
Js代码：
$( "#datepicker" ).datepicker({dateFormat:"yy/mm/dd"});
通过图像可以看到，文本框中日期格式由以前的“yy-mm-dd”转变成了“by/mm/dd”。当然还有别的格式，可以根据自己的喜好进行设置。
5、changeMonth：是否使用下拉列表选择月份
changeYear：是否使用下拉列表选择年份
在js代码中添加此属性：changeMonth:true 或者 changeYear:true
其中标题栏的月份或者年份会出现下拉菜单的形式：
6、yearRange：设置下拉列表框中显示的年份范围，可以是相对今年（-nn:+nn）或相对于选择的年份（c-nn:c+nn）或绝对年份（nnnn:nnnn）
在js代码中添加属性：
$( "#datepicker" ).datepicker({changeYear: true,yearRange:"2011:2012"});
从图中可以看到年的位置为下拉菜单的形式，其中下拉菜单只会出现2011与2012年的选项。
注：yearRange属性只有在changeYear为true的情况下才使用。
7、numberOfMonths：设置一次要显示几个月。可以为包含两个数字的数组，表示显示的行数和列数
Js代码：
$( "#datepicker" ).datepicker({numberOfMonths: 3});
8、showOn：设置触发选择器的事件名称
buttonText：指定触发按钮上显示的文本，showOn属性应设置为button或both
buttonImage：指定弹出按钮图像的URL，若设置则buttonText将成为alt值
buttonImageOnly：是否将图像放在控件后面，作为触发器，如果设置为true那么按钮将只剩下图片作为按钮，是页面更加美观
这里我编写三个文本框进行以上属性的对比：
1) Js代码：
$( "#datepicker2" ).datepicker({showOn: "both",buttonText:"日历按钮"});
2）将按钮设置为图片：
Js代码：
$( "#datepicker" ).datepicker({showOn: "button",buttonImage: "images/calendar.gif",buttonImageOnly: true});
通过以上对比，可以理解buttonImageOnly属性的作用。
9、minDate：可以选择的最小日期，null表示无限制
maxDate：可以选择的最大日期。null表示无限制
两者都是根据以当天日期为基础的。
Js代码：
$(function() {$( "#datepicker" ).datepicker({//表示以当天为准，只有在20天之前和10天之后的日期之间的时间可以选择minDate: -20,maxDate: "+10D"});});如下图在7号之前都不可选择（当前日期为27）：
<script src="jquery.min.js"></script> <script src="jquery.json-2.2.js"></script> <script src="GetPostAjax.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#form").submit(function(e){ e.preventDefault(); var username,email,password,gender; username=$("#username").val(); email=$("#email").val(); password=$("#username").val(); gender=$("#gender").val(); if(username.length>0 && email.length>0 && password.length>0 &&gender.length>0) { //Creating Objects var request = new Object(); var userDetails = new Object(); var user = new Object(); var websites=new Array(); user.name=username; user.email=email; user.password=password; user.gender=gender; //Array Push if(website1.length>0) websites.push(website1); if(website2.length>0) websites.push(website2); if(website3.length>0) websites.push(website3); user.websites=websites; userDetails.user = user; request.userDetails = userDetails; var jsonfy = $.toJSON(request); // Encodes special characters var encodedata = 'jsondata='+encodeURIComponent(jsonfy); //Ajax Call var url='website API URL'; post_data(url,encodedata, function(data) { alert("Success"); }); } }); }); </script"> <form method='post' action='' id='form'> Name <input type='text' name='username' id='username' /> Email <input type='text' name='email' id='email' /> Password <input type='text' name='password' id='password' /> Gender <select name='gender' id='gender'><option value='male'>Male</option><option value='female'>Female</option></select> Websites <input type='text' id='website1' /> <input type='text' id='website2' /> <input type='text' id='website3' /> <input type='submit' id='submit'/> </form> { "userDetails":{ "user":{ "name":"Srinivas Tamada", "email":"srinivas@9lessons.info", "password":"Srinivas Tamada", "gender":"male", "websites":["www.software8.co","www.heatpress123.net","www.0769zzw.com"] } } }, / ? : @ & = + $ # jsondata=%7B%22userDetails%22%3A%7B%22user%22%3A%7B%22name%22%3A%22Srinivas%20Tamada%22%2C%22email%22%3A%22srinivas%409lessons.info%22%2C%22password%22%3A%22Srinivas%20Tamada%22%2C%22gender%22%3A%22male%22%2C%22websites%22%3A%5B%22www.9lessons.info%22%2C%22www.egglabs.in%22%2C%22www.fglogin.com%22%5D%7D%7D%7Dfunction post_data(url,encodedata, success){ $.ajax({ type:"POST", url:url, data :encodedata, dataType:"json", restful:true, contentType: 'application/json', cache:false, timeout:20000, async:true, beforeSend :function(data) { }, success:function(data){ success.call(this, data); }, error:function(data){ alert("Error In Connecting"); } }); }// 声明两个json数组 [java] view plain copy print? JSONArray gResTable = new JSONArray(); JSONArray gCmtTable = new JSONArray(); // 声明json对象 ONObject outData = new JSONObject(); //把json数组加到json对象中 [java] view plain copy print?outData.put("ResTable", gResTable); outData.put("CmtTable", gCmtTable); //此时创建出来的如下:jsonData={"ResTable":[],"CmtTable":[]}; 把json数据加到json数组中 for (int i = 0; i < 2; i ++) { JSONObject node = new JSONObject(); node.put("thumb_path", "./Image/" + i +".gif"); node.put("flash_path", "./Image/" + i +".gif"); node.put("desc1", "可疑车辆" + i); node.put("desc2", ""); node.put("desc3", ""); node.put("desc4", ""); node.put("title", "hello"); node.put("upload_time", (new java.util.Date()).toString()); node.put("uploader", "王二"); gResTable.put(node); } for (int i = 0; i < 2; i ++) { JSONObject node = new JSONObject(); node.put("logo_path", "./Image/" + i +".gif"); node.put("comment", "hello"); node.put("comment_time", (new java.util.Date()).toString()); node.put("author", "王二"); gCmtTable.put(node); }[java] view plain copy print?/* jsonData={"ResTable":[ {"upload_time":"Sat May 26 20:16:37 CST 2012","title":"hello","flash_path":"./Image/0.gif","uploader":"王二","thumb_path":"./Image/0.gif","desc3":"","desc4":"","desc1":"可疑车辆0","desc2":""}, {"upload_time":"Sat May 26 20:16:37 CST 2012","title":"hello","flash_path":"./Image/1.gif","uploader":"王二","thumb_path":"./Image/1.gif","desc3":"","desc4":"","desc1":"可疑车辆1","desc2":""}], "CmtTable": [{"author":"王二","logo_path":"./Image/0.gif","comment":"hello","comment_time":"Sat May 26 20:16:37 CST 2012"}, {"author":"王二","logo_path":"./Image/1.gif","comment":"hello","comment_time":"Sat May 26 20:16:37 CST 2012"} ]}; */ 我们在使用AJAX来做服务器端和客户端交互的时候，一般的做法是让服务器端返回一段JSON字符串，然后在客户端把它解析成JavaScript对象。
解析时用到的方法一般是eval或者new function，而目前IE8和Firefox3.1又内置了原生的JSON对象（据说会有一定的性能提升）。那我们在实际使用的时候怎样从这三种方法（因为性能问题，不考虑用javascript实现的解析）里面来选择呢？面对众多的浏览器，哪种方式的性能是最好的呢？
var count = 10000, o = null, i = 0, jsonString = '{"value":{"items": [{"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}]},"error":null}'; 2、循环解析并记录时间
var beginTime = new Date(); for ( i = 0; i < count; i++ ) { o = eval( "(" + jsonString + ")" ); } Console.output( "eval:" + ( new Date() - beginTime ) ); var beginTime = new Date(); for ( i = 0; i < count; i++ ) { o = new Function( "return " + jsonString )(); } Console.output( "new Function:" + ( new Date() - beginTime ) ); if ( typeof JSON !== "undefined" ) { var beginTime = new Date(); for ( i = 0; i < count; i++ ) { o = JSON.parse( jsonString ); } Console.output( "native:" + ( new Date() - beginTime ) ); } else { Console.output( "native:not support!" ); } *数值越小越好
*在当前列中绿色背景的表示性能最好，红色性能最差：
1、Firefox2、3全部垫底，IE6的性能优于IE7（可能和机器不一致有关），Chrome和Safari4的性能远远超出其它浏览器。
2、不同的浏览器下eval和new Function的性能不一致，总的来说eval更好，但Firefox下new Function的性能是eval的一倍，为了更好的兼容各个浏览器，我们把对JSON的解析单独封装成一个对象来处理：
var __json = null; if ( typeof JSON !== "undefined" ) { __json = JSON; } var browser = Browser; var JSON = { parse: function( text ) { if ( __json !== null ) { return __json.parse( text ); } if ( browser.gecko ) { return new Function( "return " + text )(); } return eval( "(" + text + ")" ) } }; var beginTime = new Date(); for ( i = 0; i < count; i++ ) { o = JSON.parse( jsonString ); } Console.output( "wrapper:" + ( new Date() - beginTime ) );
由于涉及到调用对象的开销，封装后JSON对象会比单独调用更慢，但它能保证在各个浏览器下使用最适合的方法。
2009.03.23：屏蔽所有Firefox的Add-Ons再进行测试
由于Known在Firefox下运行代码得到了完全不一致的结果，怀疑是Firefox的插件导致，于是禁掉所有插件后（后来表明几乎由Firebug导致），重新在Firefox2、3下测试了一下，结果如下：
这表明Firefox本身的性能并不是象我们先前测试的那样低，在去掉插件后性能还是很不错。但是没有Firebug一类的插件支持，Firefox对我们的吸引力也大大降低了。
2009.03.31：循环中每次使用新的json字符串
根据Oliver的描述，他猜测是由于Safari4和Chrome缓存了eval的结果从而导致它们的测试成绩“虚”高，测试结果证明了他的推测:
从这个结果中我们可以看到，Opera的性能最好，Ie8其次。
主要修改的代码：
//eval 2: var beginTime = new Date(); for ( i = 0; i < count; i++ ) { o = eval("(" + '{"value":{"items": [{"x":' + i + ',"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}]},"error":null}' + ")"); } Console.output( "eval:" + ( new Date() - beginTime ) ); //new Function beginTime = new Date(); for ( i = 0; i < count; i++ ) { o = new Function("return " + '{"value":{"items": [{"x":' + i + ',"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}]},"error":null}')(); } Console.output( "new Function:" + ( new Date() - beginTime ) ); //native if ( typeof JSON !== "undefined" ) { beginTime = new Date(); for ( i = 0; i < count; i++ ) { o = JSON.parse('{"value":{"items": [{"x":' + i + ',"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}]},"error":null}'); } Console.output( "native:" + ( new Date() - beginTime ) ); } else { Console.output( "native:not support!" ); } //wrapper var __json = null; if ( typeof JSON !== "undefined" ) { __json = JSON; } var browser = Browser; var JSON = { parse: function( text ) { if ( __json !== null ) { return __json.parse( text ); } if ( browser.gecko ) { return new Function( "return " + text )(); } return eval( "(" + text + ")" ) } }; beginTime = new Date(); for ( i = 0; i < count; i++ ) { o = JSON.parse('{"value":{"items": [{"x":' + i + ',"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}]},"error":null}'); } Console.output( "wrapper:" + ( new Date() - beginTime ) );<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Parse JsonString</title> </head> <body> <div id="consoleRegion"></div> <script type="text/javascript"> //yui var Browser = function() { var o = { ie: 0, opera: 0, gecko: 0, webkit: 0 }; var ua = navigator.userAgent, m; if ( ( /KHTML/ ).test( ua ) ) { o.webkit = 1; } // Modern WebKit browsers are at least X-Grade m = ua.match(/AppleWebKit/([^s]*)/); if (m&&m[1]) { o.webkit=parseFloat(m[1]); } if (!o.webkit) { // not webkit // @todo check Opera/8.01 (J2ME/MIDP; Opera Mini/2.0.4509/1316; fi; U; ssr) m=ua.match(/Opera[s/]([^s]*)/); if (m&&m[1]) { o.opera=parseFloat(m[1]); } else { // not opera or webkit m=ua.match(/MSIEs([^;]*)/); if (m&&m[1]) { o.ie=parseFloat(m[1]); } else { // not opera, webkit, or ie m=ua.match(/Gecko/([^s]*)/); if (m) { o.gecko=1; // Gecko detected, look for revision m=ua.match(/rv:([^s)]*)/); if (m&&m[1]) { o.gecko=parseFloat(m[1]); } } } } } return o; }(); var Console = { consoleRegion: null, getRegion: function() { if ( this.consoleRegion === null ) { this.consoleRegion = document.getElementById( "consoleRegion" ); } return this.consoleRegion; }, output: function( text ) { this.getRegion().innerHTML += "<br/>" + text; } }; //test code var count = 10000, o = null, i = 0, jsonString = '{"value":{"items": [{"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}, {"x":1,"y":2,"z":3}]},"error":null}'; //eval var beginTime = new Date(); for ( i = 0; i < count; i++ ) { o = eval( "(" + jsonString + ")" ); } Console.output( "eval:" + ( new Date() - beginTime ) ); //new Function beginTime = new Date(); for ( i = 0; i < count; i++ ) { o = new Function( "return " + jsonString )(); } Console.output( "new Function:" + ( new Date() - beginTime ) ); //native if ( typeof JSON !== "undefined" ) { beginTime = new Date(); for ( i = 0; i < count; i++ ) { o = JSON.parse( jsonString ); } Console.output( "native:" + ( new Date() - beginTime ) ); } else { Console.output( "native:not support!" ); } //wrapper var __json = null; if ( typeof JSON !== "undefined" ) { __json = JSON; } var browser = Browser; var JSON = { parse: function( text ) { if ( __json !== null ) { return __json.parse( text ); } if ( browser.gecko ) { return new Function( "return " + text )(); } return eval( "(" + text + ")" ) } }; beginTime = new Date(); for ( i = 0; i < count; i++ ) { o = JSON.parse( jsonString ); } Console.output( "wrapper:" + ( new Date() - beginTime ) ); //alert( o.value.items[0].z ); </script> </body> </html>在ajax方式做web开发时，经常会遇到会保存前，收集表单输入项，组成json对象，然后把对象直接post到服务端的场景。
常规做法是在js里写类似如下的代码:
var myObj = {};myObj.x = document.getElementById("x").value;myObj.y = document.getElementById("y").value;//... //然后ajax post或get提交表单元素不多的时候，这样还好，但是如果一个表单有好几十项甚至更多输入项的时候，写这种代码就太费劲了。
好在javascript中有一个邪恶的eval函数，可以帮我们完成一些类似c#反射的工作，比如下面这样：
eval('A={}');if (A.b==undefined){ A.b = {};}eval('A.b.c = 1');alert(A.b.c);这样，我们就动态创建了一个复合对象A，明白其中原理后，可以对表单做些改进:
运单号：
<input type="text" name="AwbPre" value="112" style="width:40px"/>-<input type="text" name="AwbNo" value="12312311"/><br/>结算方式：
<select name="SettlementMode" style="width:100px"> <option value="CASH" selected="selected">现金</option> <option value="MONTH">月结</option></select><br/>不需要赋值的属性：
<input type="input" name="NotMe" value="NotMe ..." isModel="false"/><script type="text/javascript"> function setFormModel(modelName){ eval(modelName + "={}"); var inputArr = document.getElementsByTagName("INPUT"); for(var i=0;i<inputArr.length;i++){ var isModel = inputArr[i].getAttribute("isModel"); var itemName = inputArr[i].name; var itemValue = inputArr[i].value; if(isModel!="false"){ eval(modelName + "." + itemName + "='" + itemValue + "';"); } } var selectArr = document.getElementsByTagName("SELECT"); for(var i=0;i<selectArr.length;i++){ var isModel = selectArr[i].getAttribute("isModel"); var itemName = selectArr[i].name; var itemValue = selectArr[i].value; if(isModel!="false"){ eval(modelName + "." + itemName + "='" + itemValue + "';"); } } return modelName; } setFormModel("AwbModel"); alert("单号：" + AwbModel.AwbPre + "-" + AwbModel.AwbNo + "
结算方式：" + AwbModel.SettlementMode + "
不该有的属性：" + AwbModel.NotMe); </script>这样，只要form元素的name属性正确设置，需要收集表单对象时，调用一下setFormModel函数，就能快速得到一个json对象(当然这只是示例，仅处理了一级属性的情况，如果有多级属性，大家自己去扩展吧，无非就是字符串上做些文章)
首先来个最简单的理解
eval可以将字符串生成语句执行，和SQL的exec()类似。
eval的使用场合是什么呢？有时候我们预先不知道要执行什么语句，只有当条件和参数给时才知道执行什么语句，这时候eval就派上用场了。举个例子：
我们要做一个function()，功能是输入网页中两个个对象的名称，然后程序就将这两个对象的值联接起来输出。
function output(a,b) { var tmpa,tmpb; tmpa=document.all.a.value; tmpb=document.all.b.value; document.write(tmpa+tmpb); } output('input1','input2');这样你执行的时候就会提示错误“document.all.a不是对象”以及“document.all.b不是对象”。原来javascript把a和b当成对象名称了，怎样能让javascript把a里面的值作为对象名称呢？这时候就要用eval了，把代码改成这样：
function output(a,b) { var tmpa,tmpb; tmpa=eval("document.all."+a+".value"); tmpb=eval("document.all."+b+".value"); document.write(tmpa+tmpb); } output('input1','input2'); 这样javascript就会先取出a,b的值，然后和前面的document.all.以及后面的.value组合运行，于是就可以顺利取出input1和input2的值。
看完上面的基本理解eval是什么含义了吧
然后看下面的理解
稍微晋级一点点，用到了DOM中替换图片的例子
【eval()函数】
JavaScript有许多小窍门来使编程更加容易。
其中之一就是eval()函数，这个函数可以把一个字符串当作一个JavaScript表达式一样去执行它。
举个小例子：
var the_unevaled_answer = "2 + 3"; var the_evaled_answer = eval("2 + 3"); alert("the un-evaled answer is " + the_unevaled_answer + " and the evaled answer is " + the_evaled_answer);如果你运行这段eval程序, 你将会看到在JavaScript里字符串"2 + 3"实际上被执行了。
所以当你把the_evaled_answer的值设成 eval("2 + 3")时，JavaScript将会明白并把2和3的和返回给the_evaled_answer。
这个看起来似乎有点傻，其实可以做出很有趣的事。比如使用eval你可以根据用户的输入直接创建函数。
这可以使程序根据时间或用户输入的不同而使程序本身发生变化，通过举一反三，你可以获得惊人的效果。
在实际中，eval很少被用到，但也许你见过有人使用eval来获取难以索引的对象。
文档对象模型（DOM)的问题之一是:有时你要获取你要求的对象简直就是痛苦。
例如，这里有一个函数询问用户要变换哪个图象:变换哪个图象你可以用下面这个函数：
function swapOne() { var the_image = prompt("change parrot or cheese",""); var the_image_object; if (the_image == "parrot") { the_image_object = window.document.parrot; } else { the_image_object = window.document.cheese; } the_image_object.src = "ant.gif"; } 连同这些image标记: [img src="/stuff3a/parrot.gif" name="parrot"] [img src="/stuff3a/cheese.gif" name="cheese"]请注意像这样的几行语句：
the_image_object = window.document.parrot;它把一个图象对象敷给了一个变量。虽然看起来有点儿奇怪，它在语法上却毫无问题。
但当你有100个而不是两个图象时怎么办？你只好写上一大堆的 if-then-else语句，要是能象这样就好了：
function swapTwo() { var the_image = prompt("change parrot or cheese",""); window.document.the_image.src = "ant.gif"; }不幸的是, JavaScript将会寻找名字叫 the_image而不是你所希望的"cheese"或者"parrot"的图象，于是你得到了错误信息：”没听说过一个名为the_image的对象”。
还好，eval能够帮你得到你想要的对象。
function simpleSwap() { var the_image = prompt("change parrot or cheese",""); var the_image_name = "window.document." + the_image; var the_image_object = eval(the_image_name); the_image_object.src = "ant.gif"; }如果用户在提示框里填入"parrot"，在第二行里创建了一个字符串即window.document.parrot.
然后包含了eval的第三行意思是： "给我对象window.document.parrot" - 也就是你要的那个图象对象。一旦你获取了这个图象对象，你可以把它的src属性设为ant.gif. 有点害怕？用不着。其实这相当有用，人们也经常使用它。
我们常常在Javascript中间到Eval这个函数，有些人觉得这个函数很奇怪，可以把一些字符串变的功能很强大。
在我们需要将普通的字符串转变成具体的对象的时候，就会用到这个函数eval 函数对作为数字表达式的一个字符串进行求值，其语法为：
eval(expr)此处 expr 是一个被求值的字符串参数。如果该字符串是一个表达式，eval 求该表达式的值；如果该参数代表一个或多个 JavaScript 语句，那么 eval 执行这些语句。eval 函数可以用来把一个日期从一种格式（总是字符串）转换为数值表达式或数字。
==============================
功能：先解释Javascript代码，然后在执行它
用法：Eval(codeString)
codeString是包含有Javascript语句的字符串，在eval之后使用Javascript引擎编译。
注释：
例子：eval(id + "_icon.src="/imgs/collapse_up.gif'");
id是之前设定的参数，而在双引号中的字符串则是需要编译的
引用:
--------------------------------------------------------------------------------
function tophide(id) //id indicates menu{ if (top.topframeset.rows == "31,*") { top.topframeset.rows = "86,*"; eval(id + "_icon.src="/imgs/collapse_up.gif'"); eval(id + "_icon.alt='Collapse The Head'"); head.style.display = "block" } else { top.topframeset.rows = "31,*"; eval(id + "_icon.src="/imgs/collapse_down.gif'"); eval(id + "_icon.alt='Expand The Head'"); head.style.display = "none" }}如果还是不明白深入认识javascript中的eval函数
发现为本文起一个合适的标题还不是那么容易，呵呵，所以在此先说明下本文的两个目的：
（1）介绍javascript中的eval函数的用法
（2）如何在函数内执行全局代码
先来说eval的用法，内容比较简单，熟悉的可以跳过。
eval的用法
eval函数接收一个参数s，如果s不是字符串，则直接返回s。否则执行s语句。如果s语句执行结果是一个值，则返回此值，否则返回undefined。
需要特别注意的是对象声明语法“{}”并不能返回一个值，需要用括号括起来才会返回值，简单示例如下：
var code1='"a" + 2'; //表达式var code2='{a:2}'; //语句alert(eval(code1)); //->'a2'alert(eval(code2)); //->undefinedalert(eval('(' + code2 + ')')); //->[object Object]可以看到，对于对象声明语句来说，仅仅是执行，并不能返回值。为了返回常用的“{}”这样的对象声明语句，必须用括号括住，以将其转换为表达式，才能返回其值。这也是使用JSON来进行Ajax开发的基本原理之一。在例子中可以清楚的看到，第二个alert语句输出的是undefined，而第三个加了括号后输出的是语句表示的对象。
►现在来说本文的重点，如何在函数内执行全局代码。为了说明这个问题，先看一个例子：
var s='global'; //定义一个全局变量function demo1(){ eval('var s="local"');}demo1();alert(s); //->global很好理解，上面的demo1函数等价于：function demo1(){var s='local';}，其中定义了一个局部变量s。
所以最后的输出是global并不是什么奇怪的事情，毕竟大家都能很清楚的区分局部变量和全局变量。
仔细体会一下，可以发现eval函数的特点，它总是在调用它的上下文变量空间（也称为：包，closure）内执行，无论是变量定义还是函数定义都是如此，所以如下的代码会产生函数未定义的错误：
var s='function test(){return 1;}'; //一个函数定义语句function demo2(){ eval(s);}demo2();alert(test()); //->error:test is not defined这是因为test函数在局部空间定义，demo2函数内可以访问到，外面就访问不到了。
而在实际的Ajax开发中，有时我们需要从服务器动态获取代码来执行，以减轻一次载入代码过多的问题，或者是一些代码是通过Javascript自身生成的，希望用eval函数来使其执行。
但这样的动态获取代码的工作一般在函数内完成，比如：
function loadCode(){ var code=getCode(); eval(code);}可见eval不可能在全局空间内执行，这就给开发带来了不少问题，也看到过很多人为此郁闷。
不过现在偶终于找到了解决办法，嘿嘿，可以同时兼容IE和Firefox，方法如下：
var X2={} //my namespace:)X2.Eval=function(code){if(!!(window.attachEvent && !window.opera)){ //ie execScript(code);}else{ //not ie window.eval(code);}}现在如果要想在函数内定义全局代码，就可以通过调用X2.Eval(code)方法，一个例子如下：
var s='global';function demo3(){X2.Eval('var s="local"');}demo3();alert(s); //->'local'可见，在demo3函数内重新定义了全局变量s="local"。
需要注意的是X2.Eval并不返回值，如果要进行表达式的求值，还是用系统的eval函数。X2.Eval设计为仅做全局代码定义用。
其实看到这里，或许有人感觉问题也太容易解决了点，呵呵，但发现这个办法倒是需要些运气和技巧的：
（1）对于IE浏览器，默认已经提供了这样的函数：execScript，用于在全局空间执行代码，只是知道的人还不多。
（2）对于Firefox浏览器，直接调用eval函数，则在调用者的空间执行；如果调用window.eval则在全局空间执行。这个知道的人估计就更少了。毕竟alert(eval==window.eval)返回true！
Firefox的eval函数的特点的确是很令人奇怪的，但从javascript规范中倒也能找到其来源：
If value of the eval property is used in any way other than a direct call (that is, other than by the explicit use of itsname as an Identifier which is the MemberExpression in a CallExpression), or if the eval property is assigned to,an EvalError exception may be thrown.意思大概就是说eval函数的执行是和调用者相关的，但并没有说其执行上下文的问题。所以IE和Firefox孰是孰非也就很难说了，大家知道解决办法就好。
代码如下所示：
<!DOCTYPE HTML> <html> <head> <title>test1</title> </head> <body> <script> var arr={ "name":"zhansan", "age":23, "address":{ "city":"beijing", "gas":{ "gasSheet":"气态流出物月报", "H_adjust":1 }, "time":{ "duration":31 } }, "units":{"title":"function"} } function show(obj){ var tmp={}; for(var i in obj){ if(obj[i]=="object"){ <span style="color:#ff0000;">tmp[i]=show(obj[i]);</span> } else{ <span style="color:#ff0000;">tmp[i]=obj[i]</span> } } return tmp; } var result=show(arr); console.log(result);</script> </body> </html></pre><p></p><p>利用递归思想，其中注意赋值语句</p><p>可用于不同的环境</p><p></p><pre>假设其中jSON对象是var kpis = {"A": [1,2,3,4,5],"B": [ 2,3,4,5,6]}， jSON 数组是var series = [{name:null,data:null}, {name:null,data:null}]
>>>第一种方法：
[javascript] view plain copyvar index=0; for( var tests in kpis){ series[index].name=tests; series[index].data=kpis[tests]; }点评：第一种方法对于超过两个名称/值对的情况不适用，只能手动增加jSON数组的长度，比较麻烦。经过boss的指导，有了第二种方法。
>>>第二种方法：
[html] view plain copyseries=[]; for(var tests in kpis){ //定义一个新的jSON对象，改变成jSON数组中jSON数据的格式 var json = {name:tests, data:kpis[tests]}; //通过数组的push()方法向数组中增加jSON数据 series.push(json); } 点评：第二种方法，在遍历kpis这个jSON对象的时候，生成新的格式的jSON对象，不断push到数组中，这样就达到了目的，而且即使是有名称/值对也不怕，通用性增强。
所以推荐第二种方法。
var chaomao=[1,2,3,4,5]var chaomao.shift()//得到1alert(chaomao)//[2,3,4,5]var chaomao=[1,2,3,4,5]var chaomao.pop()//得到5alert(chaomao)//[1,2,3,4]前面的方法只能操作数组开头和结尾，无法操作中间项，如果要操作中间的项，使用splice方法
修改操作：
var chaomao=[1,2,3,4,5]chaomao.splice(2,1,8,9)alert(chaomao)//1,2,8,9,4,5第一个参数是准备操作的数组位置，第二个参数是操作位置后面的数组项数，第三个以后的就是，被替换后的内容
例子就是表示：从chaomao这个数组位置2开始（也就是值为3的那一项，数组下标从0开始的），位置2后的一项，替换成成8，9
如果把第二个参数改为2，也就是chaomao.splice(2,2,8,9)，也就是说位置2后面的两项换成8，9，打印出来的结果就是1,2,8,9,5，3和4这2两项被换掉了
这里需要说明的是，被替换的项数不一定要和替换的项数相等，1项可以被换成3项，5项也可以被换成2项，基于这个原理，我们就用这个方法来对数组进行添加和删除操作
删除操作：
var chaomao=[1,2,3,4,5]chaomao.splice(2,1)alert(chaomao)//1,2,4,5上面例子中，把chaomao中的位置2后的1项替换成空的，因为后面没有内容，结果可以看到，把3这项删除了
添加操作：
var chaomao=[1,2,3,4,5]chaomao.splice(2,0,8,9)alert(chaomao)//1,2,8,9,3,4,5上面例子中，把chaomao中位置2后的0项换成8,9，也就等于添加了两项
其实，删除和添加操作都只是splice修改方法的两种衍生罢了
var p ={"name": “chaomao”,"age":45,"sex":"male"};delete p.namefor(var i in p){console.log(i);//输出age,sex，name项已经被删除了}var json = {}; // 如果json已经定义就跳过json[text] = value;json.text2 = value2; // 此时text2必须符合变量名标准，否则得使用数组方式赋值var json = {}; // 如果json已经定义就跳过json[text] = value;json.text2 = value2; // 此时text2必须符合变量名标准，否则得使用数组方式赋值1. 定义一维数组：
var s1=new Array();
s1=[1,2,3,4]或者s1[0]=1,s1[1]=2,s1[3]=3,s1[4]=4;
alert(s1[0]);
结果为1；
2.定义二维素组：
var s1=new Array();
var s1=[[3,1],[2,3,4],3,[4,5,6,7,8]];
alert(s1[1][0]);
结果为2；
var status_process = {" name5" : '闲置期',"name1" : '播种期',"name2" : '苗期',"name3" : '生长期',"name4" : '采收期' } alert(status_process);var s1="{";var s2 = " 'name5' : '闲置期', 'name1' : '播种期','name2' : '苗期','name3' : '生长期','name4' : '采收期'";var s3="}";var status_process=s1+s2 +s3；var status_process = {name5 : '闲置期',name1 : '播种期',name2 : '苗期',name3 : '生长期',name4 : '采收期'};alert(status_process["name5"]);alert(status_process.name5);var status_process = { name5 : {name3:'空闲闲置期'}, name1 : '播种期', name2 : '苗期', name3 : '生长期', name4 : '采收期'};alert(status_process["name5"]["name3"]);alert(status_process.name5.name3);js数组添加json数据的方式有如下两种：
第一种方式
personInfo : []; for(var i = 0; i < _STAGE.passengerInfoArray.length; i++){ var name = _STAGE.passengerInfoArray[i]; var person = {v:name, text:name}; this.personInfo.push(person);}第二种方式
var passengerInfo = {}; passengerInfo.psgTypeDesc = psgTypeDesc; passengerInfo.flightPrice = flightPrice; _STAGE.passengerInfoArray.push(passengerInfo);JS解析json数据（如何将json字符串转化为数组）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <SCRIPT LANGUAGE="JavaScript"> var t="{'firstName': 'cyra', 'lastName': 'richardson', 'address': { 'streetAddress': '1 Microsoft way', 'city': 'Redmond', 'state': 'WA', 'postalCode': 98052 },'phoneNumbers': [ '425-777-7777','206-777-7777' ] }"; var jsonobj=eval('('+t+')'); alert(jsonobj.firstName); alert(jsonobj.lastName); var t2="[{name:'zhangsan',age:'24'},{name:'lisi',age:'30'},{name:'wangwu',age:'16'},{name:'tianqi',age:'7'}] "; var myobj=eval(t2); for(var i=0;i<myobj.length;i++){ alert(myobj[i].name); alert(myobj[i].age); } var t3="[['<a href=# onclick=openLink(14113295100,社旗县国税局桥头税务所,14113295100,d6d223892dc94f5bb501d4408a68333d,swjg_dm);>14113295100</a>','社旗县国税局桥头税务所','社旗县城郊乡长江路西段']]"; //通过eval() 函数可以将JSON字符串转化为对象 var obj = eval(t3); for(var i=0;i<obj.length;i++){ for(var j=0;j<obj[i].length;j++){ alert(obj[i][j]); } } /* //stringifier 函数的作用跟 parse 相反， 用来将一个js对象转换为 JSON 文本。 var jsonText = JSON.stringify(obj); alert(jsonText); //如果基于安全的考虑的话，最好是使用一个 JSON 解析器。 一个 JSON 解析器将只接受 JSON 文本。所以是更安全的。 var myObject = JSON.parse(myJSONtext, filter); //可选的 filter 参数将遍历每一个value key 值对， 并进行相关的处理。如： //如 myData = JSON.parse(text, function (key, value) { return key.indexOf('date') >= 0 ? new Date(value) : value; }); //stringifier 函数的作用跟 parse 相反， 用来将一个js对象转换为 JSON 文本。 var myJSONText = JSON.stringifier(myObject); */ </SCRIPT> </HEAD> <BODY> </BODY> </HTML> 在解析之前，我们必须弄清楚几个概念：数组，关联数组以及json之间有哪些区别和联系点？
语法：
ECMAScript v3规定了数组直接量的语法，JavaScript 1.2和JScript 3.0实现了它。可以把—个用逗号分隔的表达式列表放在方括号中，创建并初始化—个数组。这些表达式的值将成为数组元素。例如：
var a = [1, true, 'abc'];
具体操作查看API.
ps:必须方括号隔开。
2、关联数组
（1）语法：
var myhash= {”key1″:”val1″, “key2″:”val2″ };//obj（2）var
myhash= {key1:”val1″, key2:”val2″ };//obj-也可以ps：跟json格式几乎相同，但是json格式要求更加严格(里面的键值对必须使用双引号)，但json只能作为一种格式标准，如果要对其进行操作必须转换成关联数组对象(obj)。
2、简单操作
（1）向Hash关联数组添加键值
// 添加一个新键 newkey ，键值为 newval myhash[”newkey”] = “newval”;（2）删除Hash关联数组已有键值
// 删除一个键 newkey ，同时，该键值对应的 newval 也就消失了 delete myhash[”newkey”];（3）遍历Hash关联数组
// 遍历整个hash 数组 for (key in myhash) { val = myhash[key]; }（4）获得值 方式1.myhash.key1 方式2.myhash.key23、json
格式要求：
{”key1″:”val1″, “key2″:”val2″ };//严格按照此格式，操作可依照关联数组的操作
2.至始至终服务器给客户端的数据都只是字符串，因此为了让其能够在js中对其进行必要的操作，可以通过eval()进行转换成js可执行的对象。
因此jQuey中提供的$.parseJSON()是有局限的，如果是上面1提到的这种情况则就必须使用eval()进行转换，然后再通过$.each(objs,function(i,o){...})进行操作
页面代码：
代码如下：
<body> <input type="button" value="send ajax json" onclick="sendAjaxByjson();"/> <input type="button" value="send ajax array" onclick="sendAjaxByarray();"/></body> <script type="text/javascript"> function sendAjaxByjson(){ $.post("json",{},function(data){ var obj=data; alert(typeof obj);//string //var a=eval(obj);不解，不注释则会报错.. var strToobj=$.parseJSON(obj); alert(strToobj.name); alert(typeof strToobj)//obj var obja={'name':'techbirds','age':'23','sex':'male'}; alert(typeof obja);//obj alert(obja['name']+":"+obja.age); delete obja['name']; }); } function sendAjaxByarray(){ $.post("array",{},function(data){ var str=data; alert(typeof str);//string alert(typeof eval(str));//object var obja=[1,2,3,4,5]; alert(typeof obja);//object }); } </script>后台代码：
代码如下：
@Override protected void service(HttpServletRequest req, HttpServletResponse reps) throws ServletException, IOException { Map<String, Object> jsonMap=new HashMap<String, Object>(); jsonMap.put("name", "techbirds"); jsonMap.put("age", 23); jsonMap.put("sex", "male"); reps.getWriter().print(JSONObject.fromObject(jsonMap).toString()); reps.getWriter().flush(); reps.getWriter().close(); }代码如下：
@Override protected void service(HttpServletRequest req, HttpServletResponse reps) throws ServletException, IOException { String array="[1,2,3,4,5,6]"; reps.getWriter().print(array); reps.getWriter().flush(); reps.getWriter().close(); }一个json对象数组的json字符串:
var str=[{"Price":12,"Name":"aaa","Age",22},{"Price":24,"Name":"bbb","Age",33}];在前台，使用jquery的parseJSON方法来进行解析，并用jquery的foreach的方法来进行解析，代码如下：
var jsonarray= $.parseJSON(str);alert(jsonarray);$.each(jsonarray, function (i, n){ alert(n.Price);}var jsonarray= $.parseJSON(str);$.each(eval("(" + jsonarray+ ")"), function (i, n) { alert(n.Price);}按照ECMA262第五版中的解释，JSON是一个提供了stringify和parse方法的内置对象，前者用于将js对象转化为符合json标准的字符串，后者将符合json标准的字符串转化为js对象。json标准参考<a href="http://json.org/" rel="external nofollow" target="_blank" target="_blank">json.org</a>。（其实将符合json标准的字符串转化为js对象可以用eval，但是eval性能相对差且存在安全隐患（会执行json字符串中的代码），本文仅写JSON）
转义字符（）对JSON.parse方法有什么影响呢？
一般来说在JSON.parse的参数包含转移字符的时候会遇到两次转义的问题，其实第一次是字符串本身的转义，第二次是将真正转为js对象的转义。
例子一：
将字符串'{"a":"b","b":""}'传递给JSON.parse，首先解析器提取单引号括起来的字符串时认为第一个转义第二个 第三个转义第四个，也就是说实际可输出字符串是{"a":"b","b":""}（可通过console.log('{"a":"b","b":""}')验证），之后正式转为js对象的时候还有一次转义，也就是实际输出字符转中的第一个转义第二个（此时只有两个）。所以console.log(JSON.parse('{"a":"b","b":""}') );输出结果为Object {a: "b", b: ""}，也就是说实际显示的数据为一个（实际可输出一个说明在此之前还有一个）。
例子二：
var obj = { a : "b", b : "", c : { b : "", a : { b : "" } } }; var json_str = JSON.stringify(obj); console.log( JSON.stringify(obj) ); console.dir(JSON.parse(json_str)); console.dir(JSON.parse('{"a":"b","b":"","c":{"b":"","a":{"b":""}}}')); 
根据转义规则，实际输出一个在这个之前必定有一个。所以如上第一行输出按照书写来说为'{"a":"b","b":"","c":{"b":"","a":{"b":""}}}'，可通过第三条输出来验证。
总结：如果想在js对象中出现一个，需要在json字符串中出现四个 。