Ajax全接触(2)

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');