JavaScript的Ajax请求示例
以前利用Sencha，Dojo之类Web前端框架多了，由于它们都将Ajax请求封装好了，虽然用着方便，但是对于Js基本的Ajax请求却相当模糊，所以有必要做一下简要的Demo，以用来备忘。
Ajax请求示例1：
<html> <head> <title>Ajax示例</title> <script language="javascript" type="text/javascript"> //创建XMLHttpRequest对象 var request = false; try { request = new XMLHttpRequest(); } catch (trymicrosoft) { try { request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (othermicrosoft) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (failed) { request = false; } } } if (!request) alert("Error initializing XMLHttpRequest!"); //获取信息 function getInfo() { var url = "TheServlet.aspx?sid=" + Math.random() + "&q=juven"; request.open("GET", url, true); request.onreadystatechange = updatePage; request.send(null); } //更新页面 function updatePage() { if (request.readyState == 4) { if (request.status == 200) { var response = request.responseText; document.getElementById("div1").innerText = response; } else if (request.status == 404) { alert("Requested URL is not found."); } else if (request.status == 403) { alert("Access denied."); } else alert("status is " + request.status); } } </script></head><body> <input name="btn" type="button" id="btn" value="get...." onclick="getInfo();" /><div id="div1"></div></body></html>?
对应的TheServlet.aspx代码如下：
<%@ Page Language="C#" %><!-- <%@ Import Namespace="System.Net" %> --><script runat="server"> public void Page_Load(object sender, EventArgs e) { string astring = Request["q"]; string bstring = Request["sid"]; Response.Write("hey=="+bstring); }</script>?示例2：
<html> <head> <script type="text/javascript"> var xmlHttp=null; function showHint(str){ if (str.length==0){ document.getElementById("txtHint").innerHTML=""; return; } xmlHttp=GetXmlHttpObject() if (xmlHttp==null){ alert ("您的浏览器不支持AJAX！"); return; }var url="TheServlet";url=url+"?q="+str;url=url+"&sid="+Math.random();xmlHttp.onreadystatechange = stateChanged;xmlHttp.open("GET",url,true);xmlHttp.send(null);} function GetXmlHttpObject(){ var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp;}function stateChanged() { if (xmlHttp.readyState==4){ document.getElementById("txtHint").innerHTML=xmlHttp.responseText; }} </script> </head> <body> <form> First Name:<input type="text" id="txt1" onkeyup="showHint(this.value)" /></form><p>Suggestions: <span id="txtHint"></span></p> </body></html>?对应的Servlet类代码如下：
import java.io.IOException;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class TheServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException { System.out.println("get into doGet of TheServlet"); String aString = req.getParameter("q"); String bsString = req.getParameter("sid"); resp.getWriter().write(""+bsString);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {System.out.println("get into doPost of TheServlet");}}?