Ajax总结
ajax第一天
简介:Ajax是一种技术、是能够使浏览器和服务器进行交互（请求响应）的一种技术。
Ajax也是一套内置在浏览器端的API，核心对象是内置在浏览的中的 XMLHttpRequest ，通过这些API的调用，可以实现发送Ajax类型的请求和收取服务器端响应的数据。
1.响应状态码
200:表示OK
304:客户端发送了一个带条件的 GET 请求且该请求已被允许,而文档的内容并没有改变，则服务器应当返回这个状态码。
404:表示没有找到
2.请求类型(Type)
- Ajax类型的请求：通过浏览器工具，查看请求的Type列，标注为xhr的，就是Ajax请求
使用XMLHttpRequest对象的API发送的请求
- 非Ajax类型的请求：通过浏览器工具，查看请求的Type列，标注为document、stylesheet等，就是非Ajax请求
没有XMLHttpRequest对象
3.请求方式(Request Method)
请求方式共有数十种，但是主要的请求方式就两种，一种为GET方式，一种为POST方式。
- GET：得到，获取 //表单的method属性为GET或不指定
- POST：邮寄，推送，提交 //表单的method属性为POST
4.响应结果(Response)
当浏览器向服务器发送了一个请求后，服务器会根据请求，做出响应。
响应，即将浏览器请求的内容返回给浏览器。
5.Ajax发送GET方式的请求
//通用IP
127.0.0.1 localhost 永远指向自己的计算机
//简化URL
访问的数据接口和html页面如果在同一个服务器上（即都可以使用相同的IP访问），那么数据接口中的IP地址可以省略
xhr.open('GET', 'http://127.0.0.1:3000/time');
xhr.open('GET', '/time'); //省略后
//1.创建一个 xhr 对象
var xhr = new XMLHttpRequest();
//2.设置请求方式和路径
xhr.open('GET','http://127.0.0.1:3000/time');
//3.发送请求
xhr.send();
//4.注册事件,请求响应过程完全结束,会触发xhr.onload事件
xhr.onload = function() {
//通过xhr 的response 获取到响应的响应体
console.log(this.response);
}
GET请求传参:(少量数据)
请求参数又叫做查询字符串,一般用于告诉服务器此次请求的详细目的，比如查询什么、删除哪条记录等
URL 携带查询字符串:
URL中==问号后面==携带的就是 get 请求传参的数据，叫做查询字符串
格式：q=word&sug=5017
例: xhr.open('GET', '/query-get?id=2&name=zhangsan&age=23');
6.IE缓存问题: (了解)
两次或多次 AJAX GET 请求同一个 URL ，IE浏览器在第二次请求的时候，并不会从新向服务器发请求，而是直接使用上次请求的结果。
解决: 让每次请求的URL都不同, 加查询字符串 '/time?t=' + Date.now()
7.Ajax 发送 POST 方式的请求
POST请求传参:(大量数据)
post 传递数据,以键/值的形式出现，可以传输大量数据，不会显示在 URL 中。
post 请求，必须调用setRequestHeader方法设置 Content-Type
请求头中的 Content-Type，告诉服务器发送过去的数据的格式
send方法的参数就是post方式发送给服务器的数据。（和get不同）
var xhr = new XMLHttpRequest();
xhr.open('POST', '/query-post');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('name=zhangsan&age=18');
xhr.onload = function () {
console.log(this.responseText)
}
ajax第二天
json
JSON的本质是字符串。
数据类型
null: null //1.JSON 中不能有单行或多行注释
number: 1995 //2.JSON 没有 undefined 这个值
boolean: true //3.一个完整的JSON，不能有其他内容掺杂
string: "hello" //4.JSON 中表述字符串（==值）必须使用双引号==
array: ["zhangsan", "lisi", "wangwu"]
object{ //5.JSON 中属性名称==必须用双引号==包裹
"name": "zce",
"age": 18,
"gender": true,
"girl_friend": null,
"arr": []
}
数据转换
JS = JSON.parse(JSON) //JSON 格式转JS数据
JSON = JSON.stringify(JS); //js转JSON
ajax第三天
同步与异步
Ajax 即“==A==synchronous ==J==avascript ==A==nd ==X==ML”（异步 JavaScript 和 XML）
xhr.open('GET', '/time', true);
xhr.open() 方法第三个参数要求传入的是一个 boolean 值
默认为 true,表示异步操作,同步执行可以通过传递 false 实现
// 同步方式
xhr.open('GET', '/time', false)
// // 同步方式 执行需要 先注册事件再调用 send，否则 onload 事件无法触发
xhr.onload = function () {
// 会按代码执行顺序执行这行代码
console.log('ajax')
}
xhr.send(null);
XHR对象的其他API
readyState //xhr.readyState 会得到 0、1、2、3、4几个数字
readyState 状态描述 说明
0 UNSENT 代理（XHR）被创建，但尚未调用 open() 方法。
1 OPENED open() 方法已经被调用，建立了连接。
2 HEADERS_RECEIVED send() 方法已经被调用，并且已经可以获取状态行和响应头。
3 LOADING 响应体（服务器返回的数据）下载中， responseText 属性可能已经包含部分数据。
4 DONE 响应体（服务器返回的数据）下载完成，可以直接使用 responseText或response 获取完整的结果。
onreadystatechange
onload是H5之后新增的事件，在H5之前，都是使用onreadystatechange。
当Ajax状态发生变化的时候，就会触发这个事件。
xhr.onreadystatechange = function () {
console.log(this.readyState);
// 输出1/2/3/4
}
xhr对象分块接收数据,当xhr对象接收的数据发生变化,一直到接收完毕,这里readyState的值不会发生变化，一直为3，但接收到的数据变化了，也表示ajax的状态变化了，此时也会触发onreadystatechange事件。
- onload -- 当readyState等于4的时候触发
- onprogress -- 当readyState等于3的时候触发（数据正在返回途中的时候触发）progress -- 过程、进度
- onloadstart() -- 当开始发送请求的时候触发 //主要用于提示
- onloadend() -- 当请求响应过程结束的时候触发 //主要用于提示
responseType
responseType，表示预期服务器返回的数据的类型，当设置了该属性后，通过 response 接收数据的时候，会根据该属性的值来自动处理结果为JS能够识别的数据。
比如，当设置了 responseType='json' 后，使用 response 来接收服务器返回的数据时，会自动处理 JSON 数据为 JS 数据，免去了 JSON.parse() 这一步。
responseType的可选值为下面几个：
- “” -- 空，表示文本，和text一样。空为默认值
- text -- 文本
- ==json== -- JSON格式数据
- document -- 文档对象。当服务器返回的结果是XML类型的时候，需要指定为document
API小结
- XHR 1 版 API （IE5和IE6也可以使用的API）
- open
- send
- readyState
- onreadystatechange
- responseText
- XHR 2.0 新增API
- onload
- onprogress
- onloadstart
- onloadend
- response
- responseType
H5新增FormData对象（重点）
方法一(有form表单)
<form id="fm">
<input type="text" name="user"><br>
<input type="password" name="pwd"><br>
<input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女<br>
<input type="file" name="pic"><br/>
<input type="button" id="btn" value="提交">
</form>
<script>
// 点击按钮的时候，收集表单中的数据，并发送给服务器
document.getElementById('btn').onclick = function () {
// 使用FormData步骤1：找到表单DOM对象
var fm = document.getElementById('fm');
// 使用FormData步骤2：创建FormData对象，并传递表单
var fd = new FormData(fm);
// 发送ajax请求到服务器
var xhr = new XMLHttpRequest();
xhr.open('POST', '/fd'); // 接口fd，收到提交的数据后，会返回收到的数据
// 使用FormData收集表单数据的时候，Content-Type不用设置
// xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(fd);
xhr.onload = function () {
console.log(this.response);
};
};
</script>
方法二(没有form表单)
<input type="text" id="user"><br>
<input type="password" id="pwd"><br>
<input type="file" id="pic"><br/>
<input type="button" id="btn" value="提交">
<script>
// 点击按钮的时候，将表单中的数据发送给 /fd 接口
document.getElementById('btn').onclick = function () {
// 获取表单各项的值，没有form标签
// 1. 实例化FormData
var fd = new FormData();
// 2. 调用fd对象的append方法，向fd对象中，追加数据即可
// fd.append('key', 'value');
fd.append('username', document.getElementById('user').value);
fd.append('pwd', document.getElementById('pwd').value);
// 如果是文件域的话，则需要添加文件对象
// console.dir(document.getElementById('pic'));
// 找文件对象 ： 文件域DOM对象.files[0]
fd.append('pic', document.getElementById('pic').files[0]);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/fd');
xhr.responseType = 'json';
xhr.send(fd);
xhr.onload = function () {
console.log(this.response);
}
}
</script>
创建XHR对象的兼容方案（了解）
IE5/ie6浏览器中，没有内置 XMLHttpRequest 对象。 解决方案:
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP')
// xhr 的成员相同，即后续的open、send方法一样使用、onreadystatechange也可以使用
// 但是h5新增的 response、onprogress、onloadstart、onload、responseType不能使用的
获取参数
req.query.id //获取的是url中参数id的值
ajax是GET请求方式,传递的id最后就会拼接到url上, /admin/cate/delete?id=1
req.body 是body-parser处理过的结果,获取的是POST方式提交的数据,即请求体
req.query 确切的说,获取的是url上的参数,GET请求方式,参数就在url上