AJAX学习笔记二

JSON基本概念

JSON: javascript对象表示法（javascriptObject Notation）

JSON是存储和交换文本信息的语法，类似XML。它采用键值对的方式来组织，易于阅读和编写，同时也易于机器解析和生成。

JSON是独立于语言的，也就是说不管什么语言，都可以解析json，只需要按照json的规则来就行

JSON与XML比较

Json的长度和xml格式比起来很短小

Json读写的速度更快

Json可以使用javascript内建的方法直接进行解析，转换成javascript对象，非常方便

JSON语法规则

Json数据的书写格式是：名称/值对

名称/值对组合中的名称写在前面（在双引号中），值对写在后面（同样在双引号中），中间用冒号隔开，比如“name”：“郭靖”

Json的值可以是下面这些类型：

数字（整数或浮点数），比如123，1.23

字符串（在双引号中）

逻辑值（true或false）

数组（在方括号中）

对象（在花括号中）

Null

例子：

{
   “staff“：[
      {“name”: “洪七”,  “age”: 70},
      {“name”: “郭靖”,  ”age”:35}
   {“name”: “黄蓉”,  ”age“:30}
]
}

JSON解析

eval和JSON.parse

在代码中使用eval是很危险的！特别是用它执行第三方的json数据（其中可能包含恶意代码）时，尽可能使用JSON.parse（）方法解析字符串本身，该方法还可以捕捉JSON中的语法错误。

Json校验工具：JSONLint.com----在线进行代码校验是否有错

 

用jQuery实现Ajax

jQuery.ajax([settings])

type: 类型，“POST”或”GET“，默认为”GET”

url: 发送请求的地址

data:是一个对象，连同请求发送到服务器的数据

datatype:预期服务器返回的数据类型。如果不指定，jquery将自动根据HTTP包MIME信息来智能判断，一般采用json格式，可以设置为”json”

success: 是一个方法，请求成功后的回调函数。传入返回后的数据，以及包含成功代码的字符串

error：是一个方法，请求失败时调用此函数。传入XMLHttpRequest对象

 

跨域

一个域名地址的组成：

http：//（协议）+ www. (子域名) + abc.com:(主域名) + 8080/(端口号) + scripts/jquery.js(请求资源地址)

当协议，子域名，主域名，端口号中任意一个不相同时，都算作不同域名

不同域之间相互请求资源，就算作“跨域”

比如：

http：//www。Abc.com/index.html请求http：//www.efg.com/service.php

 

javascript出于安全方面的考虑，不允许跨域调用其它页面的对象。

www.abc.com/index.html调用www.abc.com/service.php(非跨域)

www.abc.com/index.html调用www.efg.com/service.php(跨域)

www.abc.com/index.html调用bbs.abc.com/service.php(跨域)

www.abc.com/index.html调用www.abc.com:81/service.php(跨域)

www.abc.com/index.html调用http://www.abc.com/service.php(跨域)

 

解释子域名

如主域名：abc.com，它之下的子域名有多种：

www.abc.com

bbs.abc.com

Beijing.bbs.abc.com

Haidian.beijing.bbs.abc.com

 

处理跨域方法———代理

通过在同域名的web服务器端创建一个代理：

北京服务器(域名：www.beijing.com)

上海服务器(域名: www.shanghai.com)

比如在北京的web服务器的后台（www.beijing.com/proxy-shanghaiservice.php）来调用上海服务器（www.shanghai.com/service.php）的服务，然后再把响应结果返回给前端，这样前端调用北京同域名的服务就和调用上海的服务效果相同了。

处理跨域方法二—JSONP

JSONP可用于解决主流浏览器的跨域数据访问的问题。

在www.aaa.com页面中：

<script>
function jsonp(json) {
  alert(json[“name”]);
}
</script>
<script src= “http://www.bbb.com/jsonp.js”></script>

在www.bbb.com页面中：jsonp({‘name’:’洪七’,’age’:24});

注意：JSONP只能对GET请求起到效果，不支持POST方式

处理跨域方法三—XHR2

HTML5提供的XMLHttpRequest Level2已经实现了跨域访问以及其他的一些新功能。

IE10以下版本都不支持

在服务器端做一些小小的改造即可：

header(‘Access-Control-Allow-Origin:*’);  *: 所有的域都可以访问

header(‘Access-Control-Allow-Methods:POST,GET’);