AJAX的实例练习
2016-11-21 20:54
127 查看
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;
alert(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对象时还可以做些事情，另外当“回调”函数完成了状态检查之后也可以有所作为。
未完待续！
几乎每个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;
alert(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对象时还可以做些事情，另外当“回调”函数完成了状态检查之后也可以有所作为。
未完待续！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Ajax实例练习--股票动态更新面板
- ajax/dwr/struts实例开发（下）
- 指针练习实例--（针对C新手）(转)
- 学习Ajax的简单联动小实例
- 实例学习AJAX－基础1
- AJAX入门必读与实例（初学）
- AJAX、AJAX实例及AJAX源代码（asp）
- Ajax表单提交实例
- AJAX、AJAX实例及AJAX源代码（asp）
- Ajax.net的未将对象引用设置到对象的实例
- Ajax.NET在.Net 2.0中的应用实例
- AJAX编写用户注册实例及技术小结
- 一个最简单的AJAX实例及解析
- Ajax表单提交实例
- Ajax的无刷新技术实例详解
- Ajax简单实例应用 推荐
- Web2.0之Ajax 学习笔记与应用实例（转载）
- Ajax简要说明及实例
- Flash & Ajax 操作 XML 实例:无刷新分页
- AJAX入门必读与实例（仿google的拖动）