2016-03-12

Ajax

概念介绍——HTTP请求

一个完整的HTTP请求过程，通常有下面7个步骤：

建立TCP连接
Web浏览器向Web服务器发送请求命令
Web浏览器发送请求头信息

Web服务器应答
Web服务器发送应答头信息
Web服务器向浏览器发送数据
Web服务器关闭TCP连接

一个HTTP请求一般由四部分组成：

HTTP请求的方法或者动作，比如是GET还是POST请求
正在请求的URL
请求头，包含一些客户端环境信息，身份验证信息等
请求体，也就是请求正文，请求正文中可以包含客户提交的查询字符串信息，表单信息等等

GET

一般用于信息获取
使用URL传递参数
对所发送信息的数量也有限制，一般在2000个字符内

POST

一般用于修改服务器上的资源
对所发送的信息的数量无

一个HTTP响应一般由三部分组成：

一个数字和文字组成的状态码，用来显示请求是成功还是失败
响应头，响应头也和请求头一样包含许多有用的信息，例如服务器类型、日期时间、内容类型和长度等
响应体，也就是响应正文

HTTP状态码由3位数字构成，其中首位数字定义了状态码的类型：

1XX：信息类，表示收到的Web浏览器请求，正在进一步的处理中
2XX：成功，表示用户请求被正确接收，理解和处理例如：200 OK
3XX：重定向，表示请求没有成功，客户必须采取进一步的动作
4XX：客户端错误，表示客户端提交的请求有错误，例如：404 NOT Found，意味着请求中所引用的文档不存在
5XX：服务器错误，表示服务器不能完成对请求的处理：如500

概念介绍——XMLHttpRequest

open(method,url,async)
send(string)

1
2
3

request.open("POST","create.php",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");//这句代码只能放在send前面
request.send("name = 王二狗&sex=男");

XMLHttpRequest取得响应

responseText: 获取字符串形式的响应数据 //XML json
status和statusText: 以数字和文本形式返回HTTP状态码
getAllResponseHeader(): 获取所有的响应报头
getResponseHeader(): 查询响应中的某个字段的值（需要输入内容）

readyState属性：代表服务器的响应的变化

0：请求未初始化，open还没有调用
1：服务器连接已建立， open已经调用了
2：请求已接收，也就是接收到头信息了
3：请求处理中，也就是接收到响应主体了
4：请求已完成，且响应已就绪，也就是响应完成了

监听readyState

var request = new XMLHttpRequest();
request.open("GET","get.php",true);
request.send();
request.onreadystatechange = function(){
    if(request.readyState === 4 && request.status === 200){
        //do something   request.responseText
    }
};

JSON基本概念

JSON： JavaScript对象表示法
存储和交换文本信息的语法，类似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":16},
        {"name":"小丫","age":13},
        {"name":"小阳","age":15}
    ]
}

解析:安全方便的JSON.parse()

1
2
3

var jsondata = '{"staff":[{"name":"小萌","age":14},{"name":"小丫","age":12}]}';
var jsonobj = JSON.parse( jsondata);
alert(jsonobj.staff[0].age);

JSON数据校验jsonlint

jQuery实现Ajax

常用jQuery设置

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 主域名
8080 端口号,一般为80，当为80的时候可以省略
scripts/jquery.js 请求资源地址

当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域
不同域之间相互请求资源，就算作“跨域”
比如：http://www.abc.com/index.html请求http://www.efg.com/service.php
JavaScript出于安全方面的考虑，不允许跨域调用其它页面的对象。什么是跨域呢，简单的理解就是因为JavaScript同源策略的限制，a.com域名下的js无法操作b.com或是c.a.com域名下的对象
解决跨域，后端可以使用代理另一个方法可以使用JSONP

处理跨域方法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’:13});

JSONP只支持GET不支持POST

处理跨域方法XHR2

HTML5提供的XMLHttpRequest Level2已经实现了跨域访问以及其他的一些新功能
IE10以下的版本都不支持
在服务器端做一些小小的改造即可：

header(‘Access-Control-Allow-Origin:*‘);*代表所有域名可访问，当然也可以自己设置相应的域名
header(‘Access-Control-Allow-Methods:POST,GET’);

最后附上js与jquery的demo