AJAX

最初，用户向Web服务器请求后会重新加载整个页面，即便是更新一小部分页面元素也要重新载入整个页面，不仅要刷新改变的部分，连没有变化的部分也被连带着刷新。很明显，这样的处理方式不但效率不高，还加重了服务器的负担。

html

<form method="post" id="myform" >

 <table border="1" cellpadding="0" cellspacing="0" >

 <tr><td>帐户 </td><td><input type="text" name="useracnt" id="useracnt" value="abc@163.com" onBlur="myOnBlur(this.value);" ></td><td width=100px><div id="userName">$!user.UserNnm&nbsp;</div></td></tr>

 </table>

</form>

javascript

function myOnBlur(val) {

 var mfm = document.getElementById('myform');

 console.log(mfm.action);

 mfm.action = mfm.action + "?_a=6&query=query&queryuseracnt=" + val;

 console.log(mfm.action);

 mfm.submit();

}

servlet

 context.put("user",user);

 System.out.println("result=" + result.size());

 context.put("userList",result);



 context.put("link",new UURI(req));



 Template tmplate = Velocity.getTemplate("UserList.vm","UTF8");



 PrintWriter writer = resp.getWriter();

 tmplate.merge(context,writer);

贴几个画面或许会更容易理解一些。

当然，对于懒惰的安全度不高的数据来说，也可以放在JavaScript里来实现。

<script language=JAVASCRIPT>

 userLst = new Array(

 #foreach($usr in $userList)

 new Array("$!usr.UserAcnt","$!usr.UserNnm"),#end

 new Array("",""));



function myOnBlur(val) {

 console.log("myOnBlur" + val);

 var name = "";

 for (var i = 0; i < userLst.length; i ++) {

 if (userLst[i][0] == val) {

 name = userLst[i][1];

 document.getElementById('userName').innerHTML =userLst[i][1];

 break;

 }

 }

 console.log(name);

}

<script>

鲜度高的时候，这就不灵了。其实Applet什么的也能实现。

1995年5月23日，随着Java发布的Java applets（JAVA小程序）首次实现了异步加载。浏览器（最初是网景Netscape Navigator）通过运行嵌入网页中的Java applets与服务器交换数据，不必刷新网页。

1995年11月22日，Internet Explorer 2.0支持JavaScript、SSL、Cookies、Frames、VRML、RSA、互联网新闻组及Java Applet ，同时微软还提出了ActiveX与Applet形成竞争。可是在Flash和ActiveX等的挤兑下，Applet逐渐步入颓势，这在HTML中也略有体现。在 HTML 4.01 中，不赞成使用 applet 元素；在 HTML5 中，不支持 applet 元素。（不代表HTML5里不能用Applet哦！）这里略过了。

1996年8月13日，Internet Explorer3.0将iframe元素加入到HTML，支持局部刷新网页。

1997年9月，Internet Explorer 4发布。

1999年3月18日，Internet Explorer 5发布。

接下来进入主题。

2000年7月8日，Internet Explorer 5.5发布。XMLHttpReques开始可用。可直到2005年，没有什么动静。

2005年初，许多事件使得Ajax被大众所接受。文章《Ajax: A New Approach to Web Applications》的迅速流传提高了人们使用该项技术的意识。另外，对Mozilla/Gecko的支持使得该技术走向成熟，变得更为简单易用。

2006年10月18日，Internet Explorer 7正式发行。

这里应该有个栗子：

function myOnBlur (val) {

 var ajax_request;

 if (window.XMLHttpRequest) {

 ajax_request = new XMLHttpRequest();

 } else {

 ajax_request = new ActiveXObject('Microsoft.XMLHTTP');

 }

 ajax_request.onreadystatechange=function() {

 if (ajax_request.readyState === 4) { // 成功完成

 // 判断响应结果:

 if (ajax_request.status === 200) {

 // 成功，通过responseText拿到响应的文本:

 var result = ajax_request.responseText;

 document.getElementById('userName').innerHTML =result;

 } else {

 // 失败，根据响应码判断失败原因:

 }

 } else {

 // HTTP请求还在继续...

 }

 }

 // 发送请求:

 ajax_request.open("GET",'http://localhost:8080/teapot/t/?_a=6&ajax=true&queryuseracnt=queryuseracnt&useracnt=' + val,true);

 ajax_request.send();

}

servlet:

resp.setContentType("text/plain;charset=UTF-8");

PrintWriter writer = resp.getWriter();

writer.write(user.getUserNnm());

关于open方法稍稍补充一下：

open( method,URL )

open( method,URL,async )

open( method,async,userName )

open( method,userName,password )



指定请求的方法，URL 以及其他可选属性。



方法参数可以是 "GET"，"POST" 或者 "HEAD" 中的一个值。也可以是其他 HTTP 方法，比如 "PUT" 和 "DELETE"（主要用于 REST 应用程序中）。



"async" 参数指定该请求是否应该异步处理。"true" 意味着脚本处理发生在 send() 方法之后而不必等待响应，而 "false" 意味着继续脚本处理之前脚本要等待响应。

同步，简单点说就是得到执行结果才继续执行。异步的话，你先干着，我也要继续忙我的了。

时髦点，用jQuery写一下。

$(document).ready(function(){

 $("#useracnt").mousedown(function(){

 var useracnt = $("#useracnt").val();

 $.ajax({ //一个Ajax过程

 type: "get",//以get方式与后台沟通

 url : "http://localhost:8080/teapot/t/?",//与页面沟通

 dataType:'text',//返回的值以 TEXT方式 解释xml，html，script，json，jsonp，text。

 data: '_a=6&ajax=true&queryuseracnt=queryuseracnt&useracnt='+useracnt,//发给的数据

 success: function(value){//如果调用成功

 $('#userName').html(value); //把返回值显示在预定义的userName定位符位置

 }

 });

 });

});

（完）

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!