Ajax的简述

什么是 AJAX ？

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML ）。是一种用于创建快速动态网页的技术，通过在后台与服务器进行少量数据交换，AJAX 可以实现网页的异步更新，意味着可以在不重新加载整个页面的情况下，对网页的某部分进行更新。
　　AJAX 技术核心是 XMLHttpRequest 对象（ 简称 XHR ），这是由微软首先引入的一个特性。 XHR 为服务器发送请求和解析服务器响应提供了流畅的接口，能够以异步方式从服务器取得更多的信息，意味着用户单击后，可以不必刷新页面也能取得新数据。
　　
　　首先创建 XHR 对象:

  var xhr = new XMLHttpRequest();

接下来，向服务器发送数据:
　　通过使用 open ( method , url , async ) 和 send ( string )
　　在使用 XHR 对象时，要调用的第一个方法是open()
　　open 方法传入的3参数如下:

• method：请求的类型(GET/POST)。
• url：文件在服务器的位置
• async：布尔值，true表示异步，false表示同步（可选，默认为true）。

send() 方法将请求发送到服务器，有一个可选的参数 string ,仅用于 POST 类型的请求。在发送 GET 请求时，可能得到缓存的信息 ( IE中 )，导致发送的异步请求不能正确地返回想要的最新地数据。可以在 url 中添加一个唯一的 ID ：( 随机数 )。

xhr.open("GET","demo .asp?t=" ＋ Math.random(),true);
xhr.send();

最后一步，是服务器响应。
　　XMLHttpRequest 对象的 responseText 和responseXML 属性分别获得字符串形式的响应数据和XML形式的响应数据。可以在控制台里输出响应如下:

  console.log(xhr.responseText);

注意:无论内容类型是什么，响应主体的内容都会保存到responseText 属性中。

还有3个关于响应状态的属性也经常用到。
　　如果需要接收的是异步响应，这就需要检测XHR对象的 readyState 属性，该属性表示请求/响应过程的当前活动阶段。

Ajax 状态码

在创建 ajax 对象，配置 ajax 对象，发送请求，以及接受完服务器端相应数据，这个过程中的每一个步骤都会对应一个数值，这个数值就是 ajax 状态码

• readyState :存有 XMLHttpRequest 的状态。XHR 对象会经历5种不同的状态。
• 0:请求未初始化( new 完后，还没有调用 open());
• 1:服务器连接已建立( 对象已创建并初始化，尚未调用 send() 方法);
• 2:请求已经发送;
• 3:请求处理中，通常响应中已经有部分数据可以用了:
• 4:请求已完成，已经接收到全部响应数据，而且已经可以在客户端使用了。

xhr.readyState  //获取 Ajax 状态码

注意：我们一般只关心状态4，因为这时所有数据都已经就绪。只要 readyState 属性值由一个值变成另一个值，都会触发一次 readystatechange 事件

• state：声明要在窗口状态中显示一条信息。
  200：请求成功
  404：未找到页面。

获取服务器端的相应

onreadystatechange 事件

onreadystatechange：存储函数（ 或函数名 ），每当 readyState 属性改变时，就会调用该函数

两种获取服务器端相应方式的区别

onload请求数少，代码简洁，效率高。

Ajax 运行原理实现

请求参数传递

• GET 请求方式

xhr.open('get','www.baidu.com?name=wow&age=20');

• POST 请求方式

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send('name=zhangsan&age=20');

请求参数的格式

1. application/x-www-form-urlencoded

name-wow&age=20&sex=男

2. application/json

{name:'zhangsan',age:'20',sex:'男'}

在请求头中指定 Content-Type 属性的值是 application/json，告诉服务器端当前请求参数的格式是 json

JSON.stringify()//将 json 对象转换为 json 字符串

注意：get请求是不能提交 json 对象的数据格式的，传统网站的表单提交也是不支持json 对象数据格式的

Ajax 错误处理

1.网络畅通，服务器端能接受到请求，服务器端返回的结果不是与其结果

可以判断服务器端返回的状态码，分别进行处理。xhr.status 获取 http 状态码。

2.网络畅通，服务器端没有接受到请求，返回 404 状态码。

检查请求地址是否错误。

3.网络畅通，服务器端能接收到请求，服务器端返回 500 状态码。

服务器端错误，检查后端代码。

4.网络中断，请求无法发送到服务器端。

会触发 xhr 对象下面的 onerror 事件,在 onerror 事件处理函数中对错误进行处理。