论AJAX技术及应用(2)
作者:佚名; 更新时间:2014-12-05
(二)定义获取表单数据及更改表单的JavaScript代码
function changeToInput(id) {
var oNP = document.getElementById(id);//从表单中获取数据
var value = oNP.value;
oNP.outerHTML = "<input type='text' value='" + value + "' size='5' onblur='change(this.id)'>";//在表单中动态改变文本为输入框
document.getElementById(id).focus();
}
(三)打开到服务器的连接,将修改提交服务器
服务器处理修改的功能由changename.jsp实现,在此不做详细介绍。
function change(id) {
var oNP = document.getElementById(id);
var value = oNP.value;
gID = id;
init();
var url="changename.jsp?id="+escape(id)+"&normalprice="+value;
req.open("GET", url, true);
req.onreadystatechange = callback;
req.send(null);
}
(四)定义服务器处理完成之后的响应函数
function callback() {
if(4 == req.readyState) {//就绪状态
if(200 == req.status) {//无错误正常完成状态
var oNP = document.getElementById(gID);
var value = oNP.value;
oNP.outerHTML = "<span value='" + value + "' onclick = 'changeToInput(this.id)'>"+ value + "</span>";
}
}
当服务器正常完成处理后,将处理结果同步更新到web页面,而利用JavaScript在幕后与服务器交互及处理交互后的结果这些复杂的过程全部隐藏起来,至此,利用完成了全部工作。
四、结束语
通过上述的具体示例,可以看到Ajax技术主要依赖于XMLHttpRequest
对象及JavaScript技术,其背后隐藏的细节比较复杂,比传统的Web开发更难更繁琐,但它却能给用户带来全新的体验。Ajax不仅仅是一种时尚,更是一种构建网站的强大方法,亦是Web2.0的核心之一,因此掌握并熟练运用Ajax技术是一种必须和必然。
参考文献:
[1][美]麦克劳夫林.Head Rush Ajax-深入浅出Ajax 东南大学出版社,2006.5.
[2]李刚.基于J2EE的Ajax宝典.电子工业出版社.2007.5.
热门论文