Ajax原理

最新推荐文章于 2025-09-09 13:30:42 发布

AlexChowKey

最新推荐文章于 2025-09-09 13:30:42 发布

阅读量985

点赞数 1

分类专栏：前端开发文章标签： ajax xmlhttprequest 服务器 function 浏览器

前端开发专栏收录该内容

13 篇文章

订阅专栏

本文将通过一个具体的例子来展示Ajax的工作原理，通过与传统请求响应方式的对比展现Ajax中处理请求响应的不同方式。在这个示例程序中，所要完成的任务非常简单，仅仅需要输入一个姓名然后提交这个表单，在服务器端处理这个请求，然后在页面显示处理的结果，在下面的示例程序中，将展示通过传统方式和Ajax方式分别处理这个请求响应的具体过程。

传统方式：

[java] view plain copy print ?

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<form action="SayHello.jsp">
name:<input type="text" name="name"/>
<input type="submit" name="submit"/>
</form>
<%
if(request.getParameter("name")!=null&&request.getParameter("name").length()>0)
out.print("Hello "+request.getParameter("name"));
%>
</body>
</html>

传统方式的实现方式是直接将表单提交到自身的页面，然后在服务器端经过编译后执行其中的Java代码。

Ajax方式（Servlet代码以及配置文件略）：

[java] view plain copy print ?

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>SayHello</title>
<script type="text/javascript">
//创建XMLHttpReques对象
function createXMLHttpRequest(){
if(window.XMLHttpRequest){
//Mozilla浏览器
XMLHttpReq=new XMLHttpRequest();
}else{
//IE浏览器
if(window.ActiveXObject){
try{
XMLHttpReq=new ActionXObject("Msxm12.XMLHTTP");
}catch(e){
try{
XMLHttpReq=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
}
}
}
}
//处理服务器响应结果
function handleResponse() {
// 判断对象状态
if (XMLHttpReq.readyState == 4) {
// 信息已经成功返回，开始处理信息
if (XMLHttpReq.status == 200) {
var out = "";
var res = XMLHttpReq.responseXML;
var response= res.getElementsByTagName("response")[0].firstChild.nodeValue;
//5. 解析服务器返回的信息,更新用户界面
document.getElementById("Hello").innerHTML = response;
}
}
}
//发送客户端的请求
function sendRequest(url){
//1.创建XMLHttpRequest
createXMLHttpRequest();
//2.设置回调函数
XMLHttpReq.onreadystatechange=handleResponse;
//3.初始化XMLHttpRequest组建并发送请求
XMLHttpReq.open("GET",url,true);
//发送请求
XMLHttpReq.send(null);
}
//开始调用Ajax的功能
function sayHello()
{
var name=document.getElementById("name").value;
//发送请求
sendRequest("SayHell?name="+name);
}
</script>
</head>
<body>
<font size="1">
name:<input type="text" id="name"/>
<input type="button" value="提交" onclick="sayHello()"/>
<div id="Hello"></div>
</font>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>SayHello</title>
<script type="text/javascript">
	//创建XMLHttpReques对象
	function createXMLHttpRequest(){
		
		if(window.XMLHttpRequest){
			//Mozilla浏览器
			
			XMLHttpReq=new XMLHttpRequest();
		}else{
			
			//IE浏览器
			if(window.ActiveXObject){
				try{
					XMLHttpReq=new ActionXObject("Msxm12.XMLHTTP");
				}catch(e){
					try{
						XMLHttpReq=new ActiveXObject("Microsoft.XMLHTTP");
					}catch(e){}
				}
			}
		}
	}
	//处理服务器响应结果
	 function handleResponse() {
        // 判断对象状态
        if (XMLHttpReq.readyState == 4) { 
            // 信息已经成功返回，开始处理信息
           if (XMLHttpReq.status == 200) { 
                var out = "";
                var res = XMLHttpReq.responseXML;
                var response= res.getElementsByTagName("response")[0].firstChild.nodeValue;
                //5. 解析服务器返回的信息,更新用户界面
                document.getElementById("Hello").innerHTML = response;
               }
         }
       }
	//发送客户端的请求
	function sendRequest(url){
		//1.创建XMLHttpRequest
		createXMLHttpRequest();
		//2.设置回调函数
		XMLHttpReq.onreadystatechange=handleResponse;
		//3.初始化XMLHttpRequest组建并发送请求
		XMLHttpReq.open("GET",url,true);
		//发送请求
		XMLHttpReq.send(null);
	}
	//开始调用Ajax的功能
	function sayHello()
	{
		var name=document.getElementById("name").value;
		//发送请求
		sendRequest("SayHell?name="+name);
	}
</script>
</head>
<body>
	<font size="1">
		name:<input type="text" id="name"/>
		<input type="button" value="提交" onclick="sayHello()"/>
		<div id="Hello"></div>
	</font>
</body>
</html>

代码解析：

1.创建XMLHttpRequest

2.设置回调函数

3.初始化XMLHttpRequest组建并发送请求

4.服务器返回响应信息

5.解析服务器返回的信息,更新用户界面

详细调用过程如下

最终Ajax方式处理请求的效果是通过XMLHttpRequest对象向服务器发送请求，在得到服务器的返回的处理结果以后，文本框中的用户输入信息依然存在，使用Ajax只是刷新了页面的局部区域，把处理的结果展示在页面的指定位置，对于页面的其他部分不会进行刷新。

传统方式：

[java] view plain copy print ?

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<form action="SayHello.jsp">
name:<input type="text" name="name"/>
<input type="submit" name="submit"/>
</form>
<%
if(request.getParameter("name")!=null&&request.getParameter("name").length()>0)
out.print("Hello "+request.getParameter("name"));
%>
</body>
</html>

传统方式的实现方式是直接将表单提交到自身的页面，然后在服务器端经过编译后执行其中的Java代码。

Ajax方式（Servlet代码以及配置文件略）：

[java] view plain copy print ?

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>SayHello</title>
<script type="text/javascript">
//创建XMLHttpReques对象
function createXMLHttpRequest(){
if(window.XMLHttpRequest){
//Mozilla浏览器
XMLHttpReq=new XMLHttpRequest();
}else{
//IE浏览器
if(window.ActiveXObject){
try{
XMLHttpReq=new ActionXObject("Msxm12.XMLHTTP");
}catch(e){
try{
XMLHttpReq=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
}
}
}
}
//处理服务器响应结果
function handleResponse() {
// 判断对象状态
if (XMLHttpReq.readyState == 4) {
// 信息已经成功返回，开始处理信息
if (XMLHttpReq.status == 200) {
var out = "";
var res = XMLHttpReq.responseXML;
var response= res.getElementsByTagName("response")[0].firstChild.nodeValue;
//5. 解析服务器返回的信息,更新用户界面
document.getElementById("Hello").innerHTML = response;
}
}
}
//发送客户端的请求
function sendRequest(url){
//1.创建XMLHttpRequest
createXMLHttpRequest();
//2.设置回调函数
XMLHttpReq.onreadystatechange=handleResponse;
//3.初始化XMLHttpRequest组建并发送请求
XMLHttpReq.open("GET",url,true);
//发送请求
XMLHttpReq.send(null);
}
//开始调用Ajax的功能
function sayHello()
{
var name=document.getElementById("name").value;
//发送请求
sendRequest("SayHell?name="+name);
}
</script>
</head>
<body>
<font size="1">
name:<input type="text" id="name"/>
<input type="button" value="提交" onclick="sayHello()"/>
<div id="Hello"></div>
</font>
</body>
</html>