JavaScript的Ajax請求示例

時間 2020-03-15 標籤 javascript ajax 請求示例

之前利用Sencha，Dojo之類Web前端框架多了，因爲它們都將Ajax請求封裝好了，雖然用着方便，可是對於Js基本的Ajax請求卻至關模糊，因此有必要作一下簡要的Demo，以用來備忘。javascript

Ajax請求示例1：html

<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...." οnclick="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：java

<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" οnkeyup="showHint(this.value)" />
	</form>
	<p>Suggestions: <span id="txtHint"></span></p> 
  </body>
</html>

對應的Servlet類代碼以下：c#

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 {

	@Override
	protected 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);
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		System.out.println("get into doPost  of TheServlet");
	}

}