初学ajax-Demo

Ajax:Asynchornize Javascript and XML.

常用场合是,客户端和服务器进行少量的数据交互。客户端不需要刷新整个页面,只是将部分的数据通过和服务器进行交互后更新。

自己看了教程后写了一个小例子。

university.jsp:

<%@ page language="java" contentType="text/html; charset=GB2312" pageEncoding="GB2312"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB2312"> <title>选择学校</title> </head> <mce:script type="text/javascript"><!-- var http_request = false; function send_request(url){ http_request = false; // window.alert(url); if (window.XMLHttpRequest) { // window.alert("Hello"); http_request = new XMLHttpRequest(); // window.alert(http_request); // if (http_request.overrideMimeType){ // htt_requeset.overrideMimeType('text/xml'); // window.alert(http_request.overrideMimeType); // } }else if (window.ActiveXObject){ try{ http_request = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ http_request = new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){ } } } if (!http_request){ window.alert("不能创建XMLHttpRequest对象实例"); return false; } http_request.onreadystatechange = processRequest; http_request.open("GET", url, true); http_request.send(null); return true; } function processRequest(){ // window.alert("Hello"); if (http_request.readyState == 4){ if (http_request.status == 200) { document.getElementById('universities').innerHTML = http_request.responseText; }else { window.alert("请求页面异常"); } } } function updateCity(index){ // window.alert("Hello"); var form = document.form_university; if (index == 0) { send_request('universityprocess.jsp?city='+'beijing'); } else send_request('universityprocess.jsp?city='+'chongqing'); } // --></mce:script> <body> <form action="" name="form_university" method="post"> 选择城市:<input type="checkbox" name="check_beijing" id="check_beijing" onClick="updateCity(0)">北京市 <input type="checkbox" name="check_chongqing" id="check_chongqing" onClick="updateCity(1)">重庆市 <br> 学校名称:<div id="universities"></div> </form> </body> </html>

 

universityprocess.jsp:

<%@ page language="java" contentType="text/html; charset=GB2312" pageEncoding="GB2312"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB2312"> <title>选择学校 处理页面</title> </head> <body> <% String city = null; city = request.getParameter("city"); if (city==null) out.print("NULL"); else{ if(city.equalsIgnoreCase("beijing")) { // out.print(city); out.print("<table border=/"1/">"); out.print("<tr>"); out.print("<td>北京大学</td>"); out.print("<td>清华大学</td>"); out.print("<td>中国科学院</td>"); out.print("</tr>"); out.print("</table>"); } else if(city.equalsIgnoreCase("chongqing")) { out.print("<table border=/"1/">"); out.print("<tr>"); out.print("<td>重庆大学</td>"); out.print("<td>西南大学</td>"); out.print("<td>西南政法大学</td>"); out.print("</tr>"); out.print("</table>"); } } %> </body> </html>

 

点击:北京市

点击:重庆市

页面不刷新。

 

你可能感兴趣的:(初学ajax-Demo)