基本概念
1.什么是服务器?
服务器也是电脑,只不过是一台24小时不断电,不关机的电脑,根据提供的服务功能不同,分为:文件服务器,邮件服务器,web服务器简而言之:服务器其实就是一台’提供了某种服务功能’的超级电脑
2.如何让电脑能够提供某种服务?
如何让电脑聊天? 安装qq
如何浏览网页?安装浏览器
3.如何让电脑提供管理网站的服务?
安装web服务相关的软件, Apache, IIS, NodeJs等
安装了web服务器软件的电脑称之为web服务器
4.如何用node搭建一个本地服务器?
4.1下载node,官网: https://nodejs.org/en/
4.2安装express和express-generator
npm install -g express
npm install -g express-generator
4.3创建node_server文件夹,并初始化
npm init -y
4.4安装path模块
npm install path
4.5新建public文件夹和app.js
在app.js中写入:
//引入express框架
const express = require('express');
const bodyParser = require('body-parser')
var url = require('url');
//路径处理模块
const path = require('path');
//创建web服务器
const app = express();
//静态资源访问服务功能
app.use(express.static(path.join(__dirname, 'public')));
app.use(bodyParser.urlencoded({ extended: false }))
// app.use(bodyParser.json())
// get请求
app.use(function (req, res) {
// console.log(req.body);
var queryObj = url.parse(req.url, true).query;
var name = queryObj.user_name;
var password = queryObj.user_password;
res.writeHead(200,{"Content-Type":"text/html;charset=UTF-8"});
res.end("服务器收到了请求" + name + password);
})
//监听端口
app.listen(3000);
//控制台提示输出
console.log('服务器启动成功');
1.http协议
超文本传输协议,网站是基于http协议的,例如网站的图片,css,js等都是基于http协议进行传输的,http协议是由客户机到服务器的请求(request)和从服务器到客户机的响应(response)进行了约束和规范,即http协议主要由请求和响应构成
1.1 请求报文
1.2 响应报文
1.3 状态码
1.4 模拟客户端与服务端的请求与响应
1.5 GET和POST的异同
相同点:都是将数据提交到远程服务器
不同点:
提交数据存储的位置不同
GET请求会将数据放在url后面
POST请求会将数据放在请求头中
提交数据大小限制不同
GET请求对数据的大小有限制(2000个字符)
POST请求对数据没有大小限制
GET和POST应用场景
GET请求从表单发送的信息对任何人都是可见的(显示在url中)用于提交非敏感的小数据
POST请求放在请求头中,数据相对安全,用于提交敏感的大数据
2.单线程与多线程
js 是单线程,js 的代码执行必须是一步一步执行的. 写在前面的一定会在前面运行, js 代码是排队执行的.单线程的程序我们常常成为 同步代码. 计算机在多个线程间执行每一个程序的代码, 被称为多线程,浏览器是多线程。
单线程:同一时间只能干一件事情,多线程,同一时间可以干多件事情
2.1 了解web worker
JS单线程的问题
- 一次只能做一件事。会造成阻塞
- 多核 CPU 中,单线程无法发挥计算机的计算能力
Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程
worker好处:
- 计算密集型或高延迟的任务使用worker,不会被阻塞或拖慢
worker的问题:
- Worker 线程一旦新建成功，就会始终运行, 会浪费资源,所以不用要及时关闭
2.2 主线程
1. 创建worker线程
主线程通过new命令，调用Worker()构造函数，新建一个 Worker 线程。
var worker = new Worker('work.js');
Worker()构造函数的参数是一个脚本文件，该文件就是 Worker 线程所要执行的任务。由于 Worker 不能读取本地文件，所以这个脚本必须来自网络。如果下载没有成功（比如404错误），Worker 就会默默地失败。
2.主线程向Worker线程发布数据
主线程通过调用worker.postMessage()方法，向 Worker线程 发消息。
worker.postMessage('Hello World');
postMessage()方法的参数:就是主线程传给 Worker 的数据。它可以是各种数据类型，包括二进制数据。
3. 主线程监听Worker线程发送的信息
主线程通过worker.onmessage指定监听函数，接收子线程发回来的消息。
worker.onmessage = function (event) {
// 获取worker线程传递过来的数据
console.log(event.data);
}
通过事件对象的data属性可以获取 Worker 发来的数据。
4. 关闭Worker线程
在Worker 完成任务以后，主线程就可以把它关闭
worker.terminate();
2.3 Worker 线程
1. 监听主线程发布的数据
Worker 线程通过监听message事件。来获取主线程发布的数据
self.addEventListener('message', function (e) {
self.postMessage( e.data);
},
self代表子线程自身，即子线程的全局对象。
事件对象的data属性包含主线程发来的数据。
2. 向主线程发布消息
Worker线程通过self.postMessage()方法用来向主线程发送消息。
self.postMessage( e.data);
3. 关闭自身线程
Worker 线程 可以通过 close方法关闭Worker线程
self.close();
2.4 多线程注意点
- 同源限制: Worker线程运行的脚本文件必须与主线程的脚本文件同源
- DOM限制: Worker线程中不能使用document,window,parent的对象
- 文件限制: Worker 线程无法读取本地文件,所加载的必须是网络文件
1.web worker的兼容性问题，主流浏览器对web worker的兼容性还不够高（比如Safari ，IE就更不用说了）
2.在项目中引入web worker并不能带来质的改变,正常的项目决不可能设计成让前台来处理复杂的业务逻辑。
3.大数据的处理,这里所说的大数据处理，并不是指数据量非常大，而是要从计算量来看，通常用时不能控制在毫秒级内的运算都可以考虑放在web worker中执行。
4.高频的用户交互适用于根据用户的输入习惯、历史记录以及缓存等信息来协助用户完成输入的纠错、校正功能等类似场景，用户频繁输入的响应处理同样可以考虑放在web worker中执行。
3.异步请求
指某段程序执行时不会阻塞其它程序执行，其表现形式为程序的执行顺序不依赖程序本身的书写顺序，相反则为同步,(见图例) 
XMLHttpRequest可以以异步方式的处理程序。
4.Ajax
AJAX（Asynchronous JavaScript and XML），最早出现在 2005 年的 GoogleSuggest，是一种通过 JavaScript 进行网络编程（发送请求、接收响应）的技术方案，它使我们可以获取和显示新的内容而不必载入一个新的 Web 页面。增强用户体验，更有桌面程序的感觉。说白了，AJAX 就是浏览器提供的一套 API，可以通过 JavaScript 调用，从而实现代码控制请求与响应。
xml
天气预报显示不一样,数据都是从气象局统一发送给各个网站,相当于气象局有一台服务器,你的网站要去获取这些天气信息,天气数据怎么给?用什么格式给>以什么方式给?, 网站不止java能写,python能写,js都能写…,数据给到你不可能只取针对java或者其他语言,而是其他平台都要能用,所有的语言都能认识.
xml数据格式最主要的功能就是数据传输
程序之间的数据通讯
java,php
配置文件
config.xml->php语言,java语言,python语言
储存数据,当做小型数据库
规范数据格式,使数据易读易处理
xml 指的是可扩展性标记语言,html就是标记语言
xml 被发明的目的是传输和存储数据而不是展示数据(总要), html的目的是展示数据
xml 的标签必须自定义(没有官方规定标签),但是在写标签名的一定要有含义见名知意(所有的xml文件必须要有一个根节点)
xml W3C推举的数据传输格式
如何自己写一段xml?(假设我们作为服务器来给别人提供数据)
xml和html有哪些不一样
1.html标签不能自定义;xml标签只能自定义
2.html语法要求不严格;xml语法要求极其严格,必须的成对标签
3.xml用来传输和存储数据;html用来展示数据
xml语法:
必须要有根节点
xml头声明:不强制要求,可有可无
version:xml规则版本
encoding:编码
<?xml version='1.0' encoding='utf-8'?>区分大小写
标签补不能交叉.
4.1 XMLHttpRequest
浏览器内建对象，用于在后台与服务器通信(交换数据) ，由此我们便可实现对网页的部分更新，而不是刷新整个页面。 举个例子来说明:
// 1. 创建一个 XMLHttpRequest 类型的对象 —— 相当于打开了一个浏览器
var xhr = new XMLHttpRequest()
// 2. 发送一个http请求 打开与一个网址之间的连接 —— 相当于在地址栏输入访问地址
xhr.open('GET', 'http://localhost:9000')
// 3. 通过连接发送一次请求 —— 相当于回车或者点击访问发送请求
xhr.send(null)
// 4.接收服务器响应 指定 xhr 状态变化事件处理函数 —— 相当于处理网页呈现后的操作
xhr.onreadystatechange = function () {
// 通过 xhr 的 readyState 判断此次请求的响应是否接收完成
if (this.readyState === 4 && this.status == 200) {
// 通过 xhr 的 responseText 获取到响应的响应体
console.log(xhr.responseText)
}
}
由于XMLHttpRequest本质基于HTTP协议实现通信，所以结合HTTP协议和上面的例子我们分析得出如下结果：
4.1.1请求
HTTP请求3个组成部分与XMLHttpRequest方法的对应关系
//请求行
xhr.open('GET', 'http://localhost:9000')
//请求头
xhr.setRequestHeader('Content‐Type','text/html'); //get请求可以不设置
//请求主体
xhr.send();
4.1.2响应
HTTP响应是由服务端发出的，作为客户端更应关心的是响应的结果。HTTP响应3个组成部分与XMLHttpRequest方法或属性的对应关系。由于服务器做出响应需要时间（比如网速慢等原因），所以我们需要监听服务器响应的状态，然后才能进行处理。
xhr.onreadystatechange = function () {
// 通过 xhr 的 readyState 判断此次请求的响应是否接收完成
if (this.readyState === 4 && this.status == 200) {
// 通过 xhr 的 responseText 获取到响应的响应体
console.log(xhr.responseText)
}
由于readystatechange事件是在xhr对象状态变化时触发，也就意味着这件事会被触发多次，图解为每个状态码的含义
)]
onreadystatechange是Javascript的事件的一种，其意义在于监听XMLHttpRequest的状态
获取状态行（包括状态码&状态信息）
xhr.status //状态码
xhr.statusText //状态信息
获取响应头
//获取指定头头信息
xhr.getResponseHeader('content‐Type');
//获取所有响应头信息
xhr.getAllResponseHeaders();
响应主体
xhr.responseText
5.JSON
即 JavaScriptObject Notation，另一种轻量级的文本数据交换格式，独立于语言。
5.1 语法规则
1、数据在名称/值对中
2、数据由逗号分隔(最后一个健/值对不能带逗号)
3、花括号保存对象方括号保存数组
4、使用双引号
5.2 JSON解析
JSON数据在不同语言进行传输时，类型为字符串，不同的语言各自也都对应有解析方
法，需要解析完成后才能读取 JavaScript解析方法：JSON.parse()、
JSON.stringify()
//JSON.parse将数据转换为dom对象
var data = JSON.parse(xhr.responseText);
1035
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
