AJAX简单运用1（HelloWorld）

青旅半醒 2024-02-17 22:52 13阅读 0赞

一）、使用超链接时，通过网页提示显示内容，不进行页面跳转，使用AJAX。

GET请求：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <base href="<%=basePath%>">
        
        <title>My JSP 'index.jsp' starting page</title>
    	<meta http-equiv="pragma" content="no-cache">
    	<meta http-equiv="cache-control" content="no-cache">
    	<meta http-equiv="expires" content="0">    
    	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    	<meta http-equiv="description" content="This is my page">
    	
    	<script type="text/javascript">
    	  
    	  window.onload = function(){
    	     //获取a节点，并添加响应函数 
    	     document.getElementsByTagName("a")[0].onclick = function(){
    	         //创建一个XmlHttpRequest文件
    	         var request = new XMLHttpRequest();
    	        
    	         //准备发送请求的数据，url;
    	         var url = this.href;
    	         var method = "GET";
    	         //调用XMLHttpRequest的 open()方法
    	         request.open(method,url);
    	         
    	         //调用XMLHttpRequest的 send()方法
    	         request.send(null);
    	         
    	         //为请求添加响应函数
    	         request.onreadystatechange = function(){
    	           if(request.readyState == 4){
    	              if(request.status == 200 || request.status == 304){
    	                alert(request.responseText);
    	              }
    	           }
    	         }
    	                  //取消a节点的默认行为
    	         	     return false ;
    	         
    	     }
    	    
    	  }
    	
    	</script>
    	
      </head>
      
      <body>
           <a href = "test.txt">TestHello</a>
      </body>
    </html>

事件onreadystatechange由服务器触发