原生js发AJAX请求

发表于

XMLHttpRequest是Ajax的核心，通过调用XMLHttpRequest对象的属性和方法可以实现在客户端和浏览器之间进行数据的异步传输，从而实现页面的无刷新效果。

XMLHttpRequest对象的使用需要四个步骤：

(1) 初始化XMLHttpRequest对象

(2) 指定响应处理函数

(3) 发送HTTP请求

(4) 处理服务器返回的信息（服务器===后端，返回字符串）

XMLHttpRequest对象的常用属性：

onreadystatechange：指定当readyState属性值改变时的事件处理句柄(只写)；

readyState：返回当前请求的状态(只读)；

responseText：将相应信息作为字符串返回(只读)；

XMLHttpRequest对象的常用方法：

open()：创建一个新的HTTP请求，并制定此请求的方法，URL以及验证信息(用户名/密码)；

send()：发送请求到HTTP服务器并接受回应。

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
myBtn.addEventListener('click',(e)=>{
	//(1) 初始化XMLHttpRequest对象（产生对象）
	let request = new XMLHttpRequest()
	//(2) 指定响应处理函数（配置对象）
	request.open('GET','http://king.com:8002/xxx')
	//(3) 发送HTTP请求（发送对象）
	request.send()
	//(4) 处理服务器返回的信息（监听对象，readyState 的变化）
	request.onreadystatechange = ()=>{
		if(request.readyState === 4){
			if(request.status >= 200 && request.status < 300){
				//把符合 JSON 语法的字符串
				let string = request.responseText
				//转换成 JS 对应的值
				let object = window.JSON.parse(string)
			}else if(request.status >= 400){
				console.log('请求失败')
			}
		}
	}
})

readyState属性用来表示请求的状态，有5个可取值，分别是：

“0”：表示未初始化，即对象已经建立，但是尚未初始化(尚未调用open()方法)；

“1”：表示正在加载，此时对象已建立，尚未调用send()方法；

“2”：表示请求已发送，即send()方法已调用；

“3”：表示请求处理中；

“4”：表示请求已完成，即数据接收完毕。

JS 操作请求和响应

  1. JS 可以设置任意 请求 header 吗？
    第一部分 request.open('GET','./xxx')
    第二部分 request.setRequestHeader('Content-type','x-www-form-urlencoded')
    第四部分 request.send('a=1&b=2')
  2. JS 可以设置任意 响应 header 吗？
    第一部分 request.status/request.statusText
    第二部分 request.getResponseHeader()/request.getAllResponseHeaders()
    第四部分 request.responseText

自己实现 jQuery.ajax

第一版 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

window.jQuery = function (nodeOrSelector) {
    let nodes = {}
    nodes.addClass = function () {
    }
    return nodes
}

window.$ = window.jQuery


window.jQuery.ajax = function ({method,url,headers,body,successFn,failFn}) {
    /*let method = options.method
    let url
    if (arguments === 1) {
        url = options.url
    } else if (arguments === 2) {
        url = arguments[0]
        options = arguments[1]
    }
    let headers = options.headers
    let body = options.body
    let successFn = options.successFn
    let failFn = options.failFn*/

// ES6 解构赋值
//     let {method,headers,body.successFn,failFn} = options

    let request = new XMLHttpRequest()
    request.open(method, url) // 设置第一部分
    for (key in headers) {
        let value = headers[key]
        request.setRequestHeader(key, value)  // 设置第二部分
    }
    // 要在 request.open()和 request.send() 之间设置
    // request.setRequestHeader('Content-type','x-www-form-urlencoded')

    request.onreadystatechange = () => {
        if (request.readyState === 4) {
            if (request.status >= 200 && request.status <= 300) {
                successFn.call(undefined, request.responseText)
            } else if (request >= 400) {
                failFn.call(undefined, request)
            }
        }
    }
    request.send(body) // 设置第四部分
}

window.jQuery.ajax({
    method: 'post',
    url: './xxx',
    headers: {
        'content-type': 'application/x-www-form-urlencoded',
        'ry': '18'
    },
    body: 'a=1&b=2',
    successFn: function () {
    }, //回调函数 callback === funtion
    failFn: function () {
    },
})
第二版，增加 Promise 规则 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
window.jQuery = function (nodeOr) {
    let nodes = {}
    nodes.addClass = function () {}
    return nodes
}
window.$ = window.jQuery

window.Promise = function (fn) {
    return {
        then: function () {
        }
    }
}

window.jQuery.ajax = function ({method, url, headers, body}) {
    return new Promise(function (resolve, reject) {
        let request = new XMLHttpRequest()
        request.open(method, url) // 设置第一部分
        for (key in headers) {
            let value = headers[key]
            request.setRequestHeader(key, value)  // 设置第二部分
        }
        // 要在 request.open()和 request.send() 之间设置
        // request.setRequestHeader('Content-type','x-www-form-urlencoded')

        request.onreadystatechange = () => {
            if (request.readyState === 4) {
                if (request.status >= 200 && request.status <= 300) {
                    resolve.call(undefined, request.responseText)
                } else if (request >= 400) {
                    reject.call(undefined, request)
                }
            }
        }
        request.send(body) // 设置第四部分
    })

}

window.jQuery.ajax({
    method: 'post',
    url: './xxx',
    headers: {
        'content-type': 'application/x-www-form-urlencoded',
        'ry': '18'
    }
}).then(
    (text) => {
        console.log(text)
    },
    (request) => {
        console.log(request)
    }
)

jQuery.ajax

1
2
3
4
5
6
7
8
9
10
$.ajax({
        url: './xxx',
        type: 'post',
    }).then(
        () => {}, 
        () => {}
    ).then(
        ()=>{},
        ()=>{}
    )