Ajax全接触（imooc）

一、概述

在很久很久以前，使用网页会碰到一件非常令人痛心的事：
甜柿酱：啦啦啦，终于填写完毕啦，提交提交！
某网页：[ 认真脸 ] 每当我提交或更新内容，都要重新载入页面哦~
服务器：等等，有个字段填错啦！
某网页：[ 无辜脸 ]，不好意思，只能给你一份新表单，重头再来哦~

直到1998年，一个叫Ajax的孩子出现了！
到了2005年，它成功地为大众所接受，火遍了全世界！

AJAX
Asynchronous JS and XML （异步的JS和XML）
Ajax是一种技术——无需重新加载整个网页的情况下更新部分网页。
这种技术是通过XMLHttpRequest（下文简称XHR）对象实现的。

本篇内容导航
要实现一次局部的更新，以下方面需要我们考虑：

网页与服务器是如何沟通的（HTTP简介）
用户提交网页，建立一个XHR对象。（如何定义一个XHR对象）
向服务端发出请求（XHR发送请求）
服务端的工作（服务端PHP简介）
从服务端获取信息（XHR取得响应）
拿什么来装我们的数据（JSON数据格式）
换种方式实现（JQuery与Ajax）
想要访问别人家的服务器数据（跨域简介）

PS：本文是柿子观看慕课网视频后的摘录总结，更加详细的内容请见姜维老师的视频Ajax全接触，该页面下可下载老师的源代码。

---

二、HTTP简介

【网页与服务器是如何沟通的】

HTTP
计算机通过网络进行通信的规则，是一种无状态的协议，即不建立持久的连接。

完整的HTTP请求，通常有7个步骤：
1、建立TCP连接
2、Web浏览器向Web服务器发送请求命令
3、Web浏览器发送请求头信息
4、Web服务器应答
5、Web服务器发送应答头信息
6、Web服务器向浏览器发送数据
7、Web服务器关闭TCP连接

HTTP请求，有4部分：
1、HTTP请求的方法或动作：GET or POST
2、请求的URL
3、请求头，包含客户端环境信息，身份验证信息
4、请求体，正文，可以包含客户提交的查询字符串信息，表单信息等等。

GET请求（安全）
一般用于信息获取
使用URL传递参数，明文。
对发送信息的数量也有限制，一般在2000个字符

POST请求
一般用于修改服务器上的资源
对发送信息的数量无限制

HTTP响应，有3个部分
1、数字和文字组成的状态码，显示请求成功还是失败
2、响应头，包含服务器类型、日期时间、内容类型和长度等
3、响应体，即响应正文。

---

三、定义一个XHR对象

【用户提交网页，建立一个XHR对象。】

以下JS代码兼容IE5、6，其实现在已不用再考虑这两个版本，除非有特殊要求

var request;
if(window.XMLHttpRequest)
    request = new XMLHttpRequest();
else
    request = new ActiveXObject("Microsoft.XMLHTTP");//IE6、IE5

---

四、XHR发送请求

【向服务端发出请求】

首先，调用HTTP请求：
open(method,url,async)
第一个参数get or post
第二个参数地址
第三个参数，同步or异步，默认true（异步），所以可以不填

其次，发送请求：
send(string)
如果是get，没有参数（参数在url中了），如果是post，则必须填写参数

代码栗子

request.open("GET","get.php?number=1&sex=女",true);
request.send();

request.open("POST","post.php",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("name=天使酱&sex=女");

对于get，数据在URL中，格式是：地址？参数1=参数值1&参数2=参数值2
对于post，数据由send发出，格式是：参数1=参数值1&参数2=参数值2

注意：setRH那句是为了设置信息头.
CONTENT-TYPE:application/x-www-form-urlencoded含义是表示客户端提交给服务器文本内容的编码方式是URL编码。

---

五、服务端PHP简介

【服务端的工作】

（前端不必掌握，了解即可，若要尝试阅读老师的源代码，建议学习一下基础的PHP语法知识。）
php是创建动态交互性站点的服务器脚本语言。
在服务端脚本中，将对浏览器发送的信息进行处理（查询，修改之类），将结果返回给浏览器

//设置页面内容是什么格式，以什么来进行编码
//header("Content-Type: text/plain;charset=utf-8"); 
//header("Content-Type: application/json;charset=utf-8"); 
//header("Content-Type: text/xml;charset=utf-8"); 
//header("Content-Type: text/html;charset=utf-8"); 
//header("Content-Type: application/javascript;charset=utf-8"); 

if ($_SERVER["REQUEST_METHOD"] == "GET") {
    //如果是get请求，执行操作：
} elseif ($_SERVER["REQUEST_METHOD"] == "POST"){
    //如果是post请求，执行操作：
}

//isset检测变量是否设置；empty判断值为否为空
//超全局变量 $_GET 和 $_POST 用于收集表单数据
if (!isset($_GET["number"]) || empty($_GET["number"])) {
    //接收到的信息中，是否有number字段，number字段是否有值
}

//将xxx发回给请求的浏览器
echo xxx;

PS：chrome浏览器审核，Network标签下，可以看到发送的请求头信息，以及服务器应答信息。
PS：chrome插件postman可以测试请求信息，模拟请求信息（fiddler也可以），可以在没有客户端的情况下做测试。

---

六、XHR取得响应

【从服务端获取信息】

首先，要监听服务器是否有将信息发回来，通过监听这个属性的变化来判断
readyState属性
0：请求未初始化，open还没有调用
1：服务器连接已建立，open已经调用了
2：请求已接收，也就是接收到头信息了
3：请求处理中，也就是接收到响应主体了
4：请求已完成，且响应已就绪，也就是响应完成了

代码如下：

request.onreadystatechange = function(){
    if(request.readyState === 4 
    && request.status === 200 ){//status是HTTP状态码，200表示用户请求被正确接收，常见的还有404等等。
        //做一些事情 request.responseText ……
    }
}

其次获取内容进行操作，通过以下属性：
responseText：获取字符串形式的响应数据
responseXML：获取XML形式的响应数据（少用，多JSON）
status和statusText：以数字和文本形式返回HTTP状态码
getAllResponseHeader()：获取所有的响应报头。
getResponseHeader(参数)：查询响应中某个字段的值

---

七、JSON数据格式

【拿什么来装我们的数据】

JSON
是存储和交换文本信息的语法，类似XML。它采用键值对的方式来组织，易于人们阅读和编写，同事也易于机器解析和生成。JSON是独立于语言的，只需要按照JSON的规则就可以解析JSON。

与xml比较：
长度小，读写快，可用JS內建的方法直接进行解析，转换成JS对象很方便

语法规则：
“名称”:值，
值的类型可以是：数字——整数或浮点、字符串（双引号中）、逻辑值、数组（方括号中）、对象（花括号中）、null

{   //JSON对象
    "staff":[ //对象中的一个元素是数组
        {"name":"红旗","age":70},//数组中的一个元素是一个对象，对象中包括了两个元素
        {"name":"丽丽","age":17},
        {"name":"科科","age":27}
    ]
}

JSON解析
eval()不安全（它不会管JSON字符串是否合法，还会执行其中包含的JS语句），不推荐使用
推荐使用JSON.parse()

var jsondata = '{"staff":[{"name":"红旗","age":70},{"name":"丽丽","age":17},{"name":"科科","age":27}]}';
var jsonobj = eval('('+jsondata+')');
alert(jsonobj.staff[0].name);

var jsondata = '{"staff":[{"name":"红旗","age":70},{"name":"丽丽","age":17},{"name":"科科","age":27}]}';
var jsonobj = JSON.parse(jsondata);
alert(jsonobj.staff[0].name);

PS：JSON校验工具：JSONLint

对于前端而言，发送给服务端的数据格式并没有发生变化，主要是服务端将返回的内容封装成了一个JSON对象，前端在接收到时，需要对其做出一个解析：

JSON.parse(request.responseText);

---

八、Ajax与JQuery

【换种方式实现】

在JQuery中封装好了一个方法专门用于进行异步传输：
jQuery.ajax([settings])
type：类型，”POST”或”GET”，默认”GET”
url：发送的地址
data：数据对象，连同请求发送到服务器的数据
dataType：预期服务器返回的数据类型。若不指定，jQuery自动根据HTTP包MIMIE信息来进行智能判断，一般采用json格式，设置为”json”
success：一个方法，请求成功后的回调函数，传入返回后的数据，以及包含成功代码的字符串。
error：一个方法，请求失败时调用此函数。传入XMLHttpRequest对象。

$.ajax({ 
    type: "GET",    
    url: "http://127.0.0.1:8080/ajaxdemo/serverjson2.php?number=1"
    dataType: "json",
    success: function(data) {
    //data其实是jQuery的XHR对象的responseText，冰球这个responseText已经经过了JSON解析
    },
    error: function(jqXHR){
    //jqXHR是jQuery的XHR对象。     

    }     
});

---

九、跨域简介

【想要访问别人家的服务器数据】

什么是跨域
一个域名地址的组成：

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

不同域之间相互请求资源，就算作跨域，也就是说，除了请求资源地址外的其他组成部分，有一个不一样，就算是跨域。

JS处于安全方面的考虑，不允许跨域调用其他页面的对象。那么如何实现跨域呢：

1. 使用代理
在同域名的web服务器上建立一个代理。
例如：
如果www.a.com想要访问www.b.com
那么过程如下，网页a访问自己的服务器a，服务器a访问服务器b，将获得的内容再返回给网页a。
这种方式的关键之处在于服务器之间的访问，涉及到后端的技术。

2、JSONP
（和Ajax没多大关系）
JSONP可用于解决主流浏览器的跨域数据访问的问题（但，只能GET，不能POST）

其大体的思路就是：
若a要访问b的数据：
在a的页面中，给出一个函数y的定义。
a并包含b上的js文件b.js。
b.js文件调用函数y。

那么当a的页面加载时，b.js文件中的函数y就会执行，数据以函数参数为载体传给了a。

//在本地服务器a上有一个html页面，内容如下：
<script>
    function sweet(data){
        alert(data["name"]);
    }
</script>
<script src= "http://www.b.com/b.js"></script>

//在远程服务端b上有一个js页面，b.js,内容如下：
sweet({'name':'丽丽','age':'24'});

//结果就是加载a的html页面时，会弹出对话框，内容为“丽丽”

更高级的用法，是让服务器b根据a的客户端的需求，自动地生成这个js文件的内容。
详细的内容请见：说说JSON和JSONP，也许你会豁然开朗，含jQuery用例

JQuery+jsonp
JQuery中的ajax方法封装了上述步骤，只需要在之前代码添加以下代码：

//前端
dataType: "jsonp", //原来是json
jsonp:"abc",传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)
jsonpCallback:"xx",自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
//服务器
$jsonp = $_GET["abc"];
//然后之前echo的语句之前都要加上这个变量
echo $jsonp . xxx; //点在php中是字符串的连接,原来是echo xxx;

3、XHR-2
HTML5提供的XMLHttpRequest Level2已结实现了跨域访问
IE10以下版本不支持
只需要在服务端做一些小小的改造

header('Access-Control-Allow-Origin:*');//*的意思是所有都可以访问它
header('Access-Control-Allow-Methods:POST,GET');