jquery ajax 和 ajax的使用

最新推荐文章于 2022-04-09 14:07:33 发布

原创最新推荐文章于 2022-04-09 14:07:33 发布 · 634 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了一种利用Ajax技术实现在网页上动态加载数据的方法。通过原生JavaScript及jQuery库实现了向服务器发送请求并更新页面内容的功能。文章详细解释了如何设置XMLHttpRequest对象的状态监听事件，以及如何在接收到服务器响应后更新指定HTML元素的内容。

  <script type="text/javascript" src="js/jquery-1.6.4.js"></script>
  <script type="text/javascript">
     
       function test(){
       /*
       readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

               0: 请求未初始化 
               1: 服务器连接已建立 
               2: 请求已接收 
               3: 请求处理中 
               4: 请求已完成，且响应已就绪 
 
                status 200: "OK"

                404: 未找到页面
 
       */
                 //获取id为testid的值
               var val = document.getElementById("textid").value;
               var xmlhttp;
               if(window.XMLHttpRequest){
               //创建 XMLHttpRequest 对象
                xmlhttp = new XMLHttpRequest();
	           } else 
	           {
	              xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		        }
		        xmlhttp.onreadystatechange=function(){
		             if(xmlhttp.readyState==4 && xmlhttp.status==200){
		                document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		             }
		        }
		        //servlet/testAjax 服务器路径
		        xmlhttp.open("GET","<%=basePath%>servlet/testAjax?name="+val,true);
		        xmlhttp.send();       
	}
	
	function test1(){
	 	 $.ajax(
	     {url:"<%=basePath%>servlet/testAjax",
	     type:"GET",
	     data:{"name":$("#textid").val()},
	     dataType:"text",
	     success:function(data){
	      $("#myDiv").html(data);
	     },
	     error:function(){
	       alert("request error");
	     }
	     }
	   );
	}
</script>

服务器端代码：

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
	
		 String str =request.getParameter("name");
		 
		  PrintWriter pw = response.getWriter();
		  pw.print("name:"+str);
		  pw.flush();
		  pw.close();
	}

html 代码：

  <body>
     
     <form action="servlet/testAjax">
      <input type="text" value="" id="textid"/> <br/>
      <div id="myDiv"></div>
      <input type="button" value="ajax" onclick="test1()">
     </form>
  </body>