关于ajax和axios的请求的使用方法

引言

在上次了解了ajax和axios的优缺点和区别后，我们来学习一下他们的请求使用方法

ajax

1.GET请求

//创建 XMLHttpRequest对象
var xhr = new XMLHttpRequest()

//打开要发送请求的地址，get发送请求时参数要放在url中
xhr.open("get","https://blog.youkuaiyun.com/dargon_11?spm=1010.2135.3001.5421",true)

//发送请求
xhr.send()

//监听请求状态，接收响应数据，onload 等于 xhr.readyState == 4
xhr.onload = function(){
    if(xhr.status == 200) {
        console.log(xhr.response)  //通过xhr的response获取到响应的响应体
    }else {
    	console.log(error)
    }
}

2.POST请求 

//创建 XMLHttpRequest对象
var xhr = new XMLHttpRequest()

//打开要发送请求的地址
xhr.open("post","https://blog.youkuaiyun.com/dargon_11?spm=1010.2135.3001.5421",true)

//设置请求头
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");

//发送请求，post发送请求时参数要放在send中
xhr.send("a=1&b=2")

//监听请求状态，接收响应数据，xhr.readyState == 4 等于 onload
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.response)  //通过xhr的response获取到响应的响应体
    }else {
    	console.log(error)
    }
}

3.属性与方法

XMLHttpRequest API 属性

readyState： xhr的状态，请求响应过程的当前活动阶段 status： 响应的http状态 statusText： 响应的http状态的字符串信息说明 responseText： 响应的数据文本 responseXML： 响应的DOM兼容的文档数据对象 onreadystatechange： 事件，当 xhr.readyState 属性发生改变触发 onload： 事件，响应接收完毕触发

XMLHttpRequest API 方法

open(method, url, async)： 打开要发送请求的地址，参数：请求方式、请求的url地址、请求是否异步的布尔值（默认true） send(requsetBody)： 发送请求（体） setRequestHeader(key, value)： 设置请求头 getResponseHeader(key)： 获取响应头

jquery将ajax封装成了一个函数 $.ajax()

url ： 请求的 URL 地址 type ： 请求方式，默认是 GET，常用的还有 POST async ： 请求是否异步，默认值是 true，表示异步，false 表示同步 dataType ： 返回的数据类型，常用的是 json 格式 contentType： 请求的数据类型，默认为"application/x-www-form-urlencoded" data ： 请求的数据参数 success ： 请求成功后的回调函数 error ： 请求失败后的回调函数

GET 请求方式 $.get()

$.get("https://blog.youkuaiyun.com/dargon_11?spm=1010.2135.3001.5421", {
	//'a': 1,
    //'b': 2
},function (data) {
    console.log(data)
})

POST 请求方式 $.post()

$.post("https://blog.youkuaiyun.com/dargon_11?spm=1010.2135.3001.5421", {
	//'a': 1,
    //'b': 2
},function (data) {
    console.log(data)
})

 

 axios

url ： 请求的 URL 地址 method ： 请求方式，默认是 GET，常用的还有 POST baseURL： baseURL 将自动加在 url 前面，除非 url 是一个绝对 URL responseType ： 返回的数据类型，常用的是 json 格式 headers： 请求的自定义请求头 params ： 与请求一起发送的 URL 参数 data ： 请求的数据参数，只适用于 PUT, POST, 和 PATCH

axios({
     url: 'https://blog.youkuaiyun.com/dargon_11?spm=1010.2135.3001.5421',
     method: 'get',
     responseType: 'json',
     params: {
         //'a': 1,
         //'b': 2,
     }
}).then(function (data) {
     console.log(data)
}).catch(function (err) {
     console.log(err)
})

1.GET 请求

axios.get('https://blog.youkuaiyun.com/dargon_11?spm=1010.2135.3001.5421', {
    params: {
      //'a': 1,
      //'b': 2,
    }
}).then(function (data) {
     console.log(data)
}).catch(function (err) {
     console.log(err)
})

2.POST 请求

axios.post('https://blog.youkuaiyun.com/dargon_11?spm=1010.2135.3001.5421', {
      //'a': 1,
      //'b': 2,
}).then(function (data) {
     console.log(data)
}).catch(function (err) {
     console.log(err)
})