2022年蓝旭前端第三次暑期培训课(下)

黑球啊

已于 2022-07-11 02:53:49 修改

阅读量217

点赞数

文章标签：前端服务器运维

于 2022-07-10 07:17:52 首次发布

本文链接：https://blog.csdn.net/weixin_52563771/article/details/125701655

版权

一、JSON

JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation），是一种轻量级的文本数据交换格式。JSON使用javascript语法来描述数据对象。
其有两种结构Object、Array，包含有Number、String、Boolean、Null四种数据类型

{
    "id": 1,
    "name": "ran",
    "age": 18,
    "isLogin": true,
    "vip": null,
    "haslearn": [{
            "classname": "c语言",
            "teacher": "feng"
        },
        {
            "classname": "高数",
            "teacher": "sun"
        }
    ]
}

要知道JSON文本格式在语法上和创建javascript对象的代码相同，因此javascri会使用内置的eval()函数，将JSON数据抓换为原生的javascipt对象。

var jsonstr = JSON.stringify(json);//将json格式转化为js格式字符串
var jsonobj = JSON.parse(jsonstr);//将js格式字符串转化为json格式

二、Nginx

代理服务器，客户机在发送请求时，不会直接发送给目的主机，而是先发送给代理服务器，代理服务接受客户机请求之后，再向主机发出，并接收目的主机返回的数据，存放在代理服务器的硬盘中，再发送给客户机。
正向代理，架设在客户机与目标主机之间，只用于代理内部网络对Internet的连接请求，客户机必须指定代理服务器,并将本来要直接发送到Web服务器上的http请求发送到代理服务器中。
反向代理，架设在服务器端，通过缓冲经常被请求的页面来缓解服务器的工作量，将客户机请求转发给内部网络上的目标服务器；并将从服务器上得到的结果返回给Internet上请求连接的客户端，此时代理服务器与目标主机一起对外表现为一个服务器。

Nginx功能丰富，可作为HTTP服务器，也可作为反向代理服务器，邮件服务器。
反向代理，负载均衡。当网站的访问量达到一定程度后，单台服务器不能满足用户的请求时，需要用多台服务器集群可以使用nginx做反向代理。并且多台服务器可以平均分担负载，不会因为某台服务器负载高宕机而某台服务器闲置的情况。

三、跨域

CORS全称Cross-Origin Resource Sharing，意为跨域资源共享。当一个资源去访问另一个不同域名或者同域名不同端口的资源时，就会发出跨域请求。如果此时另一个资源不允许其进行跨域资源访问，那么访问就会遇到跨域问题。

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

同源策略（Sameoriginpolicy），是由 Netscape 提出的一个安全策略，它是浏览器最核心也是最基本的安全功能，如果缺少同源策略，则浏览器的正常功能可能都会受到影响，现在所有支持JavaScript的浏览器都会使用这个策略。
同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。
在这里插入图片描述

解决跨域问题

浏览器设置,使用浏览器的非安全模式
反向代理(Nginx)
利用nginx反向代理，将请求分发到部署相应项目的tomcat服务器，当然也不存在跨域问题
JSON with Padding（JSONP）非官方协定
是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。一般不会使用这个方法
Cross-Origin Resource Sharing（CORS）跨域资源共享
现在的主流的浏览器都支持cors的方式.。如果需要跨域,则需要配置响应头信息，标识是否允许。

四、交互方式

（1）cookie
Cookie是服务器保存在客户端中的一小段数据信息。使用Cookie有一个前提，就是客户端浏览器允许使用Cookie并对此做出相应的设置。客户端将数据存储在cookie中，cookie会放在请求头中随着HTTP请求发送给服务端，由服务端解析数据。同样服务端可以产生cookie，发送给客户端，客户端接收到cookie后保存在本地。

（2）表单
传统的jsp,php等服务端语言，在页面内设置form表单，确定需要传递的参数，通过submit传输到服务器

<form id="form1"  action="http://www.kdniao.com/External/PrintOrder.aspx"
	  method="post"
	  target="_self">
</form>

（3）jsonp
一种非官方跨域数据交互协议，利用具有src属性标签不受跨域限制的特性，通过动态创建script标签来从服务器端引入js代码，从而获得服务器传来的数据，只能是get方法。

（4）websocket
浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

（5）ajax

五、ajax

AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步提交。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
同步提交：当用户发送请求时，当前页面不可以使用，服务器响应页面到客户端，响应完成，用户才可以使用页面。异步提交：当用户发送请求时，当前页面还可以继续使用，当异步请求的数据响应给页面，页面把数据显示出来
AJAX相当于是在用户和服务器之间加了—个中间层(AJAX引擎)，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器，像—些数据验证和数据处理等都交给 Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
ajax工作原理
在客户端发送请求，请求交给xhr，xhr把请求提交给服务，服务器进行业务处理，服务器响应数据交给xhr对象，xhr对象接收数据，由javascript把数据写到页面上，如下图所示：
在这里插入图片描述

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

xhr.open(method,url,async, username, password)  //设置请求基本信息
xhr.setRequestHeader(header, value)  //设置请求头
xhr.onreadystatechange()   //监听readyState属性
xhr.getResponseHeader()   //获得响应头
xhr.ontimeout() //请求超时后的回调函数
xhr.send()  //发送请求

使用AJAX对象的属性
xhr.readyState：获得请求的状态
xhr.status：获得HTTP响应的状态码
xhr.responseText：获得服务器返回的文本数据
xhr.responseXML：获得服务器返回的一个XML数据
xhr.timeout：设置请求的超时时间(ms)

在这里插入图片描述

<body>
    <form>
        <input id="studentnum" />
        <input id="psw" type="password" />
        <input id="btn" onclick="send()" type="button" value="提交" />
    </form>
</body>
<script>
    function send() {
        // 创建对象
        var xhr = new XMLHttpRequest();
        // 设置基本信息
        xhr.open('post', 'http://localhost:8886/');
        // 设置请求头
        xhr.setRequestHeader('Content-Type', 'application/json');
        //设置监听
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                console.log("success");
                if (xhr.responseText) {
                    console.log(JSON.parse(xhr.responseText)); //接收后端传过来的数据
                } else {
                    console.log(xhr.responseXML); //接收后端传来的XML格式的数据
                }
            }
        }
        // 发送信息
        xhr.send(JSON.stringify({
            studentnum: document.getElementById("studentnum").value,
            password: document.getElementById("psw").value,
        }));

    }
</script>

黑球啊

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
2022年蓝旭前端第三次暑期培训课(下)

要知道JSON文本格式在语法上和创建javascript对象的代码相同，因此javascri会使用内置的eval()函数，将JSON数据抓换为原生的javascipt对象。二、Nginx，客户机在发送请求时，不会直接发送给目的主机，而是先发送给代理服务器，代理服务接受客户机请求之后，再向主机发出，并接收目的主机返回的数据，存放在代理服务器的硬盘中，再发送给客户机。正向代理，架设在客户机与目标主机之间，只用于代理内部网络对Internet的连接请求，客户机必须指定代理服务器,并将本来要直接发送到Web服
复制链接

扫一扫