从Hello World开始深入Ajax

danlley

浏览: 369636 次
性别:
来自: 西安

最近访客更多访客>>

ybfjavaeye

yhgzjzxz

郭自峰

我心悸

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

J2EE

Ajax Microsoft 应用服务器 JSP 浏览器

1. 初始化XMLHttpRequest对象

var xmlHttp;
function createXMLHttpRequest(){
document.getElementById("myid_02").width=100;
if(window.ActiveXObject){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
alert("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
alert("Http Request");
}
}

通过这一步，我们可以得到浏览器的支持方式，这里我的浏览器是Microsoft.XMLHTTP方式（IE6），事实上在IE7之前的版本中，浏览器都是采用"Microsoft.XMLHTTP方式，只有在IE7中，才会使用Http Request方式。因此在以下的说明中，我都将以我的浏览器版本为依据进行阐述。
2. 向服务器端发出请求

js 代码

function startRequest(){
createXMLHttpRequest();
xmlHttp.onreadystatechange=handleStateChange;
xmlHttp.open("GET","calculator.jsp",true);
xmlHttp.send(null);

在AJAX中，许多使用XMLHttpRequest的请求都是从一个HTML事件（例如一个调用JavaScript函数的按钮点击(onclick)或一个按键(onkeypress)）中被初始化的。AJAX支持包括表单校验在内的各种应用程序。有时，在填充表单的其它内容之前要求校验一个唯一的表单域。但是目前我们最好还是简单一点的好^^。首先说明一下XMLHttpRequest对象的属性onreadystatechange。这个属性能辨识readyState 属性的改变，无论readyState值何时发生改变，XMLHttpRequest对象都会激发一个readystatechange事件。其中，onreadystatechange属性接收一个EventListener值，该值向该方法指示无论readyState值何时发生改变，该对象都将激活。

　表格1.XMLHttpRequest对象的ReadyState属性值列表。
取值描述
0 描述一种"未初始化"状态；此时，已经创建一个XMLHttpRequest对象，但是还没有初始化。
1 描述一种"发送"状态；此时，代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。
2 描述一种"发送"状态；此时，已经通过send()方法把一个请求发送到服务器端，但是还没有收到一个响应。
3 描述一种"正在接收"状态；此时，已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收结束。
4 描述一种"已加载"状态；此时，响应已经被完全接收。

如果你是一个细心的读者你就会发现这里似乎还要在增加一个JSP页面来处理我们发出的请求信息。为此，我们在这里我们对calculator.jsp进行定义,页面全部内容如下：

--------------------------------------------------------------------------------

Hello World

--------------------------------------------------------------------------------

是不是相当简单！

3. 接收请求信息
在startRequest函数中，我们声明了要使用handleStateChange对象来标识readyState。通过令xmlHttp.onreadystatechange=handleStateChange，我们就成功注册了一个事件处理器。下面就需要对handleStateChange进行具体的是实现，代码如下：

function handleStateChange(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
document.forms[0].val.value=xmlHttp.responseText;
}
}
}

当readyState值为0、1或2时，responseText包含一个空字符串。当readyState值为3(正在接收)时，响应中包含客户端还未完成的响应信息。当readyState为4(已加载)时，该responseText包含完整的响应信息。因此，我们一直等到readyState为4才开始将结果返回。

4.       第一个Ajax页面全貌(赶紧执行一把吧)
事实上，一个完整的打开服务器链接的通讯方法的定义约定格式如下：
xmlHttp.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword)
其中：
    bstrMethod: 连接方式，可用的有GET, POST, PUT, or PROPFIND
    bstrUrl: 服务器的url
    varAsync（可选）: 调用是否异步，默认为true（调用立即返回）
    bstrUser（可选）：用户名，如果url需要验证时附上
    bstrPassword（可选）：密码，如果url需要验证时附上
但是通常情况下我们只需要提供前3个参数就足够了。

修改handleStateChange方法，修改后的结果如下：

xml 代码

<%@ page contentType="text/html; charset=GBK" %>
<html>
<head>
<title>test</title>
<script language="javascript">
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
//alert("Microsoft.XMLHTTP");
str=document.getElementById("mydiv_01").innerText;
document.getElementById("mydiv_01").innerText="【运算结束】";
}else if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
//alert("Http Request");
}
}
function startRequest(){
createXMLHttpRequest();
xmlHttp.onreadystatechange=handleStateChange;
xmlHttp.open("GET","calculator.jsp",true);
xmlHttp.send(null);
}
function handleStateChange(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
document.getElementById("mydiv_01").innerText=xmlHttp.responseText;
}
}
}
</script>
</head>
<BODY>
<font size="+6">First Samples for Ajax</font><br>
<input type="button" name="subButton" value="获取数据" onclick="startRequest();">
<center><div id="mydiv_01">【等待触发】</div></center>
</BODY>

5. 用Ajax实现与服务器的交互
修改index页面，在其中增加以下HTML代码：

xml 代码

<center>
<form>
<input type="text" name="val_01" size="10" value="5">*
<input type="text" name="val_02" size="10" value="8">=
<input type="text" name="val_03" size="10" value="0">
</form>
</center>

修改startRequest方法，修改后结果如下：

js 代码

function startRequest(){
createXMLHttpRequest();
xmlHttp.onreadystatechange=handleStateChange;
var val_01=document.forms[0].val_01.value;
var val_02=document.forms[0].val_02.value;
xmlHttp.open("GET","calculator.jsp?val_01="+val_01+"&val_02="+val_02,true);
xmlHttp.send(null);
}

js 代码

function handleStateChange(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
document.getElementById("mydiv_01").innerText=xmlHttp.responseText;
document.forms[0].val_03.value=xmlHttp.responseText;
}
}
}

最后，运行查看结果。

js 代码

分享到：

Maven入门--概念与实例 | Oracle的SQL中常用时间相关缩写对应表总结

2007-07-17 21:11
浏览 1624
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论