JavaScript的Ajax请求示范-JavaSript-爱易网页

JavaScript的Ajax请求示范

日期：2014-05-16　浏览次数：20372 次

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.serv

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

JavaScript的Ajax请求示范

相关资料更多>

推荐阅读更多>