09 五 07 Millennium系统OPAC整合之四：AJAX基础
|
<html> <head> <title>Ajax in action</title> </head> <body> <table width=”200″ border=”1″> <tr> <td>书名:</td> <!–此处定义了td标签的id–> <td </tr> </table> </html> |
那么我们要嵌入脚本，是很容易的事情，我们可以把脚本直接写到里面，也可以通过外接脚本文件的形式嵌入，例如，在</head>标签之上加上一行：
type=”text/javascript”
src=”ajax_sample.js”></script>
|
window.onload=function() //当网页加载后运行脚本 { //通过id获取当前文档的书名单元格对象 var objTitle=document.getElementById(’t'); //输出对象内容 alert(objTitle.innerHTML); } |
in
Action”——这样，我们初步实现了文档内容的分析操作。
当然，sample.html具有一定的理想性——结构清晰、具有id属性——目前OPAC系统里面，我相信大部分页面的HTML是极其恶心、惨不忍睹的，但是这并不能阻挡AJAX的步伐,除了getElementById()方法，我们还可以通过getElementsByTagName()来实现节点的搜索。
|
window.onload=function() //当网页加载后运行脚本 { //通过id获取当前文档的书名单元格对象 var objTitle=document.getElementById(’t'); //输出对象内容 //alert(objTitle.innerHTML); //与服务器通讯 sendRequest(”[服务器处理程序的URL]“,”t=”+objTitle.innerHTML); } function CreateXmlHttpRequest()//创建XmlHttpRequest对象 { var xRequest=null;//定义 if(window.XMLHttpReqeust)//支持XMLHttpReqeust对象 { xRequest=new XMLHttpRequest(); } else if(typeof ActiveXobject !=”undefined”)//支持ActiveX对象 { xRequest=new } return xRequest;//返回 } function sendRequest(url,params)//发送请求函数 { HttpMethod=”GET”;//传送方式 var if(sRequest) { sRequest.open(HttpMethod,url,true);//打开http访问 sReqeust.send(params);//传送相关参数 } } |
|
//yuanxinz.2007.05.09
package ajaxsample; import java.io.*; import java.sql.ResultSet; import java.sql.SQLException; import java.servlet.*; import java.servlet.http.*; public class ajaxsample extends HttpServlet { public void init(ServletConfig config) throws { //….. } protected void doGet(HttpServletRequest { String s = //执行电子图书数据库检索 …… rs = pool.getRs(”select * from try{ if(rs.next()) { rs.previous(); //将结果输出为文本 PrintWriter response.setContentType(”text/plain;charset=gb2312″); response.setHeader(”Cache-Control”, response.setHeader(”Pragma”, String int while(rs.next()) { outstr i++; } out.println(outstr); out.close(); } else { response.setStatus(HttpServletResponse.SC_NO_CONTENT); } //关闭数据库连接之类的…. ……. } catch(SQLException e) { e.printStackTrace(); } } } |
……
Ajax in action
**|http://*****
|
window.onload=function() //当网页加载后运行脚本 { //通过id获取当前文档的书名单元格对象 var objTitle=document.getElementById(’t'); //输出对象内容 //alert(objTitle.innerHTML); //与服务器通讯 sendRequest(”[服务器处理程序的URL]“,”t=”+objTitle.innerHTML); } function CreateXmlHttpRequest()//创建XmlHttpRequest对象 { var xRequest=null;//定义 if(window.XMLHttpReqeust)//支持XMLHttpReqeust对象 { xRequest=new XMLHttpRequest(); } else if(typeof ActiveXobject !=”undefined”)//支持ActiveX对象 { xRequest=new } return xRequest;//返回 } function sendRequest(url,params)//发送请求函数 { HttpMethod=”POST”;//传送方式 var if(sRequest) { //这里调用回调 sRequest.onreadystatechange=onReadyState; sRequest.open(HttpMethod,url,true);//打开http访问 sReqeust.send(params);//传送相关参数 } } function onReadyState() { var redy=sRequest.readyState;//获取sRequest实例的状态 var data=null; if(ready=4)//完成状态 { data=xRequest.responseText; } else { data=”正在读取相关数据….” } } |
用户浏览器收到服务器反馈的文本后，就可以通过createElement()等方法来实现文档的修改。
|
window.onload=function() //当网页加载后运行脚本 { //通过id获取当前文档的书名单元格对象 var objTitle=document.getElementById(’t'); //输出对象内容 //alert(objTitle.innerHTML); //与服务器通讯 var empty=document.getElementById(’empty’);//定义一个空节点 sendRequest(”[服务器处理程序的URL]“,”t=”+objTitle.innerHTML); } function CreateXmlHttpRequest()//创建XmlHttpRequest对象 { var xRequest=null;//定义 if(window.XMLHttpReqeust)//支持XMLHttpReqeust对象 { xRequest=new XMLHttpRequest(); } else if(typeof ActiveXobject !=”undefined”)//支持ActiveX对象 { xRequest=new } return xRequest;//返回 } function sendRequest(url,params)//发送请求函数 { |
Tags: Ajax, millennium, OPAC
看不懂，沙发还要坐哦，哈哈。
俺菜,汗
崇拜，基础教程啊。还没真正做过，不过看起来确实不错。顺便问一句，应该在什么时候调用onReadyState()呢？赞一下，大小写和附注都写那么标准！
onReadyState()应该在发送请求的时候初始化，这样浏览器就可以进行回调处理。if(sRequest) { //这里调用回调 sRequest.onreadystatechange=onReadyState; sRequest.open(HttpMethod,url,true);//打开http访问 sReqeust.send(params);//传送相关参数 }
呵呵不懂.
听上去，很多工作还是交给了服务器。可是Kelvin得文中提到ajax的优点是可以
听上去，很多工作还是交给了服务器。可是Kelvin得文中提到ajax的优点是可以减轻服务器负担，能否解释一下？ 谢谢！