ajax异步刷新实现更新数据库


Posted in Javascript onDecember 03, 2012

上篇文章都是关于界面的东西,下面写关于如何把无刷新的把数据写入到数据库中。
ajax异步刷新实现更新数据库
当我们改变某一个人或某几个人的某项分值实现无刷新写入数据库。
首先,我们需要声明XMLHttpRequest对象

//声明XMLHttpRequest对象 
var xmlHttp; 
function createXMLHTTP() { 
if (window.XMLHttpRequest) { 
xmlHttp = new XMLHttpRequest(); //Mozilla浏览器 
} 
else if (window.ActiveXObject) { 
try { 
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); //IE老版本 
} 
catch (e) 
{ } 
try { 
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE新版本 
} 
catch (e) 
{ } 
if (!xmlHttp) { 
window.alert("不能创建XMLHttpRequest对象实例!"); 
return false; 
} 
} 
}

同时,需要回调函数来确定是否修改成功
//更新或者添加记录的回调函数(检验是否评分成功) 
function ModifyScore () 
{ 
if (xmlHttp.readyState == 4) 
{ 
// if (xmlHttp.status == 200) 
{ 
if (xmlHttp.responseText == "true") 
{ 
} 
else 
{ 
// alert("评分失败,请重新评分或者与管理员联系"); 
} 
} 
} 
}

准备工作完成之后,下面就是关键的一步:
因为需要在修改分值的时候写入数据库,所以只需要在上篇博客中提高的改变下拉框值(循环选中项时)的执行这样一段代码:
//获取互评ID 
var criticsID = checkbox[i].value; 
//把修改值写入数据库 
//获取项目分数 
var scoreAll = document.getElementById("score" +checkbox[i].value + srcElem.id + ""); 
var accessAllScore = scoreAll.outerText; 
//获取项目编号 
var assess = document.getElementById("assess" + srcElem.id); 
var assessID = assess.title; 
createXMLHTTP(); //创建XMLHttpRequest对象 
//把数据传入到另一个页面执行 
var url = "CriticsAgainAjax.aspx?criticsID=" + criticsID +"&assessID=" + assessID + "&accessAllScore=" +accessAllScore + "&Event=allCriticsInfo"; 
xmlHttp.open("Post", url, true); 
// xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
xmlHttp.onreadystatechange = AnswerOneKindQuestion; 
xmlHttp.send(null);

最后,我们只需要在CriticsAgainAjax.aspx获取参数,并执行写入数据库就可以了
//获取参数 
if(Request.QueryString["Event"].ToString() =="allCriticsInfo") 
{ 
string criticsID = Request.QueryString["criticsID"].ToString(); 
string assessID = Request.QueryString["assessID"].ToString(); 
string accessAllScore =Request.QueryString["accessAllScore"].ToString(); 
}

参数传过来之后,写入数据库就很容易了,这里就不提了。
这样,在前台显示的效果就是没有刷新,时时的把数据写入到数据库。只是把脏活累活都交给CriticsAgainAjax.aspx页面来干,这也是一种不错的分工。
这样写出了少刷新以外,还有另一个好处就是ajax是异步操作,即在js页面中把数据抛到CriticsAgainAjax.aspx之后,他就继续执行,他不考虑CriticsAgainAjax.aspx是否执行完成,可能抛过来100条数据,写入数据库需要三秒钟,而抛过来的时间是非常快的,可能就零点几秒,所以用户的感觉会非常好,他不需要在选中后等半天才能继续执行。
Javascript 相关文章推荐
JavaScript语言中的Literal Syntax特性分析
Mar 08 Javascript
JavaScript 继承详解(三)
Jul 13 Javascript
基于Jquery的淡入淡出的特效基础练习
Dec 13 Javascript
基于jquery实现漂亮的动态信息提示效果
Aug 02 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
Apr 12 Javascript
jquery中map函数遍历数组用法实例
May 18 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
Jul 15 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
Sep 29 Javascript
vue scroller返回页面记住滚动位置的实例代码
Jan 29 Javascript
sortable+element 实现表格行拖拽的方法示例
Jun 07 Javascript
jQuery 查找元素操作实例小结
Oct 02 jQuery
JS校验与最终登陆界面功能完整示例
Jan 13 Javascript
JavaScript代码复用模式实例分析
Dec 02 #Javascript
JSONP 跨域访问代理API-yahooapis实现代码
Dec 02 #Javascript
script标签属性type与language使用选择
Dec 02 #Javascript
JavaScript中valueOf函数与toString方法深入理解
Dec 02 #Javascript
json对象转字符串如何实现
Dec 02 #Javascript
javascript 构造函数强制调用经验总结
Dec 02 #Javascript
js精度溢出解决方案
Dec 02 #Javascript
You might like
php中有关字符串的4个函数substr、strrchr、strstr、ereg介绍和使用例子
2014/04/24 PHP
php隐藏实际地址的文件下载方法
2015/04/18 PHP
PHP 接入微信扫码支付总结(总结篇)
2016/11/03 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
浅析php如何实现爬取数据原理
2018/09/27 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
基于jquery的一个OutlookBar类,动态创建导航条
2010/11/19 Javascript
textarea 控制输入字符字节数(示例代码)
2013/12/27 Javascript
js判断设备是否为PC并调整图片大小
2014/02/12 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
Javascript使用post方法提交数据实例
2015/08/03 Javascript
基于jQuery实现复选框是否选中进行答题提示
2015/12/10 Javascript
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
vue和webpack安装命令详解
2018/06/15 Javascript
Vue项目引进ElementUI组件的方法
2018/11/11 Javascript
Vue设置长时间未操作登录自动到期返回登录页
2020/01/22 Javascript
vue中使用vue-print.js实现多页打印
2020/03/05 Javascript
vue 中使用print.js导出pdf操作
2020/11/13 Javascript
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
Python入门之三角函数tan()函数实例详解
2017/11/08 Python
Python最火、R极具潜力 2017机器学习调查报告
2017/12/11 Python
python循环定时中断执行某一段程序的实例
2019/06/29 Python
Django应用程序入口WSGIHandler源码解析
2019/08/05 Python
python或C++读取指定文件夹下的所有图片
2019/08/31 Python
numpy:找到指定元素的索引示例
2019/11/26 Python
Python中对象的比较操作==和is区别详析
2021/02/12 Python
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
Linux的文件类型
2016/07/05 面试题
中学生校园广播稿
2014/01/16 职场文书
公司贷款承诺书
2014/05/30 职场文书
市委常委班子党的群众路线教育实践活动整改措施
2014/10/02 职场文书
缅怀先烈主题班会
2015/08/14 职场文书
给校长的建议书作文500字
2015/09/14 职场文书
《怀念母亲》教学反思
2016/02/19 职场文书
争做文明公民倡议书
2019/06/24 职场文书
深入探讨opencv图像矫正算法实战
2021/05/21 Python