js学习之ajax的基础知识

ajax的基础知识

• 创建ajax实例的步骤

// 1、创建AJAX实例
  let xhr = new XMLHttpRequest();
  // 2、打开URL（发送请求前的一些处理）
  xhr.open('get', 'http://www.baidu.com', true);
  // 3、箭筒AJAX状态信息
  xhr.onreadystatechange = function(){
    // xhr.readyState  AJAX的状态 0~4
    // xhr.status  xhr.statusText  服务器返回的网络状态码 2/3/4/5
    if(xhr.readyState === 4 && xhr.status === 200) {
      console.log(xhr.response);
    }
  }
  // 4、发送请求（请求主体的信息会基于send的时候发送给服务器）
  xhr.send(null);

• ajax的请求方式

/* 
  * 客户端向服务器发送网络请求的方式
      GET：get/delete/head/options
      POST：post/put

    GET系列的特点：一般认为是从服务器获取信息（当然也可以把客户端的信息传递给服务器），比重是 给得多，拿得少
       get：从服务器获取信息
       delete：一般应用于想删除服务器上的一些文件或者一些大量的信息
       head：只需要获取响应头的信息即可，响应主体信息不接受（服务器也不需要返回）
       options：试探性请求，常用于CORS跨域资源共享的时候，每一个正常的请求发送之前，默认会先发一个options请求，这个请求用来校验客户端和服务器端是否正常连接

    POST系列的特点：一般认为是给服务器推送信息（当然服务器也可以给客户端返回信息），比重是 给得少，拿得多
      post
      put：和delete对应，一般用于给服务器传递文件或者大数据（例如文本编译器编辑的内容）

    官方文档没有明确规定GET和POST的区别，但是程序员们默认按照一些的方式来传
      GET传递信息给服务器的信息一般是基于“URL地址问号传参”实现
        xhr.open('get','http://www.baidu.com?xx=xx&yy=yy')
      POST传递给服务器的信息一般是基于“请求主体”实现
        xhr.send('xx=xx&yy=xx')
      客户端还可以基于设置情趣头把一些简要的信息传递给服务器（例如cookie，token等）

  1、GET传递给服务器的信息要远远小于POST
     原因：URL在不同浏览器中有长度的限制，IE：2KB(2*1024B),超出浏览器限制的部分内容会被浏览器自动裁剪掉；POSt理论上是没有长度限制的（请求主体没有设置过大小的限制），但是真实项目中为了保证数据传输的高效性，默认都会手动做限制；

  2、安全问题：POST相对GET来说要安全一些
     这样项目中涉及安全信息的传输都要用POST（例如：登录）；
     GET基于URL传输数据很容易被URL劫持掉，这样不安全；POST相对安全，但是也不是绝对安全，所以对于重要信息的传输也需要进行加密处理（例如：md5加密）

  3、缓存问题：浏览器在处理GET请求的时候，如果两次请求的地址和参数都是一样的，那么浏览器会设置数据缓存（这个缓存并不是我们想要的）；想要不走浏览器的缓存，需要保证每次请求url都不完全一样（例如：在在参数后面多加一个时间戳或者随机数等）
    chr.open('get', 'url?xx=xx&yy=yy&_='+Math.random())
 
 */

• ajax的状态码和网络状态码

/* 
  * AJAX的状态  xhr.readyState
      UNSENT：0  未发送  开始创建xhr默认状态就是0
      OPEND：1   已打开  执行了open
      HEADERS_RECEVED：2  服务器已经返回了响应头的信息
      LOADIND：3  响应主体正在加载返回中
      DONE：4  响应主体信息也返回了

  * HTTP网络状态码
      以2开头的  200  服务器正常返回数据（客户端想服务器端发送请求，服务器正常把数据返回给客户端，但是数据是否正确不一定）
      以3开头的  304 读取的是协商缓存的数据
                 301 永久重定向（一般用于域名的转移）
                 302/307 临时转移或者临时重定向（一般用于服务器的负载均衡）
      以4开头的（一般是客户端的错）  
                 400 参数错误
                 401 无权限访问
                 403 服务器拒绝执行
                 404 地址错误
      以5开头的（一般是服务器端的错误）  
                 500 服务器发生未知错误
                 503 超负荷


    项目中所谓的请求成功和失败时分为两种的：
      网络层面：服务器没有返回任何的信息（或者和服务器都没有连接上）这肯定是失败的【根据不同的状态码就可以分辨出原因】
      业务层面：已经从服务器获取数据，只不过获取的数据是不符合业务逻辑需要的，也可以定位为失败。一般服务器返回的数据中都包含code表示，代表的是业务逻辑上的成功还是失败【需要前后端协商好数据的判断标识】
 */