分享
 
 
 

AJAX如何与后台交互

王朝other·作者佚名  2008-05-31
窄屏简体版  字體: |||超大  

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();

}

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有