AJAX的实例练习

2016-11-22 08:16:23来源:CSDN作者:wy230_221人点击

第七城市

AJAX的实例练习

几乎每个Web应用都能从Ajax技术中获益,但不是所有都能达到最好的效果。从验证开始就很合适,但是不要限制你的主动性。你当然可以使用Ajax提交数据,但也许不能把它作为提交数据的主要方法。

其次,要注意浏览器版本问题,。如果大量用户(或者特别重要的用户)还在使用比较旧的浏览器,如IE 5、Safari 1.2或Mozilla 1.0之前的版本,Ajax技术就不能奏效。如果这是一些很重要的用户,你就要使用针对目标用户的跨浏览器的方法,而放弃Ajax,或者开发一个可以妥善降级的网站。浏览器支持可能不是一个重要因素,因为Netscape Navigator 4在市场上的份额很小。不过,还是应该查看Web日志,看看你的应用适用什么技术。

Ajax的实现分为如下几步:

1、创建对象

2、创建请求

3、发送请求

4、回调函数

用open()和send()方法来交换数据,一般open的是一个相关的servlet,已发出请求。


下面是关于如何在jsp中实现Ajax的代码,注释详尽:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>AJAX注册页面</title>
<script type="text/javascript">
function checkName() {
//创建对象
var xmlhttp;
ale
rt(window.XMLHttpRequest);//用于较新的浏览器版本;
alert(window.ActiveXObject)
;//用于老的浏览器版本;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}


//获取参数值
var uName = document.getElementById("uName");
//建立请求
xmlhttp.open("get", "CheckServlet?uName=" + uName.value, true);
xmlhttp.send(null)
;

//触发存储函数事件,readyState改变时,该事件就会被触发,readyState有四种状态,有5个可取值:0 =未初始化,1 = 正在加载,2 = 已加载,3 =交互中,4 = 完成
xmlhttp.onreadystatechange = function(){
alert(xmlhttp.readyState)
;

//
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert("11");
document.getElementById("checku").innerHTML = xmlhttp.responseText;
}
}
}
</script>
</head>
<body>
<div align="center">
<form action="CheckServlet" method="get">
姓名:<input type="text" name="uName" onblur="checkName()" id="uName"></input>
<label id="checku"></label> <br /> 密码:<input type="password"
name="uPassword"></input><br />性别:男<input type="radio" name="uSex"
value="m"></input>女<input type="radio" name="uSex" value="fm"></input><br />
<input type="submit" value="提交"></input>
</form>
</div>
</body>
</html>
/


注:来自API,一定要看看啊:

1.一个客户端事件触发一个Ajax事件。从简单的onchange事件到某个特定的用户动作,很多这样的事件都可以触发Ajax事件。可以有如下的代码:

<input type="text"d="email" name="email" onblur="validateEmail()";>

2. 创建XMLHttpRequest对象的一个实例。使用open()方法建立调用,并设置URL以及所希望的HTTP方法(通常是GET或POST)。请求实际上通过一个send()方法调用触发。可能的代码如下所示:

var xmlHttp;

function validateEmail() {

   var email = document.getElementById("email");

   var url = "validate?email=" + escape(email.value);

   if (window.ActiveXObject) {

     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

   }

   else if (window.XMLHttpRequest) {

     xmlHttp = new XMLHttpRequest();

   }

xmlHttp.open("GET", url);

xmlHttp.onreadystatechange = callback;

xmlHttp.send(null);

}

3. 向服务器做出请求。可能调用servlet、CGI脚本,或者任何服务器端技术。

4. 服务器可以做你想做的事情,包括访问数据库,甚至访问另一个系统。

5. 请求返回到浏览器。Content-Type设置为text/xml——XMLHttpRequest对象只能处理text/html类型的结果。在另外一些更复杂示例中,响应可能涉及更广,还包括JavaScript、DOM管理以及其他相关的技术。需要说明,你还需要设置另外一些首部,使浏览器不会在本地缓存结果。为此可以使用下面的代码:

response.setHeader("Cache-Control", "no-cache");

response.setHeader("Pragma", "no-cache");[1]

6. 在这个示例中,XMLHttpRequest对象配置为处理返回时要调用callback()函数。这个函数会检查XMLHttpRequest对象的readyState属性,然后查看服务器返回的状态码。如果一切正常,callback()函数就会在客户端上做些有意思的工作。以下就是一个典型的回调方法:

function callback() {

   if (xmlHttp.readyState == 4) {

     if (xmlHttp.status == 200) {

          //do something interesting here

     }

   }

}

可以看到,这与正常的请求/响应模式有所不同,但对Web开发人员来说,并不是完全陌生的。显然,在创建和建立XMLHttpRequest对象时还可以做些事情,另外当“回调”函数完成了状态检查之后也可以有所作为。



未完待续!


 



第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台