json学习Word格式文档下载.docx
《json学习Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《json学习Word格式文档下载.docx（15页珍藏版）》请在冰豆网上搜索。
xmlns="
//www.w3.org/1999/xhtml"
3.<
head>
4.<
title>
一段使用eval（）解释会导致页面被重定向的JSON数据<
/title>
5.<
script
type="
text/javascript"
src="
../jquery-1.7.min.js"
<
/script>
6.<
7.//jquery通过AJAX方式得到JSON数据
8.$（document）.ready（function（）{
9.
var
dangerJson
=
'
{message:
（function（）{window.location=\'
10.
//eval（dangerJson）;
//会重定向
11.
jsonArray
JSON.parse（dangerJson）;
//会报错
-
无效字符
12.}）;
13.<
14.<
/head>
15.<
body>
16.<
h1>
/h1>
17.<
/body>
18.<
/html>
第二种方法可以防止不安全代码出现——通过浏览器原生支持的JSON.parse（str）方法读取JSON数据，该方法采用解析器验证读入的代码是否真的是JSON代码，这样就提供了较好的安全性。
但是，由于这是用模拟的方式读取，速度上会比eval（）慢。
四．JSON实例
下面以一个实例来解释数据是如何被编码成JSON字符串，JSON字符串又是如何在javascript中解析使用的，程序分为json1.php及json1.html。
程序还要引用Smarty、JQuery及JSON库文件。
1．json1.php
[php]
?
php
2.//
by
MoreWindows（
）
3.require_once
（'
../../smarty_libs/Smarty.class.php'
）;
4.$tpl_article_array
array（
5.
001"
=>
6.
title"
PHP访问MySql数据库
初级篇"
7.
link"
8.
）,
002"
中级篇
Smarty技术"
12.
13.
003"
14.
高级篇
AJAX技术"
15.
16.
17.）;
18.
19.$tpl_article_json
$tpl_article_array）;
20.$tpl
new
Smarty（）;
21.$tpl->
assign（"
article_array"
22.$tpl->
article_json"
$tpl_article_json）;
23.$tpl->
display（"
json1.html"
24.?
2．json1.html
使用json<
json2.js"
7.<
g_jsonstr
JSON.parse（'
{$article_json}'
//通过JSON.parse（）解析JSON字符串
$（"
div"
）.mouseenter（function（）{
//mouseenter
mouseover
thisId
$（this）.attr（"
id"
jsonid
thisId.substring（thisId.lastIndexOf（"
_"
+
1,
thisId.length）;
#article_link"
）.css（"
position"
"
absolute"
left"
20px"
top"
$（this）.offset（）.top
$（this）.height（））;
17.
）.html（"
链接地址"
g_jsonstr[jsonid]['
link'
]）;
19.
）.slideDown（"
fast"
20.
$（this）.css（"
background-color"
red"
21.
}）;
22.
）.mouseleave（function（）{
//mouseleave
mouseout
23.
）.hide（）;
24.
yellow"
25.
26.}）;
27.<
28.<
style
text/css"
29.div
30.{
31.
font-family:
sans-serif;
32.}
33.<
/style>
34.<
35.<
36.{foreach
$article_array
as
$key=>
$value}
37.
div
id="
div_{$key}"
38.
{$value['
title'
]}<
39.
/div>
40.{/foreach}
41.<
p>
span
article_link"
style="
display:
none;
z-index:
100"
/span>
/p>
42.<
43.<
运行结果如下（Win7+IE9.0）：
当鼠标经过三个标题时，会触发mouseenter事件显示提示语句。
JSON进阶第二篇AJAX方式传递JSON数据
分类：
HTML/javascript/PHP2012-01-1710:
14
2498人阅读
评论（4）
收藏
举报
上一篇《JSON进阶第一篇在PHP与javascript中使用JSON》示范了在PHP和javascript中如何使用JSON类型的数据，本篇将介绍用AJAX方式得到JSON数据从而动态生成标题和提示语句。
这种技术在静态页面向网站后台请求动态数据时比较有效，因为网站首页的访问量比较大，整个页面要静态化处理，但这个页面上的某些数据又要实时更新，这时就可以在静态页面中使用用AJAX来请求后台实时生成的JSON数据。
关于AJAX技术可以参考《PHP访问MySql数据库高级篇AJAX技术》，这里详细介绍如何使用AJAX来传递JSON数据。
本示例程序分为json2.php和json2.html，json2.html上有个按钮，按下后将发送AJAX请求得到json2.php返回的数据。
1．json2.php
3.$article_array
4.
count"
3,
20.）;
21.$article_json
$article_array）;
22.echo
$article_json;
23.?
2．Json2.html
ajax方式请求json<
7.//显示提示
8.function
OnMouseEnterDivInfo（thisObj,
title）
9.{
$（thisObj）.offset（）.top
$（thisObj）.height（））;
title）;
$（thisObj）.css（"
16.}
17.//隐藏提示
18.function
OnMouseLeaveDivInfo（thisObj）
19.{
22.}
23.//jquery通过AJAX方式得到JSON数据
24.$（document）.ready（function（）{
#GetDataBtn"
）.click（function（）{
26.
$.post（"
json2.php"
{},
function（data）{
27.
JSON.parse（data）;
28.
ilen
g_jsonstr['
count'
];
29.
detailhtml
;
30.
for
（var
i
0;
ilen;
i++）
{
32.
divhtml
id=\"
div_'
\"
onmouseenter=\"
OnMouseEnterDivInfo（this,
\'
g_jsonstr[i]['
]
onmouseleave=\"
OnMouseLeaveDivInfo（this）;
33.
+=
34.
35.
divhtml;
36.
}
#detail"
）.html（detailhtml）;
//生成新的标题区域
slow"
40.
41.}）;
44.div
45.{
46.
47.}
48.<
49.<
50.<
51.<
input
button"
GetDataBtn"
value="
生成数据"
/>
52.<
detail"
53.<
54.<
55.<
56.<
运行效果如下：
JSON进阶第三篇apache多域名及JSON的跨域问题（JSONP）
本文先介绍如何为apache配置多域名，然后再用JSONP（JSONwithPadding）来解决JSON的跨域问题。
阅读本文之前，推荐先参阅《JSON进阶第二篇AJAX方式传递JSON数据》。
一．apache配置多域名
在apache的conf目录下找到httpd.conf，然后在该文件最后增加如下内容：
#声明使用虚拟主机过滤规则
NameVirtualHost*:
80
#虚拟主机localhost
VirtualHost*:
80>
ServerName
localhost
DocumentRoot"
D:
\xampp\htdocs\www"
/VirtualHost>
#虚拟主机
\xampp\htdocs\"
其中第一个是保证原有的localhost还可以继续工作，第二个为新加域名。
然后再修改host文件（在C:
\Windows\System32\drivers\etc\）
增加：
#
注意修改httpd.conf后要重启下apache服务。
将《JSON进阶第二篇AJAX方式传递JSON数据》文中的json2.php拷贝到D:
\xampp\htdocs\目录中再在浏览器中输入网址
运行结果如下：
在浏览器中能看到如上所示的JSON字符串说明已经成功为apache增加了新的域名，接下来就来体验下JSON的跨域名问题。
将json2.html中“$.post（"
{},function（data）{”的“json2.php”改成“
用Firefox的Firebug查看点击按钮后AJAX响应的详细过程，可以看到AJAX请求信息已经发送到服务器上了（就是那个127.0.0.1:
80），但因为安全性问题，服务器返回的数据被屏蔽了——这就是大名鼎鼎的跨域问题。
二．JSONP——解决JSON跨域问题
使用JSONP（JSONwithPadding）就可以解决JSON的跨域问题，JSONP的原理可以访问http:
//zh.wikipedia.org/zh-cn/JSONP，简单的说就是利用了<
script>
标签拥有的开放策略（相对于同域策略）。
下面介绍如何使用JSONP。
JSONP的使用分为二步：
第一将html文件中的
function（data）{
改成
$.getJSON（"
第二将json2.php最后的
echo$article_json;
echo$_REQUEST['
jsoncallback'
]."
（"
.$article_json."
）"
修改这二个地方后就可以解决JSON的跨域问题了。
下面也给出完整的示例程序，分为json2.php和json2.html，json2.html上有个按钮，按下后将发送AJAX请求得到json2.php返回的跨域JSON数据。
注意和上一篇《JSON进阶第二篇AJAX方式传递JSON数据》文中的代码进行比较。
1．Json2.php
8
升级会员 