当先锋百科网

首页 1 2 3 4 5 6 7

在这里插入图片描述

1. 同源策略

同源策略,是由 Netscape 提出的一个安全策略,它是浏览器最核心也是最基本的安全功能,如果缺少同源策略,则浏览器的正常功能可能都会受到影响,现在所有支持JavaScript的浏览器都会使用这个策略。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)。

规定:浏览器要求,在解析Ajax请求时,要求浏览器的路径与Ajax的请求的路径必须满足三个要求,则满足同源策略,可以访问服务器。

要求:
协议、域名、端口号都相同,只要有一个不相同,那么都是非同源
在这里插入图片描述
要求:
1.浏览器的请求路径
2.Ajax请求的网址

2. 同源策略案例

在这里插入图片描述

3. 什么是跨域

跨域:指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。

4. 跨域解决方法

4.1 Ajax的jsonp

  • JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。
  • jsonp解决跨域问题的原理是:script不受同源策略的影响。
  • jsonp实现跨域:前端通过script标签将函数以参数的形式传递给后台,后台通过解析请求的字符串,拿到该函数,然后让该函数以执行的状态返回给前端,并且在其中传入数据。不过jsonp请求只能支持get请求方式。
  • 核心用法
    利用<script src="远程服务网址>
    返回值语法固定的:callback(JSON数据)

4.2 CORS方式

CORS(Cross-origin resource sharing) “跨域资源共享”,现在的主流的浏览器都支持CORS的方式.。如果需要跨域,则需要配置响应头信息,标识是否允许。

服务器端标识:
在这里插入图片描述
检查响应头信息:
在这里插入图片描述
CORS调用原理图:
在这里插入图片描述

4.3 Nginx 反向代理

利用nginx反向代理搭建一个代理服务器,接受客户端请求,然后将请求转发给服务器,拿到响应后,再将响应转发给客户端
在这里插入图片描述

5. Axios 和 Ajax 的区别

1、Axios是一个基于Promise的HTTP库,而Ajax是对原生XHR的封装;
2、Ajax技术实现了局部数据的刷新,而Axios实现了对ajax的封装。

6. Axios 和 Ajax 的区别及优缺点

6.1 Ajax:

6.1.1 什么是Ajax

Ajax是对原生XHR的封装,为了达到我们跨越的目的,增添了对JSONP的支持。

异步的javascript和xml,ajax不是一门新技术,而是多种技术的组合,用于快速的创建动态页面,能够实现无刷新更新数据从而提高用户体验。

6.1.2 Ajax的原理

由客户端请求ajax引擎,再由ajax引擎请求服务器,服务器作出一系列响应之后返回给ajax引擎,由ajax引擎决定将这个结果写入到客户端的什么位置。实现页面无刷新更新数据。

6.1.3 核心对象

XMLHttpReques

6.1.4 Ajax优缺点

6.1.4.1 优点:

1、无刷新更新数据
2、异步与服务器通信
3、前端和后端负载平衡
4、基于标准被广泛支持
5、界面与应用分离

6.1.4.2 缺点:

1、ajax不能使用Back和history功能,即对浏览器机制的破坏。
2、安全问题 ajax暴露了与服务器交互的细节
3、对收索引擎的支持比较弱
4、破坏程序的异常处理机制
5、违背URL和资源定位的初衷
6、ajax不能很好的支持移动设备
7、太多客户端代码造成开发上的成本

6.1.5 Ajax适用场景

<1>.表单驱动的交互
<2>.深层次的树的导航
<3>.快速的用户与用户间的交流响应
<4>.类似投票、yes/no等无关痛痒的场景
<5>.对数据进行过滤和操纵相关数据的场景
<6>.普通的文本输入提示和自动完成的场景

6.1.6 Ajax不适用场景

<1>.部分简单的表单
<2>.搜索
<3>.基本的导航
<4>.替换大量的文本
<5>.对呈现的操纵

6.1.7 代码

$.ajax({
   type: 'get',
   url: '/getuser/data',
   dataType: 'json',
   data: {
        firstName: '张',
        lastName: '三'
   },
   success: function (response) {
       console.log(response);
   },
   error: function (error) {
	   console.log(error);
   }
});
<script type="text/javascript">
    function login() {
        $.ajax({
            type: 'post',
            url: '/email/login',
            dataType: 'json',
            data: {
                'account': $('#account').val(),
                'password': $('#password').val()
            },
            success: function (data) {
                if (data.code == 1) {
                    alert("登录成功");
                    window.location.href = "http://localhost:8080/email/success";
                } else {
                    alert("密码错误,请重新输入!")
                    window.location.href = "http://localhost:8080/email/error"
                }
            }
        })
    }
</script>
<script type="text/javascript">
    function addFruit() {
        let name = $.trim($("#fname").val());
        let price = $.trim($("#fprice").val());
        let count = $.trim($("#fcount").val());
        $.post("http://localhost:8080/fruit/add",
            {name: name, price: price, count: count},
            function (data) {
                if (data.code == 1) {
                    alert(data.message);
                    window.location.href = "http://localhost:8080/fruit/index";
                }
                if (data.code == 0) {
                    alert(data.message);
                }
            });
    }
 
    function delFruit(id) {
        if (window.confirm("是否确认删除" + id + "?")) {
            $.post("http://localhost:8080/fruit/delete?id=" + id, {id: id},
                function (data) {
                    if (data.code == 1) {
                        alert(data.message);
                        window.location.href = "http://localhost:8080/fruit/index";
                    }
                    if (data.code == 0) {
                        alert(data.message);
                    }
                });
        }
    }
</script>

6.1.8 Ajax请求的五个步骤

  1. 创建XMLHttpRequest异步对象
  2. 设置回调函数
  3. 使用open方法与服务器建立连接
  4. 向服务器发送数据
  5. 在回调函数中针对不同的响应状态进行处理

6.2 Axios:

6.2.1 Axios是什么

Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中。

6.2.2 Axios有哪些特性

1、在浏览器中创建 XMLHttpRequests
2、在node.js则创建http请求
3、支持Promise API
4、支持拦截请求和响应
5、转换请求和响应数据
6、取消请求
7、自动转换成JSON数据格式
8、客户端支持防御XSRF

6.2.3 执行get请求,有两种方式

params 是用于拼接 url 的,get 请求传参就是拼到 url 中,
而 data 是放在 request body 中的,用于 post 请求

// 第一种写法:将参数直接写在url中
axios.get('/query?name=tom').then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});
// 第二种写法:将参数直接写在params中
axios.get('/query', {
    params: {
        name: 'tom'
    }
}).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});
// 第三种写法:将参数直接写在params中
axios({
  method: 'get',
  url: '/query',
  params: {
    name: 'tom',
  }
}).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

6.2.4 执行post请求,注意执行post请求的入参,不需要写在params字段中,这个地方要注意与get请求的第二种方式进行区别。

axios.post('/query', {
    name: 'tom',
    icon: 'img_path'
}).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

下面这种data方式将参数放在请求体中,后端需要使用@RequestBody +实体类来接收。

 axios({
        url: '/getUsers',
        method: 'post',
        responseType: 'json', // 默认的
        data: {
            age: 18,
            sex: '男',
        }
    }).then(function (response) {
        console.log(response);
        console.log(response.data);
    }).catch(function (error) {
        console.log(error);
    });

这种params传参方式其实和get请求类似,把请求参数放到了请求头中,
http://127.0.0.1/user?age=18&sex=男
所以这种需要使用@RequestParam来接收参数

 axios({
        url: '/getUsers',
        method: 'post',
        responseType: 'json', // 默认的
        params: {
            age: 18,
            sex: '男',
        }
    }).then(function (response) {
        console.log(response);
        console.log(response.data);
    }).catch(function (error) {
        console.log(error);
    });

7. Axios和Ajax的区别

axios是通过Promise实现对ajax技术的一种封装,就像jquery对ajax的封装一样,简单来 说就是ajax技术实现了局部数据的刷新,axios实现了对ajax的封装,axios有的ajax都有, ajax有的axios不一定有,总结一句话就是axios是ajax,ajax不止axios。

注: 传统Ajax 指的是 XMLHttpRequest(XHR),axios和jQuer ajax都是对Ajax的封装。

在这里插入图片描述