ajax

1.http协议

1.URL
结构：协议+主机名称+目录结构+文件名称
完整结构：😕/:@:/ ;?#
(1)完整结构解析
1）scheme：方案,协议.设置以哪种方式获取服务器资源,协议不区分大小写,常用协议http:/ftp: …
常见协议
默认端口号
协议基本作用
FTP
21
文件上传，下载
SSH
22
安全的远程登录
TELNET
23
远程登录
SMTP
25
邮件传输
DNS
53
域名解析
HTTP
80
超文本传输
POP3
110
邮件接收
HTTPS
443
加密传输的HTTPS
2）:用户名：密码。此种写法已过时。
3）主机名（域名，ip地址）
4）端口号，程序在计算机中，提供服务的端口号
5） 资源在服务器上具体的存放位置
6）参数，保存跟踪状态参数 (session/cookie)
7） get方法提交请求时的查询字符串
8）#锚点

2.HTTP协议
HyperText Transfer Protocol 超文本传输协议
规范了数据是如何打包以及传递的(专门用于传输html文件的协议，专门浏览网页的协议)
1）HTTP/0.9：1991年，支持GET方法
2）HTTP/1.0：1996年，多种请求方法，支持多媒体对象
3）HTTP/1.0+：持久连接
4）HTTP/1.1：1999年，校正http的设计缺陷，性能优化
5）HTTP-NG(或HTTP/2.0)：研究工作仍在进行中

3.web的请求原理
DNS查询(客户端->DNS服务器) -> DNS响应(DNS服务器->客户端) -> HTTP请求(客户端->web
服务器) -> 请求处理(web服务器->文件系统/数据库/其他服务器) -> HTTP响应(web服务器->客
户端)

4.消息/报文Message(是在HTTP客户端与服务器间传递的数据块)
HTTP协议规定，消息必须符合特定的格式才能被彼此理解。
（1）请求信息Request Message(客户端向服务器端发送的数据块)
由三部分组成：请求起始行，请求头，请求主体
1）请求起始行
①请求方法
get
明文提交，不安全，有大小限制2kb；
客户端向服务器要数据的时候使用get；
靠地址栏传递查询字符串的方式传数据，无请求主体；
post
隐式提交，无大小限制；
客户端要传递数据给服务器时使用；
有请求主体，靠请求主体传递数据；
delete
客户端想要删除服务器上的内容(一般禁用)
put
客户端想往服务器上放文件内容(一般禁用)
connect
测试连接
trace
追踪请求路径
option
预请求
head
表示客户端只获取响应消息头
②协议版本 HTTP/1.1
③请求的url
2）请求头
①host:www.tmooc.cn 告诉服务器请求的是哪一个主机
②Connection:keep-alive 告诉服务器开启持久连接
③User-Agent 告诉服务器，浏览器的类型和浏览器版本号
④Accept-Encoding:gzip 告诉服务器，我这个浏览器可以接收的压缩文件格式
⑤Accept-Language:zh-CN 告诉服务器，我这个浏览器可以接收的自然语言类型
⑥Referer:htttp://www.tmooc.cn/free 告诉服务器，当前请求来自于哪个网页
3）请求主体
form data；get请求没有请求主体；post有请求主体
（2）响应消息Response Message(服务器端返回给客户端的数据块)
由三部分组成：响应起始行，响应头，响应主体
1）响应起始行
①协议版本 http/1.1
②响应状态码：告诉浏览器，服务器的响应状态是什么
1XX:正在请求，提示信息
2XX:200 响应成功
3XX:301 永久重定向
302 临时重定向
304 同一个请求，没有任何变，命中缓存
4XX:404 请求资源不存在
403 权限不够
405 请求方法不被允许
Ajax常见错误：404请求资源不存在
①url是否写错
②接口的路径是否写错
③路由是否写错
④文件位置是否放错
5XX:500 服务器代码错误，一定是服务器中代码出错
③原因短句(对响应状态码的简短解释)
2）响应头
①Date:Sun,05 May 2019 08:19:02 GMT 告诉浏览器,服务器响应的时间,格林威治时间
②Connection:keep-alive 告诉浏览器，服务器已经开启了持久连接
③Content-Type 告诉浏览器，响应主体的类型是什么
text/html 响应回来的数据是html文本
text/css 响应回来的数据是css文本
application/JavaScript 是js文本
image/jpg gif png 响应回来的是图片
text/plain 响应回来的是普通文本
application/json 响应回来的是json字符串
application/xml 响应回来的是xml字符串
3）响应主体：服务器传递给浏览器的数据

5.缓存
（1）概念：客户端将服务器响应回来的数据进行自动的保存；当再次访问的时候(请求不改变)，直接
使用保存的数据
（2）优点：1）减少冗余的数据传输，节省客户端流量
2）节省服务器宽带
3）降低了对服务器资源的消耗和运行的要求
4）降低了由于远距离传输而造成的加载延迟
（3）新鲜度和过期
1）请求–无缓存–连接服务器–存缓存–客户端得到
2）请求–有缓存–够新鲜–使用缓存–客户端得到
3）请求–有缓存–不新鲜–连服务器确认是否过期–没过期–更新缓存新鲜度–客户端得到
4）请求–有缓存–不新鲜–连服务器确认是否过期–过期–连服务器–存缓存–客户端得到
（4）与缓存相关的消息头
1）Cache-Control:max-age=0
从服务器将响应传到客户端之时起，此数据处于新鲜的秒数，这是一个相对时间；
0 就是不缓存； 3600就是1个小时的新鲜度；
2）语法：在网页中添加缓存，需要修改消息头

6.HTTP性能优化
（1）HTTP的连接过程
发起请求–>建立连接–>服务器处理请求–>访问资源–>构建响应–>发送响应–>记录日志
（2）HTTP连接性能优化
1）创建连接：减少连接的创建次数(开启持久连接)
2）发送请求：减少请求的次数(整合代码，不要让文件过多)
3）接收响应：尽可能的减少响应数据的长度(代码压缩)
4）等待响应：提高服务器端运行的速度

7.安全的HTTP协议—https
HTTPS：安全版本的HTTP协议
SSL：为数据通信特供安全支持
1）客户端发送请求–>ssl 层加密–>服务器接收到加密文件–>ssl层解密，得到明文
2）服务器发送响应–>ssl 层加密–>客户端得到加密文件–>ssl层解密，得到响应内容

2.DOM简单操作

ajax提交请求，不需要使用form表单；但是form表单自带收集数据的功能，不使用form标签，就没有自动收集数据的功能了，我们需要自己手敲代码，收集数据，使用dom技术。

1.完整的JavaScript的组成
①js核心：ECMA Script 6
②Dom：Document Object Model 文档对象模型
③Bom：Browser Object Model 浏览器对象模型

2.使用js的Dom获取页面某个元素
（1）获取元素对象：使用元素的id获取对象 var elem=document.getElementById(“id”);
（2）通过对象，获取元素的内容/值
1）获取内容(双标签中间的东西叫内容)，使用dom对象的innerHTML属性
获取：var res=elem.innerHTML;
设置：elem.innerHTML=“abc”;
2）获取值(单标签的value叫值)，使用dom对象的value属性
获取：var res=elem.value;
修改：elem.value=" "
//获取内容

这里是测试的文本

//目标：获取上面div中的文本内容 //1.获取这个div的对象 //2.通过div对象获取文本内容

//获取值

弹窗

（3）使用dom操作的进阶
1）获取对象的方案进阶
①不使用id就能获取对象(后期xml中要使用)
通过标签名称获取当前页面中所有的该标签的元素，通过下标获取某一个元素
var elem=document.getElementsByTagName(“div”)[0];
②使用id获取对象的简写方式，ES6支持的写法
直接使用id代表对象

测试文本1

var res=d1.innerHTML; 2）对于innnerHTML的进阶 innerHTML是可以改变html的结构的 //获取对象方案进阶

//对于innerHTML的进阶

123

//input中输入的内容，点击提交后，展示在列表中

插入表格

姓名	性别	年龄

3.ajax

1.同步Synchronous
在一个任务进行的过程中，不能开启其他任务；
同步访问：浏览器在向服务器发送请求时，浏览器只能等待服务器响应，不能做其他事
出现场合：1）地址栏输入url，是同步访问
2）a标签跳转
3）form提交

2.异步Asynchronous
在一个任务开启时，可以进行其他的任务
异步访问：浏览器在向服务器发送请求时，用户可以在页面上做其他的操作
出现场合：1）用户名重复的验证
2）聊天室
3）百度搜索建议
4）股票走势图

3.ajax简介
Asynchronous JavaScript And XML异步的 js 和 xml
本质：使用js提供的异步对象，异步的向服务器发送请求，并接收响应回来的数据
异步对象：XMLHttpRequest

4.使用ajax
（1）创建异步对象
var xhr=new XMLHttpRequest(); 这种创建方式，不兼容IE8以下的版本
var xhr=new ActiveXObject(“Microsoft.XMLHttp”); 兼容IE8以下的版本，不常用
如何兼容ie8以下的浏览器
if(window.XMLHttpRequest){
//如果有这个属性，说明是IE8以上的浏览器
var xhr=new XMLHttpRequest();
}else{
//如果没有这个属性，说明是IE8以下的浏览器
var xhr=new ActiveXObject(“Microsoft.XMLHttp”);
}
（2）创建请求，打开连接
xhr.open(method,url,isAsyn);
method：string类型，请求的方法
url：string类型，请求的url
isAsyn：boolean，是不是要采用异步的方式提交请求
（3）发送请求
xhr.send(formdata);
注意：只有post请求，才有请求主体formdata；get方法不需要请求主体，所以使用get请求的时
候，有两种发送请求的写法 xhr.send()/xhr.send(null)
（4）接收响应数据
1）xhr.readyState属性：用于表示xhr对象的请求状态(5个状态)
0：请求尚未初始化
1：已经打开连接，请求正在发送中
2：接收响应头
3：接收响应主体
4：接收响应数据成功
2）xhr.onreadystatechange 监听
监听xhr.readyState值的改变，每改变一次，方法会调用一次，一共会调用4次
注意：只有当xhr.readyState=4的时候，是我们要接收响应正确时刻
3）xhr.status响应状态码
只有响应状态码为200的，我们才接收响应
4）响应数据放在了xhr.responseText属性中

5.带参数的get请求
（1）xhr.open 为get方法
（2）xhr.open中的url，需要?和参数
（3）获取数据 req.query
//1.测试服务器接收ajax请求的接口
router.get("/ajaxDemo",(req,res)=>{
res.send(“ninininin”);
});
//2.测试带参数的get请求
router.get("/ajaxDemo1",(req,res)=>{
//1.接收参数
var $uname=req.query.uname;
var $upwd=req.query.upwd;//2.验证接收参数成功if(!$uname){
res.send(“用户名未接收到”);
return;
}
if(!$upwd)res.send("密码未接受到");return;res.send("用户名为："+$uname+",密码为："+$upwd);
})

6.使用post方法发送请求
（1）xhr.open 需要改成post方法
（2）xhr.open中的url，不需要?和参数了
（3）添加创建请求主体的代码，把数据放在请求主体中
（4）修改请求信息头，可以发送特殊符号
（5）xhr.send(请求主体)
（6）获取数据 req.body
http原生的请求方法
restful请求方法
get
1.明文传参，使用查询字符串，上限2kb
2.可以在后台做非空验证
3.向服务器要数据时使用 req.query
4.xhr.open(“get”,“url?uname=”+u_name+"&upwd="+u_pwd,true);
1.不能使用后台做非空验证，只能在前台做非空验证
2.多个参数之间，可以使用&和-连接，但是前台url要与后台匹配,没有请求主体
3.接口：router.get("/restful_login/:uname&:upwd",(req,res)=>{req.params.uname;req.params.upwd});
前台：xhr.open(“get”,"/ajax/restful_login/"+KaTeX parse error: Expected 'EOF', got '&' at position 8: uname+"&̲"+upwd,true);
post
1.隐式传参，使用请求主体
2.把数据传递给服务器时 req.body
3.请求头位置必须在open和send之间
3.前台：xhr.open(“post”,“http://127.0.0.1:8080/ajax/post_login”,true);
请求头：xhr.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”);
请求主体传参：var formdata=“uname=”+u_name+"&uped="+u_pwd;
xhr.send(formdata);
与http原生请求方法一样
put
往服务器上放资源的时候使用
有请求主体 req.body
delete
从服务器上删除资源的使用
没有请求主体 req.params
option
预请求

4.json

前台ajax内部，xhr.responseText得到数据，是string类型，string中放着js对象组成的数组。

1.js对象的数据格式
语法：var 对象名称={属性1:值1,属性2:值2…}; var obj={name:“abc”,age:18}
注意：js对象中，属性名没有双/单引号

2.JSON数据格式
json是一个string字符串，亲切的称之为json串；
js对象表示法：JavaScript object Notation 以js对象的格式表现出来的字符串

3.json字符串的格式
（1）用一对{}表示一个对象
（2）json中对象的属性名，必须使用""引起来(使用单引号也是正确的，但是不推荐)
（3）属性的值如果是字符串，也要带双引号
（4）json的表现是一个字符串，所有最外层加引号(推荐使用单引号)
（5）请求访问服务器，调用数据库代码，得到的结果，默认是一个json串

4.json解析，把json字符串转换成js对象数组
var arr=JSON.parse(result);写在接收响应监听中

uid	用户名	用户密码	邮箱

5.xml解析

eXtensible Markup Language可拓展标记语言；是html的一个变种，专门负责承载数据用的；
xml中标签，关键字/属性都需要自己定义

1.语法
1）第一行写版本声明

<?xml version="1.0" encoding="urf-8"?>

2）xml的标记只有双标记，必须成对出现

3）xml的标签严格区分大小写，开始标签和结束标签必须一致
4）xml标记，允许嵌套，但是要注意嵌套顺序
5）每个xml文档，有且只有一个根元素

2.xml解析
使用dom解析：??.getElementsByTagName(“student”)
1）不能使用xhr.responseText获取xml。这样获取的xml不能解析。要使用
var result=xhr.responseXML;
2）一层层解析获取

错误总结

注意错误：
1.服务器中的get接口，可以使用浏览器地址栏验证
2.跨域错误：把ajax的html文件放入node服务器的静态资源中托管，使用访问服务器的方式打开页面
(提示语：Access-Control-Allow-Origin)
3.大括号缺失(提示语：Unexpected end of input)
4.没有错误信息的错误：使用console.log在不同位置打桩观察
5.错误的符号(提示语：unexpected token)
6.数据库出问题，有可能是sql语句错误
7.设置请求消息头，必须在xhr.open和xhr.send之间写
8.xml文件中，有结构错误(Cannot read property ‘getElementsByTagName’…)