一些XMLHttpRequest的例子代码

以下例子摘录自：javascript权威指南

//异步请求(事件监听请求是否返回)
function getText(url,callback){
var request = new XMLHttpRequest();
request.open('GET',url);
request.onreadystatechange = function () {
if(request.readyState === 4 && request.status === 200){
var type = request.getResponseHeader('Conten-Type');
if(type.match(/^text/)){
callback(request.responseText);
}
}
};
request.send(null);
}

//同步请求(会阻塞页面)
function getTextSync(url){
var request = new XMLHttpRequest();
request.open('GET',url,false); //false表示同步请求
request.send(null);
if(request.status !== 200){
throw new Error('..');
}
var type = request.getResponseHeader('Conten-Type');
if(!type.match(/^text/)){
throw new Error('....');
}
return request.responseText;
}

//解析HTTP请求响应
function get(url,callback){
var request = new XMLHttpRequest();
request.open('GET',url);
request.onreadystatechange = function(){
if(request.readyState === 4 && request.status === 200){
var type = request.getResponseHeader('Content-Type');
if(type.indexOf('xml') !== -1 && request.responseXML){
callback(request.responseXML);
}else if(type === 'application/json'){
callback(JSON.parse(request.responseText));
}else{
callback(request.responseText);
}
}
};
request.send(null);
}

非表单数据形式的表单编码的请求GET和提交POST(如data对象)

//1.将保存有(名:值)对属性的data对象转化为整个字符串
function encodeFormData(data){
if(!data){return ''}
var pairs = [];  //保存名=值对
for(var name in data){
if(data.hasOwnProperty(name) && typeof data[name] !== 'function'){
var value = data[name].toString();
name = encodeURIComponent(name.replace('%20','+'));
value = encodeURIComponent(value.replace('%20','+'));
pairs.push(name+'='+value);
}
}
return pairs.join('&');
}

//2.直接发送data对象的HTTP POST请求工具函数
function postData(url,data,callback){
var request = new XMLHttpRequest();
request.open('POST',url);
request.onreadystatechange = function () {
if(request.readyState === 4 && callback){
callback(request); //将request对象传递给callback处理
}
};
request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
request.send(encodeFormData(data));
}

//3.若表单数据只是为了只读查询,则最好用GET方法,在url+'?'+查询字符串
function getData(url,data,callback){
var request = new XMLHttpRequest();
request.open('GET',url+'?'+encodeFormData(data));
request.onreadystatechange = function(){
if(request.readyState === 4 && callback){
callback(request);
}
};
request.send(null);
}

//4.使用JSON编码主体来发起HTTP POST请求
function postJSON(url,data,callback){
var request = new XMLHttpRequest();
request.open('POST',url);
request.onreadystatechange = function () {
if(request.readyState === 4 && callback){
callback(request);
}
};
request.setRequestHeader('Content-Type','application/json');
request.send(JSON.stringify(data));
}

//5.使用POST发送multipart/form-data请求主体
function postFormData(url,data,callback){
if(FormData){throw new Error('FormData is not implemented')}
var request = new XMLHttpRequest();
request.open('POST',url);
request.onreadystatechange = function () {
if(request.readyState === 4 && callback){
callback(request);
}
};
//创建一个FormData对象的实例
var formdata = new FormData();
for(var name in data){
if(data.hasOwnProperty(name) && typeof data[name] !== 'function'){
formdata.append(name,data[name]);
}
}
request.send(formdata);
}

//6.终止请求和超时(在文本输入域请求推荐内容时,如果用户在服务器的建议达到之前输入了新的字符,则应该终止请求)
function timedGetText(url,delay,callback){
var request = new XMLHttpRequest();
var timedOut = false;
//启动计时器,在delay时间到后将终止请求
var id = setTimeout(function () {
timedOut = true;
request.abort();
},delay);
request.open('GET',url);
request.onreadystatechange = function () {
if(timedOut||request.readyState !== 4){return}
clearTimeout(id);
if(request.status === 200){
callback(request.responseText);
}
};
request.send(null);
}

7.HTTP进度事件

XMLHttpRequest对象在请求的不同阶段触发不同类型的事件，所以它不需要检查readyState属性。

当调用send（）时，触发单个loadstart事件。当正在加载服务器的响应时，XMLHttpRequest对象会发生progress事件，通常每隔50毫秒左右，所以可以使用这些事件给用户反馈请求的进度

如果请求快速完成，它可能从不会触发progress事件。当事件完成，会触发load事件。

HTTP请求无法完成有3种情况，对应3种事件。如果请求超时，会触发timeout事件。如果请求中止，会触发abort事件。像太多重定向这样的网络错误会阻止请求完成，但这些情况发生时会触发error事件。

对于任何具体请求，浏览器将只会触发load、abort、timeout和error事件中的一个。

progress事件属性:loaded目前传输的字节数值,total是自“Content-Length”头传输的数据的整体长度(字节),如果未知长度则为0,若知道长度则lengthComputable属性为true

if('onprogress' in (new XMLHttpRequest())){ //检测是否支持progress事件
var request = new XMLHttpRequest();
request.onprogress = function (e) {
if(e.lengthComputable){
progress.innerHTML = Math.round(100* e.loaded/ e.total) + '%';
}
}
}

对于XMLHttpRequest对象x，设置x.onprogress以监控响应的下载进度，并且设置x.upload.onprogress以监控请求的上传进度。

8.跨域HTTP请求

//XMLHttpRequest对象通常仅可以发起和文档具有相同服务器的HTTP请求。

//XHR2通过在HTTP响应中选择发送合适的CORS（ Cross- Origin Resource Sharing， 跨域资源共享）允许跨域访问网站。

//而IE8通过这里没有列出的专用XDomainRequest对象支持它。

//如果给XMLHttpRequest的open（）方法传入用户名和密码，那么它们绝对不会通过跨域请求发送

//除外，跨域请求通常也不会包含其他任何的用户证书：cookie和HTTP身份验证令牌（ token）通常不会作为请求的内容部分发送且任何作为跨域响应来接收的cookie都会丢弃。

//如果跨域请求需要这几种凭证才能成功，那么必须在用send（）发送请求前设置XMLHttpRequest的withCredentials属性为true。这样做不常见，但测试withCredentials的存在性是测试浏览器是否支持CORS的方法

whenReady(
function () {
var supportsCORS = (new XMLHttpRequest()).withCredentials !== (void 0);
var links = document.getElementsByTagName('a');
for(var i=0;i<links.length;i++){
var link = links[i];
if(!link.href || link.title){continue;}
//如果是跨域链接
if(link.host !== location.host || link.protocol !== location.protocol){
link.title = '这是站外链接';
if(!supportsCORS){continue;} //不支持CORS就退出
}
if(link.addEventListener){
link.addEventListener('mouseover',mouseoverHandler,false);
}else{
link.attachEvent('onmouseover',mouseoverHandler);
}
}
function mouseoverHandler(event){
var e = event||window.event;
var link = e.target|| e.srcElement;
var url = link.href;
var request = new XMLHttpRequest();
request.open('HEAD',url);
request.onreadystatechange = function () {
if(request.readyState === 4 || request.status === 200){
var type = request.getResponseHeader('Content-Type');
var size = request.getResponseHeader('Content-Length');
var date = request.getResponseHeader('Last-Modified');
link.title = '类型: '+type+' \n'+'大小: '+size+' \ n'+'时间: '+date;
}else if(!link.title){
link.title = "Couldn't fetch details:\n"+request.status+" "+request.statusText;
}
};
request.send(null);
if(link.removeEventListener){
link.removeEventListener('mouseover',mouseoverHandler,false);
}else{
link.detachEvent('onmouseover',mouseoverHandler);
}
}
}
);