闲话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. 代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax--轮询--上传文件举例</title>
<script src='./js/jquery-1.11.2.min.js'></script>
<script src='./js/tools.js'></script>
<script>
$(function(){
var msgContainer = '#msg-container';
var setStop = 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为提交成功后要执行的回调函数，没有则刷新当前页面
function submitForm(form, fn){
$(form).ajaxSubmit({
success : function(response, statusText){
if(response.status == 1){
var info = 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);
}
});
}
</script>
<style>
html,body{margin: 0; height: 100%;}
.wrap{width: 50%; margin: 0 auto;background: #048E6A; height: 100%;text-align: center; position: relative;}
.container{padding: 20px; line-height: 40px;}
.container.with-back{background: #46ff50;}
.ext-container ul{width: 100%; margin: 0; padding: 0;}
ul li{list-style-type: none;}
.ext-container ul li{background: #F38A66; padding: 3px;}
.ext-container ul li:hover{background: #3E9054;}
.ext-container ul.list li a{text-decoration: none; color: #ffffff;display: block;}
</style>
</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
if(empty($_POST['time']))exit;
set_time_limit(0);//无限请求超时时间
$i=0;
while (true){
usleep(500000);//0.5秒
$i++;
//若得到数据则马上返回数据给客服端，并结束本次请求
$rand=rand(1, 999);
if($rand <= 300){
$arr = array(
'success'=>"1",
'name'=>'xbingi',
'text'=>$rand
);
echo json_encode($arr);
exit;
} //服务器($_POST['time']*0.5)秒后告诉客服端无数据
if($i == $_POST['time']){
$arr=array(
'success' => "0",
'name' => 'hi',
'text' => $rand
);
echo json_encode($arr);
exit;
}
}
后台代码示例2,tmp.php，上传文件:
<?php
var_dump($_FILES); //仅打印出结果测试即可，你可以做更多
借助于这些插件，开发是如此的简单！
注：当用第三方插件时(如bootstrap)，它可以帮你实现ajax功能，但是也最好是自己处理ajax请求，因为这样你会更方便地处理各种响应，而不是ajax就仅仅是一个ajax，因为这样的体验也是完全不够的！(听说extjs挺好的，有机会也可以去用用)
要做就要做到最好！(tools.js 是jquery.validate.js, jquery.form.js的一起压缩的文件，有需要的请@me 索取)
闲话ajax，例ajax轮询，ajax上传文件[开发篇]的更多相关文章
- IOS上传文件开发
IOS上传文件开发 在移动应用开发 文件形式上传是不可缺少的,近期把IOS这块文件上传文件代码简单的整理一下.假设大家有须要安卓这边的代码,本人也能够分享给大家! QQ群:74432915 ...
- 通过Ajax使用FormData对象无刷新上传文件
写在前面:本文说的这个方案有浏览器兼容性问题:所有主流浏览器的较新版本已经支持这个对象了,比如Chrome 7+.Firefox 4+.IE 10+.Opera 12+.Safari 5+,对兼容性比 ...
- ajax+ashx 完美实现input file上传文件
1.input file 样式不能满足需求 <input type="file" value="浏览" /> IE8效果图: Firefox效 ...
- (转)通过Ajax使用FormData对象无刷新上传文件
写在前面:本文说的这个方案有浏览器兼容性问题:所有主流浏览器的较新版本已经支持这个对象了,比如Chrome 7+.Firefox 4+.IE 10+.Opera 12+.Safari 5+,对兼容性比 ...
- php使用jquery Form ajax 提交表单，并上传文件
在html5中我们通过FormData就可以ajax上传文件数据,不过因为兼容问题.我们选用jquery.form.min.js来进行ajax的表单提交. 一.jquery.form.js下载地址 ...
- flask使用原生ajax、不使用表单(Form)上传文件
〇.知识点 jquery ajax 文档告诉你可以使用默认的 application/x-www-form-urlencoded, multipart/form-data, or text/plain ...
- selenium借助AutoIt识别上传文件Java篇
官方网站:https://www.autoitscript.com/site/ 从网站上下载AutoIt并安装,安装完成在菜单中会看到图4.13的目录: 图4.13 AutoIt菜单 1.首先打开A ...
- jquery ajax php 无刷新上传文件 带 遮罩 进度条 效果的哟
在很多项目中都会叫用户上传东西这些的,自从接触了jquery 和ajax之后就不管做什么,首先都会想到这个,我这个人呢?是比较重视客户体验的,这次我这边负责的是后台板块,然后就有一块是要求用户上传照片 ...
- H5-FileReader实现图片预览&Ajax上传文件
图片预览 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
随机推荐
- 合批只是对CPU的优化，与GPU没有任何关系
如题. 今天细想了下合批这个东西. 合批是节省了CPU的相关准备工作的工作量. 合批后,经过VS,PS,尝试测试,模板测试后,此时已没有了纹理,顶点,索引的概念,只剩下一个个孤立的像素,各像素间没有任 ...
- c#mvc实现登录
本篇介绍MVC实现登录的方式,如下: 1.通过MVC Form 表单请求实现登录 2.通过AJAX GET 请求MVC Controller 实现登录 3.通过AJAX POST 请求MVC Cont ...
- Spring获取bean工具类,可用于在线程里面获取bean
Spring获取bean工具类,可用于在线程里面获取bean import java.util.Locale; import org.springframework.beans.BeansExcept ...
- Jmeter正则表达式提取器二（转载）
转载自 http://www.cnblogs.com/qmfsun/p/5906462.html JMeter获取正则表达式中的提取的所有关联值的解决方法: 需求如下: { : "error ...
- 正确理解c和c ++的复杂类型声明
本文作者girlrong是网易广州社区的C语言版版主,这篇文章被选在精华区.很是不错,不敢独享!据说她乐于助人,虚心诚恳,颇受网友欢迎.只可惜现在已退隐江湖了.在最近学习C语言过程中,了解些前辈大牛的 ...
- JS实现数组去重方法总结(三种常用方法)
方法一: 双层循环,外层循环元素,内层循环时比较值 如果有相同的值则跳过,不相同则push进数组 Array.prototype.distinct = function(){ var arr = th ...
- C#之SByte
int8 C#中,byte为无符号8位整数,而Sbyte为有符号8位整数,对应java中的byte类型. 方法一将 byte 转为 sbyte.原理很简单,就是当 byte 小于 128 时其值保持不 ...
- vue项目如何通过前端实现自动识别并配置服务器环境地址
前言: 一般来说,一个web项目的生产环境和测试环境的服务器地址一旦确定下来,很少会频繁变动的.那么就可以单独写一个脚本文件,通过当前访问的域名来判断当前的访问环境,然后再通过一定的规则获取对应的服务 ...
- 4412 uboot启动分析
感谢sea1105, https://blog.csdn.net/sea1105/article/details/52142772 在学习过程中,由于tiny4412资料太过于少,因此参考210的视屏 ...
- vnc 搭建 转
这里要注意,关闭selinux setenforce 0 原文地址: http://www.linuxidc.com/Linux/2015-04/116725.htm 这是一个关于怎样在你的 Cent ...