一、Ajax
Ajax(Asynchronous Javascript And XML)：意思是异步的
javascript和xml，是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用Ajax）如果需要更新内容，必须重载整个网页页面
image.png
-
JavaScript：更新局部的网页 -
XML：一般用于请求数据和响应数据的封装 -
XMLHttpRequest对象：发送请求到服务器并获得返回结果 -
CSS：美化页面样式 -
异步：发送请求后不等返回结果，由回调函数处理结果
ajax异步刷新技术
image.png
-
传统web和Ajax的差异
传统web和ajax的差异
Ajax的基本使用
//1.创建XMLHttpRequest核心对象
const xhr = new window.XMLHttpRequest;
//2.建立连接open(method,URL,async)
//建立与服务器的连接
//method参数指定请求的HTTP方法,典型的值是GET或POST
//URL参数指定请求的地址
//async参数指定是否使用异步请求，其值为true或false
xhr.open("GET", "http://192.168.0.100:8089/api/login", true);
//3.发送请求
// content参数指定请求的参数(GET方法的的content可不写)
xhr.send(content);
//4.接收响应
xhr.onreadystatechange = e => { //存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数
//判断响应状态0:XMLHttpRequest对象没有完成初始化
//1:XMLHttpRequest对象开始发送请求
//2:XMLHttpRequest对象的请求发送完成
//3:XMLHttpRequest对象开始读取响应，还没有结束
//4:XMLHttpRequest对象读取响应结束
if (e.target.readyState == 4) {
//判断响应是否成功，status:服务器发送的响应状态码
//200表示成功
//404 没找到页面(not found)
//403 禁止访问(forbidden)
//500 内部服务器出错(internal service error)
//304 没有被修改(not modified)
if (e.target.status == 200) {
//获取dom节点
const pElement = document.getElementById("message");
//返回的数据作为节点内容
pElement.innerHTML = e.target.responseText;
}
}
}
注意：如果用 POST 请求向服务器发送数据，需要将“Content-type”的首部设置为 “application/x-www-form-urlencoded”.
二、http协议（超文本传输协议）
在Web应用中，服务器把网页传给浏览器，实际上就是把网页的HTML代码发送给浏览器，让浏览器显示出来。而浏览器和服务器之间的传输协议是HTTP。
HTTP是在网络上传输HTML的协议，用于浏览器和服务器的通信。
http请求响应模式
http响应请求模式
http请求方式
-
GET:请求指定url的数据,请求体为空(例如打开网页)。 -
POST：请求指定url的数据，同时传递参数(在请求体中)。 -
HEAD：类似于get请求，只不过返回的响应体为空，用于获取响应头。 -
PUT： 从客户端向服务器传送的数据取代指定的文档的内容。 -
DELETE：请求服务器删除指定的页面。 -
CONNECT：HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。 -
OPTIONS：允许客户端查看服务器的性能。 -
TRACE：回显服务器收到的请求，主要用于测试或诊断。
常用的是GET和POST
http请求包结构
http请求由三部分组成，分别是：请求行、请求头部、请求包体(正文)
请求包结构
例如：
POST 'http://192.168.0.100:8089/api/login' HTTP/1.1 //请求行
Host: 192.168.0.100:8089//host字段可以是域名，也可以是ip地址。host字段域名/ip后可以跟端口号
Connection: keep-alive //客户机通过这个头告诉服务器，请求完后是关闭还是保持链接。
Content-Length: 27 //数据长度
Origin: null
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36
Content-type: application/x-www-form-urlencoded//数据的类型
Accept:
Accept-Encoding: gzip, deflate //数据采用的压缩格式。
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
username=admin&password=123 //请求包体
http响应包结构
HTTP响应也是由三个部分组成，分别是：状态行、消息报头、响应正文
响应包结构
例如：
HTTP/1.1 502 Fiddler - Connection Failed //502:状态码 Connection Failed:状态描述
Date: Wed, 25 Dec 2019 11:59:04 GMT //响应的时间
Content-Type: text/html; charset=UTF-8//采用的编码
Connection: close //连接状态
Cache-Control: no-cache, must-revalidate//控制浏览器不缓存数据
Timestamp: 19:59:04.760
[Fiddler] The connection to '192.168.0.100' failed. //响应包体
网友评论