Ajax总结
var request = null;
function getXMLHttpRequest(){
if(window.XMLHttpRequest===undefined){
try{
request = new ActiveXObject('Msxml2.XMLHTTP.6.0');
}catch(e){
request = new ActiveXObject('Msxml2.XMLHTTP.3.0');
}
}else{
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
}else{
return '浏览器不支持'
}
}
}
//当给open方法传递第三个参数为false时
//进入同步模式 open方法会阻塞 直至status返回状态码
//此时不需要有onreadystatechange事件
getXMLHttpRequest();
//发送请求的三个过程
request.open('GET','my.html');
request.setRequestHeader('Content-Type','text/plain');
//send里边发送的是请求正文
request.send(null);
//请求发送完成后进入异步监听状态
//几个有用的方法和属性
//1.status statusText返回相应状态码
//2.getResponseHeader() getAllResponseHeaders()
//3.onstatechange事件
//4.readyState 当前的请求状态
//5.responseText responseXML得到文本类型的返回 得到document类型的返回
request.onstatechange = function(){
if(request.status==200 && request.readyState ==4){
//得到响应头并得到响应正文的类型
var responseType = resquest.getResponstHeader('Content-Type');
if(responseType.match('/^text/')){
console.log(resquest.responseText);
}
}
}
//XHR2中新增的事件与属性
request.onloadstart = function(){//该方法会在调用send()后触发
console.log('开始发送请求');
}
request.onprogress = function(event){
console.log('请求进行中');
if(event.lengthComputable){
var loaded = event.loaded;//得到已经发送给服务器的数据长度
var total = event.total;//待发送的数据总长度
console.log(loaded/total);
}
}
//请求发送完成
request.onload = function(){
console.log('请求结束');
if(request.status==200){//请
console.log('正确的得到响应');
}
}
//3个请求出问题的事件
request.ontimeout = function(){
console.log('请求超时');
}
request.onabort = function(){
console.log('请求终止');
}
request.onerror = function(){
console.log('请求出错啦');
}