ajax实例Ajax实例

发一下牢骚和主题无关:

    最近想学着J2EE来着,就学到了Ajax这个东西,就跟着学了点,下面就给个实例,省的自己当前用到了也不知道哪找去。

    html页面:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>user_info.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

<script type="text/javascript">
  
  String.prototype.trim = function() {
  	return this.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
 }
  	var xmlHttp;
  	
  	function createXMLHttpRequest(){
  		if(window.XMLHttpRequest){
  			xmlHttp=new XMLHttpRequest();
  		}else{
  			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  		}
  	}
  
	function validate(user){
	
		if(user.value.trim().length!=0){

			createXMLHttpRequest();
			var url="user_validate.jsp?userNumber="+user.value.trim()+"&time="+new Date().getTime();
			xmlHttp.open("get",url,true);
			
			// 把方法地址赋值给xmlHttp的onreadystatechange属性
			xmlHttp.onreadystatechange=callback;
			
			xmlHttp.send(null);
		}
	}
	
	function callback(){
	//	alert(xmlHttp.readyState);
		if(xmlHttp.readyState==4){ // Ajax引擎初始化完成
			if(xmlHttp.status ==200){ // http 200响应
			//	alert("请求胜利");
		//	alert(xmlHttp.responseText);
				document.getElementById("spanuserNumber").innerHTML="<font color='red'>"
				+xmlHttp.responseText+"</font>"
			}else{
				alert("请求错误"+xmlHttp.status);
			}
		}
	}
	
</script>
  


  </head>
  
  <body>
  
  
    This is my HTML page. <br>
    
    <form name="input" action="html_form_action.asp" method="get">
    <table border =0 >
    <tr>
	<td>Usernumber: </td>
	<td><input type="text" name="usernumber" id="usernumber" onblur="validate(this)"/>
	<span id="spanuserNumber"></span>
	</td>
	</tr>
	<tr>
	<td>Username:</td>
	<td> <input type="text" name="username" />
	</td>
	</tr>
	<tr>
	<td>
	null:
	</td>
	<td> <input type="text" name="user" />
	</td>
	</tr>
	<tr>
	<td>
	<input type="submit" value="Submit" />
	</td>
	</tr>
</table>
</form>
  </body>
</html>
    每日一道理
翻开早已发黄的页张,试着寻找过去所留下的点点滴滴的足迹。多年前的好友似乎现在看来已变得陌生,匆忙之间,让这维持了多年的友谊变淡,找不出什么亲切感,只是偶尔遇上,淡淡地微笑,如今也只能在这发黄的页张中找寻过去的那些让人难忘的,至少我可以握住这仅剩下一段的“丝线头”……

    这里用到了trim(),按照教程的是用trim(str),而不是 str.trim()调用,上网查了下才发明IE不支持,而且实现这个的方法居然又十几种之多,http://www.cnblogs.com/rubylouvre/archive/2009/09/18/1568794.html

    提交到Ajax的jsp页面如下:

<%@ page language="java"  pageEncoding="UTF-8"%>
<%@ page import ="com.fillblank.jdbc.*"%>

    <%
    	String userNumber=request.getParameter("userNumber");
    	if(JDBCConnection.findByUserNumber(userNumber)){
    		System.out.print("JDBCConnection.findByUserNumber()--userer="+userNumber);
    		//out.println("the number is already in use");
    		out.println("号码已存在");
    	}
    
     %>

    然后涌现的效果如下:

    ajax和实例

    对于ajax整体感觉用起来不错,不过个人感觉似乎也只是供给了一个用户友爱的页面而已,其他似乎就没啥用了?

文章结束给大家分享下程序员的一些笑话语录: 祝大家在以后的日子里. 男生象Oracle般健壮; 女生象win7般漂亮; 桃花运象IE中毒般频繁; 钱包如Gmail容量般壮大, 升职速度赶上微软打补丁 , 追女朋友像木马一样猖獗, 生活像重装电脑后一样幸福, 写程序敲代码和聊天一样有**。

--------------------------------- 原创文章 By
ajax和实例
---------------------------------

你可能感兴趣的:(Ajax)