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

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

Ajax即Asynchronous Javascript And XML(异步JavaScript和XML)在 2005年被Jesse James Garrett提出的新术语,用来描述一种使用现有技术集合的‘新’方法,包括: HTMLXHTML, 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

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页

打赏作者

chao_yang07

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值