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，则必须填写参数

代码栗子