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();
好了,先写这么多吧,后面学习到更多的东西,继续往上面添。