Ajax:只刷新局部页面,异步操作,XMLHttpRequest对象,发送请求到服务器并返回结果
创建一个对象
var xmlHttp; // 保存 XMLHttpRequest保存对象
//创建对象
function createXMLHttpRequest() {
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();//网景浏览器创建方式
} else if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE
}
}
//当窗口一加载
window.onload = function () {
getTime();
}
function getTime() {
createXMLHttpRequest();//创建请求对象
xmlHttp.onreadystatechange = handleStateChange;//绑定回调函数,当服务器有响应时,自动调用此函数
xmlHttp.open("GET", "tools.action?op=date");//打开请求
xmlHttp.send();//发送
}
function handleStateChange() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
var jsonObject = eval("(" + xmlHttp.responseText + ")");
if (jsonObject.code == 1) {
document.getElementById("time").innerHTML = "当前系统时间为:" + jsonObject.data;
}
}
}
readyState状态:
0没初始化 open()
1开始发送请求 send(content) //如果是post 里面就是post的请求参数
2发送请求完成
3读取响应
4读取响应结束
只有当readyState到达4的时候 才表示请求和响应成功
status是http状态码:200 服务器正常 4xx都是没有资源 5xx表示服务器内部错 3xx 302重定向 服务器要求客户端重新发一个请求到另一个地址取数据
Promise:
Ajax是异步请求的,即主程序再跑的同时我们需要发送一个请求给服务器完成操作,但是不能影响到主程序的运行。但是关于异步调用,如果有多个异步请求且保证顺序,就得用嵌套调用,那样就很麻烦也很难维护,这时候Promise登场
var a = new Promise(function (resolve, reject) {
//resolve(1);//成功时候调用resolve
reject(100);//失败调用reject
});
console.log(a);//这个时候a还没有执行
a.then(function (value) {//开始执行 如果传的是resolve就走这里
console.log("成功:"+value);
return value; //必须要有返回值 不然链式调用就会中断,后面没有值来运行
},function(errorvalue){ //如果传的是reject就走这里
console.log("失败:"+errorvalue);
return errorvalue; //把值递给下面一个then
}).then(function (value) { //拿到了100
console.log(value * 2); //200
}).then(function (value) {//没有返回值 这段就undefined了
console.log(value);
})
console.log(a);
一个异步完成后return一个新的异步请求继续调用就把Ajax和Promise结合起来
创建一个promise对象里面是ajax的请求操作
function promiseAjax(method, url, params) {
var pp = new Promise(function (resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState != 4) return;
if (xhr.status == 200) {
resolve(xhr.responseText);
} else {
reject("出错了")
}
}
xhr.open(method, url);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(params);
});
return pp;
}
创建一个op为date的promise对象 then激活后打印并且返回出一个op为number的一个新的promise对象继续发送请求 如果是resolve 就打印 如果是reject就弹框出错误信息
//版本三 链式调用
promiseAjax("POST", "tools.action?op=date", null).then(function (data) {
var jsonObject = eval("(" + data + ")");
document.getElementById("time").innerHTML = "当前系统时间为:" + jsonObject.data;
return promiseAjax("POST", "tools.action", "op=number");
}, function (info) {
console.log("错误信息" + info);
}).then(function (data) {
var jsonObject = eval("(" + data + ")");
if (jsonObject.code == 1) {
document.getElementById("userid").innerHTML = jsonObject.data;
} else {
alert("生成id错误" + jsonObject.msg);
}
});