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 相关文章推荐
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
Jun 21 Javascript
checkbox全选所涉及到的知识点介绍
Dec 31 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
Apr 01 Javascript
JavaScript面试开发常用的知识点总结
Aug 08 Javascript
javascript 利用arguments实现可变长参数
Nov 21 Javascript
jQuery居中元素scrollleft计算方法示例
Jan 16 Javascript
axios基本入门用法教程
Mar 25 Javascript
Vue内容分发slot(全面解析)
Aug 19 Javascript
解决JS表单验证只有第一个IF起作用的问题
Dec 04 Javascript
今天,小程序正式支持 SVG
Apr 20 Javascript
js函数和this用法实例分析
Mar 13 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
Aug 18 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
Smarty模板快速入门
2007/01/04 PHP
Http 1.1 Etag 与 Last-Modified提高php效率
2008/01/10 PHP
php上传图片获取路径及给表单字段赋值的方法
2016/01/23 PHP
基于jquery的loading效果实现代码
2010/11/05 Javascript
javascript数字格式化通用类 accounting.js使用
2012/08/24 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
2012/11/08 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
2014/04/03 Javascript
JavaScript中的逻辑判断符&&、||与!介绍
2014/12/31 Javascript
js使用setTimeout实现定时炸弹的方法
2015/04/10 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
2016/09/17 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
2017/08/14 jQuery
JavaScript数据类型的存储方法详解
2017/08/25 Javascript
javascript  删除select中的所有option的实例
2017/09/17 Javascript
jquery鼠标悬停导航下划线滑出效果
2017/09/29 jQuery
JS实现分页浏览横向图片(类轮播)实例代码
2017/11/06 Javascript
JavaScript变量声明var,let.const及区别浅析
2018/04/23 Javascript
Vue 刷新当前路由的实现代码
2019/09/26 Javascript
Node.js中console.log()输出彩色字体的方法示例
2019/12/01 Javascript
Vue 嵌套路由使用总结(推荐)
2020/01/13 Javascript
浅析Python编写函数装饰器
2016/03/18 Python
windows上安装Anaconda和python的教程详解
2017/03/28 Python
python 简单备份文件脚本v1.0的实例
2017/11/06 Python
对pyqt5多线程正确的开启姿势详解
2019/06/14 Python
tensorflow 实现自定义layer并添加到计算图中
2020/02/04 Python
python软件都是免费的吗
2020/06/18 Python
详解tensorflow之过拟合问题实战
2020/11/01 Python
Python datetime模块的使用示例
2021/02/02 Python
铭立家具面试题
2012/12/06 面试题
简历自我评价怎么写好呢?
2014/01/04 职场文书
补充协议书范本
2014/04/23 职场文书
纪检干部先进事迹材料
2014/08/23 职场文书
小学教师师德师风个人整改措施
2014/09/18 职场文书
员工年度工作总结2015
2015/05/18 职场文书
pandas 操作 Excel操作总结
2021/03/31 Python
css position fixed 左右双定位的实现代码
2021/04/29 HTML / CSS