详解AJAX

AJAX

一.HTTP协议

1.URL

http://101.96.128.94:9999/img/index/banner1.png
结构：协议+服务器主机+端口+目录结构+资源名称
URL的完整结构
<scheme>://<user>:<pwd>@<host>:<port>/<path>;<params>?<query>#<flag>

详解结构的讲解
①<scheme>
协议，方案。以哪种方式传递资源
不区分大小写

②<user>:<pwd>
早期服务器管理员，会把用户名和密码写在地址栏中
这种方式非常不安全，现在不用了
③<host>
服务器主机名称

IP  127.0.0.1

域名 www.baidu.com
④<port>
端口号，计算机中每种应用提供服务的窗口
⑤<path>
资源在主机上存储的路径
⑥<params>
参数，跟踪状态参数 cookie session
⑦<query>
查询字符串
⑧<flag>
锚点

2.HTTP协议

HyperText Transfer Protocol 超文本传输协议
规范了数据是如何打包和传递的
http协议的历史

3.web请求原理的详解

4.报文/消息 message

1.Request Message
浏览器传送给服务器的消息
2.Response Messge
服务器传送给浏览器的消息
①Request Message 请求消息
请求起始行，请求头信息的第一行

GET                  请求方法
HTTP/1.1             协议版本号
Host: www.tmooc.cn  请求的url

http原生的请求方法 Restful Api规则的请求
get 参数显示在查询字符串里
2kb上限

 req.query

跟服务器要数据的时候使用
没有请求主体	get 所有的查询模块
没有请求主体
后台 `req.params`

post 参数在formdata
有请求主体
把数据传递给服务器的时候
req.body post 新增的模块
有请求主体
req.body
put 往服务器上放文件 put 修改模块
有请求主体
req.body
delete 从服务器上删文件 delete 删除模块
没有请求主体
req.params
option 预请求

请求头信息
Host: www.123.cn 浏览器告诉服务器，要访问的主机是谁
Connection: keep-alive 浏览器告诉服务器，请开启持久连接
User-Agent: Mozilla 浏览器告诉服务器，当前浏览器的版本号和系统信息
Accept-Encoding: gzip 浏览器告诉服务器，我这个浏览器可以接收的压缩文件类型
请求主体 formdata
②Response Messge
响应起始行
HTTP/1.1 协议版本号
200 响应状态码
OK 对响应状态码简短解释—原因短句
响应头信息
Connection: keep-alive 服务器告诉浏览器，已经开启持久连接
Date: Mon, 31 Aug 2020 06:28:28 GMT 服务器告诉浏览器，响应的具体时间
Content-Type: text/html 服务器告诉浏览器，响应主体的数据格式
响应主体
服务器传送给浏览器的数据

5.缓存

节省客户端流量
减少服务器端压力
6.HTTP的优化
减少连接的创建次数----开启持久连接
减少请求次数----------缓存
尽可能减少响应数据的长度 res.send(“1”)
7.安全的http协议
https:// 端口443
SSL：为数据通信提供安全支持
1.客户端发送请求---->SSL层加密---->服务器接收到加密文件---->在SSL解密，获取明文
2.服务器发送响应---->SSL层加密---->浏览器接收到加密文件---->在SSL解密，获取明文

二.DOM操作

form提交请求，自动收集整理数据(有name属性)
使用ajax就不用form，直接使用input控件，失去自动收集整理数据的能力
需要手写代码收集数据
document object Model 文档对象模型
js把html文档封装进了一个对象，document对象，
1.我们直接使用使用document调用方法，获取元素对象
2.通过元素对象，获取用户填写的数据
1.获取input中的数据
2.input元素添加id，不用name
3.通过id获取input对象，存入obj_input

var obj_input=document.getElementById("input的id");

3.使用input对象，获取用户填入的值
var str=obj_input.value;
4.给input设置值，改变页面上input中的值
obj_input.value="…"
5.双标签内容区域的数据
1.给双标签添加id
2.使用document.getElementById("双标签id");获取双标签对象
3.获取双标签内容区域

var str=obj_div.innerHTML;

4.设置双标签内容区域

obj_div.innerHTML="........"

form提交请求，自动收集整理数据(有name属性)
使用ajax就不用form，直接使用input控件，失去自动收集整理数据的能力
需要手写代码收集数据
document object Model 文档对象模型
js把html文档封装进了一个对象，document对象，
我们直接使用使用document调用方法，获取元素对象
一、通过元素对象，获取用户填写的数据
1.获取input中的数据
2.input元素添加id，不用name
通过id获取input对象，存入obj_input
var obj_input=document.getElementById(“input的id”);
3.使用input对象，获取用户填入的值
var str=obj_input.value;
4.给input设置值，改变页面上input中的值
obj_input.value="…"

二、双标签内容区域的数据
1.给双标签添加id
2.使用document.getElementById("双标签id");获取双标签对象
3.获取双标签内容区域

var str=obj_div.innerHTML;

4.设置双标签内容区域

obj_div.innerHTML="........"

三、代码优化
ES6 规定可以使用元素的id值，直接当做元素对象进行操作
四、事件
通过用户在页面上的行为操作，来激发js的方式

onclick="" 用户在页面单击这元素，会激发事件，会调用双引号中的js
onload="" 页面加载事件，一个页面只要加载，就会调用js
           onload必须写在body标签中
onblur=""  焦点移除事件
onfocus="" 获取焦点事件

用户名 获取焦点，提示格式，失去焦点，非空验证，格式验证
密码 获取焦点，提示格式，失去焦点，非空验证，格式验证
密码重复 获取焦点，两次输入一直。
失去焦点，验证两次是否一致

三.AJAX

1.同步Synchronous
在一个任务进行的过程中，不能开启别的任务
同步访问，浏览器在向服务器发送请求的时候，浏览器只能等待服务器的响应，不能做其他任何事
出现场合
1.浏览器地址栏输入url，就是同步
2.a标签跳转
3.form表单
2.异步Asynchronous
多个任务可以同时进行
异步访问，浏览器在向服务器发送请求的是偶，浏览器上可以做其他操作
出现场合
1.学子用户名重复的验证
2.股票软件
3.百度的搜索联想
3.AJAX
**

Asynchronous javascript and xml ajax

本质，使用js提供的异步对象 XMLHttpRequest
异步的向服务器发送请求
并接收响应
4.使用ajax
①创建异步对象xhr
var xhr=new XMLHttpRequest(); 准备好xhr对象，在后面被使用
②创建请求

xhr.open("请求方法","url",isAsy);

isAsy:要不要使用异步的方式发送 true 异步 false 同步
③发送请求

xhr.send(请求主体)

没有请求主体时，可以不填，或者填null
④接收响应数据
xhr.readyState 保存着xhr的请求状态，取值5个

0  请求尚未初始化
1  已经打开服务器连接，请求正在发送
2  开始接收响应头信息
3  开始接收响应主体
4  响应主体接收完毕

xhr.status 保存着响应状态码
xhr.onreadystatechange=function(){
  if(xhr.readyState==4 && xhr.status==200){
    var r=xhr.responseText;
    if(r==0){
      d1.innerHTML="用户名或密码错误";
    }else{
      d1.innerHTML="登录成功";
   }
  }
}

四. Restful 的get 方法

http原生的请求方法 Restful Api规则的请求
get 参数显示在查询字符串里
2kb上限

 req.query

跟服务器要数据的时候使用
没有请求主体	get 所有的查询模块
没有请求主体
后台 req.params

post 参数在formdata

  有请求主体
     把数据传递给服务器的时候
     req.body	post 新增的模块
     有请求主体

 req.body

put 往服务器上放文件 put 修改模块

 有请求主体
 req.body

delete 从服务器上删文件 delete 删除模块

  没有请求主体
   req.params

option 预请求

五.restful语法总结

方法 后台 前台

get	r.get("/url/:uname&:upwd",(req,res)=>{
   req.params.uname;
   req.params.upwd
});	xhr.open("get"," /ajax/login_restful/abc&123 ",true);
在url中，直接写传递的值，而且不加冒号
delete	r.delete("/url/:uid",(req,res)=>{
   req.params.uid
})	xhr.open("delete","",true)
post、put		参数在请求主体中
var formdata=`uname=${_uname}&upwd=${_upwd}`;
xhr.send(formdata);

注意：默认的请求头信息，只允许传递普通字符
不能传递带= 和 &的内容
解决方案，设置请求头

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

设置请求头，有位置要求，必须在open和send之间

六.json

后台查询完数据库得到的结果为一个obj对象
为了能够传递给前台，在传递过程中，自动变成string
所以前台得到的数据，是一个string字符串

json     javascript  object  notation

js对象表示法，以js对象格式存在的一个字符串，称json为json串
把json串----->js对象 var arr=JSON.parse(r);