0514-ajax的看法

//自己看法：

1、AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

2、AJAX 是与服务器交换数据并更新部分网页的技术，在不重新加载整个页面的情况下

3、之前交互用xml格式比较多,现在json格式是主流,因为xml太臃肿了,我们就不再学习了;

4、一共分五部走： (1) 创建（xhr）、(2) 注册回调函数、(3)配置请求（OPEN()，get/post） 、(4)发送请求send(null)

                               (5)创建回调函数

5、详细说明：https://www.jb51.net/article/88084.htm

//以下是老师代码

# Ajax

## 1. 传统的HTTP请求是什么样子的?

* 一次HTTP请求对应一个页面;
* 如果想在当前页面中发现请的http请求,页不跳转当前页面,就必须需要一个请求代理;
* 这个请求代理,代理了用户的请求,向服务器发出新的http请求;
* 而这个代理,我们可以用一段 javascript代码来完成,由js来发出http请求;
* 等js收到服务器端响应的数据后,再由js来刷新页面更新数据;
* 这时,给用户的感觉就是我仍停留在当前页面,而页面上的数据却在不停的更新中,用户体验超级棒;
* 这个代理用户发出http请求的js代码,宏观上也可以叫作客户端,因为任何能发起请求的实体都可以视为客户端;

-----------------------------------------------------------------------------------------

## 2. Ajax 是什么?

* Ajax 就是刚才我们所说的那个代理用户发起http访问请求的js代码;
* Ajax 的全称是: Asynchronous JavaScript and XML[异步的 JavaScript 和 XML];
* 之前交互用xml格式比较多,现在json格式是主流,因为xml太臃肿了,我们就不再学习了;
* 同步与异步的区别:
 * 同步是指客户端与服务器端处理的是同一个请求,服务器响应成功,客户端也接收到返回的数据,这个请求才算完成;
 *异步是指客户端与服务器可以同时处理不同的请求,客户端通过事件监听判断服务器端是否响应成功并返回数据;
* Ajax 是目前最主流的异步请求方式,得到了几乎所有的主流浏览器的支持,包括IE在内.

-----------------------------------------------------------------------------------------

## 3. Ajax 的主要应用场景?
``
* 表单验证;
* 数据实时更新,例如股票行情;
* 在线地图;
* 其它需要数据实时加载,无刷新的使用场景.

-----------------------------------------------------------------------------------------

## 4. Ajax 中常用的属性和方法

* 对象: `XMLHttpRequest()` 简称 xhr对象;   //request 请求
* 事件: `onreadystatechange()` 监听就绪状态属性的变化;   //onreadystatechange 随时准备状态改变
* 属性: `readyState` 请求状态值,有四个值,我们只对数据就绪状态的值:4感兴趣;  //state 状态
* 属性: `status` 请求状态码, 返回 200 时,表示已从服务器上成功的获取到了返回的文本;   //status 地位
* 属性: `responseText`, 从服务器端返回的文本内容;       //response  响应                         
* 方法: `open('请求类型','请求的url',请求方式,默认为true异步)`:设置请求参数
* 方法: `send()`: 发送请求,GET请求请填上参数null;
* 方法: 如果是`post`请求,需要设置一下请求头信息,请文档类型重置:   //如果是post 请求，设置以下代码
      `setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');`

-----------------------------------------------------------------------------------------

## 5. 基本代码的结构:

```javascript

// 1. 创建request对象
var request = new XMLHttpRequest();

// 2. 监听请求变化
request.onreadystatechange = function () {
   if (request.status === 4) {
       if (request.status === 200) {
           // 请求成员, 更新页面中的DOM元素
       }
   }
};

// 3. 初始化请求，请求服务器资源           /*以下是如果用get发送请求的办法，两步*/

request.open('get', 'check.php', true);

// 4. 发送get/post的请求给服务器。
request.send(null);



// 如果是POST请求, 3-4步会发生变化   /*以下是如果用post发送请求的办法，三步*/

// 3. 初始化请求
request.open('post', 'check.php', true);

// 4. 设置请求头
setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

// 5. 发送请求
request.send(data);

```