什么是同步? 客户端要发起请求，服务器端要去处理，而且去响应，这时候客户端完全是等待，等待服务器端的处理和响应，当服务器端处理响应后客户端会重新载入页面。这时候如果你有错误，那么只能再次发起请求，再次等待。同步的事件会让人疯狂。
同步和异步
什么是同步
客户端要发起请求，服务器端要去处理，而且去响应，这时候客户端完全是等待，等待服务器端的处理和响应，当服务器端处理响应后客户端会重新载入页面。这时候如果你有错误，那么只能再次发起请求，再次等待。同步的事件会让人疯狂。
什么是异步
当你填写表单数据时，页面当时就把数据发送到服务器，也就是页面发送了个请求，服务器去做处理和响应，得到你的数据不符合要求，他会把响应结果，发给页面，但是在这个过程中，你还是可以依旧去填写，表单其他内容，这时候服务器告诉你有填写错误的地方，在页面上的表现，只是把你填写错误的旁边标上一行字，并没有刷新你的页面，这样在填写表单时，所有的错误信息都会显示在页面，你可以实时的更正，这个过程中你不会有整个页面的刷新，也不会有整个页面的提交和等待，当你最后点击提交一切都可以搞定了。
怎么实现Ajax技术呢？
- 运用HTML和CSS来实现页面，表达信息；
- 运用XMLHttpRequest对象和web服务器进行数据的异步交换；
- 运用JavaScript操作DOM，实现动态局部刷新；
Ajax-XMLHttpRequest对象创建
目前浏览器都支持标准的XHR对象，也支持标准的构造函数。
但是在IE5和IE6浏览器中，是不支持var request=new XMLHttpRequest();因为那时候XHR还未定义。
如何兼容IE5和IE6甚至更早的版本？
var request;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
request = new XMLHttpRequest();
} else { // code for IE6, IE5
request = new ActiveXObject("Microsoft.XMLHTTP");
}
只需要判断下，如果有XHR定义，我们就使用标准的构造函数，我们直接 new ActiveXObject("Microsoft.XMLHTTP");就可以了。
Ajax-HTTP请求
什么是HTTP
HTTP是计算机，通过网络进行通信的规则。
它主要使我们客户，也就是常说的浏览器能够从服务器也就是常说的web服务器，去请求信息和服务。
HTTP是一种无状态的协议
无状态指的是不建立持久的连接，也就是说服务端不保留连接的一些相关信息。
一个客户端，想服务器发送请求，然后web服务器返回响应，接着连接就被关闭了，这个处理过程是没有记忆的。如果后续的处理需要之前传递的一些信息，那么就要重新的传递。这就是经常说HTTP是一种无状态的协议。
概念介绍--HTTP请求
一个完整的HTTP请求过程，通常有下面7个步骤。
建立TCP连接；
Web浏览器向Web服务器发送请求命令；
Web浏览器发送请求头信息；
Web服务器做出应答；
Web服务器发送应答头信息；
Web服务器向浏览器发送数据；
Web服务器关闭TCP连接；
一个HTTP请求一般由四部分组成
HTTP请求的方法或动作，比如是GIT还是POST请求；
正在请求的URL，总得知道请求的地址是什么吧；
请求头，包含一些客户端环境信息，身份验证信息等；
请求体，也就是请求正文，请求正文中可以包含客户提交的查询字符串信息，表单信息等等。
GIT请求和POST请求
GIT：一般用于信息获取
使用URL传递参数
对所发送信息的数量也有限制，一般在2000个字符POST：一般用于修改服务器上的资源。
对所发送信息的数量无限制
HTTP响应
一个HTTP响应一般由三部分组成
一个数字和文字组成的状态码，用来显示请求是否成功还是失败；
响应头，响应头也和请求头一样包含许多有用的信息，例如服务类型，日期时间，内容类型和长度等；
响应体，也就是响应正文；
HTTP响应状态码介绍
HTTP响应状态码由3位数字构成，其中首位数字定义了状态码的类型：
1XX:1开头，信息类，表示收到web浏览器请求，正在进一步的处理中；
2XX:2开头，成功，表示用户请求被正确接收，理解和处理例如：200 OK；
3XX:3开头，重定向，表示请求没有成功，客户必须采取进一步的动作；
4XX:4开头，客户端错误，表示客户端提交的请求有错误，例如：404 NOT ;
Found，意味着请求中所引用的文档不存在；
5XX:5开头，服务器错误，表示服务器不能完成对请求的处理：如 500;
Ajax-XMLHttpRequest发送请求
XMLHttpRequest对象的方法
| 方法 | 描述 |
|---|---|
| open(method,url,async) | 规定请求的类型、URL 以及是否异步处理请求。 |
| method：请求的类型；GET 或 POST | |
| url：文件在服务器上的位置 | |
| async：true（异步）或 false（同步） | |
| send(string) | 将请求发送到服务器。 |
| string：仅用于 POST 请求 |
GET 请求：
request.open("GET","gte.php",true);
request.send();
POST 请求
request.open("POST","post.php",true);
request.send();
如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：
request.open("POST","create.php",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("name=黄&sex=男");
| 方法 | 描述 |
|---|---|
| setRequestHeader(header,value) | 向请求添加 HTTP 头。 |
| header: 规定头的名称 | |
| value: 规定头的值 |
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
这个方法其实要设置HTTP的头信息，告诉web服务器我们要发送一个表单，
需要注意的是request.setRequestHeader方法要写在request.open和request.send中间，否则将会抛出异常。
Ajax-XMLHttpRequest取得响应
获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
| 属性 | 描述 |
|---|---|
| responseText | 获得字符串形式的响应数据。 |
| responseXML | 获得 XML 形式的响应数据。 |
| status和statueText | 以数字和文本形式返回HTTP状态码。 |
| gitAllResponseHeader() | 获取所有的响应报头。 |
| gieResponseHeader( parameter ) | 查询响应的某个字段的值。 parameter 要查询的字段 |
onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
| 属性 | 描述 |
|---|---|
| onreadystatechange | 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
| readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 |
| 0: 请求未初始化 | |
| 1: 服务器连接已建立 | |
| 2: 请求已接收 | |
| 3: 请求处理中 | |
| 4: 请求已完成，且响应已就绪 | |
| status | 200: "OK" |
| 404: 未找到页面 |
function but() {
var request;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
request = new XMLHttpRequest();
} else { // code for IE6, IE5
request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.onreadystatechange = function() {
if (request.readyState === 4 && request.status === 200) { //响应完成且请求成功
//做一些事情 request.responseText;
}
}
request.open("GET", "gte.php", true);
request.send();
}
总结下Ajax使用的步骤
第一步
new一个XHM对象new XMLHttpRequest();
兼容写法
var request;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
request = new XMLHttpRequest();
} else { // code for IE6, IE5
request = new ActiveXObject("Microsoft.XMLHTTP");
}
第二步
调用open方法
request.open("GET", "gte.php", true);
第三步
将请求发送到服务器
request.send();
第四步
对过程进行监听来知道服务器是否正确的做出了响应，接着就可以做一些事情
request.onreadystatechange = function() {
if (request.readyState === 4 && request.status === 200) { //响应完成且请求成功
//做一些事情 request.responseText;
}
}
未完
