看懂原生ajax，什么axios、fetch等等都瞬间上手

最新推荐文章于 2024-09-01 19:13:21 发布

冬天爱吃冰淇淋

最新推荐文章于 2024-09-01 19:13:21 发布

阅读量334

点赞数 2

分类专栏： js 网络 ajax 文章标签： ajax js http

本文链接：https://blog.csdn.net/weixin_44823731/article/details/106414948

版权

js 同时被 3 个专栏收录

34 篇文章 1 订阅

订阅专栏

网络

4 篇文章 1 订阅

订阅专栏

ajax

1 篇文章 0 订阅

订阅专栏

1.ajax

1.1 ajax的定义

ajax：ajax是async JavaScript and xml的缩小，意思是异步的JavaScript和xml。以前前后端是以xml的格式传输数据的，但是由于使用xml存储的数据，有些无关内容导致数据过大，传输效率会降低，所以现在大部分是以json的形式传输数据的。

例如数据： student = {name: 'zs',age: 18}
xml的存储格式：
<student>
	<name>zs</name>
	<age>18</age>
</student>
结束标签就相当于无关的内容：</name></age></student>
而json的数据就非常简洁，格式如下:
{name: 'zs',age: 18}
毫不拖泥带水

1.2 ajax的优点

1.页面无刷新获取数据
2.允许你根据用户的事件来更新内容

1.3 ajax的缺点

1.没有浏览器历史记录，不能前进后退。
2.存在跨域问题。
3.SEO不友好。(SEO：就相当于百度的网站搜索关键字出来的排序顺序吧。但是这个问题可以通过钱来解决。)

1.4 原生ajax的get请求代码步骤

1.实例化出xhr对象

let xhr = new XMLHttpRequest()

2.为xhr的readystate绑定监听（onreadystatechange全是小写）

xhr.readystatechange = ()=>{
	if (xhr.readyState === 4 && xhr.status === 200) {
		console.log(xhr.response) // 请求回来的数据在这！！！！！
	}
}

解释：很多人不明白为什么readyState的状态变成4才能拿到response？
xhr的readyState一共有5个状态，分别是0，1，2，3，4。

0：代表xhr别实例化出来的时候，初始化的状态。
1：还没有发送请求，还可以设置请求头。
2：发送请求出去了，并且响应头和响应首行回来了。
3：对于小数据这个阶段已经接收完毕了。但是大的数据只是部分接收。
4 ：所有数据接收完毕。

3. 指定发送的方式、url和参数。

xhr.open('GET',url)

解释：对于get请求的参数，以？的形式拼接到url上，变量之间以&符号分割。
例如：url是：http://localhost:3000/test 参数是：name: ‘zs’ age: 18
拼接结构：http://localhost:3000/test？name=zs&age=18
4. 发送请求

xhr.send()

1.5 原生ajax发送post请求

1、2. 第一步和第二步和发送GET请求一样

// 实例化出xhr对象
let xhr = new XMLHttpRequest()
// 绑定监听，onreadystatechange全是小写
xhr.onreadystatechange = () => {
	if (xhr.readyState === 4 && xhr.status === 200) {
		console.log(xhr.response)
	}
}

3.指定发送方式和url，参数不是在这指定！！

xhr.open('POST',url)

4.设置请求头。固定格式，建议硬背

xhr.setRequestHeader('content-type','application/x-www-form-ulrencoded')

5.携带参数发送请求

xhr.send(data)

解释：如果你要发送的参数是：name：’zs’ age: 18
data你应该写成‘name=zs&age=18’.

2.使用promise封装原生ajax

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>

<body>
    <button class="btn">发送ajax</button>
</body>
<script>
    // 获取btn的dom节点
    const btn = document.querySelector('.btn')
    // 使用promise封装原生ajax
    function ajaxPromise(method, url, data = {}) { // 如果用户data不传，默认值是{}
        return new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest()
            // 用来接收参数的拼接字符串，如：name=zs&age=18
            let str = ''
            xhr.onreadystatechange = () => {
                // 对于状态0-3直接return，因为onredystatechange是状态一改变就触发的
                if (xhr.readyState !== 4) { 
                    return
                }
                if (xhr.readyState === 4 && xhr.status === 200) {
                    resolve(xhr.response)
                } else {
                    reject(new Error('请求失败！'))
                }
            }
            // 使用数组的reduce方法将data弄成name=zs&age=18，最终末尾会多一个&，但没影响。
            str = Object.keys(data).reduce((sum, item) => {
                return sum + `${item}=${data[item]}&`
            }, '')
            // 判断用户的请求方式，防止有点人输入大写，有点人输入小写。所以全部转成小写。
            if (method.toLowerCase() === 'post') {
                xhr.open(method, url)
                xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
                xhr.send(str)
            } else if (method.toLowerCase() === 'get') {
                xhr.open(method, url + '?' + str)
                xhr.send()
            }
        })
    }
    // 点击事件
    btn.onclick = () => {
        // 传输的数据
        let data = {
            name: 'wjg',
            age: 18
        }
        // 发送ajax请求
        ajaxPromise('post', 'http://localhost:3000/test_post')
            .then(res => {
                console.log(res)
            })
            .catch(err => {
                console.log(err)
            })
    }
</script>

</html>