Ajax与Http协议

1.Ajax与Http协议详解

概述：Ajax模块在处理网络请求的时候包括以下四个步骤
    (1)创建Xhr对象
    (2)发出HTTP请求
    (3)接收服务器回传的数据
    (4)更新网页数据


补充：Ajax可以发出同步请求，也可以发出异步请求。

    但大多数情况下指的是异步请求，因为同步的Ajax请求对浏览器会产生“阻塞效应”

2.xhr对象

【Ajax发送请求】这件事情并不是一句话带过就可以的，在Ajax中对整个请求从创建到发送都有着一套严格的标准流程。就好像车间生产产品，流水线上每一个步骤的操作完毕之后才能打包出售。

在Ajax规则中，"请求"从创建到被发送需要至少经历如下几个步骤：


通过XMLHttpRequest类创建xhr对象
为xhr对象添加属性与回调方法
令xhr对象执行open()方法，指明请求被发往某处

令xhr对象执行send()方法，发出请求。

xhr对象的常用属性与方法

(1)onreadystate属性
(2)readyState属性
(3)status属性
(4)statusText属性
(5)responseText属性
(6)open()方法
(7)setRequestHeader()方法

(8)send()方法

3.xhr对象发送post请求

描述：post请求和get请求的差异就在于多了一个表单数据，
    在xhr对象中可以通过FormData进行构建
语法：var formData = new FormData();
    formData.append('key',value);//value如果是字符串类型要加引号。
    xhr.send(formData);
说明：
    至于formData的创建时机和位置，只要你能够在请求发送出去之前
    也就是xhr.send()语句被写出之前添加给xhr对象

    那么你愿意把formData放在哪就放在哪。

4.xhr对象的兼容性问题

描述：xhr对象的获取方式在IE和非IE下是需要使用不同方法。
语法：
    标准浏览器支持的方法为: XMLHttpRequest()

    IE浏览器支持的方法为: ActiveXObject()

5.请求超时timeout与超时监听ontimeout

描述：timeout属性等于一个整数，用来设置当请求发出后等待接收响应的时间。
    ontimeout()方法则是当等待超时后，自动执行的回调方法。


语法：xhr.timeout = xxx;
    xhr.ontimeout=function(){
console.error("The request for"+url地址+"timed out");
    };


说明：timeout属性单位是毫秒，表示当请求发出后等待响应的时间。

    如果在设置的时间内没能收到后台响应的内容，则认为请求超时(执行ontimeout)。

6.登录post请求实例

要求：
(1)在html页面中获取用户信息，并在点击的时候将信息post到后台
(2)在php文件中通过$_POST对象获取html文件发来的信息，并根据输入内容进行响应
扩展：
(3)如果前两问能够自行实现并且没问题，则使用sql语句来检查

    输入的用户名密码是否是DB中的条目，并根据DB的检索结果反馈给用户。