ajax请求封装
什么是ajax
ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
- AJAX = 异步 JavaScript 和 XML。
- AJAX 是一种用于创建快速动态网页的技术。
- 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
- 传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
本篇文章将ajax进行了一个简单易用的方法封装,可以直接调用
这个ajax方法适用于GET以及POST方法的请求
function ajax({url , type , data}) {
return new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest()
xhr.open(type, url, true)
if (type === "POST") {
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(JSON.stringify(data))
}
else{
xhr.send(null)
}
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
if (this.status === 200) {
resolve(this.responseText)
} else {
let res = { code: this.status, response: this.response }
reject(res)
}
}
}
})
}
下边代码是ajax方法的使用详情
//使用案例
let result = ajax({
url: "http://www.baidu.com/",
type:"POST",
data:{
username : "hello",
password : "word"
}
})
下边是GET与POST请求的单个封装
GET请求
function get(url){
return new Promise( (resolve , reject) => {
let xhr = new XMLHttpRequest()
xhr.open('GET', url, true)
xhr.send(null)
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
if (this.status === 200) {
resolve(this.responseText)
} else {
let res = { code: this.status, response: this.response }
reject(res)
}
}
}
})
}
POST请求
function post({url , data}){
return new Promise( (resolve, reject) => {
let xhr = new XMLHttpRequest()
xhr.open("POST", url, true)
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(JSON.stringify(data))
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
if (this.status === 200) {
resolve(this.responseText)
} else {
let res = { code: this.status, response: this.response }
reject(res)
}
}
}
})
}