闲话ajax，例ajax轮询，ajax上传文件[开发篇]

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

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

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

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

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

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

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

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

　　　　1、ajax轮询

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

　　　　2、ajax上传文件

　　　　　　每每说到上传文件，都是头疼的事，因为为考虑到服务器安全，要求必须使用表单进行同步提交。而现有的包括本文描述的所谓异步上传文件，也只是换了一种用户看不到的form表单提交方式而已（如：提交到一个隐藏的iframe中）。不过不管怎么样，能实现效果就行。咱们要的，是结果，不是过程！

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

Meta Ajax--轮询--上传文件举例 PHP 显示数据并继续查询查询查询

        </span><span style="background-color: #f5f5f5; color: #008000;"&gt;//</span><span style="background-color: #f5f5f5; color: #008000;"&gt;表单验证</span>

$('#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);}
});
});

    </span><span style="background-color: #f5f5f5; color: #008000;"&gt;//</span><span style="background-color: #f5f5f5; color: #008000;"&gt;表单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;"&gt;function</span><span style="background-color: #f5f5f5; color: #000000;"&gt; submitForm(form,fn){
        $(form).ajaxSubmit({
            success : </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;function</span><span style="background-color: #f5f5f5; color: #000000;"&gt;(response,statusText){
                </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;if</span><span style="background-color: #f5f5f5; color: #000000;"&gt;(response.status </span><span style="background-color: #f5f5f5; color: #000000;"&gt;== </span><span style="background-color: #f5f5f5; color: #000000;"&gt;1</span><span style="background-color: #f5f5f5; color: #000000;"&gt;){
                    </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;var</span><span style="background-color: #f5f5f5; color: #000000;"&gt; info </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt; response.info </span><span style="background-color: #f5f5f5; color: #000000;"&gt;?</span><span style="background-color: #f5f5f5; color: #000000;"&gt; response.info : </span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;提交成功...</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;
                    alert(info);
                    setTimeout(</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;function</span><span style="background-color: #f5f5f5; color: #000000;"&gt;(){
                        </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;if</span><span style="background-color: #f5f5f5; color: #000000;"&gt;(</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;typeof</span><span style="background-color: #f5f5f5; color: #000000;"&gt;(fn) </span><span style="background-color: #f5f5f5; color: #000000;"&gt;===</span> <span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;function</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;){fn(response);}</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;else</span><span style="background-color: #f5f5f5; color: #000000;"&gt;{window.location.reload(</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;true</span><span style="background-color: #f5f5f5; color: #000000;"&gt;);}
                    },</span><span style="background-color: #f5f5f5; color: #000000;"&gt;1</span><span style="background-color: #f5f5f5; color: #000000;"&gt;);
                }</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;else</span><span style="background-color: #f5f5f5; color: #000000;"&gt;{
                    console.log(</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;提交失败</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;)
                }
            },beforeSubmit : </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;function</span><span style="background-color: #f5f5f5; color: #000000;"&gt; (formData,jqForm,options) {
                console.log(</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;数据提交中...</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;);
            },complete: </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;function</span><span style="background-color: #f5f5f5; color: #000000;"&gt;(data){
                console.log(data);
            }
        });
    }
</span><span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;script</span><span style="color: #0000ff;"&gt;></span>
<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;style</span><span style="color: #0000ff;"&gt;></span><span style="background-color: #f5f5f5; color: #800000;"&gt;
    html,body</span><span style="background-color: #f5f5f5; color: #000000;"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;margin</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; 0</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt; height</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; 100%</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #000000;"&gt;}</span><span style="background-color: #f5f5f5; color: #800000;"&gt;
    .wrap</span><span style="background-color: #f5f5f5; color: #000000;"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;width</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; 50%</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt; margin</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; 0 auto</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;background</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; #048E6A</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt; height</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; 100%</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;text-align</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; center</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt; position</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; relative</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #000000;"&gt;}</span><span style="background-color: #f5f5f5; color: #800000;"&gt;
    .container</span><span style="background-color: #f5f5f5; color: #000000;"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;padding</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; 20px</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt; line-height</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; 40px</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #000000;"&gt;}</span><span style="background-color: #f5f5f5; color: #800000;"&gt;
    .container.with-back</span><span style="background-color: #f5f5f5; color: #000000;"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;background</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; #46ff50</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #000000;"&gt;}</span><span style="background-color: #f5f5f5; color: #800000;"&gt;
    .ext-container ul</span><span style="background-color: #f5f5f5; color: #000000;"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;width</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; 100%</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt; margin</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; 0</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt; padding</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; 0</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #000000;"&gt;}</span><span style="background-color: #f5f5f5; color: #800000;"&gt;
    ul li</span><span style="background-color: #f5f5f5; color: #000000;"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;list-style-type</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; none</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #000000;"&gt;}</span><span style="background-color: #f5f5f5; color: #800000;"&gt;
    .ext-container ul li</span><span style="background-color: #f5f5f5; color: #000000;"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;background</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; #F38A66</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt; padding</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; 3px</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #000000;"&gt;}</span><span style="background-color: #f5f5f5; color: #800000;"&gt;
    .ext-container ul li:hover</span><span style="background-color: #f5f5f5; color: #000000;"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;background</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; #3E9054</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #000000;"&gt;}</span><span style="background-color: #f5f5f5; color: #800000;"&gt;
    .ext-container ul.list li a</span><span style="background-color: #f5f5f5; color: #000000;"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;text-decoration</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; none</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt; color</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; #ffffff</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;display</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; block</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #000000;"&gt;}</span>
<span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;style</span><span style="color: #0000ff;"&gt;></span>

</head>
<body>
<div class="wrap">
<div class="ext-container">
<ul class="list">
<li><a href="javascript:;">ajax上传文件</a></li>
</ul>
</div>
<div class="container">
<input id="btn" type="button" value="点击轮询测试开始" />
<input type="button" id="stop-query" value="点击停止" />
<div id="msg">
<textarea name="msg" id="msg-container" cols="30" rows="10"></textarea>
</div>
</div>
<div class="container with-back">
<div>上传文件--测试</div>
<form action="tmp.PHP" id="Form1" method="post" enctype="multipart/form-data" >
<div>
<input type="file" name="fileTest" id="file-test" />
<input type="submit" value="上传了" id="submit-form" />
</div>
</form>
</div>
</div>

</body>
</html>

　　后台代码示例,poll.PHP，轮询：

PHP ((['time']))(0); =0 ((500000); ++ =(1,999( <= 300 = 'success'=>"1",'name'=>'xbingi','text'=> json_encode(

        </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;服务器($_POST['time']*0.5)秒后告诉客服端无数据</span>
        <span style="color: #0000ff;"&gt;if</span>(<span style="color: #800080;"&gt;$i</span> == <span style="color: #800080;"&gt;$_POST</span>['time'<span style="color: #000000;"&gt;]){
            </span><span style="color: #800080;"&gt;$arr</span>=<span style="color: #0000ff;"&gt;array</span><span style="color: #000000;"&gt;(
                </span>'success' => "0",'name' => 'hi','text' => <span style="color: #800080;"&gt;$rand</span><span style="color: #000000;"&gt;
            );
            </span><span style="color: #0000ff;"&gt;echo</span> json_encode(<span style="color: #800080;"&gt;$arr</span><span style="color: #000000;"&gt;);
            </span><span style="color: #0000ff;"&gt;exit</span><span style="color: #000000;"&gt;;
        }
    }        </span></pre>

　　后台代码示例2,tmp.PHP，上传文件:

PHP 　　();

　　借助于这些插件，开发是如此的简单！

　　注：当用第三方插件时(如bootstrap)，它可以帮你实现ajax功能，但是也最好是自己处理ajax请求，因为这样你会更方便地处理各种响应，而不是ajax就仅仅是一个ajax，因为这样的体验也是完全不够的！(听说extjs挺好的，有机会也可以去用用)

　　要做就要做到最好！(tools.js 是jquery.validate.js,jquery.form.js的一起压缩的文件，有需要的请@me 索取)

原文链接：https://www.f2er.com/php/74363.html

闲话ajax，例ajax轮询，ajax上传文件[开发篇]

猜你在找的PHP相关文章