Ajax全接触(一)基础理论

什么是同步? 客户端要发起请求，服务器端要去处理，而且去响应，这时候客户端完全是等待，等待服务器端的处理和响应，当服务器端处理响应后客户端会重新载入页面。这时候如果你有错误，那么只能再次发起请求，再次等待。同步的事件会让人疯狂。

同步和异步

什么是同步

客户端要发起请求，服务器端要去处理，而且去响应，这时候客户端完全是等待，等待服务器端的处理和响应，当服务器端处理响应后客户端会重新载入页面。这时候如果你有错误，那么只能再次发起请求，再次等待。同步的事件会让人疯狂。

什么是异步

当你填写表单数据时，页面当时就把数据发送到服务器，也就是页面发送了个请求，服务器去做处理和响应，得到你的数据不符合要求，他会把响应结果，发给页面，但是在这个过程中，你还是可以依旧去填写，表单其他内容，这时候服务器告诉你有填写错误的地方，在页面上的表现，只是把你填写错误的旁边标上一行字，并没有刷新你的页面，这样在填写表单时，所有的错误信息都会显示在页面，你可以实时的更正，这个过程中你不会有整个页面的刷新，也不会有整个页面的提交和等待，当你最后点击提交一切都可以搞定了。

怎么实现Ajax技术呢？

1. 运用HTML和CSS来实现页面，表达信息；
2. 运用XMLHttpRequest对象和web服务器进行数据的异步交换；
3. 运用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个步骤。

1. 建立TCP连接；

2. Web浏览器向Web服务器发送请求命令；

3. Web浏览器发送请求头信息；

4. Web服务器做出应答；

5. Web服务器发送应答头信息；

6. Web服务器向浏览器发送数据；

7. Web服务器关闭TCP连接；

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

1. HTTP请求的方法或动作，比如是GIT还是POST请求；

2. 正在请求的URL，总得知道请求的地址是什么吧；

3. 请求头，包含一些客户端环境信息，身份验证信息等；

4. 请求体，也就是请求正文，请求正文中可以包含客户提交的查询字符串信息，表单信息等等。

GIT请求和POST请求

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

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

HTTP响应

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

1. 一个数字和文字组成的状态码，用来显示请求是否成功还是失败；

2. 响应头，响应头也和请求头一样包含许多有用的信息，例如服务类型，日期时间，内容类型和长度等；

3. 响应体，也就是响应正文；

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;
        }
    }