JavaScript的Ajax请求示例

tonlion2046 · 发表于 2013-1-29 08:51:26

以前利用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...."  /><div id="div1"></div></body></html>
对应的TheServlet.aspx代码如下：
<%@ Page Language="C#" %><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");}}

		自动登录	找回密码
密码			立即注册