Ajax与Http协议

目录

1. Ajax与Http协议详解
2. Xhr对象
   1.  xhr对象发送请求整体感知
   2.  xhr对象的常用属性和方法
3. xhr对象发送post请求
4. xhr对象的兼容性问题
5. 请求超时timeout与监听超时ontimeout
6. 登录post请求实例

1.Ajax与Http协议详解

我们在jQuery中已经提到了Ajax，并且通过$.ajax()方法实现了和前后台完成的简单交互。但事实上在工作当中jQuery所提供的功能却是远远不够的，绝大部分的公司实际上并不希望他们的开发者使用现有的Ajax框架，而是选择自行封装一个功能相似但针对性却更强的内容。因此我们必须知道在js内部，Ajax到底是怎样工作的。

而在此之前，让我们先对Ajax本身做一些详细的说明。

描述：Ajax全名为Asynchronous javascript and xml。

    是指围绕【由js向服务器发起http请求】这个功能而开发的一整套完整的做法。

由来：99年Microsoft公司第一次在IE5.0中引入此功能

    04年Gmail发布、05年Google Map发布时此功能才被重视

    05年2月Ajax正式提出

    06年W3C发布其对应的国际化标准

概述：Ajax模块在处理网络请求的时候包括以下四个步骤

    (1)创建Xhr对象

    (2)发出HTTP请求

    (3)接收服务器回传的数据

    (4)更新网页数据

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

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

实例： 

cvar xhr = new XMLHttpRequest();

xhr.onreadystatechange = function(){

if(xhr.readyState === 4){

if(xhr.status == 200){

console.log(JSON.parse(xhr.responseText));

}else{

console.error(xhr.statusText);

}

}

}

xhr.onerror = function (e) {

   console.error(xhr.statusText);

};

xhr.open(‘GET‘,‘ajax.php‘,true);

xhr.timeout = 5000;

xhr.send(null);

2.Xhr对象

2.1.xhr对象发送请求整体感知

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

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

 通过XMLHttpRequest类创建xhr对象

 为xhr对象添加属性与回调方法

 令xhr对象执行open()方法，指明请求被发往某处

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

说明：XMLHttpRequest对象用来在【浏览器】与【服务器】之间传送数据。

    通俗上来说将此对象称为request请求对象、请求对象或请求。

2.2.xhr对象的常用属性和方法

 在整体感知中我们看到的例子中的属性和方法，基本都是要掌握的内容。或许有一些内容

并没有体现在上面，但相信我他们都会是你今后离不开的东西。

(1)onreadystatechange属性

    描述：onreadystatechange属性指向一个回调函数。

        当页面的加载状态发生改变的时候readyState属性就会跟随发生变化，

        而这时readystatechange属性所对应的回调函数就会自动被调用。

    语法：xhr.onreadystatechange = function(){};

(2)readyState属性

    描述：是一个只读属性，用一个整数和对应的常量来表示XMLHttpRequest请求当前所处的状态

  一般会在onreadystatechange事件的回调函数中，

  通过判断readyState属性的值，进而执行不同状态对应的函数。

    语法：xhr.onreadystatechange = function(){

  if(xhr.readyState == n){

     // 执行对应的函数

  }

  }

说明：

    值为0,对应常量UNSENT

 表示XMLHttpRequest实例已经生成，但是open()方法还没有被调用。

    值为1,对应常量OPENED

 表示send()方法还没有被调用，仍然可以使用setRequestHeader() 设定HTTP请求头

    值为2,对应常量HEADERS_RECEIVED

 表示send()方法已经执行，并且头信息和状态码已经收到。

    值为3,对应常量LOADING

 表示正在接收服务器传来的body部分的数据，如果responseType属性

 是text或者空字符串，responseText就会包含已经收到的部分信息。

    值为4,对应常量DONE，表示服务器数据已经完全接收，或者本次接收已经失败了。

 (3)status属性

    描述：表示本次请求所得到的HTTP状态码，它是一个整数。

    语法：if(xhr.readyState == n){

  if(xhr.status == 200){

  //通信成功

  }

  }

    说明：

    a.本属性是只读属性。

    b.本属性有以下可能值：

    补充：一般来说认为200就是通信成功的标志。

200, OK，访问正常

301, Moved Permanently，永久移动

302, Move temporarily，暂时移动

304, Not Modified，未修改

307, Temporary Redirect，暂时重定向

401, Unauthorized，未授权

403, Forbidden，禁止访问

404, Not Found，未发现指定网址

500, Internal Server Error，服务器发生错误

(4)statusText属性

    描述：表示服务器发送的状态提示，是一个只读字符串。

    语法：xhr.statusText

    说明：不同于status属性，该属性返回状态码所对应的状态信息。

  比如OK。

(5)responseText属性

    描述：返回从服务器接收到的字符串内容，该属性为只读。

  如果本次请求没有成功或者数据不完整，该属性就会等于null。

  如果服务器返回的数据格式是JSON，就可以使用responseText属性来进行数据解析。

语法：xhr.responseText

(6)open()方法

    描述：表示要将请求发往某处，只是设置而不是真的发送。

    语法：xhr.open(‘请求类型’，’url地址’，是否异步);

    说明：

  第一个参数用来设置get/post请求

  第二个参数用来设置请求发送到的url地址

  第三个参数是布尔值用来设置是否异步发送，默认false表示同步。

补充：

  目前因为我们的页面都采用localhost方式在本地主机直接访问，

  因此url直接写出php文件的相对路径即可。

  而如果通过其他方式打开可能会引起js的跨域问题，就会报错。

  而这并不是今天的内容。

(7)setRequestHeader()方法

    描述：用于设置HTTP头信息。

    语法：xhr.setRequestHeader(‘key’，’value’);

    说明：

  本方法必须在open()之后、send()之前被调用

  本方法用来设置在请求发送时，一并被发送出的一些补充信息

    例子：

  xhr.setRequestHeader(‘Content-Type‘, ‘application/json‘); 

    xhr.setRequestHeader(‘Content-Length‘, JSON.stringify(data).length);

  xhr.send(JSON.stringify(data)); 

(8)send()方法

    描述：用于实际发出HTTP请求。

    语法：xhr.send(formData);

    说明：send()方法的参数是表单数据，为post请求准备。

  如果是get请求则参数直接写null即可。

3,xhr对象发送post请求

描述：post请求和get请求的差异就在于多了一个表单数据，

    在xhr对象中可以通过FormData进行构建

语法：var formData = new FormData();

    formData.append(‘key‘,value);//value如果是字符串类型要加引号。

    xhr.send(formData);

说明：

    至于formData的创建时机和位置，只要你能够在请求发送出去之前

    也就是xhr.send()语句被写出之前添加给xhr对象

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

例子：

    var userName = document.querySelector(‘.userName‘).value;

    var password = document.querySelector(‘.password‘).value;

    var formData = new FormData();

    formData.append(‘userName‘,userName);

    formData.append(‘password‘,password);

4，xhr对象的兼容性问题

描述：xhr对象的获取方式在IE和非IE下是需要使用不同方法。

语法：

    标准浏览器支持的方法为: XMLHttpRequest()

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

例子：

        if(window.XMLHttpRequest){

           xhr = new XMLHttpRequest();

         }else if(window.ActiveXObject){

           xhr = new ActiveXObject();

         }

说明：可以直接使用三目运算符解决

    xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("");

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

描述：timeout属性等于一个整数，用来设置当请求发出后等待接收响应的时间。

    ontimeout()方法则是当等待超时后，自动执行的回调方法。

语法：xhr.timeout = xxx;

    xhr.ontimeout=function(){

console.error("The request for"+url地址+"timed out");

    };

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

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

补充：如果该属性等于0，就表示没有时间限制。

例子：xhr.timeout = 5000;//5秒后超时

    xhr.ontimeout = function(){

    console.error("The request for "+ajax.php+"timed out.");

    };

6.登录post请求实例

要求：

(1)在html页面中获取用户信息，并在点击的时候将信息post到后台

(2)在php文件中通过$_POST对象获取html文件发来的信息，并根据输入内容进行响应

扩展：

(3)如果前两问能够自行实现并且没问题，则使用sql语句来检查

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

小贴士：操作db的时候，最好php原生操作和pdo操作都写一遍。

       另外sql语句要求不看提示自行编写。