AJAX基础知识

超能小可爱yy
372 阅读5分钟

一、什么是AJAX

async javascript and xml
此时的异步js指的是局部刷新，在最开始没有实现前后端完全分离的时候，页面的渲染主要是服务器渲染：客户端基于url发请求给服务器，服务器端把页面（结构、样式、数据）都去渲染好，最后把整个页面返回给客户端。但是如果数据内容更新，需要服务器重新更改，浏览器拿到最新代码，只能整个页面刷新，才能看到最新的内容，这个叫做全局刷新

二、AJAX的基础操作

  • 创建一个XHR对象（AJAX实例）
let xhr = new XMLHttpRequest;
//XMLHttpRequest：基于http请求从服务器拿到xml格式的数据
  • 打开请求地址
xhr.open('get', './data.json');
//  xhr([method], [url], [async 默认true], [username], [userpass])

/*
    设置请求头信息：
    xhr.setRequestHeader('xxx', 'xxx')
*/

/*
   请求方式：
   
       GET特点：一般认为是从服务器获取信息（当然也可以把客户端的信息传递给服务器），比重：给的少，拿
       得多
           - get
           - head：只需要获取响应头的信息即可，响应主体信息不接受（服务器也不需要返回）
           - delete：一般应用于想删除服务器上的一些文件或者一些大量的信息
           - options：试探性请求，常用于CORS跨域资源共享的时候，每一个正常的请求发送之前，我们默
           认先发送一个OPTIONS请求，这个请求用来校验客户端和服务器端是否正常连接即可
           
       POST特点：一般认为是给服务器推送信息（当然服务器也可以给客户端返回信息），比重：给的多，拿得
       少
           - post
           - put：和delete对应，一般用于给服务器传递文件或者大数据（比如文本编辑器编辑的内容）
           
        官方文档没有明确规定get和post区别，但是大家约定俗成的按照以下方式来搞：      
           - get请求传递给服务器的信息一般基于URL问号传参
           - post请求传递给服务器的信息一般基于“请求主体”
           - 客户端还可以基于设置请求头把一些简要的信息传递给服务器（cookie、token，...）
       
       get和post区别：
       1. get传递给服务器的信息远少于post
          原因：URL在不同浏览器中有长度的限制，IE：2KB（2*1024B），超出浏览器限制的部分，
          内容会自动裁切掉，post理论上是没有长度限制的（请求主体没有设置过大小的限制），但是
          真实项目中为了保证数据传输的高效性，我们都会手动做限制
       2.安全问题：post相对于get来讲安全一点
         原因：get基于URL传输数据很容易会被URL劫持掉，这样不安全，POST相对安全，但也不是绝
         对安全，所以对于重要信息的传输也需要进行手动加密处理（MD5加密等）
       3.缓存问题
         浏览器在处理get请求的时候，如果两次请求的地址+参数都一致，浏览器自己会设置缓存
         （当然这个缓存是我们不想要的），想要不走浏览器的缓存，我们需要保证每次请求的url都不
         完全一致（方案：每次请求，问号传参的末尾都加一个随机数或者时间戳等）
         例如：xhr.open('GET', './data.json?xx=xx&_='+Math.random())
         
*/
  • 监听请求的进度，当ajax状态改变
xhr.onreadystatechange = function(){ 
    if(xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)) {
        - 获取响应头信息
        xhr.getAllResponseHeaders();
        - 获取响应主体信息
        xhr.responseText
        xhr.responseXML
        xhr.response
        xhr.responseType
    }
}
/*
获取ajax状态:xhr.readyState
    - 2 响应头信息返回
    - 4 响应主体信息返回
xhr.status
    不是所有的请求都一定成功，网络状态码记录了这个结果
*/
  • 发送请求
xhr.send([请求主体信息])
xhr.send(JSON.stringfy({
    name: 'xxx'
}))

三、AJAX状态

  • DONE： 4 响应主体信息也返回了
  • LOADING：3 响应主体正在加载返回
  • HEADERS_RECEIVED：2 服务器已返回响应头信息
  • OPENID：1 已打开，执行了OPEN
  • UNSENT：0 未发送，开始创建XHR的时候默认状态就是0

四、HTTP网络状态码：xhr.status

  • 以2开始：200 服务正常返回数据（客户端向服务器发送请求，服务器正常把数据返回给客户端了，但数据不一定是想要的）

  • 以3开始：
    304 -- 读取的是协商缓存的数据；
    301 -- 永久重定向（一般用于域名的转移）
    302/307 -- 临时转移或临时重定向（一般用于服务器的负载均衡）

  • 以4开头 【错误一般都是客户端的问题】
    400 -- 请求参数有误
    401 -- 无权限访问
    403 -- 服务器拒绝执行
    404 -- 地址错误

  • 以5开头 【错误一般是服务器的问题）
    500 -- 服务器发生未知错误
    503 -- 超负荷

    项目中所谓的请求成功或失败，分为两种：

    1. 网络层面：服务器没有返回任何信息（或者和服务器没有连接上），【根据不同的状态码可以分析不同的原因】
    2. 业务层面：已经从服务器获取到数据，获取的数据是不符合业务逻辑需要的，也可以定为失败，一般服务器返回的数据中都包含code标识，标志业务逻辑上的成功或失败，【需要前后端协商好数据的标识）

五、汇总XHR的属性和方法及事件

  • xhr.response / xhr.responseText（返回结果以字符串形式展示） / xhr.responseXML
  • xhr.status / xhr.statusText
  • xhr.withCredentials 跨域资源请求中是否允许携带资源凭证
  • xhr.onabort() 请求中断触发
  • xhr.onerror() 加载失败
  • xhr.onload()
  • xhr.onloadend()
  • xhr.onloadstart()
  • xhr.onprogress() 用于文件上传，显示加载进度
  • xhr.upload 文件上传下载的时候
  • xhr.onreadystatechange()
  • xhr.timeout 设置超时事件
  • xhr.getAllResponseHeaders()
  • xhr.getResponseHeader([key])
  • xhr.open()
  • xhr.overrideMimeType()
  • xhr.send()
  • xhr.setRequestHeader()
avatar
文章
阅读
粉丝