关于原生Ajax，Jquery封装，axios之间的使用

关于原生Ajax，Jquery封装，axios之间的使用

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 [3] 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

1.XMLHttpRequest

浏览器在XMLHttpRequest类上定义了它们的HTTP API,这个类的每个实例都表示一个独立的请求/响应对，并且这个对象的属性和方法允许指定请求细节和提取响应数据。

XMLHttpRequest对象是AJAX的基础,XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。目前所有浏览器都支持XMLHttpRequest。

2.原生Ajax

2.1使用步骤

1.创建XMLHttpRequest对象

var xhr = new XMLHttpRequest()

2.使用open方法设置和服务器的交互信息

参数

• 指定请求方式 post/get…
• 指定请求路径
• boolean类型的值，如果为false则为同步请求，send方法将阻塞直到请求完成。如果这个参数是true或省略，请求时同步的

xhr.open('get',url)或xhr.open('post',url)

3.设置requestHeader()

在AJAX中，如果需要像 HTML 表单那样 POST 数据，需要使用 setRequestHeader() 方法来添加 HTTP 头。

然后在 send() 方法中规定需要希望发送的数据：setRequestHeader()方法需要在open()和send()方法之间调用。

xhr.setRequestHeader(属性名称, 属性值);

常用数据格式

发送json格式数据

request.setRequestHeader('Content-type', 'application/json; charset=utf-8');

发送表单数据

request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=utf-8');

发送纯文本(不指定Content-type时，此是默认值)

request.setRequestHeader('Content-type', 'text/plain; charset=utf-8');

发送html文本

request.setRequestHeader('Content-type', 'text/html; charset=utf-8');

4.设置发送的数据，开始和服务器端交互

xhr.send()

5.取得响应，注册事件

发送请求后，会收到响应，收到响应后，XHR对象的以下属性会被填充上数据。

• responseText：作为响应体返回的文本。
• responseXML：如果响应的内容类型是"text/xml"或"application/xml"，那就是包含响应数据的 XML DOM 文档。
• status：响应的 HTTP 状态。
• statusText：响应的 HTTP 状态描述。
• readyState：返回HTTP请求状态
  0 open()尚未调用 UNSENT
  1 open()已调用 OPENED
  2 接收到头信息 HEADERS_RECEIVED
  3 接收到响应主体 LOADING
  4 响应完成 DONE
• readystatechange 请求状态改变事件
  当readyState值改变为4或服务器的响应完成时，所有的浏览器都触发该事件

实例：

let xhr=new XMLHttpRequest();
xhr.open(method,url);
xhr.setRequestHeader('Content-type','application/json');
xhr.send();
xhr.onreadystatechange=funciton(){
    if(this.readyState==4){
        if(this.status==200){
                        
        }
    }
}

3.Jquery封装Ajax

参数

参数名	描述
url	请求地址
method	请求方法(get/post)
data	提交数据(post请求采用)；如果data为对象，该对象在发送到服务器之前会先被自动转换为查询字符串。可以通过processData选项阻止默认转换
dataType	期望接受的数据类型，如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断
async	异步还是同步请求，默认异步
contenType	取值请参照上面原生Ajax中Content-Type的取值
processData	默认true(转换data数据类型为字符串) 如果不希望将data中的数据转换为字符串，则设置false
beforeSend	发送请求前可修改XMLHttpRequest对象的函数
success	请求成功后的回调函数
error	请求失败的回调函数
complete	请求完成的回调函数(无论请求 失败还是成功都会调用)

实例：

axios({
　　　　url: '接口地址',
　　　　method: 'get', //或者 post    请求类型
　　　　responseType: 'json', //默认格式，如果就是 json 格式可以不写
　　　　data: {
　　　　　　'username' : 'hermit',

　　　　　　'password' : 'a123'
　　　　}
　　}).then( function(response){ // 请求正确返回的数据

　　　　console.log(response);

　　　　console.log(response.data);
　　}).catch( function(error) { // 请求错误返回的数据
　　　　console.log(error);
　　})

模仿Jquery仿造

var jQuery = {};
(function($){
  
  $.get = function({
    url,
    params={},
    headers={},
    success
  }){
    let xhr = new XMLHttpRequest();
    console.log(url)
    url = url+'?'+Qs.stringify(params)
    xhr.open('GET',url)
    for(let k in headers){
      let v = headers[k]
      xhr.setRequestHeader(k,v)
    }
    xhr.send()
    // 5. 监听响应
    xhr.onreadystatechange = function(){
      if(this.readyState === 4){
        if(this.status === 200){
          let resp = JSON.parse(this.response)
          success.call(this,resp)
        } 
      }
    }
  }
  // $.post   json / x-www-form-urlencode
  $.post = function({
    url,
    data = {},
    headers = {},
    success
  }){
    let xhr = new XMLHttpRequest();
    xhr.open('POST',url)
    for(k in headers){
      xhr.setRequestHeader(k,headers[k])
    }
    xhr.send(Qs.stringify(data))
    xhr.onreadystatechange = function() {
      if(this.readyState == 4){
        if(this.status == 200){
          let res = JSON.parse(this.response)
          success.call(this,res)
        }
      }
    }
  }
  $.postJSON = function({
     url,
     data,
     headers,
     success
  }){
    let xhr = new XMLHttpRequest()
    xhr.open('POST',url)
    for(k in headers){
      xhr.setRequestHeader(k,headers[k])
    }
    // console.log(data)
    xhr.send(JSON.stringify(data))
    xhr.onreadystatechange = function(){
      if(this.readyState == 4) {
        if(this.status == 200){
          let res = JSON.parse(this.response)
          success.call(this,res)
        }
      }
    }  
  }

})(jQuery);

4.axios

参数

参数名	描述
url	请求的接口地址
method	默认 get请求
params	必须是一个纯对象，或者url参数对象(get请求参数列表）
data	适用于post传参
headers	用于自定义头部信息
transformRequest	用于请求之前(send之前)对请求数据进行操作，只有当请求方法为‘post、put、patch’有用 必须有返回值
transformResponse	在获取到响应信息，在then/catch执行，用于修改响应信息
paramSerializer	在执行send之前，用于修改params

//封装好的axios
/*
 * @Author: your name
 * @Date: 2021-09-23 14:18:47
 * @LastEditTime: 2021-09-23 17:18:56
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \day05\index.js
 */
import axios from 'axios'
import qs from 'qs'
const token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiJNalU9Iiwic3ViIjoiYWRtaW4xIiwiaXNzIjoiMDk4ZjZiY2Q0NjIxZDM3M2NhZGU0ZTgzMjYyN2I0ZjYiLCJpYXQiOjE2MzIzNzk4NTAsImF1ZCI6InJlc3RhcGl1c2VyIiwiZXhwIjoxNjMyNTUyNjUwLCJuYmYiOjE2MzIzNzk4NTB9.9yLueRcjmz_F38NUeEg8dFMg5fiPXZrEZfL6X7hgP6o"
const service = axios.create({
   baseURL:'http://120.25.237.199:8002',
})
//这里的token可以实现登录业务后从本地浏览器的储存拿到
service.interceptors.request.use(function(config){
  config.headers['Authorization'] = token
  return config
},function(error){
  return Promise.reject(error)
})
service.interceptors.response.use(function (response){
  let res = response.data
  return res
},function(error){
  return Promise.reject(error)
})
function get(url,params){
  return service({
    method:'GET',
    url,
    params:params,
  })
}
function post(url,data) {
   return service({
     method:'POST',
     url,
     data:qs.stringify(data)
   })
}
function post_json(url,data){
   return service({
     method:'POST',
     url,
     data
   })
}
//列表导出
export {get,post,post_json}
export default service

5.总结

axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。

简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。

axios是ajax ajax不止axios