数据交互
一、http协议
- 基本特点
- 1、无状态的协议
- 2、连接过程：发送连接请求、响应接受、发送请求
- 3、消息分两块：头、体
- http和https
二、form
- 基本属性
- action——提交到哪儿
- method——GET/POST/PUT/DELETE/HEAD
- GET：获取数据、把数据放在url里面传输、数据量很小、有缓存
- POST：发送数据、把数据放在body里面传输、数据量大、不会缓存
- PUT：发送数据
- DELETE：删除数据
- HEAD：让服务器之发送头回来就行（不需要内容）
- name：提交数据的名字
- enctype
-
application/x-www-form-urlencoded:默认值，适合发送小数据，结构名字=值&名字=值&... -
multipart/form-data:文件上传、大数据，结构分块 text/plain
-
三、ajax
-
原理
XMLHttpRequest,不兼容IE6- 1.创建对象
- 2.连接
- 3.发送
- 4.接受
function ajax (){
2 // 1.创建对象
3 let xhr = new XMLHttpRequest();
4 // 2.连接
5 /*
6 * open(method,url,async):规定请求的类型、URL 以及是否异步处理请求
7 * method：请求的类型；GET 或 POST
8 * url：文件在服务器上的位置
9 a * sync：true（异步）或 false（同步）
10 */
11 xhr.open('GET','./data/1.txt',true);
12 // 3.发送
13 /*
14 * send(string):将请求发送到服务器
15 * string：仅用于 POST 请求
16 *
17 * setRequestHeader(header,value):向请求添加 HTTP 头
18 * header: 规定头的名称
19 * value: 规定头的值
20 */
21 xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
22 xhr.send(null)
23 // 4.接受
24 /*
25 * responseText:获得字符串形式的响应数据
26 * responseXML:获得 XML 形式的响应数据
27 *
28 * onreadystatechange:存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数
29 *
30 * readyState:存有 XMLHttpRequest 的状态。从 0 到 4 发生变
31 * 0: 请求未初始化
32 * 1: 服务器连接已建立
33 * 2: 请求已接收
34 * 3: 请求处理中
35 * 4: 请求已完成，且响应已就绪
36 *
37 * status
38 * 200: "OK"
39 * 404: 未找到页面
40 */
41 xhr.onreadystatechange = function () {
42 if (xhr.readyState == 4) {
43 if (xhr.status>=200 && xhr.status<300 || xhr.status == 304) {
44 alert(xhr.responseText)
45 }else{
46 alert('error:'+xhr.status)
47 }
48 }
49 }
50 }原生ajax
-
优点
- 用户体验好
- 性能高
-
安全
- 前台没有安全性，后台才有问题（注入）
- xss——跨站脚本攻击
-
ajax 2.0
- FormData
- 文件上传、上传进度监控
- CORS跨域
四、jsonp
- 原理