您当前的位置: 首页 » AJAX编程 » AJAX如何与后台交互
AJAX如何与后台交互
论坛链接
AJAX全称为“Asynchronous javascript and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。Ajax技术是目前在浏览器中通过JavaScript脚本可以使用的所有技术的集合。Ajax以一种崭新的方式来使用所有的这些技术，使得古老的B/S方式的Web开发焕发了新的活力。
Ajax技术之中，最核心的技术就是XMLHttpRequest，它最初的名称叫做XMLHTTP，是微软公司为了满足开发者的需要，1999年在IE5.0浏览器中率先推出的。后来这个技术被上述的规范命名为XMLHttpRequest。它正是Ajax技术之所以与众不同的地方。简而言之，XMLHttpRequest为运行于浏览器中的JavaScript脚本提供了一种在页面之内与服务器通信的手段。页面内的JavaScript可以在不刷新页面的情况下从服务器获取数据，或者向服务器提交数据。XMLHttpRequest的出现为Web开发提供了一种全新的可能性，甚至整个改变了人们对于Web应用由什么来组成的看法。它可以使我们以一种全新的方式来做Web开发，为用户提供更好的交互体验。
与传统的Web开发不同，Ajax并不是以一种基于静态页面的方式来看待Web应用的。从Ajax的角度看来，Web应用应由少量的页面组成，其中每个页面其实是一个更小型的Ajax应用。每个页面上面都包括有一些使用JavaScript开发的Ajax组件。这些组件使用XMLHttpRequest对象以异步的方式与服务器通信，从服务器获取需要的数据后使用DOM API来更新页面中的一部分内容。因此Ajax应用与传统的Web应用的区别主要在三个地方：
1. 不刷新整个页面，在页面内与服务器通信。
2. 使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的的响应能力。
3. 应用仅由少量页面组成。大部分交互在页面之内完成，不需要切换整个页面。
由此可见，Ajax使得Web应用更加动态，带来了更高的智能，并且提供了表现能力丰富的Ajax UI组件。这样一类新型的Web应用叫做RIA（Rich Internet Application）应用。
前面是本人在网上找的一些关于AJAX介绍的资料,以帮助不了解AJAX技术的读者尽快了解AJAX技术,下面本人将会把自己在实际开发过程中用到的一些AJAX技术及技巧给大家介绍一下.
使用AJAX技术最重要的就是创建XMLHttpRequest对象,关于如何创建该对象网上有很多资料.本人最常用的一个方法是
function createXMLHttpRequest() {
var xmlhttp;
try {
xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
} catch(e) {
try {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
} catch(e) {
try {
xmlhttp = new XMLHttpRequest();
} catch(e) {
alert("创建XMLHttpRequest对象失败！");
}
}
}
return xmlhttp;
}
下面本人将列出一些例子及一些通过这些例子可以学到的东西．
下面一段代码是本人在做新增特定物品时，做验证以判断该物品是否已在数据库中存在的例子．
<input type="text" style="width:100%" class="noEmptyInput" name="segment10" value="<%=segment10%>" maxlength="16" onblur="do_verify();">
function do_verify() {
var segment10 = document.mainFrm.segment10.value;
var inventoryItemId = document.mainFrm.inventoryItemId.value;
// alert(segment10)
xmlHttp = createXMLHttpRequest();
var url = "/servlet/com.sino.ies.inv.maintenance.servlet.ItemMaintainServlet?forward=doVerify&segment10=" + segment10 + "&inventoryItemId=" + inventoryItemId;
xmlHttp.onreadystatechange = handleReadyStateChange;
xmlHttp.open("post", url, true); //传递数据的方法同样有GET和POST两种,但是当方法为POST时下面的一句话就必须写
xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xmlHttp.send(null);
}
function handleReadyStateChange() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
if (xmlHttp.responseText == 'Y') {
document.mainFrm.isExist.value = 'Y';
document.getElementById("flag").style.display = "block"
document.mainFrm.segment10.focus();
} else {
document.mainFrm.isExist.value = 'N';
document.getElementById("flag").style.display = "none"
}
} else {
alert(xmlHttp.status);
}
}
}
后台代码为:
boolean success = itemDAO.doVerifyItem(); //doVerifyItem为验证指定物品是否在数据库中存在的主要方法,如果该物品已存在该方法将返回TRUE
PrintWriter out = res.getWriter();
if (success) {
out.print("Y");
}
out.flush();
out.close();
}
Ajax技术之中，最核心的技术就是XMLHttpRequest，它最初的名称叫做XMLHTTP，是微软公司为了满足开发者的需要，1999年在IE5.0浏览器中率先推出的。后来这个技术被上述的规范命名为XMLHttpRequest。它正是Ajax技术之所以与众不同的地方。简而言之，XMLHttpRequest为运行于浏览器中的JavaScript脚本提供了一种在页面之内与服务器通信的手段。页面内的JavaScript可以在不刷新页面的情况下从服务器获取数据，或者向服务器提交数据。XMLHttpRequest的出现为Web开发提供了一种全新的可能性，甚至整个改变了人们对于Web应用由什么来组成的看法。它可以使我们以一种全新的方式来做Web开发，为用户提供更好的交互体验。
与传统的Web开发不同，Ajax并不是以一种基于静态页面的方式来看待Web应用的。从Ajax的角度看来，Web应用应由少量的页面组成，其中每个页面其实是一个更小型的Ajax应用。每个页面上面都包括有一些使用JavaScript开发的Ajax组件。这些组件使用XMLHttpRequest对象以异步的方式与服务器通信，从服务器获取需要的数据后使用DOM API来更新页面中的一部分内容。因此Ajax应用与传统的Web应用的区别主要在三个地方：
1. 不刷新整个页面，在页面内与服务器通信。
2. 使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的的响应能力。
3. 应用仅由少量页面组成。大部分交互在页面之内完成，不需要切换整个页面。
由此可见，Ajax使得Web应用更加动态，带来了更高的智能，并且提供了表现能力丰富的Ajax UI组件。这样一类新型的Web应用叫做RIA（Rich Internet Application）应用。
前面是本人在网上找的一些关于AJAX介绍的资料,以帮助不了解AJAX技术的读者尽快了解AJAX技术,下面本人将会把自己在实际开发过程中用到的一些AJAX技术及技巧给大家介绍一下.
使用AJAX技术最重要的就是创建XMLHttpRequest对象,关于如何创建该对象网上有很多资料.本人最常用的一个方法是
function createXMLHttpRequest() {
var xmlhttp;
try {
xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
} catch(e) {
try {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
} catch(e) {
try {
xmlhttp = new XMLHttpRequest();
} catch(e) {
alert("创建XMLHttpRequest对象失败！");
}
}
}
return xmlhttp;
}
下面本人将列出一些例子及一些通过这些例子可以学到的东西．
下面一段代码是本人在做新增特定物品时，做验证以判断该物品是否已在数据库中存在的例子．
<input type="text" style="width:100%" class="noEmptyInput" name="segment10" value="<%=segment10%>" maxlength="16" onblur="do_verify();">
function do_verify() {
var segment10 = document.mainFrm.segment10.value;
var inventoryItemId = document.mainFrm.inventoryItemId.value;
// alert(segment10)
xmlHttp = createXMLHttpRequest();
var url = "/servlet/com.sino.ies.inv.maintenance.servlet.ItemMaintainServlet?forward=doVerify&segment10=" + segment10 + "&inventoryItemId=" + inventoryItemId;
xmlHttp.onreadystatechange = handleReadyStateChange;
xmlHttp.open("post", url, true); //传递数据的方法同样有GET和POST两种,但是当方法为POST时下面的一句话就必须写
xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xmlHttp.send(null);
}
function handleReadyStateChange() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
if (xmlHttp.responseText == 'Y') {
document.mainFrm.isExist.value = 'Y';
document.getElementById("flag").style.display = "block"
document.mainFrm.segment10.focus();
} else {
document.mainFrm.isExist.value = 'N';
document.getElementById("flag").style.display = "none"
}
} else {
alert(xmlHttp.status);
}
}
}
后台代码为:
boolean success = itemDAO.doVerifyItem(); //doVerifyItem为验证指定物品是否在数据库中存在的主要方法,如果该物品已存在该方法将返回TRUE
PrintWriter out = res.getWriter();
if (success) {
out.print("Y");
}
out.flush();
out.close();
}