ajax基础
如何搭建博客?
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 [后端问题]