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语句要求不看提示自行编写。