【ajax】xmlHttpRequest 第一个例子服务器返回的是HTML格式-优快云博客

本文链接：https://blog.youkuaiyun.com/jeep_ouc/article/details/17131971

本文展示了如何使用Ajax的xmlHttpRequest对象与服务器进行交互，通过GET和POST方法发送请求。在GET请求中，send()方法传递null；在POST请求中，设置content-type首部为'application/x-www-form-urlencoded'来发送URL编码的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

客户端文件

<script type="text/javascript" src="js/test.js"></script>
<title>Insert title here</title>
</head>
<body>
	 <form>
	 	<input type="button" name="ok" id="ok" value="测试服务器的链接">
	 </form>
</body>

test.js代码

 /**
  * ajax建立和服务器的链接，接收服务器的请求，处理服务器返回的数据
  * 开发步骤：
  * 	创建xmlHttpRequest对象
  * 	处理服务器端的响应
  * 	打开和服务器的链接
  * 	发送服务	
  * */

function ajaxFunction(){
	var xmlHttp;
	try{        //Firefox
		xmlHttp = new XMLHttpRequest();
	}catch(e){
		try{  //IE 
			xmlHttp = new ActiveXObject("Msxm12.XMLHTTP");
		}catch(e){
			try{
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			}catch(e){}
		}
	}
	return xmlHttp; 
}

window.onload = function(){
	document.getElementById("ok").onclick = function(){
		//获取xmlhttpRequest对象
		var xmlReq = ajaxFunction();
		
		//处理服务器的响应  ，实时监听
		xmlReq.onreadystatechange = function(){
			//alert(xmlReq.status);
			if(xmlReq.readyState == 4){ //响应发送完毕
				if(xmlReq.status == 200 || xmlReq.status == 304){ 
					alert("xx");
				}
			}	
		}
		//打开和服务器的链接
		//url加一个时间戳timeStamp 可以避免浏览器缓存效果，确保url的唯一性
		xmlReq.open("get","./TestServlet?timeStamp="+new Date().getTime(),true);  //url.....
		//发送服务 get请求不会发送任何数据
		xmlReq.send(null);		
	}
}

服务器端

package myDemo;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class TestServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
    
	public void doGet(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
			request.setCharacterEncoding("utf-8");
			response.setContentType("text/html;charset=utf-8");
			PrintWriter out = response.getWriter();
			System.out.print("hello....");
			out.print("connect servlet success !");
	}
	
	public void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		
	}
}

配置文件 web.xml

  <servlet>
    <description></description>
    <display-name>TestServlet</display-name>
    <servlet-name>TestServlet</servlet-name>
    <servlet-class>myDemo.TestServlet</servlet-class>
  </servlet>			
  <servlet-mapping>
    <servlet-name>TestServlet</servlet-name>
    <url-pattern>/TestServlet</url-pattern>
  </servlet-mapping>