ajax 的前世此生

时间 2019-11-24

标签 ajax 前世此生栏目 Ajax 繁體版

原文原文链接

1、ajax基础

浏览器的技术
ajax Asynchronous javascript and xmljavascript

xml: 是可扩展标记语言，和html同样，能够清楚的表示层级。在ajax刚刚兴起的时候，为了表达数据的结构和层次，数据结构可能是使用xml；
如今都是json，json也能够表达数据结构；

JSON.parse() // json格式字符串转对象
    JSON.stringify() // 对象转JSON格式的字符串
复制代码

如今的前端都是先后端分离的，即前端负责数据的绑定和维护；
服务端渲染和全局刷新

在好久之前，没有ajax以前，都是先后端不分离的；先后端不分离是前端写好html+css结构，而后把html交给后端，而后利用服务端技术从服务器的数据库中把数据查出来，而后绑定到页面中，而后把绑定好数据的页面直接返回给浏览器，就是说浏览器拿的就是绑定好数据的页面html（服务端渲染SSR(Server-Side-Rendering)）；css

可是这么干有一个问题，若是我这个页面中只有一部份内容是动态绑定的，若是我须要看到这部份内容，就须要刷新整个页面从新获取才行，由于绑定数据只有在服务器上才能进行。这种体验很很差，这种刷新整个页面获取数据的方式称为全局刷新；html

先后端分离

后来ajax诞生了，ajax能够直接从服务器获取数据而不用刷新整个页面；发送一个ajax请求，等到请求结束后把数据经过前端手段把数据绑定到页面中（动态建立dom+appendChild或者字符串拼接+innerHTML）。这种用ajax渲染数据的方式是局部刷新的。前端

ajax 的实例是能够向服务器发送请求的；

使用ajax

建立一个ajax实例对象

let xhr = new XMLHttpRequest();
复制代码

能够经过XMLHttpRequest原型上的open方法打开一个路径

xhr.open('get', 'https://www.easy-mock.com/mock/xxx95ef4e9dd1a28c/example/myfirstmock', true);
复制代码

open方法的参数：
http-method： GET POST
url
async: true 表示异步，false表示同步java

监听ajax实例的onreadystatechange事件，当ajax发送请求时，会触发这个事件行为

xhr.onreadystatechange = function () {
   若是ajax是异步执行的，这个函数会执行三次，三次的readyState分别为x
   console.log(xhr.readyState); 2  3  4

   为了肯定拿到数据，咱们不只判断xhr.readyState 判断，还须要根据xhr.status来判断，xhr使用的就是http status，表示当前请求的状态；

  if (xhr.readyState === 4 && /^2\d{2}/.test(xhr.status)) {
     xhr.readyState 为4表示ajax请求完成，xhr.status 是一个以2开头的三位数，表示请求成功，因此能够在获取服务端返回的数据
  }
};
复制代码

4.发送请求jquery

xhr.send(); // send方法还能够传递参数
复制代码

xhr.readyState 表示当前ajax实例对象的所处的状态
0: 建立了一个ajax实例对象
1: 已经调用open方法，打开了路径
2: 客户端已经接收到服务端的信息（若是须要获取头信息中某些内容，能够在readyState为2时获取就能够）
3: 客户端正在接收响应主体的数据
4: 客户端已经所有接收服务端的数据ajax

2、ajax的请求方式

let xhr = new XMLHttpRequest();
    xhr.open('get', 'aside.json', true);

    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && /^2\d{2}/.test(xhr.status)) {
        console.log(xhr.responseText);
        }
    };

    xhr.send(JSON.stringify({username: 'mabin', pwd: '1233456'}));
复制代码

xhr.open() 方法的第一个参数用于指定http-method，即http的请求方式：

通常接口的请求方式由服务端提供，并且会在接口文档中说明数据库

常见的请求方式：

=> GET: 通常用于从服务端获取数据，可是也能够向服务器传递少许的数据；

get请求方式的特色

1.向服务器传递数据的方式：经过向接口末尾添加问号传参的方式传递，如: aside.json?name=mabinpwd=123456
2.因为浏览器的url地址是有长度限制的，IE的url通常不超过2k，谷歌的通常在8k，超过的部分会自动被截掉，因此get请求传递的数据很小
3.参数直接暴露在url中，安全性低；
4.get请求容易产生缓存，为了防止缓存，通常在url末尾拼接一个随机数或者时间戳，由于浏览器发现url变化了，就会从新请求而不是使用以前已经缓存的数据；json

=> POST 通常用于把数据传递给服务器或者传递大量的数据时

1.post 把须要传递给服务器的数据放在请求体中传递给服务器
2.因为post数据放在请求体中，大小没有限制
3.post 传递数据时把数据放在请求体中的，相对于get而言比较安全
4.post 请求不会默认走缓存后端

其余请求方式

+DELETE: 删除数据
+HEAD: 获取响应头，不须要响应体
+PUT: 修改某些内容
+OPTIONS: 查询服务器的支持的http请求方式
+TRACE: 回显服务器收到的请求，通常用于测试
+....

3、ajax的同步和异步

js是单线程的：每次只能执行一个任务
浏览器是多线程的，能够同时执行多个任务；

let data = null;

    let xhr = new XMLHttpRequest();

    xhr.open('get', 'aside.json', true);

    xhr.onreadystatechange = function () {
      console.log(xhr.readyState); // false 时只输出 4
      console.log(xhr.readyState); // true 时输出2 3 4
      data = xhr.responseText;
    };

    xhr.send();

    function bindHTML(data) {
      // 绑定html的方法
    }
复制代码

为何会有异步的ajax？

若是页面中有5个请求

// 1. 1s
    // 2. 2s
    // 3. 3s
    // 4. 4s
    // 5. 5s
复制代码

若是使用同步的，同步任务都是阻塞的，上一个执行不完下一个不能开始，若是这些接口没有必然关系，用户须要15s才能看到，这个用户体验很很差。
若是使用异步的，第一个发出后随即就开始第二个，而后第三个，由于异步不是阻塞的，后面的不用等待前面的完成（这样子看起来很像同时发送了5个请求），这样一来用时5s就能够了

因此通常状况下ajax使用异步的；

可是使用异步的也有一个问题，若是这5个接口是互相依赖的，好比第二个依赖第一个返回的数据，第三个依赖第二个返回的数据这种状况使用异步，顺序是没法保证的，由于异步任务是谁先到达执行条件谁先执行；

4、jq的ajax

使用原生的ajax把用户名和密码使用post的请求发方式发送到aside.json

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <section>
      <label for="uName">用户名：</label>
      <input type="text" id="uName">
    </section>
    <section>
       <label for="pwd">密码：</label>
       <input type="text" id="pwd">
    </section>
    <section>
       <button id="submit">登陆</button>
    </section>

    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/4-jq的ajax.js"></script>
    </body>
    </html>
复制代码

原生js代码：

获取元素

let uName = document.getElementById('uName');
    let pwd = document.getElementById('pwd');

    let uNameValue = uName.value;
    let pwdValue = pwd.value;
    let btn = document.getElementById('submit');
复制代码

原生js

btn.onclick = function () {
    let xhr = new XMLHttpRequest();
    xhr.open('post', 'aside.json', true);
    xhr.onreadystatechange = function () {
       if (xhr.readyState === 4 && xhr.status === 200) {
       console.log('oh yeach');
       }
    };
    // 注意post请求只能发送字符串类型的数据，一边状况下会使用json格式的字符串
    xhr.send(JSON.stringify({
       username: uNameValue,
       pwd: pwdValue
     }));
    };
复制代码

使用jq的ajax

$.ajax({
       url: 'aside.json',
       type: 'post',
       dataType: 'json',
       cache: false,
       async: true,
       data: {
            username: uNameValue,
            pwd: pwdValue
        },
        error(err) {
             console.log(err)
        },
        success (data) {
            console.log(data)
        }
    });
复制代码

参数详解 url: 请求路径 type: 请求方式 dataType: 数据类型json async: true 默认异步 cache: false 禁用缓存 error: 请求失败时执行的回调，参数是具体的报错信息 success: 请求成功执行的回调，参数是服务端返回的数据