辞职第三天: Ajax

下一行JS

因为一个对象

Ajax得以实现，是因为有了XMLHttpRequest对象，它是个对象……对象！对象哦！

IE6以下不支持这个对象，我也不打算关心它。

要了解Ajax，那就要回头啃一啃HTTP了。

HTTP

它是个短链接，术语叫**无状态协议*

建立TCP连接
浏览器向服务器发送请求命令
浏览器发送请求头信息
服务器应答
服务器发送应答头信息
服务器向浏览器发送数据
服务器关闭TCP连接（咦，是服务器关闭的呀？）

HTTP请求

请求的方法或动作，是GET还是POST
请求的URL
请求头：客户端信息或者身份验证信息
请求正文：查询字符串，表单信息等等

GET：一般用于信息获取，使用URL传递参数，对发送信息的数量有限制，2000个字符左右，执行一次和执行一万次，信息是相同的（幂等）
POST：一般用于修改服务器上的资源，信息数量无限制

HTTP响应

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

• 一个数字和文字组成的状态码, 用来显示成功或者失败
• 响应头, 和请求头类似, 包含很多信息, 例如服务器信息, 日期信息，内容类型和长度
• 响应体，也就是响应正文

状态码

1XX: 信息类，表示收到web浏览器请求，正在进一步处理中
2XX: 成功
3XX: 重定向，表示请求不成功
4XX: 客户端请求错
5XX: 服务器错误（悲剧）

XMLHttpRequest

既然它是个对象，那下面肯定有方法，或者理解为API ?

open(method, url, async)
    //method(发送请求方法)： get || post
    //url(地址）
    //async(同步还是异步)： 默认true
send(string)
    //string: 可以不填写或写none，如果是post，最好写参数，get则不用写参数
setRequestHeader
    //设置HTTP请求头信息
    //该方法要写在open和send中间
responseText: 获得字符串形式的响应数据
responseXml: 获得XML形式的响应数据
status和statusText: 以数字和文本形式返回HTTP状态码
getAllResponseHeader(): 获取所有的响应报头
getResponseHeader(): 查询响应中的某个字段的值
readyState属性
    //0：请求未初始化，open还没有调用
    //1：服务器连接已建立，open已经调用
    //2：请求已接收（接收到头信息）
    //3：请求处理中（已接收到响应主体）
    //4：请求已完成，且响应已就绪（搞定）
例：
request = new XMLHttpRequest();
request.open("GET","get.php", true);
request.send();
request.onreadystatechange = function() {
    if(request.readyState == 4&&request.status === 200) {
        //do you want to do
    }
}

jQuery的Ajax

$("#id").on('click', function() {
    $.ajax({
        type:"GET",
        url:"service.php?number=" + $('#keyword').val(),
        dataType: 'json',
        success: function(data) {
            if(data.success) {
                console.log('成功');
            } else {
                console.log(data.msg);
            }
        },
        error: function(jqXHR) {
            console.log('失败');
        }
    });
});

关于跨域

跨域的定义很简单，就是只要协议，主域名，子域名，端口只要有一个不同，就是跨域

ajax通常的报错信息是：XMLHttpRequest cannot load http://*****……is therefore not allowed access.没有访问权限。
这是js出于安全考虑，不允许跨域调用其他页面的对象

代理

A前端让后端去访问B前端，数据返回A后端，再告诉A前端，呵呵，不喜欢！

JSONP

JSONP不支持POST请求。
对于GET请求把这句dataType: 'json'改成：

……
dataType: 'jsonp',
jsonp:'callback', //增加一个属性
……

XHR2

客户端代码不用改动，在PHP代码里设置服务器头信息，加一句：

header("Access-Control-Allow-Origin:*");
header("Access-Control-Allow-Methods:POST,GET");

遗留问题

python和nodejs后台怎么实现ajax？？