JavaScript的Ajax请求示例

最新推荐文章于 2024-03-07 15:08:42 发布

micky2046

最新推荐文章于 2024-03-07 15:08:42 发布

阅读量637

点赞数 1

分类专栏： Ajax 文章标签： JavaScript Ajax ViewUI

本文链接：https://blog.csdn.net/micky2046/article/details/84125320

版权

Ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

以前利用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...." ο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：

<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类代码如下：

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");
	}

}

micky2046

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript的Ajax请求示例

以前利用Sencha，Dojo之类Web前端框架多了，由于它们都将Ajax请求封装好了，虽然用着方便，但是对于Js基本的Ajax请求却相当模糊，所以有必要做一下简要的Demo，以用来备忘。Ajax请求示例1：&lt;html&gt; &lt;head&gt; &lt;title&gt;Ajax示例&lt;/title&gt; &lt;script languag...
复制链接

扫一扫