AJAX全接触

Json和xml比较

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

Json读写速度更快

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

 

json数据书写格式：名/值，”name”:”guojin”

 

Json的值

数字（整数或浮点数）

字符串（在双引号中）

逻辑值（true或false）

数组（在方括号中）

对象（在花括号中）

Null

 

Json解析

var jsondata = '{

"staff":[{"name":"洪七","age":70},{"name":"郭靖","age":35},{"name":"黄蓉","age":30}]}';

var jsonobj = eval('('+jsondata+')');

alert(jsonobj.staff[0].name);

 

 

var jsondata = '{

"staff":[{"name":"洪七","age":70},{"name":"郭靖","age":35},{"name":"黄蓉","age":30}]}';

var jsonobj = JSON.parse(jsondata);

alert(jsonobj.staff[0].name);

以上两种方式返回的内容相同

 

 

//eval的方式不仅解析了字符串，且解析了字符串中的方法

var jsondata = '{

"staff":[{"name":"洪七","age":alert(123)},{"name":"郭靖","age":35},{"name":"黄蓉","age":30}]}';

var jsonobj = eval('('+jsondata+')');

alert(jsonobj.staff[0].name);

 

//控制台报错，不合法

var jsondata = '{

"staff":[{"name":"洪七","age":alert(123)},{"name":"郭靖","age":35},{"name":"黄蓉","age":30}]}';

var jsonobj = JSON.parse(jsondata);

alert(jsonobj.staff[0].name);

 

Json校验工具

Jsonlint

http://jsonlint.com/

 

 

 

 

HTTP请求

一个完整的HTTP请求，通常有7个步骤

1、建立TCP链接

2、WEB浏览器向WEB服务器发送请求命令

3、Web浏览器发送请求头信息

4、Web服务器应答

5、Web服务器发送应答头信息

6、Web服务器向浏览器发送数据

7、Web服务器关闭TCP链接

 

使用XMLHttpRequest发送请求

Request.open(“GET”,”get.php”,true);

Request.send();

 

Request.open(“POST”,”get.php”,true);

Request.send();

 

Request.open(“POST”,”get.php”,true);

request.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);

Request.send(“name=王二狗&sex=男”);

 

XMLHttpRequest取得响应

RequestText：获得字符串形式的响应数据

ResponseXML：获得XML形式的响应数据

Status和statusText：以数字和文本形式返回HTTP状态码

getAllResponseHeader();获取所有的响应报头

getResponseHeader();查询响应中某个字段的值

 

readyState属性

0：请求未初始化，open还没有调用

1：服务器连接已建立，open已经调用

2：请求已接受，也就是接收到头信息了

3：请求处理中，也就是接收到响应主体了

4：请求已完成，且响应已就绪，也就是响应完成了

 

 

jQurey.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

协议     子域名   主域名 端口号 请求资源地址

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

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

 

Javascript出于安全方面的考虑，不允许跨域调用其他页面的对象。跨域就是因为javascript同源策略的限制，a.com域名下js无法操作b.com或是c.a.com域名下的对象。

 

处理跨域方法——代理

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

处理跨域方法二——JSONP

JSONP可用于解决主流浏览器的跨域数据访问的问题，JSONP支持GET请求，但是不支持POST请求。

处理跨域方式三——XHR2

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

IE10以下的版本都不支持

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

Header(‘Access-Control-Allow-Origin:*’);

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