前端请求方式（包括ajax、axios、跨域问题）

Zouhhhhh

已于 2022-02-24 22:23:03 修改

阅读量5.3k

点赞数 4

分类专栏：前端工作文章标签：前端 ajax json

于 2022-02-15 19:24:55 首次发布

本文链接：https://blog.csdn.net/weixin_44030848/article/details/122950847

版权

工作同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

前端请求

一、前端向后台发送请求有几种方式

1、 script标签的src属性(JSONP,只能发get请求)
2、 iframe（解决jsonp只发get问题，可以发post）
3、 ajax发送请求(asyn javascript and xml)

下面的不看先

4、 link标签的href属性
5、 img标签的src属性
6、表单提交发送请求
7、 a标签的href发送请求

二、JSONP

摘自：https://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html

1、一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准；

2、不过我们又发现，Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力，比如

<script>、<img>、<iframe>；

3、于是可以判断，当前阶段如果想通过纯web端（ActiveX控件、服务端代理、属于未来的HTML5之Websocket等方式不算）跨域访问数据就只有一种可能，那就是在远程服务器上设法把数据装进js格式的文件里，供客户端调用和进一步处理；

4、恰巧我们已经知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据，更妙的是JSON还被js原生支持，所以在客户端几乎可以随心所欲的处理这种格式的数据；

5、这样子解决方案就呼之欲出了，web客户端通过与调用脚本一模一样的方式，来调用跨域服务器上动态生成的js格式文件（一般以JSON为后缀），显而易见，服务器之所以要动态生成JSON文件，目的就在于把客户端需要的数据装入进去。

6、客户端在对JSON文件调用成功之后，也就获得了自己所需的数据，剩下的就是按照自己需求进行处理和展现了，这种获取远程数据的方式看起来非常像AJAX，但其实并不一样。

7、为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

2.1 简单请求的服务器数据

首先回顾一下script标签的作用

	- <script> 元素用于嵌入或引用可执行脚本
	- <script src="url">请求服务器，并返回json "printData(data)"把数据装到data里面去，返回到前端时就会自动调用printData函数（这个在前端自己写）

1、我们知道，哪怕跨域js文件中的代码（当然指符合web脚本安全策略的），web页面也是可以无条件执行的。

远程服务器remoteserver.com根目录下有个remote.js文件代码如下：

alert('我是远程文件');

本地服务器localserver.com下有个jsonp.html页面代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="http://remoteserver.com/remote.js"></script>
</head>
<body>

</body>
</html>

毫无疑问，页面将会弹出一个提示窗体，显示跨域调用成功。

2.2 函数调用

现在我们在jsonp.html页面定义一个函数，然后在远程remote.js中传入数据进行调用。

jsonp.html页面代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
    var localHandler = function(data){
        alert('我是本地函数，可以被跨域的remote.js文件调用，远程js带来的数据是：' + data.result);
    };
    </script>
    <script type="text/javascript" src="http://remoteserver.com/remote.js"></script>
</head>
<body>

</body>
</html>

remote.js文件代码如下：

localHandler({"result":"我是远程js带来的数据"});

运行之后查看结果，页面成功弹出提示窗口，显示本地函数被跨域的远程js调用成功，并且还接收到了远程js带来的数据。很欣喜，跨域远程获取数据的目的基本实现了。

三、AJAX（重点）

实现Ajax的方式：

3.1 XMLHttpRequest （XHR）

XMLHttpRequest对象是ajax的基础,XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。目前所有浏览器都支持XMLHttpRequest。

<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        //获取button元素
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById('result');
        //绑定事件
        btn.onclick = function(){
            //1. 创建对象
            const xhr = new XMLHttpRequest();
            //2. 初始化 设置请求方法和url
            xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200');
            //3. 发送
            xhr.send();
            //4. 事件绑定   处理服务端返回的结果
            //readystate 是 xhr 对象中的属性， 表示状态0 1 2 3 4
            xhr.onreadystatechange = function() {
                //判断
                if (xhr.readyState === 4) {
                    //判断响应状态码 200 404 403 401 500
                    //2xx成功
                    if (xhr.status >= 200 && xhr.status <300) {
                        //处理结果  行 头 空行  体
                        //响应
                        // console.log(xhr.status);    //状态码
                        // console.log(xhr.statusText);    //状态字符串
                        // console.log(xhr.getAllResponseHeaders());   //所有响应头
                        // console.log(xhr.response);  //响应体

                        //设置 result 的文本
                        result.innerHTML = xhr.response;
                    }
                }
            }
        }
    </script>
</body>

3.2 jquery

<body>

    <div class="container">
        <h2 class="page-header">jQuery发送ajax请求</h2>
        <button class="btn btn-primary">GET</button>
        <button class="btn btn-danger">POST</button>
        <button class="btn btn-info">通用型方法ajax</button>
    </div>

    <script>

        $('button').eq(0).click(function() {
            //第一个参数是请求url，第二个参数是发送的参数，第三个参数是回调函数，其中的参数是响应体。
            //第四个参数是响应体类型
            $.get('http:127.0.0.1:8000/jquery-server', {a:100,b:200}, function(data){
                console.log(data);
            }, 'json');
        });
        
        $('button').eq(1).click(function() {
            //第一个参数是请求url，第二个参数是发送的参数，第三个参数是回调函数，其中的参数是响应体
            $.post('http:127.0.0.1:8000/jquery-server', {a:100,b:200}, function(data){
                console.log(data);
            });
        });

        $('button').eq(2).click(function() {
            $.ajax({
                //url
                url: 'http:127.0.0.1:8000/jquery-server',
                //参数
                data: {a:100, b:200},
                //请求类型
                type: 'GET',
                //响应体类型
                dataType: 'json',
                //成功的回调
                success: function(data) {
                    console.log(data);
                },
                //超时时间
                timeout: 2000,
                //失败的回调
                error: function() {
                    console.log("出错啦");
                }
            })
        });
    </script> 
</body>

3.3 axios（重点）

看axios之前，先学习一下javaScript异步编程和Promise对象

promise：https://blog.csdn.net/qq_24839991/article/details/79957949

<body>
    <button>GET</button>
    <button>POST</button>
    <button>AJAX</button>
    <script>
        const btns = document.querySelectorAll('button');
        btns[0].onclick = function() {
            //配置baseURL
            axios.defaults.baseURL = 'http:127.0.0.1:8000';
            //GET请求
            axios.get('/axios-server', {
                //url参数
                params: {
                    id: 100,
                    vip: 7
                },
                //请求头信息
                headers: {
                    name: 'atguigu',
                    age: 20
                }
            });
        }
    </script>
</body>

这里看完再看看下面的同源策略

然后再回来看看axios的官方说明

https://www.kancloud.cn/yunye/axios/234845

四、同源安全策略

同源安全策略默认阻止“跨域”获取资源。但是 CORS 给了web服务器这样的权限，即服务器可以选择，允许跨域请求访问到它们的资源。

实现跨域方式：

1.jsonp
2.空iframe加form
3.CORS，跨域资源共享（Cross-origin resource sharing）

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。
它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。
4.代理

Zouhhhhh

关注

4
点赞
踩
33

收藏

觉得还不错? 一键收藏
0
评论
前端请求方式（包括ajax、axios、跨域问题）

前端请求一、前端向后台发送请求有几种方式二、JSONP2.1 简单请求的服务器数据2.2 函数调用三、AJAX（重点）3.1 XMLHttpRequest （XHR）3.2 jquery3.3 axios（重点）四、同源安全策略一、前端向后台发送请求有几种方式1、 script标签的src属性(JSONP,只能发get请求)2、 iframe（解决jsonp只发get问题，可以发post）3、 ajax发送请求(asyn javascript and xml)下面的不看先4、 link标签的h
复制链接

扫一扫