2021暑假第三次讨论班

Posted 2021-08-20 tanranranranran

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2021暑假第三次讨论班相关的知识，希望对你有一定的参考价值。

一、json（掌握）

JSON的全称是”javascript Object Notation”，意思是JavaScript对象表示法，它是一种基于文本，独立于语言的轻量级数据交换格式。
JSON有两种结构组成：Object, Array，包含四种基本数据类型：Number,String,boolean,null

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

JavaScript有一个内置对象JSON，用于处理JSON数据

JSON.stringify(object) 用于将数据转化为JSON字符串
JSON.parse(string) 用于将JSON字符串转化为JSON对象

var json = {
    "id": 1,
    "name": "ran",
    "age": 18,
    "isLogin": true,
    "vip": null
}
var jsonstr = JSON.stringify(json);
var jsonobj = JSON.parse(jsonstr);
console.log(jsonstr);
console.log(jsonobj);

{"id":1,"name":"ran","age":18,"isLogin":true,"vip":null}
{ id: 1, name: 'ran', age: 18, isLogin: true, vip: null }

二、nginx（了解）

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

Nginx单纯的http功能的对应，http的代理。
Nginx功能丰富，可作为HTTP服务器，也可作为反向代理服务器，邮件服务器。

三、跨域（掌握）

同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

解决跨域问题

浏览器设置
反向代理(Nginx)
JSON with Padding（JSONP）非官方协定
Cross-Origin Resource Sharing（CORS）跨域资源共享

四、交互方式（了解）

（1）cookie

Cookie是服务器保存在客户端中的一小段数据信息。使用Cookie有一个前提，就是客户端浏览器允许使用Cookie并对此做出相应的设置。一般不赞成使用Cookie。

（2）表单

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

（3）jsonp

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

（4）websocket

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

（5）ajax

五、ajax（掌握）

AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
AJAX相当于是在用户和服务器之间加了—个中间层(AJAX引擎)，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给 Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

创建ajax对象

var xhr = new XMLHttpRequest();

使用ajax方法

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>