AJAX基础知识

ahanpi
419 阅读4分钟

1. AJAX的基本操作

  • AJAX: async javascript and xml

    • 基于JS实现的异步刷新，目前用json对象比xml更方便，更容易处理

  • ajax操作

    • ajax不支持file协议，本地需http协议
// 1.创建一个ajax实例对象，xhr对象
//   ie低版本浏览器中需要基于 newActiveXObject()处理

let xhr = new XMLHttpRequests;

// 2. 打开URL（发送请求前的一些处理）
//    open([方法], [api], [true异步或不写=>异步, false同步])

xhr.open('get', './data/json', true);

// 3. 监听ajax状态信息

xhr.onreadystatechange = function() {
  // xhr.readyState  ajax状态 0~4
  // xhr.status  xhr.statusText 服务器返回的网络状态码以及描述 2/3/4xxx
  if(xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
    console.log(xhr.response);
  } 
}

// 4. 发送请求（请求主体信息会基于send时候发送给服务器，post）

xhr.send(null);

2. GET和POST的特点

  • 客户端向服务器发送请求的方式

    • GET: get/delete/head/options
    • POST: post/put

  • GET系列的特点

    • 一般认为是从服务器获取信息，当然也可以把客户端信息传递给服务器，给的少，拿的多

    • delete 一般应用于想删除服务器上的一些文件，或一些大量的信息

    • head 只需要获取响应头的信息即可，响应主体信息不接受，服务器也不需要返回

    • options 试探性请求，常用语CORS跨域资源共享的时候，每一个正常请求发送之前，默认先发送一个options请求，这个请求用来校验客户端和服务器端是否正常连接

  • POST系列的特点

    • 一般认为是给服务器推送信息，服务器也可以给客户端返回信息，给的多，拿的少

    • put和delete对应，一般用于给服务器传递文件，或者大的数据（例如富文本编辑器编辑内容）

3. GET和POST的区别

3.1 官方文档没有明确规定GET和POST的区别，但是大家约定俗称按照以下机制处理

  • GET传递给服务器的信息一般基于“url地址+问号传参”实现 
    xhr.open('get', './data/json?lx=1&name=xxx&xxx=xxx', true);
  • POST传递给服务器信息一般基于“请求主体”实现 
    xhr.send('lx=1&name=xxx&xxx=xxx');
  • 客户端还可以基于设置请求头把一些简要信息传递给服务器（cookie、token...）

3.2 GET传递给服务器的信息要远小于POST

  • url在不同浏览器中有长度的限制，IE：2kb（2*1024b），超出浏览器限制的部分，内容会被自动裁切
  • post理论上没有长度限制，因为请求主体没有设置大小的限制，但是真实项目为了保证高校，会手动限制

3.3 安全问题

  • POST相对GET安全，项目中涉及安全信息的传输都要用post，比如登录
  • GET是基于URL传输数据，很容易被url劫持，这样不安全，post相对安全，但也不是绝对安全，对于重要信息传输也需要进行手动加密，MD5加密等

4. 浏览器get结果缓存问题

  • 浏览器在处理GET请求时，如果两次请求的地址+参数都一致，浏览器会自己设置数据缓存（并不需要此缓存）
  • 请求地址 /api/data?lx=1 需要数据实时刷新
  • 想要浏览器不走缓存，需要保证每次请求的url都不完全一致
// 每次请求末尾加随机数，或者时间戳，保证url变化
 xhr.open('get', './data/json?lx=1&name=xxx&xxx=xx&_=' + Math.random(), true);

5. AJAX状态

  • xhr.readyState 状态 0~4
    • DONE: 4 => 响应主体也返回了
    • HEADERS_RECEIVED: 2 => 服务器已经返回响应头的信息（xhr.getAllResponseHeaders()），先返回响应头，后主体
    • LOADING: 3 => 响应主体正在加载返回中
    • OPENED: 1 => 已打开，已经执行了open
    • UNSENT: 0 => 未发送，开始创建xhr默认状态就是0 image.png
  • onprogress 用于文件上传进度回调
  • upload 上传下载时处理
  • withCredentilas: 跨域资源请求中是否允许携带资源凭证
XMLHttpRequest.prototype 打印

6. HTTP网络状态码

  • xhr.status

  • 以2开始的，200 服务正常返回数据

  • 以3开始的

    • 304 读取的是协商缓存数据
    • 301 永久重定向，一般应用于公司的域名转移 www.360bug.com 301 -> jd.com
    • 302/307 临时转移 / 临时重定向，一般用于服务器负载均衡，服务器基于nginx返回的
      • 一台服务器并发数1000，只有一台服务器，第1001人返回503错误，服务器超负荷
      • 负载均衡 1001，转移到另一台服务器，以此类推2001...

  • 以4开始的，错误一般都是客户端问题/参数、权限、url等

    • 400 请求参数有误
    • 401 无权限访问
    • 403 服务器拒绝执行
    • 404 请求地址错误

  • 以5开始的

    • 500 服务器未知错误

    • 503 超负荷

avatar
文章
阅读
粉丝