ajax轮询 xml,闲话ajax，例ajax轮询，ajax上传文件

引语：ajax这门技术早已见怪不怪了，我本人也只是就自己真实的经验去总结一些不足道的话。供不是特别了解的朋友参考参考！

本来早就想写一篇关于ajax的文章的，但是前段时间一直很忙，就搁置了，趁着元旦放假，赶紧补上吧！

ajax的出现，可以出给用户带来了很好的体验，证据如下：

1、感觉：以前要给用户呈现新的内容，就必须要刷新当前页面，结果往往是这样:用户看着看着，唰...，然后又重头看起，我勒个去，这谁受得了; 自从有了ajax后，就是这样的，用户关注哪一块，变化哪一块，我们就更新那一块，完全看不出差别。

2、时间：如果有的内容要显示出现将会是非常耗时的，如统计数据一类，按照以前，都是等待所有数据都准备完全了，半天之后，终于可以一起显示了; 自从有了ajax之后，这点耗时的东西就交给他吧，把主要的类型快速显示出来，用户完全没感觉啊！

3、隐性错误：如果服务器发生了一些500错误，在以前，那整个网页就绝对不行了; 有了ajax后，如果仅是ajax部分错误，对其他地方将完全无影响，但是你最好尽快修复好错误！

ajax的意义大概就在于这些吧，具体的应用场景根据情况而定，应用好ajax技术，给用户一个极致的体验！

下面是本文分享的两个点，ajax轮询，ajax上传文件(因为这两个看起来稍微有点意义):

1、ajax轮询

ajax作为异步和服务器交互，作轮询，不停接收服务器内容是个不错的选择，用于做一些简单的消息通知，定时刷新局部信息都有着不错的功效！

2、ajax上传文件

这里，主要用到两个插件，jquery.validate.js, jquery.form.js, 用到表单验证只是为了正常场景下一些操作以及自己不设置提交项，jquery.form.js则是一个可异步的表单提交插件，主要使用方法为 ajaxSubmit. 代码如下：

Ajax--轮询--上传文件举例

$(function(){varmsgContainer= '#msg-container';varsetStop= 0;

$("#btn").on("click", {btn: $("#btn")},function(ev){

$.ajax({

type:"POST",

dataType:"json",

url:"poll.php",//设置请求地址

timeout:80000,//ajax请求超时时间80秒

data: {time:"20"},//20秒后无论结果服务器都返回数据

success:function(data, textStatus){//从服务器得到数据，显示数据并继续查询

if(data.success== "1"){

$(msgContainer).html($(msgContainer).val()+ "\r\n[收到数据]" +data.text);

}//未从服务器得到数据，继续查询

if(data.success== "0"){

$(msgContainer).html($(msgContainer).val()+ "\r\n[无数据]");

}

},//Ajax请求超时，继续查询

error:function(XMLHttpRequest,textStatus,errorThrown){if(textStatus== "timeout"){

$(msgContainer).html($(msgContainer).val()+ "\r\n[超时]");

}

},

complete:function(XMLHttpRequest, textStatus){if($(msgContainer).html().length> 100){

$(msgContainer).html('清空');

}if(!setStop){

ev.data.btn.click();

}

}

});

});

$('#stop-query').on('click',function(){

setStop= 1;

});//表单验证

$('#Form1').validate({

errorClass :'color-red',//设置错误的class

rules : {//规则，只是演示

cate_name : {required:true},

sort : { digits:true}

},

messages : {//提示内容，只是演示

cate_name : {required:'  *分类名必填'},

sort : {digits:"  排序必须是正整数"}

},

submitHandler :function(form){submitForm(form);}

});

});//表单ajax提交, fn为提交成功后要执行的回调函数，没有则刷新当前页面

functionsubmitForm(form, fn){

$(form).ajaxSubmit({

success :function(response, statusText){if(response.status==1){varinfo=response.info?response.info :'提交成功...';

alert(info);

setTimeout(function(){if(typeof(fn)=== 'function'){fn(response);}else{window.location.reload(true);}

},1);

}else{

console.log('提交失败')

}

},

beforeSubmit :function(formData, jqForm, options) {

console.log('数据提交中...');

},

complete:function(data){

console.log(data);

}

});

}

ajax上传文件