初涉ajax

关注

最新推荐文章于 2026-03-21 00:40:36 发布 118 阅读 AI 写同款· GEO 优化 ›

Ajax由Html，JavaScript，DHtml，DOM组成，使用Ajax可以实现无刷新的数据交互。传统的数据交互方式是页面发送请求到服务器端，服务器端响应结果然会给页面，一般情况下都是整个页面进行刷新。使用Ajax可以实现局部刷新（可能你只需要刷新部分表单，而非整个表单），最常用的例子是，我们在用户注册的时候，往往会有一个功能是提示检测该用户名是否被占用。如果使用老的提交方式，返回结果重新刷新整个页面，可能用户先前操作的数据都不存在了。大部分网站选择的是局部刷新的方式。只刷新用户名框。这里使用Ajax可以轻松实现，下面我们一步一步的来揭开Ajax的神秘面纱吧。我们主要分为下面几个步骤来说：

创建Request对象

<script language="javascript" type="text/javascript">
var xmlHttp = new XMLHttpRequest();
</script>

如上所示可以简单的获得XMLHttpRequest()方法。Ajax 基本上就是把 JavaScript 技术和 XMLHttpRequest 对象放在 Web 表单和服务器之间。当用户填写表单时，数据发送给一些 JavaScript 代码而不是直接发送给服务器。JavaScript 代码在幕后发送请求，页面无任何刷新。并且请求是异步发送的，就是说 JavaScript 代码（和用户）不用等待服务器的响应，其和服务器响应同步运行。

但是有个问题就是js在不同的浏览器之间运行是具有不同的效果的，创建request对象也不例外。这里我们将上面的代码做下细化

<script language="javascript" type="text/javascript">
         
		/* 创建一个新的Request */
			var xmlHttp = false;
			if (@_jscript_version >= 5)
			try {
			  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
			  try {
			    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			  } catch (e2) {
			    xmlHttp = false;
			  }
			}
			//非IE浏览器的Request的创建
			if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
			  xmlHttp = new XMLHttpRequest();
			}
</script>

如上所示，可以应对不同浏览器之间Request的创建问题。这段代码的核心分为三步：

建立一个变量 xmlHttp 来引用即将创建的 XMLHttpRequest 对象。
尝试在 Microsoft 浏览器中创建该对象：
- 尝试使用 Msxml2.XMLHTTP 对象创建它。
- 如果失败，再尝试 Microsoft.XMLHTTP 对象。
如果仍然没有建立 xmlHttp，则以非 Microsoft 的方式创建该对象。

最后，xmlHttp 应该引用一个有效的 XMLHttpRequest 对象，无论运行什么样的浏览器。

创建好Request我们要做什么呢？往下看。

从表单获取值，并发送请求

我们先来看一个需要无刷新操作的表单

<form>
		 <p>username: <input type="text" name="username" id="username" size="25" 
		       onChange="callServer();" /></p>
		 <p>password: <input type="text" name="password" id="password" size="25" 
		      onChange="callServer();" /></p>
</form>

这个表单提供两个输入框，一个用于输入密码，一个用于输入用户名，我们这里做个简单的判断用户名是否被占用的无刷新操作。我们继续来看下，如何通过JS代码来从表单获取需要操作的数据，并向服务器端发送数据

function callServer() {
		  // 从表单当中获取用户名
		  var username = document.getElementById("username").value;		 
		  //判断用户名是否为空
		  if ((username == null) || (username == "")) return;		  
		  //构建需要发送请求的地址
		  var url = "<%=basePath%>ajaxDemo1?username=" + username;
		  // 建立连接，第一个参数表示请求方法，第二个参数为请求地址，第三个参数表示是否异步操作
		  xmlHttp.open("GET", url, true);
		  // 设置响应函数
		  xmlHttp.onreadystatechange = updatePage;
		  // 发送请求
		  xmlHttp.send(null);
		}

以上代码很明确的表明了ajax的一个操作过程，首先需要从表单当中获取需要交给服务器端处理的数据。构建需要提交的服务器地址，本段代码当中url即为需要提交的服务器地址。参数在URL当中传递。构建玩提交的服务器地址以后，需要建立和服务器端的连接。这里的open方法其实提供5个参数：提交方式，提交地址，是否异步，用户名，密码。一半情况下不需要进行身份验证，所以这里值输入了三个参数。建立连接以后，我们需要设置服务器端响应以后的处理函数。

xmlHttp.onreadystatechange设置相应函数,这里服务器端返回的状态交由updatePage方法处理，该方法将会在后面

给出。一切搞定以后，下面干what呢？当然是发送请求了啊。

发送请求以后服务器端会进行相应的处理。下面就是啥了呢？

处理请求

服务器端处理完毕以后，会返回给客户端，按照前面的设置返回只交由updatePage方法处理，updatePage

方法的实现如下图所示：

function updatePage() {
	if (xmlHttp.readyState == 4) {
		var response = xmlHttp.responseText;
		alert(response);
	         //document.getElementById("result").value = response;
	}
}

现在要面对服务器的响应了。现在只需要知道如下两点：

直到 xmlHttp.readyState 属性的值等于 4才处理相应请求。
服务器将把响应填充到 xmlHttp.responseText 属性中。

本程序当中将处理结果提示给用户

这里贴一下服务器端的部分代码吧：

response.setContentType("text");
String responseText = "OK";
String name = request.getParameter("username");
//String password = request.getParameter("password");
if(name.equals("foolfish")){
	responseText = "the username is used";
}
PrintWriter out=response.getWriter();
System.out.println("responsetext = " + responseText);
 out.println(responseText);
 out.close();

好了，先写这么多吧，后面学习到更多的东西，继续往上面添。

收录于