Ajax 跨域认识

最新推荐文章于 2023-06-20 16:29:47 发布

ᥴcc+

最新推荐文章于 2023-06-20 16:29:47 发布

阅读量158

点赞数

文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/weixin_66744745/article/details/125122016

版权

本文深入探讨了Ajax的基础，包括XMLHttpRequest的使用、JSON数据交换格式，以及同源策略和跨域问题。重点讲解了CORS和JSONP两种跨域解决方案，并介绍了防抖和节流的概念及其应用场景。

摘要由CSDN通过智能技术生成

Ajax XMLHttpRequest & 跨域

一.XMLHttpRequest：

XMLHttpRequest是浏览器内置的一个构造函数
作用：基于 new 出来的 XMLHttpRequest 实例对象，可以发起 Ajax 的请求。 axios 中的 axios.get()、axios.post()、axios() 方法，都是基于 XMLHttpRequest（简称：XHR）封装出来的！

1.使用 XMLHttpRequest 发起 GET 请求：

主要的 4 个实现步骤：

创建 xhr 对象
调用 xhr.open() 函数
调用 xhr.send() 函数

监听 load 事件

    <script>
        let xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://xxx.com/api/xx');
        xhr.send();
        xhr.addEventListener('load', function () {
       
            console.log(this.response);
        })
    </script>
复制代码

2.请求时携带URL参数或提交请求体：

URL参数，只能拼接在 URL 地址 后面
请求体，放到 send() 里面

    <script>
        let xhr = new XMLHttpRequest();
        // 将请求参数拼接到url后面
        xhr.open('请求方式', 'http://www.itcbc.com/api/xx?id=1&username=zhangsan');
        xhr.send(请求体);

        xhr.addEventListener('load', function () {
     
            console.log(this.response);
        })
    </script>
复制代码

3.提交请求体数据，需指定Content-Type头：

当需要提交请求体数据时，需要在 xhr.open() 之后，调用 xhr.setRequestHeader() 函数，指定请求体的编码格式

    <script>
        let xhr = new XMLHttpRequest();

        // 将请求参数拼接到url后面
        xhr.open('POST', 'http://www.itcbc.com/api/post');
        // 根据请求体格式的不同，需设置对应的Content-Type头
        xhr.setRequestHeader('Content-Type', '值')
        xhr.send('username=zs&age=20');

        xhr.addEventListener('load', function () {
     
            console.log(this.response);
        })
    </script>
复制代码