通过代码示例学习JSon、AJAX、JQuery和跨域访问的应用技术

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

前 言

JSON采用完全独立于语言的文本格式，从而使得在 JavaScript相关程序中处理JSON

格式的数据不需要应用任何特殊的 API或软件工具包，这使得JSON成为理想的数据交换

语言

。

随着Web应用的普及及AJAX相关应用的深入，客户端和Web服务器端需要频繁地交

互数据；同时随着移动设备的普及，客户端的访问设备也逐渐多样化。如何使得同一Web

服务器能够响应不同的终端设备，并且都能够进行数据交互。目前比较好的技术实现手段

是应用JSon相关的技术。

作者根据自身多年的软件开发实践和经验总结，结合多年的IT职业培训的教学和高校

软件学院一线的教学工作体验，在本系列文档中将从多个不同的方面和通过具体的程序代

码示例为读者介绍JSon及相关的应用技术。本文档主要涉及JSon的语法规则、JSon在AJAX

中的应用、JQuery对JSon的技术支持和应用JSonp协议实现跨域访问技术和应用示例。

欢迎读者下载相关的技术资料阅读和收藏，并提出良好的建议。感兴趣的读者可以在

百度文库页面中搜索“杨少波”，将能够搜索到杨教授工作室精心创作的优秀程序员职业提

升必读系列技术资料。

这些资料将系统地从软件设计和开发实现的“设计思想”、“管理策略”、“技术实现”

和“经验方法”等方面与读者进行充分的交流，也欢迎读者发表和交流自己对软件开发、

课程设计、项目实训、技术学习的心得体会。

1

杨教授工作室，版权所有，盗版必究， 1/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

本 文 目 录

1.1 JSON相关技术基础 ..................................................................................................................... 4

1.1.1

1.1.2

1.2

JSON相关的技术基础 ......................................................................................................... 4

JSON对象表示的语法 ......................................................................................................... 5

JSON和JavaScript之间转换 .................................................................................................... 12

1.2.1

1.2.2

将JSon格式的字符串转换为JavaScript对象 ................................................................. 12

转换技术的应用示例 ......................................................................................................... 16

1.3 JSON系统包 ................................................................................................................... 24

1.3.1

1.3.2

1.3.3

JSON的官方网站 ............................................................................................................... 24

JSON 系统库中的stringify 函数 ..................................................................................... 25

JSON 系统库中的parse函数 ........................................................................................... 28

1.4 在AJAX中应用JSon实现客户/服务器之间交换数据 .......................................................... 31

1.4.1

1.4.2

1.4.3

JSon格式的字符串特别适合于AJAX的数据传递......................................................... 31

获得服务器端返回的JSON对象字符串 .......................................................................... 32

在客户端JS程序中向服务器端程序发送JSON对象字符串 ........................................ 39

1.5 JQuery和JSON相互配合应用AJAX技术 ............................................................................. 46

1.5.1

1.5.2

1.5.3

JQuery中与AJAX技术相关的几个函数 ......................................................................... 46

$.getScript()和$.getJSON()函数的各种调用形式示例 ..................................................... 49

$.ajax()函数的各种调用形式示例 ..................................................................................... 52

1.6 JavaScript中的跨域访问技术及示例 ........................................................................................ 55

1.6.1

1.6.2

1.6.3

JSONP协议及相关实现技术............................................................................................. 55

应用JQuery实现跨域访问示例 ........................................................................................ 59

应用普通的JavaScript脚本实现跨域访问示例 ............................................................... 68

1.7 JQuery和AJAX技术相互配合的应用示例 ............................................................................. 70

1.7.1

1.7.2

1.7.3

构建相关的JSP页面和JavaScript脚本代码 ................................................................... 70

构建服务器端相关的Servlet程序 .................................................................................... 74

解决中文乱码的问题 ......................................................................................................... 79

1.8 动态加载页面数据的应用示例 ................................................................................................. 81

1.8.1 构建相关的页面及JS脚本程序 ........................................................................................ 81

2

杨教授工作室，版权所有，盗版必究， 2/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

1.8.2

1.8.3

测试相关的程序效果 ......................................................................................................... 84

用ajax函数读取和解析XML文件中数据的应用示例 .................................................. 84

3

杨教授工作室，版权所有，盗版必究， 3/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

1.1 JSON相关技术基础

1.1.1 JSON相关的技术基础

1、JSON是什么

JSON的全称JavaScript Object Notation，JavaScript对象表示法。它不仅是一种轻量级的数据交换格

式，同时也是JavaScript（Standard ECMA-262 3rd Edition - December 1999）语言的一个子集。

JSON采用完全独立于语言的文本格式，从而使得在 JavaScript相关程序中处理JSON格式的数据

不需要应用任何特殊的 API或软件工具包，这使得JSON成为理想的数据交换语言。

2、JSON的主要作用

其主要的作用是提供结构化数据的一种表示，而不依赖于所用的语言和平台。使用这种格式，可以

在不同语言编写的应用程序之间交换数据，而且可以在不同机器上运行相关的应用程序。

（1）JSON 可以将 JavaScript 对象转换为字符串的表示形式或者将特定格式的字符串转换回为

JavaScript 对象，最终实现JavaScript 对象的序列化和反序列化；

（2）可以在JavaScript的各个函数之间轻松地传递JSON字符串，或者在AJAX等异步请求的应用程序

中将JSON字符串从 Web 客户机传递给服务器端程序或者反传递。

3、JSON为什么能够达到与具体的编程语言无关

现代计算机语言中常见的数据结构的表示形式主要是如下的两种方式，而JSON也主要是应用这样

的表示方式。因此，JSON的数据表示形式在不同的编程语言中都可以识别和解析理解——也就是找到

了一种与语言无关的通用对象表示形式。

（1）“名称/值”对的集合

当然在不同的语言中，对采用“名称/值”对的集合的表示形式最终可能会被理解为对象（object）、

纪录（record）、结构（struct）、字典（dictionary）、哈希表（hash table）、有键列表（keyed list）或者关

联数组 （associative array）等形式，但数据关系在本质上是一样的。

（2）而“值的有序列表”在大部分语言中都被理解为数组（array）。

目前的各种编程语言如ActionScript、C、C#、ColdFusion、E、Java、JavaScript、ML、ObjectiveCAML、

Perl、PHP、Python、Rebol、Ruby、Lua等都提供对JSON的对象表示形式的技术支持。

4、JSON建构于两种数据结构的表示方式

（1）JSON格式的数据主要为两种结构形式

一个“名/值”对集合，称为对象（object）以及一个有序的值列表，称为数组（array）。而且这种数

4

杨教授工作室，版权所有，盗版必究， 4/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

据格式易于人阅读和编写（也就是具有自我描述的特性），同时也易于机器解析（相关的程序自动化地

处理）和生成。

（2）JSon的“单一对象”表示语法

对某个“单一对象”（也就是程序设计中普遍应用的实体PO对象）的JSon表示语法主要是应用“名

称/值”对的集合（A collection of name/value pairs）的语法定义格式。如下示例：{"userName":"张三" ,

"userSex":"m", "userAge":"40"}；表示某个用户信息对象，其中包含有名称（userName）、性别（userSex）

和年龄（userAge）三个特定的成员属性。

它被理解为对象（Object）、记录（Record）、结构（Struct）、字典（Dictionary）、哈希表（Hash Table）、

有键列表（Keyed List）或者关联数组 （Associative Array）等名称。此种表示方式其实和Java语言中

的Map集合的数据存储形式相似。

（3）JSon的“复合对象（集合或者数组）”表示语法

对“复合对象（集合或者数组）”的JSon表示语法主要是应用值的有序列表（An ordered list of values）

的表示形式，在大部分语言中，它被理解为数组（Array）或者集合。如下示例表示某个集合对象，其

中包含有多个“单一的实体PO对象”：

[

{"userName":"张三" , "userSex":"m", "userAge":"40"},

{"userName":"李四" , "userSex":"f", "userAge":"30"},

{"userName":"王五" , "userSex":"m", "userAge":"20"}

]

5、JSon格式字符串中的花括弧、方括弧和冒号、逗号的含义

（1）花括弧“{ }”表示一个“容器”

（2）方括号“[ ]”装载数组，从而可以表示一批对象

（3）“成员属性名称”和“数据值”之间用冒号“:”隔开

（4）数组或者集合中的各个成员元素对象通过逗号“,”相互隔开

1.1.2 JSON对象表示的语法

1、单个JSon格式的对象（Java语言中的实体对象）的字符串表示形式

一个对象以“{”（左括号）开始，“}”（右括号）结束，每个“属性名称”后跟一个“:”（冒号）；

“‘名称/值’ 对”之间使用“,”（逗号）分隔。如下示例：

{

5

杨教授工作室，版权所有，盗版必究， 5/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

"userName":"张三", "userSex":"m", "userAge":"40"

};

其中的属性名（userName、userSex和userAge）必须是字符串类型的名称，而且都必须要包围在双

引号中；而每个名称所对应的值（value）也必须是用双引号括起来的字符串（string）、数值(number)、

true、false、 null、对象（object）或者数组（array）等形式，而且这些数据之间可以再次嵌套。

因此，下面的代码示例不是一个合法的JSON表示，因为其中的属性名没有包围在双引号中：

{ userName:"张三", userAge:23 }。

总结：

JSon格式的对象是“键：值”对的集合，一个JSon格式的对象开始于“{”，结束于“}”。每一个

属性名和值之间要用“：”分隔，而属性之间要用“，”分隔。

2、JSon格式的对象集（对象数组）的字符串表示形式

当需要表示一组对象（对象集合或者对象数组）时，JSON 不但能够提高数据的可读性，而且还可

以减少数据描述的复杂性。如果使用 JSON表示，就只需将多个带花括号的对象定义为一个分组。一个

对象数组以“[”（左中括号）开始，“]”（右中括号）结束，各个成员元素和元素内的值之间都使用“,”

（逗号）分隔。

{

"AllPersons":[

{"userName":"张三" , "userSex":"m", "userAge":"40"},

{"userName":"李四" , "userSex":"f", "userAge":"30"},

{"userName":"王五" , "userSex":"m", "userAge":"20"}

]

};

注意在对象数组中的属性名“key”和属性值“value”都必须要应用“”包围。在上面的示例中，

定义了一个名为 AllPersons的对象数组变量，其值是包含有三个成员对象的数组，每个对象元素代表一

个人的信息，其中包含姓名、性别和年龄等成员属性。

总结：

对象数组是有顺序的值（其实是一个JSon格式的对象）的集合，一个数组开始于"["，结束于"]"，

各个成员元素值（各个JSon格式的对象）之间要用“，”分隔。

3、一组JSon格式的对象集（二维数组）的字符串表示形式

如果将前面的对象集再次进行嵌套在另一个更大的对象集合中，将可以形成一组对象集——也就是

6

杨教授工作室，版权所有，盗版必究， 6/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

类似于二维数组的描述形式。如下示例：

{"AllPersonGroups":[

{"AllPersons":[

{"userName":"张三","userSex":"m","userAge":"40"},

{"userName":"李四","userSex":"m","userAge":"28"},

{"userName":"王五","userSex":"m","userAge":"27"}

]

},

{"AllStudents":[

{"userName":"张三","userSex":"m","userAge":"40"},

{"userName":"李四","userSex":"m","userAge":"28"},

{"userName":"王五","userSex":"m","userAge":"27"}

]

},

{"AllTeachers":[

{"userName":"张三","userSex":"m","userAge":"40"},

{"userName":"李四","userSex":"m","userAge":"28"},

]

}

]

};

对象数组可以再次组装和组合为更大的对象集，但定义的形式基本一致。因此可以描述各种复杂形

{"userName":"王五","userSex":"m","userAge":"27"}

式的数据。

总结：

如果在一个对象数组中的每个成员元素又是一个对象数组，则将构建出对象集（二维数组）的表示。

正是由于JSON支持数据结构关系的嵌套，因此可以描述复杂的数据关系。

4、利用JSON的对象表示形式创建对象示例

通过将 JSON 格式的数据字符串直接赋值给一个JavaScript对象，就可以创建出一个新的

JavaScript 对象变量——从而可以实现JavaScript 对象变量的反序列化。因此通过JSON，在一定程度上

7

杨教授工作室，版权所有，盗版必究， 7/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

克服了JavaScript对象无法作为参数序列化传递的技术问题——而且也可以将JavaScript 对象变量序列

化为普通的字符串。

（1）创建一个没有任何成员属性的JavaScript对象

var someOneObj = {};

将一个空的JSON格式的对象字符串赋值给某个JavaScript对象变量，将创建出一个没有任何成员

属性的JavaScript对象实例。上面的JavaScript程序代码片段的最终效果等同于下面的Java代码的效果，

创建出一个没有任何成员属性的某个类型的对象实例：

class XXXPO{

}

XXXPO someOneObj=new XXXPO();

（2）创建一个JavaScript对象并设置成员属性及这些成员属性的初始值

var someOnePersonObj = {"userName":"张三","userSex":"m","userAge":"40"};

因此，直接将某个JSON格式的对象字符串赋值给某个JavaScript对象变量，从而可以创建和实例

化出某个JavaScript对象。因为JSON能够以一种特定的字符串形式来表示JavaScript的对象变量，因此

如果将具有这样一种形式的字符串赋给任意一个JavaScript变量，那么该变量会变成一个对象引用，而

这个对象其实就是用JSON格式的对象字符串所构建出的。

（3）创建一个JavaScript对象并设置该对象中的各个成员属性和成员方法

应用JSON格式的对象字符串表示形式，不仅可以定义对象的成员属性，也还可以定义对象的成员

方法。如下的代码示例定义出一个封装某个用户信息的对象实例，在该对象实例中还定义有相关的成员

方法：

上面的代码在IE浏览器中的执行结果如下图所示，之所以JSON格式的对象字符串能够直接作为

JavaScript对象进行处理，主要原因是因为JSON是JavaScript语言的原生数据格式——这也就意味着在

JavaScript程序代码中处理JSON的对象表示的数据不需要任何特殊的API或者工具包，JavaScript默认

将JSON当做一个对象处理。

上面的代码在FireFox浏览器中的执行结果如下图所示：

上面的代码在Google的Chrome浏览器中的执行结果如下图所示：

注意其中的成员方法的定义形式，本示例中的“showSomeInfo”为成员方法的名称（也应该要包含

在双引号内），而“function”代表该名称的成员方法的方法体。上面的代码示例在不同类型的浏览器中

的最终执行结果是一致的，表明JSon表示法具有良好的兼容性。

9

杨教授工作室，版权所有，盗版必究， 9/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

5、完整的应用示例

"/TR/xhtml1/DTD/">

上面的代码示例在IE浏览器中的执行结果如下图所示：

6、更复杂的应用示例

创建一个更复杂的对象，包括有成员属性和成员方法和嵌套其他对象和对象数组等成员，如下为代

码示例：

"/TR/xhtml1/DTD/">

上面的代码示例在IE浏览器中的执行结果如下图所示：

1.2 JSON和JavaScript之间转换

1.2.1 将JSon格式的字符串转换为JavaScript对象

1、直接声明为JavaScript对象从而实现将JSon格式的字符串转换为JavaScript对象

JSON就是JavaScript对象最好的序列化形式，如果将JavaScript对象转换为文本形式，则它比采用

XML的方式表达方式更简洁也更省数据空间。JavaScript对象可以转换为一个JSON形式的字符串，从

而实现将JSON形式的字符串从 Web 客户机传递到服务器端程序和从服务器端程序传递到客户端相关

的程序中，最终实现客户和服务器之间的信息交换。

2、回顾JavaScript语言中动态为一个对象添加属性定义的语法

首先熟悉在JavaScript语言中动态为一个对象添加成员属性定义的语法规则，如下的示例代码是为

jsonAllPersonsObject对象动态添加一个名称为AllPersons的属性定义：

上面的JavaScript对象定义其实是应用JSon格式的字符串转换为JavaScript对象而达到的效果。

3、将JavaScript对象的成员属性赋值为JSon对象的字符串表示形式

通过为JavaScript中的某个对象动态地添加属性定义，但该对象属性为一个JSon对象的字符串表示

形式，从而实现将JSon对象的字符串表示形式转换为JavaScript中的某个对象的成员属性值。

（1）单个对象的代码示例

在本示例中不仅定义出某个对象的各个成员属性，而且也为该对象定义出相关的成员方法。如下为

在浏览器中的执行结果示图：

（2）对象数组的代码示例

上面的代码示例是为名称为jsonAllPersonsObject的对象动态添加一个名称为AllPersons的属性，该

属性的值是一个JSon对象集（数组），当将这个数组放进 JavaScript 变量之后，就可以很轻松地访问它。

利用这样的语法，可以处理任何 JSON 格式的数据，而不需要使用任何额外的 JavaScript 工具包

或 API。改进上面的代码以表格的方式显示的示例：

"/TR/xhtml1/DTD/">

上面的代码在浏览器中执行的效果如下：

15

杨教授工作室，版权所有，盗版必究， 15/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

1.2.2 转换技术的应用示例

1、本示例的另一种实现方法的代码示例

"/TR/xhtml1/DTD/">

2、本示例的另一种实现方法的代码示例

"/TR/xhtml1/DTD/">

3、上面的代码示例也可以采用如下的形式

（1）首先定义一个对象，然后对该对象进行实例化，代码示例如下：

杨教授工作室，版权所有，盗版必究，

20

20/87页

，

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

（2）要想访问 AllPersons列表的第一个元素条目对象的姓名，只需在 JavaScript 脚本程序中使用下面

这样的代码（数组索引是从零开始的）：sons[0].name。

（3）也可以对转换后的JavaScript对象进行修改

因此，将JSON形式的字符串转换为 JavaScript 对象之后，就可以修改对应变量中的数据，而在

修改任何JSON格式的数据时并不需要使用任何额外的 JavaScript 工具包或 API。

4、对采用JSon字符串表示的JavaScript对象集合实现增、删、改和查操作

（1）定义一个JSon格式的字符串并转换为JavaScript对象

var jsonAllPersonsObject={ "AllPersons":[

{"name":"张三","sex":"m","age":"40"},

{"name":"李四","sex":"m","age":"28"},

{"name":"王五","sex":"m","age":"27"}

]

21

杨教授工作室，版权所有，盗版必究， 21/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

};

（2）对JSon对象集实现增、删、改和查操作

（3）对JSon对象集实现插入、删除等操作

23

杨教授工作室，版权所有，盗版必究， 23/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

注意本示例中应用了包中的stringify()函数获得JavaScript对象所对应的JSon文本字符串。

1.3 JSON系统包

1.3.1 JSON的官方网站

1、JSON的官方网站/

2、下载/

JSON的官方网站提供了对JavaScript对象实现JSON串行化的代码库—，可

以从官方网站获得该系统库文件。

24

杨教授工作室，版权所有，盗版必究， 24/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

将其引入然后就可以简单地使用下面的代码：String myObjectInJSON =String()

的方式将JavaScript语言中的对象myObject转换成JSON格式的文本数据。这样可以将任何的

JavaScript 对象转换为 JSON 文本。

但一般都采用JSON 系统库中的stringify 函数实现这样的转换以获得更加标准格式的JSON格式的

文本数据。

1.3.2 JSON 系统库中的stringify 函数

1、应用JSON 系统库中的stringify 函数实现将JavaScript对象转换为JSon格式的字符串

（1）主要的作用

在代码中应用JSON 系统库中的stringify 函数可以实现将JavaScript对象转换为JSon格式的字符

串，从而获得JSon对象所对应的字符串。最终也就实现了JavaScript对象得序列化的过程。

（2）为什么要解决JavaScript对象的序列化技术问题

在Web应用中如何将客户端JavaScript程序代码中所产生的各种数据传递到Web服务器端相关的程

序中，而且Web服务器端相关的程序的技术实现平台有很多，如何实现与Web服务器端技术实现无关？

当然，字符串是最理想的数据交互格式。

因此，有比要解决JavaScript对象的序列化技术问题，从而增强Web客户端程序的应用能力和达到

共享不同Web服务器端的相关资源。

（3）应用的要求

但需要在项目中添加系统库文件，这可以从JSON的官方网站（/）

下载系统库文件并在页面中需要添加系统库文件。

2、ify(value [, replacer] [, space])函数中的各个参数说明

（1）value

它是必需，代表要转换的 JavaScript 值。该值通常为JavaScript对象或JavaScript数组等形式。

（2）replacer

它是可选的参数，表示转换结果的函数或数组。

 如果 replacer所表示的可选参数为一个函数，则 ify会调用该函数，并传入每个成

员的键和值，最后使用该函数的返回值作为转换的结果字符串而不是原始值的字符串；如果此

函数返回undefined，则排除所有的成员不输出，此时的对象表示将是一个空字符串""。

 如果 replacer 为一个数组，则仅转换该数组中具有的键值的成员。成员的转换顺序与键在数组

中的顺序一样。 当 value 参数也为数组时，将忽略 replacer 数组。

25

杨教授工作室，版权所有，盗版必究， 25/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

（3）space

该参数同样也是可选的参数，主要是实现向返回结果值的JSON文本中添加缩进、空白和换行符等

排版控制符号以使所转换产生的结果字符串更易于人阅读。

 如果省略 space这个可选的参数，则将生成返回值文本，而没有任何额外空白；

 如果 space 为一个数字，则返回值文本在每个级别缩进指定数目的空格。如果 space 大于 10，

则文本缩进 10 个空格。

 如果 space 是非空字符串（例如“t”），则返回值文本在每个级别中缩进字符串中的字符数。

如果 space 是长度大于 10 个字符的字符串，则使用前 10 个字符。

总结：

通过第2和第3个参数，可以控制转换后的结果和排版格式。

3、ify()函数的执行顺序

在序列化过程中，如果其中的value 参数提供有toJSON的方法，则 ify函数会首先调

用其中的toJSON 方法并将toJSON 方法的结果作为自己的转换结果。如果toJSON方法不存在，则将

使用原始值；紧接着，如果提供有replacer的可选的参数，则该值（原始值或 toJSON 返回值）将替换

为 replacer 参数的返回值；最后，根据可选的space 参数向该值添加空白以生成最终的 JSON 文本。

4、相关的技术实现的代码示例

ify()函数的一个典型的用途是与JSon对象相关的程序代码在调试时，可以通过

ify函数将相关的JavaScript对象转换为JSon格式的对象字符串，从而了解程序的正确性。

下面通过具体的示例介绍ify()函数的应用规则。

（1）在页面中需要添加系统库文件，如下代码示例：

（2）代码示例

上面的代码示例定义一个JavaScript对象allPersonsArray（其实为对象数组），然后应用JSON 系统

库中的stringify 函数实现将该JavaScript对象转换为JSon格式的字符串。对比转换后的JSon格式的字

符串与声明的文本区别，完全保持一致性。本示例代码的执行结果如下：

而如果不应用stringify 函数进行转换，而是直接输出JavaScript对象，将可能出现错误。比如将上

面的n('转换后的JSon格式的字符串：'+textOneJSonObjec+'

');语句改变为如下的语句：

n('转换后的JSon格式的字符串：'+allPersonsArray+'

');的执行结果如下（类型不匹配

的错误）：

5、相关的技术实现的代码示例

（1）在页面中需要添加系统库文件，如下代码示例：

27

杨教授工作室，版权所有，盗版必究， 27/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

（2）代码示例

本示例代码的执行结果如下：

1.3.3 JSON 系统库中的parse函数

1、JSON系统库中的parse函数的主要作用

应用JSON系统库中的parse函数可将某个JSon字符串转换为JavaScript对象——在应用中不仅可

以将JavaScript对象转换为标准的JSON格式的文本字符串，也可以将标准的JSON格式的文本字符串

数据转换为JavaScript对象，这可以通过JSON系统库中的parse函数实现此功能。

2、在页面中需要添加系统库文件

如下代码示例：

28

杨教授工作室，版权所有，盗版必究， 28/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

3、基于“不标准”的JSON格式的文本字符串的转换示例

（1）属性名称没有应用双引号

但JSON系统库中的parse函数在解析转换某个字符串时只会识别标准的JSON格式的文本字符串，

因此如果字符串不满足标准的JSon格式，将抛出下面的异常错误，应用它可以更安全并最终获得

JavaScript对象。其中由于normalJavaScriptString不是标准的JSON格式的文本字符串（知道是什么错误

吗？），因此在解析中将出现下面的错误——但有的浏览器可能会屏蔽错误显示而不出现错误提示信息

框。

本示例主要的错误原因是各个属性名称没有采用双引号包含，正确的字符串如下：

var jsonFormatString='{"AllPersons":[{"name":"张三","sex":"m","age":"40"}, {"name":"李四

29

杨教授工作室，版权所有，盗版必究， 29/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

","sex":"m","age":"28"},{"name":"王五","sex":"m","age":"27"}]}';

（2）不能应用单引号而必须要应用双引号

上面的测试用的JSon对象字符串中的各个属性名称和值是采用单引号包含的，同样也是错误的，

而必须是采用双引号，正确的字符串如下（由于外部已经有了双引号，因此需要应用转义符“”）：

var jsonFormatString="[{"AllPersons":[{"name":"张三","sex":"m","age":"40"}, {"name":"李

四","sex":"m","age":"28"},{"name":"王五","sex":"m","age":"27"}]}]";

4、调用JSON系统库中的parse函数实现对JSon字符串转换为JavaScript对象的示例

上面的代码中的“var someOneJSonObject = (jsonFormatString);”语句实现将某个JSon字

符串转换为JavaScript对象someOneJSonObject。

1.4 在AJAX中应用JSon实现客户/服务器之间交换数据

1.4.1 JSon格式的字符串特别适合于AJAX的数据传递

1、JSON就是JavaScript对象最好的序列化形式

因此，在应用中可以实现JavaScript对象和JSon格式的字符串之间的相互转换，从而实现JavaScript

对象的序列化和反序列化。

2、在AJAX的应用中采用JSon格式的字符串代替XML格式的字符串

在AJAX应用中将客户端的一个JavaScript对象转换为JSon格式的字符串传递到服务器端的程序

中，然后在服务器端再将JSon格式的字符串反转换回（也就是反序列化）为某个服务器端的程序对象。

因为如果能够将JavaScript对象直接转换为文本形式，则比采用比如XML格式的方式表达更简洁也更

高效。JavaScript对象可以最终转换为一个JSON形式的字符串，在网络客户/服务器之间可以自由传递

（将JSON形式的字符串从 Web 客户机传递给服务器端程序和从服务器端传递到客户端）和最终实现

交换信息。

3、JSON数据表示与XML数据表示的对比

（1）可读性

JSON和XML两者在数据表示方面缩体现出的可读性可谓不相上下，而且也都能够表示数据的层

次关系（或者体现父子关系）。在这个方面，两者很难分出胜负。

（2）可扩展性

XML天生有很好的扩展性，所有的标签都可以由使用者自定义；而JSON在这个方面，同样也具

有良好的可扩展性。在这个方面，两者同样也很难分出胜负。

（3）编码难度

在应用XML数据表示时，相关的组织或者企业提供有许多丰富的XML编码和解析的工具软件和

相关的API系统库，比如Dom4j、JDom等；JSON也有由组织所提供的工具和第3方组织缩提

供的开源插件等。

31

杨教授工作室，版权所有，盗版必究， 31/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

但从实际的编程应用来看，应用JSON的数据表示格式的编码明显比应用XML的数据表示形式要

简单、容易和方便，这也是使得JSon得以普及应用的主要一个原因。

（4）解码难度

对XML数据表示的解析在简单的数据关系的应用中也许步复杂，一旦数据的层次关系比较深时，

解析其中的父标签节点、子标签节点、标签节点中的成员属性、标签节点本身的标签内容时则是比较复

杂的，因为W3C的DOM API设计的实在是“让人不可理解”；而对JSON的数据表示的解析难度则相

对比较简单和容易，这也是使得JSon得以普及应用的另一个主要原因。

1.4.2 获得服务器端返回的JSON对象字符串

1、转换的基本工作原理

服务器端相关的程序（Servlet或者Action类）向浏览器客户端的JavaScript程序返回JSON对象

字符串，然后应用()函数将服务器端相关的程序返回的JSON对象字符串转换为JavaScript

对象，然后应用该JavaScript对象获得服务器端的对象数据。

下面通过具体的示例说明如何实现在服务器端相关的程序中发送JSON对象字符串，如何在客户端

的JavaScript程序解析和提取出相关的对象。

2、体现JSON相关技术工作原理的示例

（1）设计一个JSP页面，并在该页面中引用程序文件

<%@ page pageEncoding="gb2312" isELIgnored="false" %>

onclick="sendRequestToServlet('${tPath}/ajaxResponseServlet?actionType=1',1)"

>点击获得服务器返回的单个JSON对象字符串

onclick="sendRequestToServlet('${tPath}/ajaxResponseServlet?actionType=2',2)"

>点击获得服务器返回的单个元素的JSON对象数组字符串

onclick="sendRequestToServlet('${tPath}/ajaxResponseServlet?actionType=3',3)"

>点击获得服务器返回的JSON对象数组字符串

36

杨教授工作室，版权所有，盗版必究， 36/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

（2）设计相关的后台Servlet程序

在下面的Servlet程序中向客户端的JavaScript程序返送JSon格式的对象字符串。

package t;

import ption;

import riter;

import tException;

import rvlet;

import rvletRequest;

import rvletResponse;

public class AjaxResponseServlet extends HttpServlet {

public AjaxResponseServlet() {

}

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

super();

tentType("text/html; charset=GBK");

PrintWriter out = ter();

String actionType=ameter("actionType");

switch(nt(actionType)){

case 1:

(buildOneObjectJSONString());

break;

case 2:

(buildOneElementObjectArrayJSONString());

break;

case 3:

(buildOneObjectArrayJSONString());

break;

37

杨教授工作室，版权所有，盗版必究， 37/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

}

/**

*/

}

();

();

注意在JSon格式的字符串中的“属性名”和对应的“属性值”都应该要用双引号。

}

public String buildOneObjectJSONString(){

}

public String buildOneElementObjectArrayJSONString(){

}

public String buildOneObjectArrayJSONString(){

}

String jsonAllObjectArrayString=

"[{"name":"张三","sex":"m","age":"40"}," +

"{"name":"李四","sex":"f","age":"37"}," +

"{"name":"王五","sex":"m","age":"30"}]";

String jsonAllObjectArrayString=

"[{"name":"张三","sex":"m","age":"40"}]";

String jsonOneObjectString="{"name":"张三","sex":"m","age":"40"}";

return jsonOneObjectString;

return jsonAllObjectArrayString;

return jsonAllObjectArrayString;

在项目的实现中，为了达到程序的通用性，在服务器端都统一返回对象集，即使只有一个对象也包

装到对象集中返回到客户端，在客户端按照对象集的形式迭代出目标对象。

（3）在项目的页面中引用JSON系统库中的parse函数所在的系统库文件

38

杨教授工作室，版权所有，盗版必究， 38/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

（4）测试程序的效果

1.4.3 在客户端JS程序中向服务器端程序发送JSON对象字符串

下面的示例实现在客户端的JavaScript程序中向服务器端相关的程序发送JSON对象字符串，然后

在服务器端的相关程序中将JSON对象字符串转换为Java中的对象，从而获得客户端程序发送的对象数

据。

1、设计示例中的页面

<%@ page pageEncoding="gb2312"%>

onclick="sendRequestToServlet('${tPath}/ajaxResponseServlet?actionType=4',4)">

点击向服务器传送JavaScript对象的JSON对象字符串

onclick="sendRequestToServlet('${tPath}/ajaxResponseServlet?actionType=5',5)">

点击获得服务器返回的JSON字符串数组字符串

2、服务器端后台的AjaxResponseServlet程序代码

package t;

import ption;

43

杨教授工作室，版权所有，盗版必究， 43/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

import riter;

import tException;

import rvlet;

import rvletRequest;

import rvletResponse;

public class AjaxResponseServlet extends HttpServlet {

public AjaxResponseServlet() {

}

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

super();

tentType("text/html; charset=GBK");

PrintWriter out = ter();

String actionType=ameter("actionType");

switch(nt(actionType)){

case 4:

String oneJSonObjecString=ameter("oneJSonObjecStringName");

/**

*由于在请求的参加数中包含有中文字符串，同时又由于是Get请求，需要进行中文转码

*/

oneJSonObjecString=new String(es("ISO8859-1"),"gb2312");

n(oneJSonObjecString);

/**

* 本示例目前没有进行相关的功能处理，只是将所获得的JavaScript对象直接返回

到客户端。实际项目中应该要转换为Java程序对象，然后在Java程序中进行处理。

*/

(oneJSonObjecString);

break;

case 5:

(buildOneStringArrayJSONString());

44

杨教授工作室，版权所有，盗版必究， 44/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

}

}

}

break;

();

();

public String buildOneStringArrayJSONString(){

}

String jsonStringArrayJSONString="["张三","李四","王五","赵六"]";

return jsonStringArrayJSONString;

3、测试

点击上面示图中的“点击向服务器传送JavaScript对象的JSON对象字符串”的链接，将在控制台

中出现如下的执行结果，该结果为客户端的JavaScript发送的JSon格式的对象字符串，同时在服务器端

程序中再将该JSon格式的对象字符串发送到浏览器的JavaScript程序中，最终应用AJAX技术获得目标

JSON对象，并在浏览器中显示输出——如上图所示。

如果点击页面中的“点击获得服务器返回的JSON字符串数组字符串”，将获得在服务器端发送的

JSon格式的对象字符串，再应用()函数解析转换为JSON对象，并从对象中提取出相关的对

象属性数据值。

45

杨教授工作室，版权所有，盗版必究， 45/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

1.5 JQuery和JSON相互配合应用AJAX技术

1.5.1 JQuery中与AJAX技术相关的几个函数

利用JQuery中的这些相关函数可以方便地进行AJAX的功能操作，并应用JSon的数据格式规范进

行数据的传输。相关的JQuery函数主要有：$.get()、$.post()、$.ajax()和$.getJSON()等，下面分别说明这

些函数的主要功能和使用方法。

1、$.get(url, [data], [callback] , [type])函数

（1）主要的功能

该函数通过远程 HTTP GET 请求载入服务器端返回的信息，其中的URL参数为请求的服务器端的

URL地址，而data为请求数据的列表（采用“Key/value”的“键-值”对的参数），callback为请求成功

后的回调函数，该回调函数接受两个参数，第一个为服务器返回的数据，第二个参数为服务器的返回状

态——从而可以了解当前操作的执行结果状况，是可选参数。

而其中最后的type为可选的String类型的参数，指定从服务器端返回到浏览器客户端的结果数据内

容的格式，可以为xml、html、script、json、text和_default（默认，为字符串格式）等形式。

（2）应用示例

$.get(webContext+"/",

{actionType:"userLogin",userName:$("#userNameID").val(),userPassWord:$("#userPassWordID

").val()}, getRequestResponseResult,"html");

而其中的getRequestResponseResult 函数的定义如下，其中的returnResultData参数为服务器返回的

结果数据，而textStatus代表返回的状态：

function getRequestResponseResult (returnResultData, textStatus){

}

2、$.post(url, [data], [callback], [type])函数

（1）主要的功能

该函数通过远程 HTTP Post 请求载入服务器端返回的信息，其中的URL参数为请求的服务器端的

URL地址，而data为请求数据的列表（采用“Key/value”的“键-值”对的参数），callback为请求成功

后的回调函数，该回调函数接受两个参数，第一个为服务器返回的数据，第二个参数为服务器的返回状

态——从而可以了解当前操作的执行结果状况，是可选参数。

而其中最后的type为可选的String类型的参数，指定返回的结果数据内容的格式，可以为xml、html、

script、json、text和_default（默认，为字符串格式）等形式。如果设置这个参数为：json，那么返回的

46

杨教授工作室，版权所有，盗版必究， 46/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

数据格式则是JSon格式的。如果没有设置，就和$.get()返回的默认格式一样，都是字符串。

（2）应用示例

$.post(webContext+"/",

{

actionType:"userLogin",userName:$("#userNameID").val(),

userPassWord:$("#userPassWordID ").val()

},

);

3、$.ajax(opiton)函数

（1）主要的功能

$.ajax()这个函数的功能很强大，可以对ajax进行许多精确的控制，从而满足应用的个性化的需要。

因为它是JQuery 底层的 AJAX 实现。而简单易用的高层实现可以通过$.get或$.post等函数实现，方便

应用开发。

由于应用$.ajax()函数能够返回其创建的XMLHttpRequest对象，因此通过相应的选项，可以获得更

多的应用灵活性。

（2）参数为固定格式的“键—值”对，主要的键名选项如下

1）asyncBoolean

在默认设置值true下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。

注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

2）data

发送到服务器端相关程序的String格式的请求数据，在GET 请求时将附加在URL后。必须为

“Key/value”的“键-值”对格式，如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1",

"bar2"]} 转换为 '&foo=bar1&foo=bar2'。

3）type

请求的方式（POST或GET），默认为GET。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也

可以使用，但仅在部分浏览器提供对它的支持。

4）url

发送请求的地址字符串。

5） success

请求成功后的回调函数，该函数的参数是由服务器返回。

（3）应用示例

47

杨教授工作室，版权所有，盗版必究， 47/87页

postRequestResponseResult,"json"

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

$.ajax({

type:"POST",

url:webContext+"/",

data:{

actionType:"userLogin_ByAjax",userName:$("#userName").val(),

userPassWord:$("#userPassWordID ").val()

},

success:ajaxPostRequestResponseJSonResult,

datatype:"json"});

上面示例中的ajaxPostRequestResponseJSonResult代表函数调用成功后的回调函数，在该函数中获

得服务器端相关程序的返回值，并对返回值进行处理。

4、$.getJSON(url,[data],[callback])函数

（1）$.getJSON()函数的功能

向服务器发送HTTP GET方式的请求以载入服务器端返回的JSON结果数据。

（2）主要的参数选项

1) url：发送请求的URL地址字符串。

2) data：待发送的“Key/value”的“键-值”对格式的Map参数。

3) callback：载入成功时的回调函数。

由于该函数的返回数据格式已经是JSon格式，因此也就不再需要采用eval()函数进行格式转换。

（3）应用示例

$.getJSON(webContext+"/",

{

actionType:"userLogin_ByAjax",userName:$("#userName").val(),

userPassWord:$("#userPassWordID ").val()

},

jsonGetRequestResponseJSonResult);

上面示例中的jsonGetRequestResponseJSonResult代表函数调用成功后的回调函数，在该函数中获得

服务器端相关程序的返回值，并对返回值进行处理。

（4）遍历JSON中的每个项目的示例

$.getJSON(webContext+"/",

{

48

杨教授工作室，版权所有，盗版必究， 48/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

actionType:"userLogin_ByAjax",userName:$("#userName").val(),

userPassWord:$("#userPassWordID ").val()

},

function(returnJSonObjectArray_FromServer){

$.each(returnJSonObjectArray_FromServer, function(entryIndex, someOneEntry){

/** 遍历JSON中的每个entry，并将每个项目中的数据元素放到表格单元格中显示输出 */

var trHTMLTagString ='';

trHTMLTagString +=''+ someOneEntry ['userName']+'';

trHTMLTagString +=''+ someOneEntry ['userSex']+'';

trHTMLTagString +=''+ someOneEntry ['HomeAddress']+'';

trHTMLTagString +='';

$('#tableHeadTrTagID).after(trHTMLTagString);

});

});

代码中的“returnJSonObjectArray_FromServer”变量为服务器端相关程序返回的结果集合，对

returnJSonObjectArray_FromServer集合对象进行迭代，从而获得returnJSonObjectArray_FromServer中的

每个数据项目的值entry和该值所对应的索引编号。下面为数据表格的定义示例：

1.5.2 $.getScript()和$.getJSON()函数的各种调用形式示例

1、$.

getScript

()函数的各种调用形式示例

（1）页面中的代码示例

下面示例中的getScript函数实现通过 HTTP GET 请求载入并执行一个 JavaScript 程序文件。

（2）'脚本的代码示例

var someUserInfos = [

{

"userName": "张三",

"userSex": "男"

},

{

"userName": "李四",

"userSex": "女"

},

{

"userName": "李四",

"userSex": "男"

}

];

var userInfoDivTagString = '';

$.each(someUserInfos, function(oneUserInfoIndex, oneUserInfo) {

userInfoDivTagString += '

});

50

杨教授工作室，版权所有，盗版必究， 50/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

$('#userInfoDivTagID').html(userInfoDivTagString);

2、应用$.

getScript

()函数获得新浪提供的天气天气预报

执行后的结果如下：

2、$.getJSON()函数的各种调用形式示例

（1）页面中的代码示例

（2）'文件内的代码示例

[

{

"userName": "张三",

"userSex": "男"

},

{

"userName": "李四",

"userSex": "女"

},

{

"userName": "李四",

"userSex": "男"

]

}

1.5.3 $.ajax()函数的各种调用形式示例

1、应用$.ajax()函数实现$.getScript()函数相同的调用效果示例

（1）页面中的代码示例

52

杨教授工作室，版权所有，盗版必究， 52/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

（2）'脚本的代码示例

var someUserInfos = [

{

"userName": "张三",

"userSex": "男"

},

{

"userName": "李四",

"userSex": "女"

},

{

"userName": "李四",

"userSex": "男"

}

53

杨教授工作室，版权所有，盗版必究， 53/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

];

var userInfoDivTagString = '';

$.each(someUserInfos, function(oneUserInfoIndex, oneUserInfo) {

userInfoDivTagString += '

});

$('#userInfoDivTagID').html(userInfoDivTagString);

2、应用$.ajax()函数实现$.getJSON()函数相同的调用效果示例

（1）页面中的代码示例

（2）'文件内的代码示例

[

{

"userName": "张三",

"userSex": "男"

},

{

"userName": "李四",

"userSex": "女"

},

{

"userName": "李四",

"userSex": "男"

]

因此，应用$.ajax()函数可以实现前面的各个不同函数的功能，但相对比较复杂。因此，在应用中需

}

要根据应用的需要选择不同形式函数以简化代码。而且如果将dataType设置为"jsonp"（也就是采用

dataType: "jsonp"的形式），还可以实现跨域的JSon返回结果。

1.6 JavaScript中的跨域访问技术及示例

1.6.1 JSONP协议及相关实现技术

1、JSONP

55

杨教授工作室，版权所有，盗版必究， 55/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

（1）JSONP是什么

JSONP是JSON with Padding（含义是将JSON数据填充进回调函数）的略称，它是一个非官方的协

议，它允许在服务器端集成脚本标签并返回至客户端，最后通过JavaScript CallBack的形式实现跨域访

问。

（2）为什么要提出JSONP

随着公开提供的 Web 服务 API 不断增加，对Web开发者来说可重用的资源也将越来越多，从而

可以轻松地从不同 Web 源中获取所需要的资源并构建自己的应用系统。但要达到此目标，不可避免地

要解决跨域访问（访问不同Web服务器中相关的资源）的技术问题。

（3）什么是同源（域）请求

受到请求的 URL 的域必须与当前 Web 页面的域相同，这意味着浏览器将会隔离来自不同源的内

容，以防止它们之间的操作。

（4）在什么应用中需要应用JSONP协议

在Web应用系统的开发中，有时会遇到这种情况，比如要从A网站收集用户信息，提交给B网站

处理，这个时候就会涉及到跨域提交数据的问题，此时可以应用JSONP协议。

2、主要的问题

（1）安全问题

但要注意的是，由于JSONP是一种脚本注入（Script Injection）行为——JSONP 服务返回打包在函

数调用中的 JSON 响应，所以也有一定的安全隐患，这使宿主 Web 应用程序更容易受到各类攻击。跨

域的安全限制都是指浏览器客户端来说的，而远程Web服务器端相关程序是不存在跨域安全限制的。

（2）支持Get请求而不支持Post请求

目前()函数支持Get方式的跨域请求而不支持POST等其它类型的HTTP请求；它只支

持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

注：用JSONP方式实现跨域提交数据时，如果数据量太大的话会出现“400 Bad Request”的错误。因为

JSONP的跨域形式是通过URL传参的Get提交，而URL传参是有一定数量的限制。因此，如果在项目

中涉及到大数据量的提交，不能再应用JSONP的跨域技术。

此时则要应用Web代理技术，也就是在自己的Web服务器端的Servlet等程序中获得本Web系统的

客户端的AJAX Post请求，然后解析相关的请求参数再提交给远程Web服务器以完成实际的请求，最

后在Servlet程序中将远程Web服务器响应返回的数据再输出到本Web应用的客户端。

（3）错误响应不良好

没有关于 JSONP 调用的错误处理——如果动态脚本插入有效，就执行调用；如果无效，就静默失

56

杨教授工作室，版权所有，盗版必究， 56/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

败。失败是没有任何提示的。例如，不能从服务器捕捉到 404 错误，也不能取消或重新开始请求。

3、实验环境的构建

（1）构建跨域访问的运行环境

所谓同源是指标识Web服务器的三要素“域名、协议和端口”都相同，因此如果“域名和协议相同

但访问的端口不相同时”，将不再是同源访问，而是跨域访问。

因此，可以在开发中的同一台主机中启动两个Tomcat服务器，但采用不同的TCP/IP的端口号；步

署在两个不同的Tomcat服务器内的Web程序相互访问，就可以模拟跨域访问的运行环境。

（2）分别设置两个不同的Tomcat的端口号

这可以通过修改Tomcat服务器程序conf目录内的文件中的相关端口号，从而避免在同

一主机中启动的两个Tomcat产生TCP/IP端口方面的冲突。

57

杨教授工作室，版权所有，盗版必究， 57/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

主要涉及如下三个方面的端口（红色数字为原始的值）

4、HTML中的

而如果所调用的远程服务器端的脚本程序返回一定的结果，那么本地客户端

程序如果获得它的返回结果，从而也就实现了远程数据交互。

因为同源策略不会阻止将动态脚本元素插入到文档中，从而可以动态插入来自不同域的 JavaScript

脚本代码，并且这些域都携带有JSON的数据（它们是由远程Web服务器相关程序返回的结果数据）。

5、JSONP的实现原理

（1）首先在本地客户端相关的JS程序中注册一个回调函数，并将需要“回调的函数名称”传给远程的

Web服务器相关程序；

（2）服务器端相关程序获得请求参数和传递的“回调的函数名称”等参数，并按照请求的参数进行相

关的业务逻辑处理，产生出JSon的结果数据；

（3）服务器相关程序再以JavaScript的函数语法的格式动态生成一个“JavaScript的函数”，该“JavaScript

58

杨教授工作室，版权所有，盗版必究， 58/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

函数”的名字也就是前面请求传递上来的“回调的函数名称”；并将返回的JSon的结果数据直接以入参

的方式放置到该“JavaScript 函数”中，这样也就生成了一段标准的“JS语法的函数代码”；

（4）服务器相关程序最终将动态创建的“JS语法的函数代码”返回给客户端相关的JS程序，并动态执

行远程Web服务器相关程序返回的“JS语法的函数代码”，同时获得作为参数的JSon返回结果。

1.6.2 应用JQuery实现跨域访问示例

从 1.2 版本开始，JQuery就拥有对 JSONP 回调的本地支持。如果指定了 JSONP 回调，就可以加

载位于另一个域的 JSON 数据，回调的语法为：url?callback=?。JQuery自动将其中的“?”替换为要调

用的生成函数名。

1、构建远程Web服务器相关的处理程序

（1）本示例采用Servlet作为远程Web服务器请求处理的程序

当然，读者也可以根据项目中的应用需要选择Struts2等Web框架相关的控制处理程序。在MyEclipse

工具中为远程Web服务器项目添加一个Servlet程序，类名称为RemoteServerServlet。包名称为

emo。下面为创建RemoteServerServlet程序的局部截图。

（2）定义该Servlet程序的请求URL-Pattern字符串

本示例设置为“/”。

59

杨教授工作室，版权所有，盗版必究， 59/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

（3）编程该RemoteServerServlet相关的程序

package emo;

import ption;

import riter;

import tException;

import rvlet;

import rvletRequest;

import rvletResponse;

public class RemoteServerServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

public void doGet(HttpServletRequest request, HttpServletResponse response)

/**

* 得到客户端随后要回调的JS函数名，由于在客户端的JQuery代码中将JQuery默认的参数

throws ServletException, IOException {

名称“callback”改变为下面的“jsonpCallback”名称——在$.ajax函数中所定义的如下属性值：

jsonp:'jsonpCallback'。注意两者的名称必须要保持一致性。

*/

String jsonpCallbackFunctionName =ameter("jsonpCallback");

/**

* 定义向客户端返回的JSon对象字符串的字符集编码和返回的数据类型，目前应该是

60

杨教授工作室，版权所有，盗版必究， 60/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

JavaScript脚本代码字符串

*/

tentType("text/javascript;charset=utf-8");

PrintWriter out = ter();

/**

动态构建JSON格式的参数字符串，并将该参数字符串（模拟描述一个用户信息，包含有

名称userName和性别userSex两个成员属性）发送到客户端浏览器中。目前没有访问数据库系统，而是

返回给定的测试用的参数值

*/

String rerurnJSonResultObjectString="{"userName":"张三""+

/**

按照JSonp协议的规则，动态构建出“JS语法的函数代码”字符串，并将待返回的JSon

","userSex":"男"}";

结果作为该函数的入口参数

}

}

*/

String rerurnJSFunctionCode =jsonpCallbackFunctionName+"("+rerurnJSonResultObjectString+")";

/**

*/

(rerurnJSFunctionCode);

();

();

将动态构建出“JS语法的函数代码”字符串返回给客户端相关的程序

61

杨教授工作室，版权所有，盗版必究， 61/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

2、应用JQuery中的ajax函数实现跨域访问的代码示例

本示例应用了JQuery，因此需要在页面中加载JQuery的系统库文件，本示例采用的是

文件。

<%@ page language="java" pageEncoding="utf-8"%>

3、执行本示例

（1）首先启动远程Web服务器

64

杨教授工作室，版权所有，盗版必究， 64/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

其中的RemoteServerServlet将完成对客户端的请求处理，并返回包含有JSon格式的返回结果的JS

函数的代码字符串。

（2）执行客户端的请求页面

首先出现beforeSend所定义的方法被调用后的结果，本示例只是简单地显示出访问的状态信息，在

实际项目中可以显示数据加载器的Loading图片

然后再执行由success所定义的获得远程Web服务器返回的JSon结果的回调函数，该函数对远程

Web服务器返回的JSon结果进行处理，然后将所处理的结果显示输出。

65

杨教授工作室，版权所有，盗版必究， 65/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

从显示的结果来看，其中的数据都来自远程Web服务器的RemoteServerServlet程序。表明在客户

端程序中成功地获得了远程Web服务器的RemoteServerServlet程序所处理的结果数据。

然后再执行由complete所定义的的回调函数，本示例只是简单地显示出访问的状态信息，在实际项

进行隐藏。 目中可以将前面所显示出的数据加载器的Loading图片

而一旦程序出现错误，将会触发error所定义的代码的执行，如下图所示。

66

杨教授工作室，版权所有，盗版必究， 66/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

4、应用JQuery中的getJSON函数实现跨域访问的代码示例

（1）HTML页面及相关的JS代码

<%@ page language="java" pageEncoding="utf-8"%>

其中在向远程Web服务器相关程序请求的URL字符串中包含有一个查询参数字符串，参数的名称

为jsonpCallback（因为在远程Web服务器的RemoteServerServlet程序中是采用jsonpCallback的参数名

称获得JQuery随机创建的函数名称字符串），其中的值为“？”表示采用由JQuery随机创建函数名称。

67

杨教授工作室，版权所有，盗版必究， 67/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

（2）执行的结果

（3）getJSON函数可以简化ajax函数的调用代码

采用getJSON函数的方式其实是上例中的$.ajax({..})函数的一种高级封装，将$.ajax函数中的底层参

数进行封装，从而简化对ajax函数的调用代码。

1.6.3 应用普通的JavaScript脚本实现跨域访问示例

不仅可以通过JQuery API实现跨域访问，其实采用普通的JavaScript脚本也完全可以实现跨域访问，

在某些应用场合下应用JQuery API可能更方便和简单。

1、HTML页面及相关的JS代码

<%@ page language="java" pageEncoding="utf-8"%>

69

杨教授工作室，版权所有，盗版必究， 69/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

其中在请求的URL字符串中的“jsonpCallback =someOneCallBackJSFun”主要是定义在客户端的回

调函数的函数名，代表函数名称的请求参数名jsonpCallback将传送给远程的Web服务端相关的程序，

远程的Web服务端相关的程序则会获得该名称的请求参数，并动态构建出返回到本地浏览器的JS函数

代码片段，并将获取的JSon的返回结果数据传入这个JS函数代码片段方便客户端浏览器完成回调。

2、执行的结果

1.7 JQuery和AJAX技术相互配合的应用示例

1.7.1 构建相关的JSP页面和JavaScript脚本代码

1、添加JSP页面的代码

（1）文件名称为

70

杨教授工作室，版权所有，盗版必究， 70/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

（2）页面代码

<%@ page isELIgnored="false" pageEncoding="GB18030"%>

"/TR/xhtml1/DTD/">

2、jquery_Json_程序的代码

function doHttpRequestUsingGET(webContext){

$.get(webContext+"/",

}

function getRequestResponseResult(responseResultData){

/** 本示例返回的responseResultData结果是HTML格式字符串类型 */

$("#getResponseResultInfo").html(responseResultData);

}

{actionType:"userLogin_ByGet",userName:$("#userName").val()},

getRequestResponseResult, "html");

function doHttpRequestUsingPOST(webContext){

$.post(webContext+"/",

);

}

function postRequestResponseResult(responseResultJSonObjectData){

/**

由于本示例返回的responseResultJSonObjectData结果已经是JSon类型的对象，因此不需要再应用

eval函数进行转换。

*/

$("#postResponseResultInfo").html("从服务器返回的用户帐号："+

me+ "，登录时间："+

72

杨教授工作室，版权所有，盗版必究， 72/87页

{actionType:"userLogin_ByPost",userName:$("#userName").val()},

postRequestResponseResult, "json"

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

ate);

}

function doHttpRequestUsingAJAX(webContext){

$.ajax({

type:"POST",

url:webContext+"/",

data:{actionType:"userLogin_ByAjax",userName:$("#userName").val()},

success:ajaxPostRequestResponseResult,

datatype:"json"});

}

function ajaxPostRequestResponseResult(responseResultJSonObjectStringData){

var responseResultJSonObject;

/**

由于本示例返回的responseResultJSonObjectStringData结果只是JSon字符串类型，而不是JSon类

型的对象，因此需要再应用eval函数将字符串转换为JSon类型的对象。

*/

responseResultJSonObject=eval(responseResultJSonObjectStringData);

$("#ajaxResponseResultInfo").html("从服务器返回的用户帐号："+

me+"，登录时间："+ate);

}

function doHttpRequestUsingJSON(webContext){

$.getJSON(webContext+"/",

}

function jsonGetRequestResponseResult(responseResultJSonObjectStringData){

/**

本示例通过将JSON格式的数据字符串直接赋值给一个JavaScript对象，就可以创建出一个新的

JavaScript 对象变量，然后再应用该JavaScript 对象变量操作或者访问对象中相关的成员属性值。

*/

73

杨教授工作室，版权所有，盗版必究， 73/87页

{actionType:"userLogin_ByJSON",userName:$("#userName").val()},

jsonGetRequestResponseResult);

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

$("#getJSONResponseResultInfo").html("从服务器返回的用户帐号："

+me+

"，登录时间："+ate);

}

3、在项目中添加JQuery的系统库文件

如果读者应用其它版本的JQuery系统库，请改用自己版本的JQuery系统库的文件。

1.7.2 构建服务器端相关的Servlet程序

1、响应客户端请求的服务器端Servlet程序的代码

（1）类名称为ResponseJQueryHttpRequest，包名称为t。

74

杨教授工作室，版权所有，盗版必究， 74/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

（2）设置URL-Pattern为/

2、ResponseJQueryHttpRequest程序代码示例

75

杨教授工作室，版权所有，盗版必究， 75/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

package t;

import ption;

import riter;

import ;

import tException;

import rvlet;

import rvletRequest;

import rvletResponse;

public class ResponseJQueryHttpRequest extends HttpServlet {

public ResponseJQueryHttpRequest() {

}

public void destroy() {

}

y();

super();

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

针对AJAX的异步请求无效 */ /**

}

racterEncoding("gb2312");

String actionType=ameter("actionType");

if(("userLogin_ByGet")){

}

else if(("userLogin_ByJSON")){

}

doUserLogin_ByJSONRequest(request, response);

doUserLogin_ByGetRequest(request, response);

public void doUserLogin_ByGetRequest(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

String userName=ameter("userName");

76

杨教授工作室，版权所有，盗版必究， 76/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

/**

*/

对get请求方式中的请求参数进行中文编码转换

}

userName = new String(es("ISO-8859-1"), "gb2312");

n("提交的userName="+userName);

tentType("text/html;charset=gb2312");

PrintWriter out = ter();

n("服务器返回的用户帐号："+userName+"");

();

();

public void doUserLogin_ByJSONRequest(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

String userName=ameter("userName");

/**

由于$.getJSON函数仍然为get请求，因此可以采用对get请求方式中的请求参数进行中文

编码转换。

*/

userName = new String(es("ISO-8859-1"), "gb2312");

n("提交的userName="+userName);

tentType("text/html;charset=gb2312");

PrintWriter out = ter();

/**

*/

String rerurnJSonResult="{"userName":"+"""+userName+"""+

","loginDate":"+"""+new Date().toLocaleString()+""}";

动态构建JSON格式的参数字符串，并将该参数字符串发送到客户端浏览器中

n("rerurnJSonResult="+rerurnJSonResult);

(rerurnJSonResult);

();

77

杨教授工作室，版权所有，盗版必究， 77/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

}

();

public void doPost(HttpServletRequest request, HttpServletResponse response)

}

public void doUserLogin_ByPostRequest(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

}

throws ServletException, IOException {

String actionType=ameter("actionType");

if(("userLogin_ByPost")){

}

else if(("userLogin_ByAjax")){

}

doUserLogin_ByAjaxRequest(request, response);

doUserLogin_ByPostRequest(request, response);

String userName=ameter("userName");

userName = new String(es("ISO-8859-1"), "gb2312");

n("提交的userName="+userName);

tentType("text/html;charset=gb2312");

PrintWriter out = ter();

String rerurnJSonResult="{"userName":"+"""+userName+"""+

","loginDate":"+"""+new Date().toLocaleString()+""}";

n("rerurnJSonResult="+rerurnJSonResult);

(rerurnJSonResult);

();

();

public void doUserLogin_ByAjaxRequest(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

String userName=ameter("userName");

78

杨教授工作室，版权所有，盗版必究， 78/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

}

}

userName = new String(es("ISO-8859-1"), "gb2312");

n("提交的userName="+userName);

tentType("text/html;charset=gb2312");

PrintWriter out = ter();

String rerurnJSonResult="{"userName":"+"""+userName+"""+

","loginDate":"+"""+new Date().toLocaleString()+""}";

n("rerurnJSonResult="+rerurnJSonResult);

(rerurnJSonResult);

();

();

public void init() throws ServletException {

}

3、部署该ResponseJQueryHttpRequest程序

ResponseJQueryHttpRequest

seJQueryHttpRequest

ResponseJQueryHttpRequest

/

1.7.3 解决中文乱码的问题

1、测试该程序的效果

79

杨教授工作室，版权所有，盗版必究， 79/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

2、Post请求方式下的中文乱码的问题

在Post请求中，如果请求的参数为中文时，各种形式的请求的处理结果都将会出现中文乱码的问题。

如下为示例结果：

尽管在服务器端的Servlet程序中进行了如下形式的编码转换：

userName = new String(es("ISO-8859-1"), "gb2312");

但在服务器端的Servlet中也仍然获得的是中文乱码的数据

采用FireFox浏览器也同样出现中文乱码的错误

3、解决Post请求方式下的中文乱码的问题

（1）在服务器端Servlet中不需要进行编码转换

因此，可以删除其中的userName = new String(es("ISO-8859-1"), "gb2312");语句。

80

杨教授工作室，版权所有，盗版必究， 80/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

（2）在客户端的JavaScript中发送请求时指定请求的编码为UTF-8格式

题

function doHttpRequestUsingAJAX(webContext){

$.ajax({

type:"POST",

url:webContext+"/",

data:{actionType:"userLogin_ByAjax",userName:$("#userName").val()},

contentType: "application/x-www-form-urlencoded; charset=utf-8",

datatype:"json",

success:ajaxPostRequestResponseResult

应用“contentType”属性指定具体的编码类型为utf-8，从而解决Post请求方式下的中文乱码的问

});

}

1.8 动态加载页面数据的应用示例

1.8.1 构建相关的页面及JS脚本程序

1、页面文件代码示例

<%@ page isELIgnored="false" pageEncoding="GB18030"%>

"/TR/xhtml1/DTD/">

81

杨教授工作室，版权所有，盗版必究， 81/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

82

杨教授工作室，版权所有，盗版必究， 82/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

2、动态加载的目标页面的代码

（1）添加文件

（2）页面文件中的内容

"/TR/xhtml1/DTD/">

83

杨教授工作室，版权所有，盗版必究， 83/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

1.8.2 测试相关的程序效果

1、执行的结果——但出现中文乱码

2、中文乱码的解决方法

将页面中的编码格式转换为utf-8：

1.8.3 用ajax函数读取和解析XML文件中数据的应用示例

1、页面代码示例

<%@ page isELIgnored="false" pageEncoding="GB18030"%>

"/TR/xhtml1/DTD/">

84

杨教授工作室，版权所有，盗版必究， 84/87页

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

2、文件代码示例

（1）添加文件

（2）代码示例

$(htmlPageInit_OnLoad); // 等同于 $(document).ready(htmlPageInit_OnLoad);的效果;

function htmlPageInit_OnLoad(){

}

function sendAJAXRequestToServer(){

}

85

杨教授工作室，版权所有，盗版必究， 85/87页

$("#loadXMLButtonTagID").click(sendAJAXRequestToServer);

$.ajax({

});

url:'',

type: 'GET',

dataType: 'xml',

timeout: 1000,

cache:false,

error: catchExceptionInfo,

success: responseReturnResultFromServer

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

/**

异常处理回调函数中的参数为 XMLHttpRequest对象（下面示例中的errorInfoXMLHttpRequest参

数），因此利用XMLHttpRequest对象可以获得对应的错误信息。

*/

function catchExceptionInfo(errorInfoXMLHttpRequest){

}

var htmlULTagFragment;

function responseReturnResultFromServer(returnXMLDOMResultFromServer){

htmlULTagFragment=$("

");

/**

alert('加载XML文档时出现了错误：'+Text);

//动态创建

标签

下面的find函数实现在中搜索其中的子标签，并返回一个集合对象；

然后再应用each函数对集合中的每个元素进行迭代

*/

$(returnXMLDOMResultFromServer).find("oneUserInfo").each(iteratorXMLAllSonNodes);

To("#showXMLDataDivTagID"); //将最后动态得到的

标签信息添加

到HTML文档中对应标签中

}

function iteratorXMLAllSonNodes(nodeIndex){ //遍历所有oneUserInfo节点

}

3、文件示例

86

杨教授工作室，版权所有，盗版必究， 86/87页

var userIDValue,emailInfo;

userIDValue=$(this).children("userID").text(); //获取userID子节点后再获取对应的子节点的文本

emailInfo=$(this).attr("emailInfo"); //获取所有oneUserInfo节点下的emailInfo属性

//动态构造出

• 标签字符串，再通过append方法添加到前面创建的
  标签内

  ("

  • "+userIDValue+"-"+emailInfo+"
  ");

  杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

  张三

  0001

  李四

  0002

  4、执行的结果

  （1）动态加载XML文件中的数据后的结果 127.0.0.1:8080/ajaxFileUpload/

  （2）如果加载过程中出现错误，将捕获该错误

  87

  杨教授工作室，版权所有，盗版必究， 87/87页