ajax: async javascript and xml
AJAX Process
var xhr = new XMLHttpRequest(); //创建一个AJAX对象，IE6低版本不兼容XMLHttpRequest
xhr.timeout = “1000”；//设置AJAX请求的超时时间，为了防止请求时间过长，一般用于同步
xhr.onreadystatechange = function(){
if(xht.readyState===4 && /^2\d{2}&/.test(xhr.status)){
var val = xhr.responseText;
}
}
/*绑定监听时间
readyState:
0 UNSET
1 OPENED
2 HEADERS_RECEIVED
3 LOADING
4 DONE
status: HTTP网络状态码
*/
xhr.open("get","/data.txt",false);
/*发送前的基本信息配置：
配置请求方式(GET、POST、PUT、DELETE、HEAD...），
配置URL，
配置同步还是异步(默认true异步，false同步)，
[username]向服务器提供请求用户名，[password]提供用户密码，这两个值一般不用)
如果考虑兼容性，open需要放在onreadysJavaScript的『预解释』与『变量提升』tatechange后面
*/
xhr.setRequestHeader("selfHeader", "2016"); //设置请求头，必须open之后设置
xhr.send(null);
//发送请求，参数是请求主体中传递给服务器的内容
ajax兼容性以及JS高级编程技巧惰性思想
惰性思想：能够执行一次就搞定的绝对不执行多次
function createXHR() {
let xhr = null;
let flag = false;
const ary = [
function () {
return new XMLHttpRequest();
},
function () {
return new ActiveXObject('Microsoft.XMLHTTP');
},
function () {
return new ActiveXObject('Msxml2.XMLHTTP');
},
function () {
return new ActiveXObject('Msxml3.XMLHTTP');
},
];
for (let i = 0; i < ary.length; i += 1) {
const curFn = ary[i];
try {
xhr = curFn();
createXHR = curFn;
flag = true;
break;
} catch (e) {
console.log(e.message);
}
}
if (!flag) {
throw new Error('your browser not support AJAX!');
}
return xhr;
}
AJAX的同步/异步思想
var xhr = new XMLHttpRequest;
xhr.open("get","/data.txt",true); //此时readyState=1
xhr.onreadystatechange = function(){
console.log(xhr.readyState);
}
xhr.send(null);
//2
//3
//4
/*因为是异步，所以send未完成期间，state每次改变，onreadystatechange都触发*/
var xhr = new XMLHttpRequest;
xhr.open("get","/data.txt",false); //此时readyState=1
xhr.onreadystatechange = function(){
console.log(xhr.readyState);
}
xhr.send(null); //
//4
/*因为是同步，所以send未完成期间，不能执行其他，即使state每次改变,onreadystatechange都不触发，直到send完成，state变成4，才触发onreadystatechange*/
var xhr = new XMLHttpRequest;
xhr.open("get","/data.txt",true);
xhr.send(null);
xhr.onreadystatechange = function(){
console.log(xhr.readyState);
}
//2
//3
//4
var xhr = new XMLHttpRequest;
xhr.open("get","/data.txt",false);
xhr.send(null);
xhr.onreadystatechange = function(){
console.log(xhr.readyState);
}
//没有输出
AJAX获取服务器响应时间
var xhr = new XMLHttpRequest;
xhr.open("head","/data.txt",true);
xhr.onreadystatechange = function(){
if(xhr.readyState === 2){
var time = xhr.getResponseHeader("Date");
console.log(new Date(time));
}
}
xhr.send(null);
JSONP
最常用的跨域请求
原理：img、iframe、script等src标签或者link标签，没有同源跨域一说。
-
服务器需要支持跨域；
-
将请求参数及API地址赋值给script的src;
-
将一个函数作为传参，追到到api的url中，大他一般是?callback=fn；
-
大他服务器接收后，将callback拼接所需的数据，一般是JSON字符串，返回给客户端
-
客户端执行callback，处理数据；
<script charset="utf-8" type="text/javascript">
function fn(data) {
console.log(data);
}
</script>
<script charset="utf-8" type="text/javascript"
src="http://matchweb.sports.qq.com/kbs/calendar?columnId=100000&callback=fn">
</script>
手写jsonp
function jsonp(url, jsonpCallback, success) {
let script = document.createElement('script')
script.src = url
script.async = true
script.type = 'text/javascript'
window[jsonpCallback] = function(data) {
success && success(data)
}
document.body.appendChild(script)
}
jsonp('http://xxx', 'callback', function(value) {
console.log(value)
})
jQuery AJAX
$.ajax({
url: 'data.txt',
type: 'get',
dataType: 'json', //dataType: 'jsonp'实现跨域
[jsonpCallback: 'fn',] //设置传递给服务器的函数名
[jsonp: 'cb',] //设置传递形参的形参名
[timeout: 3000,] //设置超时时间
[cache: false,] //设定GET请求不用缓存，原理是URL尾部加随机数，默认是true
success: function(data){
console.log(data);
},
[error: function(){
}]
})
//JSONP都是GET和异步请求的，不存在其他的请求方式和同步请求，而且jQuery默认会给JSONP的请求清除缓存
AXIOS与FETCH
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：
- 从浏览器中创建 XMLHttpRequest
- 从 node.js 发出 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防止CSRF/XSRF
