ajax请求的GET与POST方法封装

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)
                }
            }
        }
    })
}