Json基本概念
JSON:JavaScript对象表示法,全称:JavaScript Object Notation
1、JSON是存储和交换文本信息的语法,类似XML。它采用键值对的方式来组织数据,易于人们阅读和编写,同时也易于机器解析和生成
2、JSON是独立于语言的,任何语言都可以按照json的规则来解析
JSON与XML比较:
1、json的长度比xml短小
2、json的读写速度更快
3、json可以使用JavaScript内置的方法直接进行解析并转换成JavaScript对象,很方便
JSON语法规则:
1、json数据的格式是:"名称":值形式的键值对,名称需要在双引号中,中间以冒号":"隔开;
2、json的值可以是以下类型:
数字(整数和浮点数)
字符串(在双引号中)
逻辑值(true或false)
数组(在方括号中[])
对象(在花括号中{})
null
Json解析,格式化,校验工具
json解析的方法有两种:eval()和parse()方法
eval() 较危险,不光解析了字符串,还解析了js方法,无论何时用eval()都是非常危险的。-----不建议使用
JSON.parse()较好,会解析出错误。
//例子:首先定义了JSON字符串jsondata
eval()方法:
var jsondata='{"staff":[{"name":"洪七","age":70},{"name":"郭靖","age":35},{"name":"黄蓉","age":30}]}';
var jsonobj=veal('('+jsondata+')');
alert(jsonobj.staff[0].name);
parse()方法:
var jsondata='{"staff":[{"name":"洪七","age":70},{"name":"郭靖","age":35},{"name":"黄蓉","age":30}]}';
var jsonobj=JSON.parse(jsondata);
alert(jsonobj.staff[0].name);
都可以,若把age后的70改成alert(123);若用eval()方法,发现页面是先弹出123,再弹出洪七;也就是说用eval不仅解析了字符串,还执行了JS里的方法
用parse()解析字符串,发现会抛出一个错误。
这说明用eval()不会看json是否合法,eval非常危险。所以尽量使用JSON.parse方法,来解析json里的字符串,而且还可以解析出json里的一些错误。
2、json校验工具jsonlint
3、把json格式化,地址:jsonlint.com
Jquery中的Ajax
1、在线引用(百度静态资源公共库)
2、jq实现Ajax(代码如下,图为各属性解析)
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script>
$(document).ready(function(){
$("#save").click(function(){
$.ajax({
type:"post",
url:"service.php",
dataType:"json",
data:{
name:$("#staffName").val(),
number:$("#staffNumber").val(),
sex:$("#staffSex").val(),
job:$("#staffJob").val()
},
success:function(data){
if(data.success){$("#createResult").html(data.msg)}
else{$("#createResult").html("error: " + data.msg) }
},
error:function(jqXHR){
alert("error: "jqXHR.status);
}
});
});
});
跨域
处理跨域方式--代理
域名地址的组成:
1、完整的url:http://www.imooc.com:8080/video.php?id=001#mediaid=6238
2、协议(protocol):http://
3、主机(host):www.imooc.com:8080
4、主机名/域名(hostname):www.imooc.com
子域名:www
主域名:imooc.com
5、端口(port):8080
6、请求路径(pathname):video.php
7、请求参数(search):id=001
8、哈希码(hash):#mediaid=6238
【同源策略:两者拥有相同的协议、域名和端口时,就属于同一个源(origin)(或者说同一个域);XHR请求不能跨域访问和调用。】
跨域:不同域之间相互请求资源
javaScript处于安全方面的考虑,不允许跨域调用其他页面的对象。什么是跨域呢,简单地理解就是因为javaScript同源策略的限制,a.com域名下的js无法操作b.com或
是c.a.com域名下的对象
事实上HTTP和HTTPS两个协议的url看上去都可以省略端口号,但是他们访问的默认端口不同
HTTP默认访问80端口,HTTPS默认访问443端口,所以http访问https肯定是跨域
主域名:
abc.com
主域名可以有如下的子域名:
www.abc.com
bbs.abc.com
beijing.bbs.abc.com
haidian.beijing.bbs.abc.com
处理跨域方法1--代理
通过在同域名的web服务器端创建一个代理
北京服务器(域名:www.beijing.com)
上海服务器(域名:www.shanghai.com)
比如在北京的web服务器的后台(www.beijing.com/proxy-shanghaiservice.php)来调用上海服务器(www.shaghai.com/service.php)的服务,然后再把响应结果返回给前端,
这样前端调用北京同域名的服务就和调用上海的服务效果相同了。
处理跨域方式--JSONP
JSONP (只能对GET请求起到效果,而不能去改造post请求,即不支持post请求)
前端代码两处改动:
在get请求的代码中,
dataType:"jsonp",
jsonp:"callback123" (jsonp的值可任意写)
后端代码改动:
$jsonp = $_GET["callback123"];
返回值加括号
$result = $jsonp . '( { "success":false , "msg":"没有找到员工" } )';
$result = $jsonp . '( { ……… } )';
处理跨越方式--XHR2
1、HTML5提供的XMLHttpRequest Level2已经实现了跨域访问以及其他的一些新功能
2.IE10以下的版本都不支持
3.在服务器端
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:POST,GET');