• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

2021暑假第三次讨论班

互联网 diligentman 2小时前 1次浏览

一、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不同即为跨域。

解决跨域问题

  1. 浏览器设置
  2. 反向代理(Nginx)
  3. JSON with Padding(JSONP)非官方协定
  4. 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>


程序员灯塔
转载请注明原文链接:2021暑假第三次讨论班
喜欢 (0)