ajax基础

Posted 2021-01-14 小仙女63

如何搭建博客？

1.可以利用第三方 2.发布到github上(只能发布静态页面)  3.自己购买域名和服务器，然后进行页面优化和推广

利用购买域名和服务器的方式搭建博客

1.购（租）服务器：阿里云   有了服务器后通过ftp（eg：FireZilla）将本地项目传送到服务器上

2.购域名:万网  DNS解析域名。将域名和服务器IP地址绑定

3.开发项目，将项目发布到相应的端口号（0-65535）的服务器的内存里                                                                                                                                                                           

在浏览器地址栏中输入url地址并回车，过程中发生了什么？

1.通过http协议，客户端向服务器端发起请求

2.查看url地址中的域名，将域名解析成域名IP地址，找到对应的服务器

3.查看端口号，找到对应的服务，通过路径找到服务中对应的页面

4.服务器将对应的内容通过response响应返回给客户端

5.客户端拿到数据后，将数据在页面显示出来，1).将所有的标签生成DOM tree 2).代码自上而下执行，当遇到script/link/img......会按照以上步骤，重新向服务器发生请求 3).进行动态绑定数据（ejs模板，字符串拼接方式）处理  4).浏览器进行渲染和绘制

什么是http事务？

客户端发起请求，服务器端相应成功，这种完整的过程叫http事务

客户端向服务器端发起请求时，会携带一些数据给服务器端，服务器端响应也会向客户端发送响应的数据，这些数据详细信息称为http报文                                                                                                                                                                                                                                                                                                                                                               

URL地址：统一资源定位符        URI:统一资源标识符         URN：统一资源名称

详解URL协议：

http:超文本传输协议 默认端口号：80       https:http+ssl      +加密协议 默认端口号：8080     ftp:文件传输协议（将本地项目传输到服务器上），默认端口号：21 

域名:      www.xxxx.cn 一级域名        online.xxxxxxx.cn  二级域名    html5train.online.xxxxxx.cn 三级域名       

端口号：   范围：0-65535     

路径 ：     通过路径在服务器中查找相应的文件

?传参:       格式：key=value  ？name=xxx&age=9      1).把客户端数据通过传参的方式发送给服务器端   2).让服务器端返回指定参数的数据

hash值:   (跟http事务无关，跟锚点定位或路由跳转有关)       js获取：window.location.hash

 

【http报文组成】
1. General 通用首部
Request URL: http://www.zhufengpeixun.cn/ 请求的地址
Request Method: GET 请求的方式
Status Code: 200 OK http状态码
Remote Address: 125.39.174.202:80 主机的ip地址和端口号
2.Request Headers 请求头
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8 接收的数据格式
Accept-Encoding: gzip, deflate 压缩的格式
Accept-Language: zh-CN,zh;q=0.9 语言
Cache-Control: no-cache 不缓存
Connection: keep-alive 长链接
Cookie: __cfduid=d11b7d024136e2b856679f99aaedeeedf1538033148; __root_domain_v=.zhufengpeixun.cn; _qddaz=QD.dgi18u.qwjmzi.jmk98609; pgv_pvi=3035234304; tencentSig=9047068672; _qdda=3-1.1; Hm_lvt_5ca1e1efc366a109d783a085499d59d9=1539656707,1539749036,1540029419,1540260952; Hm_lvt_24b7d5cc1b26f24f256b6869b069278e=1540260983; Hm_lvt_418b1c90fa35dc210dd5d2284d9f9f29=1539746411,1540029388,1540259896,1540262296; _qddab=3-qcrur5.jnl4ei2u; IESESSION=alive; pgv_si=s2276654080; Hm_lpvt_418b1c90fa35dc210dd5d2284d9f9f29=1540265546; _qddamta_2852156370=3-0 记录一些信息，会发送到服务器端
Host: www.zhufengpeixun.cn 域名
Pragma: no-cache
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36 浏览器信息

 

3.Response Headers 响应头
Connection: keep-alive 长链接
Content-Encoding: gzip 压缩的格式
Content-Type: text/html 响应的数据格式
Date: Tue, 23 Oct 2018 03:41:30 GMT 服务器端响应式时间 格林尼治时间
Last-Modified: Wed, 19 Sep 2018 08:41:34 GMT 缓存有关
Server: yunjiasu-nginx 通过nginx启动web服务

 

4.请求主体和响应主体
xhr.send([请求主体的数据])
response下看到响应的数据

 

mime类型数据（对象类型的数据/子类型的数据）：
text/html html标签
text/plain 文本
application/json json格式的数据
application/x-www-form-urlencoded 表单元素的数据
multipart/form-data 上传多个文件
image/gif gif图片
image/jpg jpg图片
application/zip 压缩的格式
audio/x-wav 设置音频文件格式
video/mpeg 设置视频的文件格式

 

xhr.readyState 请求状态状态码
0 unsend 创建ajax对象,还未发送请求
1 send 设置请求的地址 执行open后再获取 发送请求
2 receive-headers 返回响应头的内容
3 loading 响应主体的内容正在返回
4 done 响应成功，数据全部返回

 

 

 

### ajax(async javascript and xml)
在不刷新页面的前提下，局部更新数据
[请求的方式]
GET 向服务器获取响应的内容
HEAD 向服务器获取响应头的内容
POST 把发送的内容放在请求主体里发送给服务器
PUT 把发送的内容放在请求主体里发送给服务器，返回的状态只有202 通常修改内容用put方式
OPTIONS 是一种探测性请求，客户端和服务器端连接后，查看服务器端支持的请求方式有哪些，然后再发起支持请求方式的请求
【get系列】
get|head|delete
【post系列】
post|put ！！！！！**重点**
【get系列请求方式和post请求方式有什么不同】
- get系列数据是放在url地址后面发送给服务器，post系列是把数据放在请求体里发送给服务器
- 发送的数据大小有区别，get系列 chrome 8kb firefox 7kb ie 2kb post系列没有大小限制
- get系列会有缓存问题，post系列没有
- post系列请求方式比get系列请求方式安全些，get系列的数据由于放在url地址，有可能数据会被劫持

 

xhr.readyState 请求状态状态码
0 UNSEND 创建ajax对象,还未发送请求
1 SEND 设置请求的地址 执行open后再获取 发送请求
2 RECEIVE-HEADERS 响应头的内容返回
3 LOADING 响应主题的内容正在返回
4 DONE 响应成功，数据全部返回

 

xhr.status http状态码
2XX 响应成功
3XX
- 301 永久转移（更改域名，但你还是访问老的域名时，永远转移到新域名地址）
- 302 临时转移
例如: 一般用在服务器超负荷运载，当用户访问量超过服务器所有承载状态时，后期访问的用户临时转移到其他服务器上, 又例如:会把图片临时转移到其他服务器上，以减轻这个服务器的压力
- 307 临时重定向
例如之前网站协议是http,后期更改成了https协议，当用户访问还是http协议时会临时重向到https协议
- 304
客户端向服务器端发送请求时，服务端接受请求后， 要判断下之前有没有返回过，若返回过，直接返回304，让客户端从缓存中获取数据。从缓存中获取数据比从服务器端获取数据快很多
从缓存中获取数据有可能获取的不是最新数据，若想每次获取的都是最新数据，在请求的地址后面加一个随机数,例如:http://www.zhufengpeixun.cn/wechat/index.html? = Math.random();
4XX 【客户端问题】
- 400 参数错误
- 401 权限不够
- 404 地址错误，页面找不到
5XX 【服务器端问题】
- 500 未知的服务器错误
- 503 服务器超负荷

 

### xhr的属性和方法
- xhr.onabort() 中止请求
- xhr.onTimeout = function(){} 设置超时后做的事情
- xhr.timeout = 5000 设置超时时间
- xhr.readyState 请求状态码
- xhr.response 目前各个浏览器还有兼容性问题
- xhr.responseText 获取响应的数据（string）
- xhr.responseXml xml格式数据
- xhr.status http状态码
- xhr.statusText 状态码的描述信息
- xhr.withCredentials 是否允许跨越 true允许 false不允许
- xhr.getAllResponseHeaders() 获取所有的响应头
- xhr.getResponseHeader() 获取指定的响应头
- xhr.overrideMimeType 重写mime类型

 

### 前后端交互调试
NetWork 下
All 所有请求的地址
XHR 通过ajax发送的请求码，也就是所有的接口地址
JS 请求的js文件
css 请求的css文件
media 音视频
font 字体图标
职责问题 哪些属于前端问题， 哪些属于后端问题
- 问号传参，传的参数错误 [前端问题]
- 请求体的数据提交错误（接口文档会指定key,而value就是客户端需要提交内容） [前端问题]
- 请求接口地址错误 [前端问题]
- 服务端返回数据错误或者返回数据跟接口文档指定的不一样 [后端问题]
- 返回状态码5XX [后端问题]