Ajax深入浅出

7 - AJAX深入浅出

7.1 - 原生AJAX

7.1.1 - AJAX简介

• AJAX 全称为Asynchronous Javascript And XML，就是异步的 JS 和 XML。
• 通过AJAX可以在浏览器中向服务器发送异步请求。
• AJAX 不是新的编程语言，而是一种使用现有标准的新方法。`

7.1.2 - XML简介

• XML可扩展标记语言。
• XML 被设计用来传输和存储数据。
• XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据。

//比如说我有一个学生数据：
//    name = "孙悟空" ; age = 18 ; gender = "男" ;   
//用XML表示：
    <student>
        <name>孙悟空</name>
        <age>18</age>
        <gender>男</gender>
    </student>
    
但是现在已经被JSON取代了。

//我们用 JSON 格式 表示：
{"name":"孙悟空","age":18,"gender":"男"}
           

7.1.3 - AJAX的工作原理

Ajax的原理相当于在用户和服务器之间加了一个中间层（AJAX引擎），使用户操作与服务器响应异步化。
           

7.1.4 - AJAX的特点

• AJAX的优点

  可以无需刷新页面而与服务器端进行通信。

  允许你根据用户事件来更新部分页面内容。

• AJAX的缺点

  没有浏览历史，不能回退

  存在跨域问题

  SEO不友好

7.1.5 - AJAX的使用

7.1.5.1. 核心对象

XMLHttpRequest //AJAX的所有操作都是通过该对象进行的。

7.1.5.2 - 使用步骤(发送ajax请求)

–创建xhr实例对象

–绑定事件监听（监听请求成功/失败）

onreadystatechange 当readystate发生变化时触发事件

0：初始化状态， 什么都还没做

1：代表open调用了，但send方法还未调用（还没有发送请求）

2：代表send方法调用了，并且接受到了部分响应信息（接受了响应首行和响应头：响应状态码）

3：代表接受了部分响应体数据（如果响应体数据较小就全部接受，但数据如果较大，就只接受一部分）

4：代表接受了全部响应体数据

-设置请求信息

—请求方式

—请求地址

—请求参数

xhr.open(请求方式, 请求地址?查询字符串参数, 同步false/异步true);

发送请求

注意：不要通过webstorm服务器启动页面（会产生跨域错误）要通过自己的服务器打开页面

举个栗子说：
// 1. 创建xhr实例对象
    const xhr = new XMLHttpRequest();
    // 2. 绑定事件监听（监听请求成功/失败）
    xhr.onreadystatechange = function () {
      console.log('事件触发了', xhr.readyState);
      /*if (xhr.readyState === 2) {
        // 响应状态码
        console.log(xhr.status);
      }
      if (xhr.readyState === 3) {
        // 响应内容
        console.log(xhr.responseText);
      }
      if (xhr.readyState === 4) {
        // 响应内容
        console.log(xhr.responseText);
      }*/
      if (xhr.readyState === 4) {
        if (xhr.status > 199 && xhr.status < 300) {
          // 成功响应内容
          console.log(xhr.responseText);
        } else if (xhr.status > 399 && xhr.status < 600) {
          // 失败的响应
          console.log(xhr.responseText);
        }
      }
    };   
           

3. 设置请求信息
/*
  get请求默认会缓存起来（第二次发送请求会走缓存）
    chrome/firefox （相当于走协商缓存，需要访问服务器）
    ie （相当于走强制缓存，不需要服务器）
    问题：如果后台资源更新了，ie获取不到最新的内容
    解决：请求参数加上随意数，每次请求都不一样，就不会走缓存
 */
           

// xhr.open('GET', 'http://localhost:3000/ajax?name=jack&age=20&date=' + Date.now());
    // xhr.open('GET', 'http://localhost:3000/ajax?name=jack&age=20&date=' + Math.random());
    xhr.open('POST', 'http://localhost:3000/ajax');
    // 设置请求头
    // xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
    xhr.setRequestHeader('content-type', 'application/json');
    // 4. 发送请求
    // xhr.send('name=jack&age=20'); // urlencoded编码 - form
    xhr.send(JSON.stringify({name: 'jack', age: 20})); // json
    console.log('全部代码执行完了~');
  }
           

7.1.5.3 - 解决IE缓存问题

• 问题： 在一些浏览器中（IE），由于缓存机制的存在，ajax只会发送第一次请求，剩下多次请求不会再发送给浏览器而是直接加载缓存中的数据。

• 解决方式： 浏览器的缓存是根据url地址来记录的，所以我们只需要修改url地址（让其实时动态改变）即可避免缓存问题

• xhr.open("get","/testAJAX?t="+Date.now());

7.1.5.4 - AJAX请求状态

xhr.readyState 可以用来查看请求当前的状态

0. : 对应常量UNSENT，表示XMLHttpRequest实例已经生成，但是open()方法还没有被调用。

1. : 对应常量OPENED，表示send()方法还没有被调用，仍然可以使用setRequestHeader()，设定HTTP请求的头信息。
2. : 对应常量HEADERS_RECEIVED，表示send()方法已经执行，并且头信息和状态码已经收到。
3. : 对应常量LOADING，表示正在接收服务器传来的body部分的数据，如果responseType属性是text或者空字符串，responseText就会包含已经收到的部分信息。
4. : 对应常量DONE，表示服务器数据已经完全接收，或者本次接收已经失败了

7.2 - jQuery中的AJAX

7.2.1 - get请求

• $.get(url, [data], [callback], [type])

  url:请求的URL地址

  data:请求携带的参数

  callback:载入成功时回调函数

  type:设置返回内容格式，xml, html, script, json, text, _default

实例：
$.ajax({
      method: 'GET',  // 请求方式
      url: 'http://localhost:3000/ajax', // 请求地址
      data: { // 请求参数
        name: 'jack',
        age: 18
      },
      success: function (data) {
        console.log(data); // 请求成功的响应数据
      },
      error: function (error) {
        console.log(error); // 请求失败的具体原因
      }
    });
$.get('http://localhost:3000/ajax', {name: 'jack', age: 18}, function (data) {
      console.log(data);
    })
           

7.2.2 - post请求

$.post(url, [data], [callback], [type])

url:请求的URL地址

data:请求携带的参数

callback:载入成功时回调函数

type:设置返回内容格式，xml, html, script, json, text, _default

实例：
$.ajax({
      method: 'POST',  // 请求方式
      url: 'http://localhost:3000/ajax', // 请求地址
      data: JSON.stringify({ // 请求参数
        name: 'jack',
        age: 18
      }),
      headers: { // 请求头： 默认post请求是以form表单方式发送
        'content-type': 'application/json'
      },
      success: function (data) {
        console.log(data); // 请求成功的响应数据
      },
      error: function (error) {
        console.log(error); // 请求失败的具体原因
      }
    });
$.post('http://localhost:3000/ajax', {name: 'jack', age: 18}, function (data) {
      console.log(data);
    });