需求的源泉
概念
当我们在浏览器地址栏键入一个网址，或者通过网页表单向服务器提交内容的时候，我们就开始服务器进行交互。
传统的Web应用交互
- 用户触发一个HTTP请求到服务器, 服务器对其进行处理后再返回一个新的HTML页到客户端
- 每当服务器处理客户端提交的请求时, 客户都只能空闲等待, 并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据, 都要返回一个完整的HTML页
- 而客户端每次都要浪费时间和带宽去重新读取整个页面
Web交互逐渐改进过程
- 1999年以前，JS可以通过Java applet或Flash电影等中间层向服务器发送请求
- 1999年，微软公司发布IE浏览器5.0版，第一次引入新功能：允许JavaScript脚本向服务器发起HTTP请求
- Ajax技术的核心是XMLHttpRequest（简称XHR），这是由微软首先引入的一个特性，最早应用在它的IE5浏览器上，后来逐渐演化成新版本
CS与BS
- 概念：软件使用方式上两种划分
- C/S：Client/Server
PC客户端、服务器架构
① 特点：在服务器当中就主要是一个数据库，把所有的业务逻辑以及界面都交给客户端完成
② 优点：较为安全，用户界面丰富，用户体验好
③ 缺点：每次升级都要重新安装，针对于不同的操作系统开发，可移植性差 - B/S：Browser/Server
浏览器/服务器架构
① 特点：基于浏览器访问的应用、把业务层交给服务器来完成，客户端仅仅做界面的渲染和数据的交换
② 优点：只开发服务器端，可以跨平台、移植性很强
③ 缺点：安全性比较低，用户体验较差
Web资源
- 什么是Web？
WEB网页，它用于表示网络主机上供外界访问的资源。 - Web资源分类？
① 静态Web资源：指web页面中供人们浏览的数据始终是不变
② 动态Web资源：指web页面中供人们浏览的数据是由程序产生的，不同时间点访问web页面看到的内容各不相同 - Web资源存放在哪里？
① 所有的web资源都放在一个web服务器当中
② web服务器就是可以供外界访问web资源的一个软件
③ web资源放到指定的目录当中，就可以通过对应的端口在浏览器当中访问到 - URL地址
协议：//主机地址：端口号/资源地址
http://www.itlike.com:80/index.html
资源访问流程
-
客户端
浏览器、Android程序、iOS程序、微信小程序 -
服务器
php服务器、Tomcat服务器、nodeJS服务器 -
思考：当我们在浏览器当中访问一个网址的时候，为什么就能看到一个页面？
答案：
① 一个网址对应的其实是一个IP地址- 一个IP地址对应一台电脑
- 通过IP地址找到对应的电脑
- 电脑当中安装的有web服务器，通过端口号找到对应服务器
② 找到对应服务器，服务器把页面返回给你
③ 这样的一个过程就是http请求的过程 -
BS结构流程图
-
请求与响应
① 请求：把客户端请求发送给服务器
② 响应：服务器把你要的数据发送给客户端
③ 请求与响应都要一定的格式- 约定好客户端以什么样的格式把数据给服务器
- 约定好服务器以什么样的格式把数据给客户端
- 这个约定使用的就是HTTP协议
什么是协议
约束双方规范的一个准则
什么是HTTP协议
- HTTP，超文本传输协议（HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。
- 所有的WWW文件都必须遵守这个标准。
- 设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。
请求的发送方式
- 通过浏览器的地址栏
- 通过html当中的form表单
- 通过a链接的href
- src属性
HTTP协议的组成
- http协议组成：请求 & 响应
- 请求与响应都是成对存在的
① 当在浏览器中输入网址访问某个网站时
② 你的浏览器会将你的请求封装成一个Http请求发送给服务器站点
③ 服务器接收到请求后会组织响应数据封装成一个Http响应返回给浏览器
总结：没有请求就没有响应
HTTP请求：发送请求
请求的组成：
- 请求行
1）请求方式：POST、GET
2）请求的资源：/node/form.html?username=myxq&pwd=1234
3）协议版本：HTTP/1.1
HTTP/1.0，发送请求，创建一次连接，获得一个web资源，连接断开。
HTTP/1.1，发送请求，创建一次连接，获得多个web资源，保持连接。 - 请求头
1）请求头是客户端发送给服务器端的一些信息，使用键值对表示key：value
2）使用键值对表示key：value
3）常见的请求头
- 请求体
1）当请求方式是post的时，请求体会有请求的参数
比如: username=zhangsan&password=123
2）如果请求方式为get，那么请求参数不会出现在请求体中，会拼接在url地址后面
比如: http://localhost:63342/day2/01-…2.html?username=zhangsan&password=123 - 示意图
HTTP响应
-
响应行
1）Http协议
2）状态码
200 ：请求成功
302 ：请求重定向
304 ：请求资源没有改变，访问本地缓存。
404 ：请求资源不存在。通常是用户路径编写错误，也可能是服务器资源已删除。
500 ：服务器内部错误。通常程序抛异常
3）其它状态码- 成功
- 重定向
- 客户方错误
- 服务器错误
- 成功
-
响应头
1）服务器端将信息以键值对的形式返回给客户端
2）常见响应头- Location：指定响应的路径，需要与状态码302配合使用，完成跳转
- Content-Type：响应正文的类型（MIME类型）
- Content-Disposition：通过浏览器以下载方式解析正文
- Set-Cookie：服务器向浏览器写入cookie
- Content-Encoding：服务器使用的压缩格式
- Content-length：响应正文的长度
- Refresh：定时刷新
- Server：服务器名称，默认值：Apache-Coyote/1.1。可以通过conf/server.xml配置进行修改
- Last-Modified：服务器通知浏览器，文件的最后修改时间
3）自动的把服务器端的信息传给客户端
-
响应体
1）响应体是服务器回写给客户端的页面正文
2）浏览器将正文加载到内存
3）然后解析渲染显示页面内容 -
图示
请求方式
- 8种请求类型
- OPTIONS：返回服务器针对特定资源所支持的HTTP请求方法，也可以利用向web服务器发送‘*’的请求来测试服务器的功能性
- HEAD： 请求指定的页面信息，并返回头部信息
- GET： 请求指定的页面信息，并返回实体主体
- POST：向指定资源提交数据进行处理请求
- PUT：向指定资源位置上传其最新内容
- DELETE：请求服务器删除Request-URL所标识的资源
- TRACE：回显服务器收到的请求，主要用于测试或诊断
- CONNECT：HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器
- 常用两种请求
① GET
1）GET 方法向页面请求发送参数
2）地址和参数信息中间用 ? 字符分隔
3）查询字符串会显示在地址栏的URL中，不安全，请不要使用GET请求提交敏感数据
4）GET 方法有大小限制：请求字符串中最多只能有 1024 个字符
5）GET请求能够被缓存
6）GET请求会保存在浏览器的浏览记录中
7）可以添加书签
8）编码类型为application/x-www-form-urlencoded
9）只允许ASCII字符类型，不能用二进制流
10）点击刷新时，不会有反应
11）GET请求主要用以获取数据
12）测试数据：http://123.207.32.32:8000/home/data?type=sell&page=1
13）测试网站：httpbin.org
② POST
1）POST 方法向页面请求发送参数
2）使用POST方法时，查询字符串在POST信息中单独存在，和HTTP请求一起发送到服务器
3）编码类型为：application/x-www-form-urlencoded or multipart/form-data. 请为二进制数据使用multipart编码
4）没有历史记录
5）参数类型没有限制，可以是字符串也可以是二进制流
6）数据不会显示在地址栏中，也不会缓存下来或保存在浏览记录中，所以看POST求情比GET请求安全，但也不是最安全的方式。如需要传送敏感数据，请使用加密方式传输
7）查询字符串不会显示在地址栏中
8）Post传输的数据量大，可以达到2M，而Get方法由于受到URL长度限制,只能传递大约1024字节
9）Post就是为了将数据传送到服务器段，Get就是为了从服务器段取得数据
基本概念
- AJAX是 ”Asynchronous JavaScript And XML” 的缩写（即：异步的JavaScript和XML）
- AJAX是一种实现无页面刷新获取服务器数据的混合技术
XML是什么
- 概念
1）XML是“Extensible Markup Language”的缩写（即：可拓展标记语言）
2）是一种特征类似HTML，用来描述数据是什么，并承载数据的标记语言
3）目前，我们只要知道它是一种用来承载数据的语言就足够了 - XML和JSON的区别
1）JSON仅仅是一种数据格式，在JSON发明之前，人们大量使用XML作为数据传输的载体
2）后来，JSON这种类似于字符串对象的轻量级的数据格式越来越受到开发者青睐，慢慢变成了AJAX技术的标准数据格式
3）“AJAX”可以改个名字，叫做“AJAJ”（开玩笑）
无页面刷新
- 互联网最主要的功能在于“资源交换”
- 通常将获取资源的一方称为客户端（主要的工具是浏览器），而将派发资源的一方称为服务端（又称为“服务器”）
- AJAX技术出现之前
客户端发出请求 —> 服务端接收请求 —> 服务器端返回相应HTML文档 —> 客户端页面刷新 —> 客户端加载新的HTML文档 - 新的需求：有没有办法在页面数据变动时，只向服务器请求新的数据，并且在阻止页面刷新的情况下，动态的替换页面中展示的数据呢？
答案：AJAX。开发者将拥有更高的自由度在“数据”层面而非“资源”层面构建网站和Web应用
混合技术
- 基本概念
AJAX技术并不只是操作XMLHttpRequest对象发起异步请求
而是为了实现 “无页面刷新的资源获取” 的一系列技术的统称 - 混合技术包括
1）JavaScript：用来在获取数据后，通过操作DOM或其他方式达成页面内容更新
2）客户端（即浏览器）提供的实现异步服务器通信的XMLHttpRequest对象
3）服务器端允许浏览器向其发起AJAX请求的相关设置
图示
- 安装Node
1）下载对应系统的软件
2）一步步安装至结束
3）测试是否安装成功
node -v、npm -v - 安装express
1）执行 npm install -g express
2）执行 npm install -g express-generator
必须安装这个,不然创建express项目的时候会提示express命令没有找到
3）执行 express -V
4）执行express myServer --view=ejs. - 开启服务器
① 在myServer目录下，cmd中输入npm start即可
② webstrom中bin目录下www运行 - 访问服务器
① local:3000访问 - 关闭服务器
① ctrl+c
-
创建 XMLHttpRequest 对象
1）XMLHttpRequest 对象
所有现代浏览器均支持 XMLHttpRequest 对象
XMLHttpRequest 用于在客户端与服务器交换数据
通过该对象可以在不重新加载整个网页的情况下，对网页的某部分进行更新
2）创建 XMLHttpRequest 对象
var xhr=new XMLHttpRequest(); -
完整Ajax流程
1）创建XMLHttpRequest对象var xhr = new XMLHttpRequest();2）准备发送
xhr.open('get', './01check.js?username='+uname+'&password='+pw,true);
3）执行发送动作xhr.send(null);
4）指定回调函数
1）onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务
每当 readyState 改变时，就会触发 onreadystatechange 事件
2）readyState
当 readyState 等于 4 且状态为 200 时，表示响应已就绪xhr.onreadystatechange = function(){ if(xhr.readyState === 4){ if(xhr.status === 200){ var data = xhr.responseText; var info = document.getElementById('info'); if(data == '1'){ info.innerHTML = '登录成功'; }else if(data == '2'){ info.innerHTML = '登录失败'; } } } }
