ajax的运行原理和基本使用流程的详解

最新推荐文章于 2025-07-15 11:54:10 发布

唯有一片炙热

最新推荐文章于 2025-07-15 11:54:10 发布

阅读量2.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javaEE基础学习 Java学习

本文链接：https://blog.youkuaiyun.com/qq_40301026/article/details/90910951

Java学习同时被 2 个专栏收录

102 篇文章

订阅专栏

javaEE基础学习

33 篇文章

订阅专栏

AJAX是一种创建快速动态网页的技术，允许局部刷新而无需重新加载整个页面。本文详细介绍了AJAX的工作原理，包括在JSP中的使用流程，以及onreadystatechange()函数的解释。并提供了具体的AJAX使用案例，展示如何通过AJAX实现异步更新效果。

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

什么是 AJAX ？

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。局部刷新技术。不是一门新技术，是多种技术的组合。是浏览器端的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

AJAX的工作原理：

在JSP中一般使用ajax的流程：

        //1.创建ajax引擎对象
		var ajax;
		if(window.XMLHttpRequest){//火狐
			ajax = new XMLHttpRequest();
		}else if(window.ActiveXObject){//ie
			ajax = new ActiveXObject("Msxml2.XMLHTTP"); 
		}
		//2.使用ajax对象创建请求
		ajax.open("get", "aj");
		//3.复写onreadystatement函数,
		//作用：监视response的状态，写回调函数处理服务器返回的数据
		ajax.onreadystatechange = function(){
			
		}
		//4.使用ajax对象发送请求
		ajax.send(null);

对具体函数解释：

onreadystatechange()无需手动调用，有监听程序，每当readyState状态被事件改变，就会触发执行一次onreadystatechange()

ajax发送请求后获得的响应请求，有两种格式拿取。也对应着两种解析方式。

其中对ajax的open()和send()方法的解释，其中为get方式的时候，在send()没有请求实体时，最好写null

具体对ajax的使用案例。

处理的servlet,别名为aj

package cn.liu.ajax;

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 Ajax extends HttpServlet {
	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		//请求数据编码格式
		req.setCharacterEncoding("utf-8");
		//响应编码数据格式
		resp.setContentType("text/html; charset=utf-8");
		resp.getWriter().write("这是ajax");
	}
}

处理的jsp

<%@ 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>ajax练习</title>
    <meta content="text/html; charset=utf-8">
    
    <!-- 声明js代码域 -->
    <script type="text/javascript">
    	//声明getDate函数，并不是调用，调用在body中的input中
    	function getData(){
    	//1.创建ajax引擎对象
    	var ajax;
    	if(window.XMLHttpRequest){
    		ajax=new XMLHttpRequest();
    	}else{
    		ajax=new ActiveXObject("Msxml2.XMLHTTP");
    	}
    	//3.覆写
    	ajax.onreadystatechange=function(){
    	
    		if(ajax.readyState==4){//此时才有响应数据
    			if(ajax.status==200){
    				//按文本拿到响应内容
    				var content = ajax.responseText;
    				//获取元素对象，在此div种展示内容
					var showdiv=document.getElementById("showdiv");
					showdiv.innerHTML=content;
    			}else if(ajax.status==404){
    				//获取元素对象
					var showdiv=document.getElementById("showdiv");
					showdiv.innerHTML="请求资源不存在";
    			}else if(ajax.status==500){
    				//获取元素对象
					var showdiv=document.getElementById("showdiv");
					showdiv.innerHTML="服务器繁忙";
    			}else{
    				//获取元素对象
					var showdiv=document.getElementById("showdiv");
					showdiv.innerHTML="请稍后再访问";
    			}
    		}
    	} 
    	//2.使用ajax引擎对象创建请求
    	ajax.open("get", "aj");
    	//4.使用ajax对象发送请求
    	ajax.send(null);	 
	}	
    </script>
    
    <style type="text/css">
		#showdiv{
			border:solid 1px;
			width:200px;
			height:100px; 
		}
	</style>
  </head>
  
  <body>
   <h3>展示页面</h3>
   <hr>
   <input type="button" value="start" onclick="getData()"/>
   <div id="showdiv"></div>
  </body>
</html>

展示效果：