Ajax技术(XMLHttp)

最新推荐文章于 2025-05-30 13:08:13 发布

原创最新推荐文章于 2025-05-30 13:08:13 发布 · 550 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #xmlhttp #点对点通信

Java从入门到高级编程同时被 2 个专栏收录

51 篇文章

订阅专栏

JavaWeb开发技术

14 篇文章

订阅专栏

本文详细介绍了Ajax技术的基础概念、工作原理及应用案例。包括如何利用XMLHttpRequest对象进行GET和POST请求，以及状态码的理解和处理。并通过示例展示了如何在实际项目中实现异步数据交互。

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

XmlHttp是什么？

最通用的定义为：XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。
来自MSDN的解释：XmlHttp提供客户端同http服务器通讯的协议。客户端可以通过XmlHttp对象(MSXML2.XMLHTTP.3.0)向http服务器发送请求并使用微软XML文档对象模型Microsoft® XML Document Object Model (DOM)处理回应。

现在的绝对多数浏览器都增加了对XmlHttp的支持，IE中使用ActiveXObject方式创建XmlHttp对象，其他浏览器如：Firefox、Opera等通过window.XMLHttpRequest来创建xmlhttp对象。

canAjaxWeb

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
  <display-name></display-name>
  <servlet>
    <servlet-name>OneServlet</servlet-name>
    <servlet-class>cn.hncu.servlet.OneServlet</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>OneServlet</servlet-name>
    <url-pattern>/OneServlet</url-pattern>
  </servlet-mapping>	
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Ajax 技术</title>
    <script type="text/javascript">
    	//GET方式的ajax请求
    	function check1(obj){
    		var name =obj.value;
    		
    		//1. 创建一个ajax对象
    		var xhr=null;
    		//用下面这一段实现跨浏览器支持
    		if(window.XMLHttpRequest){//火狐、google、高版本IE
    			xhr=new XMLHttpRequest();
    		}else{//低版本IE
    			xhr=new ActiveXObject("Microsoft.XMLHttp");
    		}
    		
    		//2. 设置请求方式(注：GET请求方式的参数在地址的后面)
    		var url="<c:url value='/OneServlet?name="+name+"' />";
    		xhr.open("get", url, true);//异步、以GET方式向后台请求
    		//xhr.open("get", url, false);//同步、以GET方式向后台请求
    		
    		//3. 设置访问成功后的回调参数(一个js的函数对象) -------xhr.onreadystatechange属性指定的回调函数
    		xhr.onreadystatechange=function(){
    			//alert(xhr.readyState); 1 2 3 4
    			if(xhr.readyState==4){
    				if(xhr.status==200){
    					var text=xhr.responseText;
    					//alert(text);
    					succ(text);
    				}else{
    					alert("服务器响应出错信息,错误代码为："+xhr.status);
    				}
    			}
    		};
    		
    		//4. 发送请求
    		xhr.send(null);//GET方式没有参数(请求体)   ---数据(请求参数)在地址栏url中
    	}
    	function succ(obj){
    		if(obj=="1"){
    			sp1.innerHTML="该用户已存在".fontcolor("red");
    		}else{
    			sp1.innerHTML=obj.fontcolor("green");
    		}
    	}
    	//POST方式的ajax请求
    	function check2(obj){
    		var name=obj.value;
    		var xhr=null;
    		if(window.XMLHttpRequest){
    			xhr=new XMLHttpRequest();
    		}else{
    			xhr=new ActiveXObject("Microsoft.XMLHttp");
    		}
    		var url="<c:url value='/OneServlet' />";//POST请求方式url不带参数
    		xhr.open("POST", url, true);
    		
    		xhr.onreadystatechange=function(){
    			if(xhr.readyState=="4"){
    				if(xhr.status=="200"){
    					var text =xhr.responseText;
    					succ2(text);
    				}else{
    					alert("服务器响应出错信息,错误代码为："+xhr.status);
    				}
    			}
    		};
    		//以POST方式提交时必须设置请求头
    		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    		
    		xhr.send("name="+name);//POST方式，有请求参数--------数据(请求参数)
    	}
    		function succ2(obj){
    			sp2.innerHTML=obj.fontcolor("blue");
    		}
    </script>
  </head>
  
  <body> 
    <pre>
    1.ajax 技术介绍：
    	全称：Asynchronized(异步) Javascript And Xml
    	技术组成：Javascript,DOM,CSS和XMLHttpRequest(ActiveXObject)对象
    2.ajax的状态-------xhr.readyState属性：
    	0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法） 
		1 (初始化) 对象已建立，尚未调用send方法 
		2 (发送数据) send方法已调用，但是当前的状态及http头未知 
		3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误， 
		4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据 
	3.ajax请求开启方法--------xhr.open(请求方式，url,是否为异步)
    </pre>
    <form action="">
    	<h3>GET方式的ajax演示</h3>
    	Name:<input type="text" name="name" onblur="check1(this)"/>
    	<span id="sp1"></span><br/>
    	Pwd:<input type="password" name="pwd"><br/>
    	Email<input type="text" name="email"><br/>
    	<br/><br/><br/><br/>
    	
    	<h3>POST方式的ajax演示</h3>
    	Name2:<input type="text" name="name" onblur="check2(this)"/>
    	<span id="sp2"></span><br/>
    	Pwd2:<input type="password" name="pwd"><br/>
    	Email2<input type="text" name="email"><br/>
    	<input type="submit" value="注册">.
    	<br/><br/><br/><br/>
    </form>
    <a href="<c:url value='/jsps/ajaxDemo2.jsp' />">Ajax技术封装</a>
    <br/><br/><br/><br/><br/><br/><br/><br/>
  </body>
</html>

主页展示图：

OneServlet.java

package cn.hncu.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.Date;

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

public class OneServlet extends HttpServlet {
	private SimpleDateFormat sdf=new SimpleDateFormat("yyyy年MM月dd日  HH:mm:ss");
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");
		PrintWriter pw=response.getWriter();
		System.out.println("GET-Ajax  方式请求来啦......");
		String name=request.getParameter("name");
		
		/*	这段代码是为了更好地看出ajax同步(浏览器必须等待后台的返回结果)与异步(互不影响)的区别
			try {
				Thread.sleep(3000);
			} catch (InterruptedException e) {
				e.printStackTrace();
			}
		*/
		if(name.startsWith("hncu")){
			pw.print("1");
//			pw.println("name 是合法的,"+sdf.format(new Date()));
		}else{
			pw.println("name 是非法的,"+sdf.format(new Date()));
		}
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");
		request.setCharacterEncoding("utf-8");
		PrintWriter pw=response.getWriter();
		System.out.println("POST-Ajax  方式请求来啦......");
		String name=request.getParameter("name");
		
		//int i=10/0;//这一句是为了演示当服务器响应代码不是200的情况---这个是500错误
		
		if(name.startsWith("hncu")){
			pw.println("name 是合法的,"+sdf.format(new Date()));
		}else{
			pw.println("name 是非法的,"+sdf.format(new Date()));
		}
	}

}

GET方式ajax请求效果展示(POST方式也是如此，只不过POST方式支持中文)

Ajax封装技术：

ajaxDemo2.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Ajax 技术</title>
    <script type="text/javascript" src="<c:url value='/js/ajax.js' />"></script>
    <script type="text/javascript">
    	//演示封装：GET方式的ajax请求
    	function check1(obj){
    		var name =obj.value;
    		var url="<c:url value='/OneServlet?name="+name+"' />";
    		var ajax = new Ajax();
  			ajax.get(url,succ,failure);
    	}
    	function succ(obj){
    		if(obj=="1"){
    			sp1.innerHTML="该用户已存在".fontcolor("red");
    		}else{
    			sp1.innerHTML=obj.fontcolor("green");
    		}
    	}
    	function failure(obj){
    		alert("服务器响应的错误信息代码:"+obj);
    	}
    	/////////////////以下演示POST方式的ajax//////////////////////////
    	//演示POST方式的Ajax请求
    	function check2(obj){
    		var data="name="+obj.value;
    		var url="<c:url value='/OneServlet' />";//POST请求方式url不带参数
    		var ajax=new Ajax();
    		ajax.post(url,data,succ2,failure);
    	}
    		function succ2(obj){
    			sp2.innerHTML=obj.fontcolor("blue");
    		}
    </script>
  </head>
  
  <body> 
  	<input type="button" value="函数封装技术演示" onclick="demo()">
  	<script type="text/javascript">
  		function demo(){
  			var p=new Person("Tom","25");
  			p.show();
  			p.setAge("9");
  			p.show();
  		}
  		function Person(name,age){
  			this.name=name;
  			this.age=age;
  			this.show=function(){
  				alert(this.name+",....."+this.age);
  			};
  			this.setAge=function(age){
  				this.age=age;
  			};
  		}
  	</script>
    <form action="">
    	<h3>GET方式的ajax演示</h3>
    	Name:<input type="text" name="name" onblur="check1(this)"/>
    	<span id="sp1"></span><br/>
    	Pwd:<input type="password" name="pwd"><br/>
    	Email<input type="text" name="email"><br/>
    	<br/><br/><br/><br/>
    	
    	<h3>POST方式的ajax演示</h3>
    	Name2:<input type="text" name="name" onblur="check2(this)"/>
    	<span id="sp2"></span><br/>
    	Pwd2:<input type="password" name="pwd"><br/>
    	Email2<input type="text" name="email"><br/>
    	<input type="submit" value="注册">.
    	<br/><br/><br/><br/>
    </form>
  </body>
</html>

ajax.js

function Ajax(){
	this.get=function(url,succ,failure){
		//1 创建一个ajax对象
		var xhr=null;
		//用下面这一段实现跨浏览器支持
		if(window.XMLHttpRequest){//火狐、google、高版本IE
			xhr = new XMLHttpRequest();
		}else{//低版本IE  
			xhr = new ActiveXObject("Microsoft.XMLHttp");
		}
		
		//2 设置请求方式 
		xhr.open("GET",url,true);//异步、GET方式向后台的url(servlet的请求地址)发起请求
		
		//3 设置访问成功后的 回调函数(一个js的函数对象) ---xhr.onreadystatechange属性指定的回调函数。
		xhr.onreadystatechange=function(){
			if(xhr.readyState==4){
				if(xhr.status==200){
					var txt = xhr.responseText;
  					succ(txt);
				}else{
					failure(xhr.status);
				}
			}
		};
		//4 发送请求
		xhr.send(null);
	};
	this.post=function(url,data,succ2,failure){
		var xhr=null;
		if(window.XMLHttpRequest){
			xhr=new XMLHttpRequest();
		}else{
			xhr=new ActiveXObject("Microsoft.XMLHttp");
		}
		xhr.open("POST", url, true);
		
		xhr.onreadystatechange=function(){
			if(xhr.readyState=="4"){
				if(xhr.status=="200"){
					var text =xhr.responseText;
					succ2(text);
				}else{
					failure(xhr.status);
				}
			}
		};
		//以POST方式提交时必须设置请求头
		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		
		xhr.send(data);//POST方式，有请求参数--------数据(请求参数)
	};
	
}

主页图：