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 相关文章推荐
jQuery技巧总结
Jan 01 Javascript
js中Image对象以及对其预加载处理示例
Nov 20 Javascript
Javascript中的五种数据类型详解
Dec 26 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
Sep 15 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
May 09 Javascript
AngularJS基础 ng-include 指令示例讲解
Aug 01 Javascript
BootstrapTable refresh 方法使用实例简单介绍
Feb 20 Javascript
Bootstrap输入框组件使用详解
Jun 09 Javascript
JavaScript学习笔记之函数记忆
Sep 06 Javascript
动态Axios的配置步骤详解
Jan 12 Javascript
vue实现标签云效果的方法详解
Aug 28 Javascript
JS原生实现轮播图的几种方法
Mar 23 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安装dblib扩展,连接mssql的具体步骤
2017/03/02 PHP
[原创]后缀就扩展名为js的文件是什么文件
2007/12/06 Javascript
JavaScript 轻松搞定快捷留言功能 只需一行代码
2010/04/01 Javascript
Javascript Object.extend
2010/05/18 Javascript
js实现翻页后保持checkbox选中状态的实现方法
2012/11/03 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
2012/12/25 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
2015/08/25 Javascript
javascript DIV实现跟随鼠标移动
2020/03/19 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
2016/04/26 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
2017/01/05 Javascript
如何获取元素的最终background-color
2017/02/06 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
2017/08/17 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
2017/10/25 Javascript
vue代理和跨域问题的解决
2018/07/18 Javascript
从零开始搭建vue移动端项目到上线的步骤
2018/10/15 Javascript
JS高阶函数原理与用法实例分析
2019/01/15 Javascript
vue中使用vue-cli接入融云实现即时通信
2019/04/19 Javascript
利用原生JS实现data方法示例代码
2019/05/28 Javascript
python网络编程学习笔记(九):数据库客户端 DB-API
2014/06/09 Python
Python编程中的反模式实例分析
2014/12/08 Python
Windows系统下使用flup搭建Nginx和Python环境的方法
2015/12/25 Python
python机器学习案例教程——K最近邻算法的实现
2017/12/28 Python
微信跳一跳python代码实现
2018/01/05 Python
Python进程间通信Queue实例解析
2018/01/25 Python
python 生成器和迭代器的原理解析
2019/10/12 Python
使用Python-OpenCV消除图像中孤立的小区域操作
2020/07/05 Python
英国银首饰公司:e&e Jewellery
2021/02/11 全球购物
一套C#面试题
2013/10/09 面试题
茶叶生产计划书
2014/01/10 职场文书
幼儿园秋游活动方案
2014/01/21 职场文书
教师职称自我鉴定
2014/02/12 职场文书
装饰工程师岗位职责
2014/06/08 职场文书
2015年新农合工作总结
2015/03/30 职场文书
2016大学生形势与政策心得体会
2016/01/12 职场文书
Windows server 2012 R2 安装IIS服务器
2022/04/29 Servers
MySQL优化之慢日志查询
2022/06/10 MySQL