论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.
  
核心期刊快速发表
Copyright@2000-2030 论文期刊网 Corporation All Rights Reserved.
《中华人民共和国信息产业部》备案号:ICP备07016076号;《公安部》备案号:33010402003207
本网站专业、正规提供职称论文发表和写作指导服务,并收录了海量免费论文和数百个经国家新闻出版总署审批过的具有国内统一CN刊号与国际标准ISSN刊号的合作期刊,供诸位正确选择和阅读参考,免费论文版权归原作者所有,谨防侵权。联系邮箱:256081@163.com