AJAX,HTTP

AJAX

1. ajax的概念
AJAX: Asynchronous Javascript And XML,异步的JS和XML
2000年左右，由谷歌公司提出的技术，最早用于"搜索建议"
本质:使用JS提供的异步对象，在页面不刷新的情况下，发送http请求，得到http响应，实现页面的局部刷新
涉及到的技术:HTML JS HTTP/HTTPS 接口 XML或JSON
2. 完整的WEB请求原理
比如：我们在网页中输入"jd.com"，过了2秒后网页成功显示出来了，那在这2秒发生了什么？

  1. 用户输入了域名"jd.com"，想要访问京东的服务器
    注意：计算机间的互相查找是通过IP地址来访问的，计算机不认识域名，域名只是为了方便人的记忆与使用的。
  2. 客户端向DNS(域名解析)服务器发送请求，请求将域名转为IP地址
  3. DNS服务器将转换好的IP地址响应给客户端
  4. 客户端拿到IP地址后向京东服务器发送请求
  5. 京东服务器处理客户端发来的请求，请求过程中可能会涉及到与数据库 文件系统 其它服务器的交互
  6. 京东服务器把响应信息返回给客户端，客户端浏览器渲染页面展示给用户看

3. 同步与异步
同步(Synchronous):在一个任务进行的过程中，不能开启其它任务

  1. 同步访问:浏览器在向服务器发送请求的时候，只能等待服务器给出响应，在这个过程中，浏览器不能做其它事情
    客户端浏览器与服务器"你执行时我等待，我执行时你等待"——同一个任务
  2. 同步访问出现的场合：
    (1) 浏览器地址栏输入url,访问页面
    (2) a标签的跳转
    (3) form提交请求
    异步(ASynchronous)：在一个任务开启的过程中，可以执行其它操作
  3. 异步访问：浏览器在向服务器发送请求时，用户可以在页面上做其它的操作
    客户端浏览器与服务器"同时执行各自的代码"——不同的任务
  4. 异步访问出现的场合:
    (1) 注册用户名重复的验证
    (2) 聊天室:同时打开多个聊天窗口，在其中一个窗口操作的时候，可以看到另外的窗口发来的消息
    (3) 股票软件：查看走向的同时还能做操作
    (4) 百度的搜索建议：每多输入一个字，输入框下面的提示内容就会改变
    (5) 地图加载: 随着用户的移动，加载出新的地图
    用生活的例子理解同步与异步：
    场景1：顾客打电话问空桌，酒店让顾客先别挂电话，查询一圈后告诉顾客结果【同步】
    场景2：顾客打电话问空桌，酒店让顾客先把电话挂了，酒店查询出结果后再联系顾客【异步】
    4. 客户端提交数据给服务器的两种方式
    方式1：
    表单提交(同步，页面整体刷新)
<form action="/user/login"></form>

客户端发送请求后开始等待….

服务器接收到请求开始处理，最后返回响应消息
客户端接收到响应消息，销毁掉页面中已有内容，跳转到新的页面

方式2：
AJAX异步提交(异步，页面局部刷新)
客户端提交请求后不会等待，继续执行其它任务
服务器接收到请求开始处理，最后返回响应消息
客户端接收到响应消息，使用回调函数处理响应消息，修改页面中的部分内容

HTTP

协议: 就是由相关的委员会规定好的，请求与响应消息的固定格式，消息必须符合特定的格式才能够被彼此理解。
1.HTTP协议的定义
Hyper Text Transfer Protocol 超文本传输协议，这个协议规定了WEB请求消息与响应消息的格式和规范
涉及到两端: 客户端(请求方) 服务器端(响应方)
-2.HTTP请求的过程
1. 浏览器输入服务器的IP地址+端口号/域名
2. 浏览器与服务器建立连接——通过"三次握手"
3. 连接建立好后，浏览器向服务器发送请求消息
4. 服务器接收到请求消息，处理请求，再将响应消息发给浏览器
5. 客户端与服务器端断开连接——通过"四次挥手"
6. 浏览器解析响应消息，将数据信息渲染成页面展示给用户

3.请求与响应
Message：消息/报文 是指在HTTP客户端与服务器间传递的数据块
Request Message: 客户端向服务器发送的请求消息
Response Message: 服务器端根据客户端的请求消息，返回给客户端的响应消息

  • 请求消息详解

    1. 请求消息的格式
      请求行：请求方法 请求地址 协议版本号
      请求头部：请求头部名1：请求头部值1
      …… ……
      请求头部名n : 请求头部值n
      空白行
      请求主体 有的有请求主体(POST) 有的没有请求主体(GET)
    2. 请求行解析
      请求(起始)行具体解析
    • 请求方法 HTTP1.1版本规定了很多类型，注意单词必须大写！
    • GET 查 从服务器上获取资源，资源可以是任何类型(文本/图片等)
      没有请求主体，参数(?id=3 req.query) 或 (/3 req.params)
      POST 增 PUT 改 DELETE 删
    • 请求的url
    • 协议版本号 HTTP/1.1
    • 请求头部解析

请求头部解析
Host:www.tmooc.cn
告诉服务器，这个请求要访问哪个域名下的资源
Connection:keep-alive 新特性 开启持久连接
浏览器申请服务器"保持连接"以供后续的请求继续使用，比如:非常多的资源每次都挂断建立连接性能太低
User-Agent:Mozilla/5.0
浏览器告诉服务器，当前浏览器版本和系统的一些参数
Cache-Control：no-cache
客户端告诉服务器如何缓存此次请求中的数据，no-cache表示不要缓存
Accept:
客户端告诉服务器自己可以接收的响应消息内容类型
Accept-Encoding:gzip
浏览器告诉服务器，自己可以接收哪种格式的压缩数据
Accept-Language:zh-CN(大陆中文)
浏览器告诉服务器，当前用户的首选自然语言
Refer:http://www.baidu.com
浏览器告诉服务器，当前请求来自于哪个网站

4.请求主体解析
请求主体解析
如果GET请求，请求主体为空，因为请求参数都在url后面拼接着呢
如果POST请求，请求主体的参数格式name=tom&age=10

5. 响应消息详解

  1. 响应消息格式
    状态行: 协议版本 状态码 原因短句
    响应头部: 响应头部名1: 响应头部值1
    …… …….
    响应头部名n:响应头部值n
    空行
    响应主体 GET POST PUT DELETE都有响应主体

  2. 响应状态行解析
    响应状态行解析
    1 协议版本号 HTTP/1.1
    2 响应状态码
    常见的状态码：
    200 成功响应 301资源被转移到其它的URL上 404请求的资源未找到
    500服务器代码有语法错误
    1** 信息性 服务器接收请求，需要进一步执行后续操作
    2** 成功 报文已收到，并成功处理
    3** 重定向 资源被转移，可以发送一个重定向的状态码，告诉浏览器，资源的新地址，浏览器会按照新地址重新定位
    4** 客户端错误 反馈客户端的某种错，一般情况下由客户端处理
    5** 服务器内部错误 服务器处理请求时，代码出错

  3. 原因短句
    对响应状态码的简短解释 200 OK

  4. 响应头部解析
    响应头部解析
    Server: 服务器的种类
    Date: Tue, 02 Aug 2022 08:16:14 GMT
    服务器告诉浏览器，这个响应消息发出的时间
    Content-Type: text/html;charset=UTF-8
    响应消息内容类型，也就是发送给客户端的数据类型
    text/html html页面
    text/css css页面
    application/javascript js文件
    image/png image/jpeg 图片
    application/json json字符串
    application/xml xml格式的数据
    Connection:keep-alive 服务器告诉浏览器你也开启"持久化连接"

  5. 响应主体解析
    主要是服务器给客户端响应的结果，可以是一个简单的单词，还可以是HTML片段，或者是JSON(接收后还需要解析)

  6. 操作网页的通用套路
    (1)获取对应的HTML元素——给元素定义id值，直接写id值获取
    (2)为指定的元素绑定操作(事件) onclick点击事件
    (3)修改数据或计算 修改元素显示的内容 id值.innerHTML=“”
    (4)显示结果

拓展

  1. HTTPS协议
    HTTPS是在某个版本的HTTP协议的基础上，又增加了一层加密/解密层，可以将传输在互联网的请求和响应消息进行加密和解密
    这是一个安全版本的HTTP协议，为数据通信提供安全支持，具体过程
    1. 客户端发送请求—SSL层加密—服务器接收到加密文件，在SSL层解密—得到请求明文
    2. 服务器发送请求—SSL层加密—客户端得到加密文件，在SSL层解密—得到相应明文
      虽然过程看起来麻烦，但传输的都是密文，就能避免在传输中被截取导致的不安全问题
  2. HTTP连接性能优化的基本原则
    1. 减少连接创建的次数(开启持久化连接)
    2. 减少请求次数(缓存)
    3. 尽可能的减少响应数据的长度
    4. 提高 服务器端运行速度(比如硬件设备更新)
  3. 缓存
    客户端将服务器端响应回来的数据进行自动保存，当再次访问的时候，直接使用之前保存的数据，优点：
    1. 减少了冗余的数据传输，节省客户端流量费用
    2. 节省服务器的带宽
    3. 降低了对服务器资源的消耗和运行的要求
    4. 降低了由于远距离传输造成的加载延时

缓存的新鲜度和过期:

  1. 请求—无缓存—连接服务器—客户端得到—存缓存
  2. 请求—有缓存—够新鲜—使用缓存
  3. 请求—有缓存—不新鲜—连接服务器确认是否过期—没过期—更新缓存新鲜度—使用缓存
  4. 请求—有缓存—不新鲜—连接服务器确认是否过期—已过期—请求新数据存缓存

其它补充知识点

1. 模板字符串练习：
模板字符串需要使用反引号``包裹，变量名需要使用${变量名}包裹
HTML代码在JS看来就是普通的字符串，所以也可以写在模板字符串里面
HTML代码想有效果，必须放到浏览器页面中才能看到

模板字符串练习
let uname = ‘tom’
let age = 3
//1.传统的字符串拼接方式
let msg1 =“用户名为:”+uname+“年龄为:”+age
console.log(msg1)
//运行时，选择"在外部资源管理器中打开"->输入cmd->node 04.js

//2.使用模板字符串进行拼接
let msg2 = 用户名为:${uname}年龄为:${age}
console.log(msg2)

//3.HTML标签对于JS来讲，就是普通的字符串
let msg3 = <td>${uname}</td><td>${age}</td>
console.log(msg3)

//4.还可以逻辑运算
let msg4 = <li>用户名:${uname}</li><li>年龄:${age}</li><li>是否成年:${age>=18?'是':'否'}</li>
console.log(msg4)
2. URL
常见的url的结构

<scheme>://<host>:<port>/<path>?<query>#<anchor>

协议+主机名(域名)+端口号+资源的目录结构+查询字符串+锚点
http://www.codeboy.com:9999/img/footer/icon2.png
(1) <scheme>
方案 协议规范以哪种方式传递数据，不区分大小写

(2) <host>
主机名称 IP地址 127.0.0.1-------------------网站在互联网上真正的门牌号
域名 www.baidu.com------------标志性建筑
(3)<port>
端口号，端口就是计算机中对外公开的服务"柜台号"
(4) <path>
目录结构 资源在服务器上具体存放的位置
(5)<query>
get方法提交请求时，带参数的查询字符串
(6) <anchor>锚点
锚点/书签，指一个资源中某一部分的名字，可以跳转到指定的位置

打字练习：
http://www.codeboy.com:9999/dz/

版权声明：本文为m0_46170663原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。