引语:ajax这门技术早已见怪不怪了,我本人也只是就自己真实的经验去总结一些不足道的话。供不是特别了解的朋友参考参考!
本来早就想写一篇关于ajax的文章的,但是前段时间一直很忙,就搁置了,趁着元旦放假,赶紧补上吧!
ajax的出现,可以出给用户带来了很好的体验,证据如下:
1、感觉:以前要给用户呈现新的内容,就必须要刷新当前页面,结果往往是这样:用户看着看着,唰...,然后又重头看起,我勒个去,这谁受得了; 自从有了ajax后,就是这样的,用户关注哪一块,变化哪一块,我们就更新那一块,完全看不出差别。
2、时间:如果有的内容要显示出现将会是非常耗时的,如统计数据一类,按照以前,都是等待所有数据都准备完全了,半天之后,终于可以一起显示了; 自从有了ajax之后,这点耗时的东西就交给他吧,把主要的类型快速显示出来,用户完全没感觉啊!
3、隐性错误:如果服务器发生了一些500错误,在以前,那整个网页就绝对不行了; 有了ajax后,如果仅是ajax部分错误,对其他地方将完全无影响,但是你最好尽快修复好错误!
ajax的意义大概就在于这些吧,具体的应用场景根据情况而定,应用好ajax技术,给用户一个极致的体验!
下面是本文分享的两个点,ajax轮询,ajax上传文件(因为这两个看起来稍微有点意义):
1、ajax轮询
ajax作为异步和服务器交互,作轮询,不停接收服务器内容是个不错的选择,用于做一些简单的消息通知,定时刷新局部信息都有着不错的功效!
每每说到上传文件,都是头疼的事,因为为考虑到服务器安全,要求必须使用表单进行同步提交。而现有的包括本文描述的所谓异步上传文件,也只是换了一种用户看不到的form表单提交方式而已(如:提交到一个隐藏的iframe中)。不过不管怎么样,能实现效果就行。咱们要的,是结果,不是过程!
这里,主要用到两个插件,jquery.validate.js,jquery.form.js,用到表单验证只是为了正常场景下一些操作以及自己不设置提交项,jquery.form.js则是一个可异步的表单提交插件,主要使用方法为 ajaxSubmit. 代码如下:
</span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">表单验证</span>
<span style="background-color: #f5f5f5; color: #000000;"> $(
<span style="background-color: #f5f5f5; color: #000000;">'<span style="background-color: #f5f5f5; color: #000000;">#Form1<span style="background-color: #f5f5f5; color: #000000;">'<span style="background-color: #f5f5f5; color: #000000;">).validate({errorClass : <span style="background-color: #f5f5f5; color: #000000;">'<span style="background-color: #f5f5f5; color: #000000;">color-red<span style="background-color: #f5f5f5; color: #000000;">'<span style="background-color: #f5f5f5; color: #000000;">, <span style="background-color: #f5f5f5; color: #008000;">//<span style="background-color: #f5f5f5; color: #008000;">设置错误的class
<span style="background-color: #f5f5f5; color: #000000;"> rules : { <span style="background-color: #f5f5f5; color: #008000;">//<span style="background-color: #f5f5f5; color: #008000;">规则,只是演示
<span style="background-color: #f5f5f5; color: #000000;"> cate_name : {required:<span style="background-color: #f5f5f5; color: #0000ff;">true<span style="background-color: #f5f5f5; color: #000000;">},sort : { digits:<span style="background-color: #f5f5f5; color: #0000ff;">true<span style="background-color: #f5f5f5; color: #000000;"> }
},messages : { <span style="background-color: #f5f5f5; color: #008000;">//<span style="background-color: #f5f5f5; color: #008000;">提示内容,只是演示
<span style="background-color: #f5f5f5; color: #000000;"> cate_name : {required:<span style="background-color: #f5f5f5; color: #000000;">'<span style="background-color: #f5f5f5; color: #000000;"> *分类名必填<span style="background-color: #f5f5f5; color: #000000;">'<span style="background-color: #f5f5f5; color: #000000;">},sort : {digits:<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;"> 排序必须是正整数<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">}
},submitHandler : <span style="background-color: #f5f5f5; color: #0000ff;">function<span style="background-color: #f5f5f5; color: #000000;">(form){submitForm(form);}
});
});
</span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">表单ajax提交,fn为提交成功后要执行的回调<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>,没有则刷新<a href="https://www.jb51.cc/tag/dangqianyemian/" target="_blank" class="keywords">当前页面</a></span>
<span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> submitForm(form,fn){
$(form).ajaxSubmit({
success : </span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;">(response,statusText){
</span><span style="background-color: #f5f5f5; color: #0000ff;">if</span><span style="background-color: #f5f5f5; color: #000000;">(response.status </span><span style="background-color: #f5f5f5; color: #000000;">== </span><span style="background-color: #f5f5f5; color: #000000;">1</span><span style="background-color: #f5f5f5; color: #000000;">){
</span><span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> info </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> response.info </span><span style="background-color: #f5f5f5; color: #000000;">?</span><span style="background-color: #f5f5f5; color: #000000;"> response.info : </span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">提交成功...</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">;
alert(info);
setTimeout(</span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;">(){
</span><span style="background-color: #f5f5f5; color: #0000ff;">if</span><span style="background-color: #f5f5f5; color: #000000;">(</span><span style="background-color: #f5f5f5; color: #0000ff;">typeof</span><span style="background-color: #f5f5f5; color: #000000;">(fn) </span><span style="background-color: #f5f5f5; color: #000000;">===</span> <span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">function</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">){fn(response);}</span><span style="background-color: #f5f5f5; color: #0000ff;">else</span><span style="background-color: #f5f5f5; color: #000000;">{window.location.reload(</span><span style="background-color: #f5f5f5; color: #0000ff;">true</span><span style="background-color: #f5f5f5; color: #000000;">);}
},</span><span style="background-color: #f5f5f5; color: #000000;">1</span><span style="background-color: #f5f5f5; color: #000000;">);
}</span><span style="background-color: #f5f5f5; color: #0000ff;">else</span><span style="background-color: #f5f5f5; color: #000000;">{
console.log(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">提交失败</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">)
}
},beforeSubmit : </span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> (formData,jqForm,options) {
console.log(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">数据提交中...</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">);
},complete: </span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;">(data){
console.log(data);
}
});
}
</span><span style="color: #0000ff;"></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
html,body</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">margin</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"> height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100%</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
.wrap</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 50%</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"> margin</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0 auto</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #048E6A</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"> height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100%</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">text-align</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> center</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"> position</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> relative</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
.container</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">padding</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 20px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"> line-height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 40px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
.container.with-back</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #46ff50</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
.ext-container ul</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100%</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"> margin</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"> padding</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
ul li</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">list-style-type</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> none</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
.ext-container ul li</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #F38A66</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"> padding</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 3px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
.ext-container ul li:hover</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">background</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #3E9054</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
.ext-container ul.list li a</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">text-decoration</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> none</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"> color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #ffffff</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">display</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> block</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></
<span style="color: #800000;">head<span style="color: #0000ff;">><span style="color: #0000ff;"><<span style="color: #800000;">body<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">div <span style="color: #ff0000;">class<span style="color: #0000ff;">="wrap"<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">div <span style="color: #ff0000;">class<span style="color: #0000ff;">="ext-container"<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">ul <span style="color: #ff0000;">class<span style="color: #0000ff;">="list"<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">li<span style="color: #0000ff;">><<span style="color: #800000;">a <span style="color: #ff0000;">href<span style="color: #0000ff;">="javascript:;"<span style="color: #0000ff;">>ajax上传文件<span style="color: #0000ff;"></<span style="color: #800000;">a<span style="color: #0000ff;">></<span style="color: #800000;">li<span style="color: #0000ff;">>
<span style="color: #0000ff;"></<span style="color: #800000;">ul<span style="color: #0000ff;">>
<span style="color: #0000ff;"></<span style="color: #800000;">div<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">div <span style="color: #ff0000;">class<span style="color: #0000ff;">="container"<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">input <span style="color: #ff0000;">id<span style="color: #0000ff;">="btn"<span style="color: #ff0000;"> type<span style="color: #0000ff;">="button"<span style="color: #ff0000;"> value<span style="color: #0000ff;">="点击轮询测试开始" <span style="color: #0000ff;">/>
<span style="color: #0000ff;"><<span style="color: #800000;">input <span style="color: #ff0000;">type<span style="color: #0000ff;">="button"<span style="color: #ff0000;"> id<span style="color: #0000ff;">="stop-query"<span style="color: #ff0000;"> value<span style="color: #0000ff;">="点击停止" <span style="color: #0000ff;">/>
<span style="color: #0000ff;"><<span style="color: #800000;">div <span style="color: #ff0000;">id<span style="color: #0000ff;">="msg"<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">textarea <span style="color: #ff0000;">name<span style="color: #0000ff;">="msg"<span style="color: #ff0000;"> id<span style="color: #0000ff;">="msg-container"<span style="color: #ff0000;"> cols<span style="color: #0000ff;">="30"<span style="color: #ff0000;"> rows<span style="color: #0000ff;">="10"<span style="color: #0000ff;">></<span style="color: #800000;">textarea<span style="color: #0000ff;">>
<span style="color: #0000ff;"></<span style="color: #800000;">div<span style="color: #0000ff;">>
<span style="color: #0000ff;"></<span style="color: #800000;">div<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">div <span style="color: #ff0000;">class<span style="color: #0000ff;">="container with-back"<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">div<span style="color: #0000ff;">>上传文件--测试<span style="color: #0000ff;"></<span style="color: #800000;">div<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">form <span style="color: #ff0000;">action<span style="color: #0000ff;">="tmp.PHP"<span style="color: #ff0000;"> id<span style="color: #0000ff;">="Form1"<span style="color: #ff0000;"> method<span style="color: #0000ff;">="post"<span style="color: #ff0000;"> enctype<span style="color: #0000ff;">="multipart/form-data" <span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">div<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">input <span style="color: #ff0000;">type<span style="color: #0000ff;">="file"<span style="color: #ff0000;"> name<span style="color: #0000ff;">="fileTest"<span style="color: #ff0000;"> id<span style="color: #0000ff;">="file-test" <span style="color: #0000ff;">/>
<span style="color: #0000ff;"><<span style="color: #800000;">input <span style="color: #ff0000;">type<span style="color: #0000ff;">="submit"<span style="color: #ff0000;"> value<span style="color: #0000ff;">="上传了"<span style="color: #ff0000;"> id<span style="color: #0000ff;">="submit-form" <span style="color: #0000ff;">/>
<span style="color: #0000ff;"></<span style="color: #800000;">div<span style="color: #0000ff;">>
<span style="color: #0000ff;"></<span style="color: #800000;">form<span style="color: #0000ff;">>
<span style="color: #0000ff;"></<span style="color: #800000;">div<span style="color: #0000ff;">>
<span style="color: #0000ff;"></<span style="color: #800000;">div<span style="color: #0000ff;">>
<span style="color: #0000ff;"></<span style="color: #800000;">body<span style="color: #0000ff;">>
<span style="color: #0000ff;"></<span style="color: #800000;">html<span style="color: #0000ff;">>
</span><span style="color: #008000;">//</span><span style="color: #008000;">服务器($_POST['time']*0.5)秒后告诉客服端无数据</span>
<span style="color: #0000ff;">if</span>(<span style="color: #800080;">$i</span> == <span style="color: #800080;">$_POST</span>['time'<span style="color: #000000;">]){
</span><span style="color: #800080;">$arr</span>=<span style="color: #0000ff;">array</span><span style="color: #000000;">(
</span>'success' => "0",'name' => 'hi','text' => <span style="color: #800080;">$rand</span><span style="color: #000000;">
);
</span><span style="color: #0000ff;">echo</span> json_encode(<span style="color: #800080;">$arr</span><span style="color: #000000;">);
</span><span style="color: #0000ff;">exit</span><span style="color: #000000;">;
}
} </span></pre>
借助于这些插件,开发是如此的简单!
注:当用第三方插件时(如bootstrap),它可以帮你实现ajax功能,但是也最好是自己处理ajax请求,因为这样你会更方便地处理各种响应,而不是ajax就仅仅是一个ajax,因为这样的体验也是完全不够的!(听说extjs挺好的,有机会也可以去用用)
要做就要做到最好!(tools.js 是jquery.validate.js,jquery.form.js的一起压缩的文件,有需要的请@me 索取)
原文链接:https://www.f2er.com/php/74363.html