Ajax全接触(2)

Json基本概念

JSON：JavaScript对象表示法，全称：JavaScript Object Notation1、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字符串jsondataeval()方法：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校验工具jsonlint3、把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 . '( { ……… } )';处理跨越方式--XHR21、HTML5提供的XMLHttpRequest Level2已经实现了跨域访问以及其他的一些新功能2.IE10以下的版本都不支持3.在服务器端header('Access-Control-Allow-Origin:*');header('Access-Control-Allow-Methods:POST,GET');