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 相关文章推荐
CSS和JS标签style属性对照表(方便js开发的朋友)
Nov 11 Javascript
Node.js实战 建立简单的Web服务器
Mar 08 Javascript
怎么判断js脚本加载完成
Feb 28 Javascript
JavaScript导出Excel实例详解
Nov 25 Javascript
js时间日期格式化封装函数
Dec 02 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
Feb 28 Javascript
jQuery选择器总结之常用元素查找方法
Aug 04 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
Nov 25 Javascript
Vue.js项目部署到服务器的详细步骤
Jul 17 Javascript
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
vue 引入公共css文件的简单方法(推荐)
Jan 20 Javascript
vue-better-scroll 的使用实例代码详解
Dec 03 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与XML的PDF文档生成技术
2006/10/09 PHP
php面向对象全攻略 (十五) 多态的应用
2009/09/30 PHP
基于PHP常用函数的用法详解
2013/05/10 PHP
PHP命名空间(Namespace)简明教程
2014/06/11 PHP
PHP中实现获取IP和地理位置类分享
2015/02/10 PHP
CakePHP框架Model函数定义方法示例
2017/08/04 PHP
关于laravel模板中生成URL的几种模式总结
2019/10/18 PHP
PHP code 验证码生成类定义和简单使用示例
2020/05/27 PHP
firefox和IE系列的相关区别整理 以备后用
2009/12/28 Javascript
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
2010/10/26 Javascript
javascript中检测变量的类型的代码
2010/12/28 Javascript
JQuery的自定义事件代码,触发,绑定简单实例
2013/08/01 Javascript
node.js Web应用框架Express入门指南
2014/05/28 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
2016/01/20 Javascript
jQuery 监控键盘一段时间没输入
2016/04/22 Javascript
jQuery实现点击行选中或取消CheckBox的方法
2016/08/01 Javascript
利用JavaScript实现拖拽改变元素大小
2016/12/14 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
2017/06/13 Javascript
微信小程序new Date()方法失效问题解决方法
2019/07/29 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
2019/09/03 jQuery
微信小程序tabBar设置实例解析
2019/11/14 Javascript
PyTorch上实现卷积神经网络CNN的方法
2018/04/28 Python
python支持多继承吗
2020/06/19 Python
Microsoft新加坡官方网站:购买微软最新软件和技术产品
2016/10/28 全球购物
KENZO官网:高田贤三在法国创立的品牌
2019/05/16 全球购物
对于没有初始化的变量的初始值可以作怎样的假定
2014/10/12 面试题
写出二分查找算法的两种实现
2013/05/13 面试题
开学典礼感言
2014/02/16 职场文书
2014年大学生社会实践自我鉴定
2014/09/26 职场文书
房屋产权共有协议书范本
2014/11/03 职场文书
大学生青年志愿者活动总结
2015/05/06 职场文书
2015年小学数学教研组工作总结
2015/05/21 职场文书
通讯稿范文
2015/07/22 职场文书
JavaScript实现队列结构过程
2021/12/06 Javascript
MYSQL如何查看进程和kill进程
2022/03/13 MySQL
Win10鼠标轨迹怎么开 Win10显示鼠标轨迹方法
2022/04/06 数码科技