读书人

Ajax简单易懂实例教程

发布时间: 2012-10-28 09:54:44 作者: rapoo

Ajax简单易懂实例教程【原创】
?? <title></title>
</head>

<body>
?? <div id="body" style="padding-left: 8px">
??? <CENTER>
????????? <form name="regForm" action="register.do" method="POST">
?????????? <div style="width: 50%; float: left;">
??????????? <p style="color: red; font-size: 14px; font-weight: bold;">
????????????  
??????????? </p>
??????????? <dl>
???????????? <dt type="text" value="" maxlength="20"
?????????????? onfocus="lblEmail.innerText='';" />
????????????? <label id="lblEmail" type="text" value=""/>
????????????? </dd>????????????
???????????? </dl>
????????? </form>?? ???
??? </CENTER>
?? </div>

<script type="text/javascript">

var show = document.getElementById("lblEmail");
??
?? //ajax方法??
?? var str="";
?? var xmlHttp;
function createXMLHttpRequest() {??
??? try{
???? if (window.ActiveXObject) { ?????
???? xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
???? }else {????
???? if (window.XMLHttpRequest) {??
????? xmlHttp = new XMLHttpRequest();
???? }
?????? }???
??? }catch(e){
????? alert("不能创建XMLHttpRequest对象实例,请重试");
??? }??
}????
?? //ajax所调用的方法
?? function ajaxCheckEmail2(){
??????? var email=regForm.elements["email"].value;
?????????? var show = document.getElementById("lblEmail");
??????????? ajaxCheckEmail();
?? }
??
function ajaxCheckEmail() {
???? createXMLHttpRequest();???
?? var email = document.getElementsByName("email")[0].value;???
?? var url = "numAjax.do?email="+email;
?? xmlHttp.open("POST", url, true);??
?? xmlHttp.onreadystatechange = callback;
?? xmlHttp.send(null);
}
??
function callback(){????
?? if (xmlHttp.readyState == 4) {???? ?????
????? str = xmlHttp.responseText;
??????? //alert(str);
??? if (xmlHttp.status == 200) {???
?????? str = xmlHttp.responseText;
???????????????? //alert("响应的值是"+str);
???????????????? showMessage(str);???????????????
  ???? } else {
  ??????? show.innerText="";
  ???? }??
???? }
}
??
function showMessage(str) {
????? document.getElementById("value").value = str;
}
</script>

</body>

</html>

?

处理通讯的action类,用的是struts1.2的action:

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import jxl.write.Label;
import jxl.write.WritableCellFormat;
import jxl.write.WritableFont;

import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;

public class numAjaxAction extends Action {

public ActionForward execute(ActionMapping mapping, ActionForm form,
??? HttpServletRequest request, HttpServletResponse response)throws java.io.IOException {
??
?? String userId_1 = request.getParameter("email");
??
?? String userId = "";
?? String backValue = "";//返回的数据
?? userId = new String(userId_1.getBytes("8859_1"),"GB2312");
??
?? //连接数据库 开始
?? try{
??? Class.forName("com.mysql.jdbc.Driver");
??? }
???? catch(java.lang.ClassNotFoundException e)
??? {
????? System.err.print(e.getMessage());
??? }
?? String url="jdbc:mysql://127.0.0.1:3306/test?autoReconnect=true&useUnicode=true&characterEncoding=utf-8";
?? try {
??? Connection conn=DriverManager.getConnection(url,"root","123456");
??? String sql = " select action_name from t_pdm_action where action_code = "+userId;
???
??? System.out.println("sql :"+sql);
???
??? PreparedStatement prpdStmt = conn.prepareStatement(sql);
??? ResultSet rs = prpdStmt.executeQuery();//收集到要的数据了
???
??? if(rs.next()){
????
???? backValue = rs.getString("action_name");
???? System.out.println("backValue GB2312 :"+backValue);

??? }
??? rs.close();
??? prpdStmt.close();
??? conn.close();
?? } catch (SQLException e) {
??? e.printStackTrace();
?? }

?? response.setContentType("text/xml;charset=UTF-8");
??? response.getOutputStream().print(backValue);
??? return null;???
??
}
}

action配置文件:

??? <action
????? input="/"
????? path="/numAjax"
????? type="com.me.user.numAjaxAction" />

?

搞定!

?

1 楼 Javakeith 2010-12-13 很快会被 隐藏下去! 2 楼 夜之son 2010-12-13 Javakeith 写道很快会被 隐藏下去!
++ 3 楼 yangdefeng95802 2010-12-15 这样的贴子怎么出现首页呢? 4 楼 knightzhuwei 2010-12-15 yangdefeng95802 写道这样的贴子怎么出现首页呢?
新发的帖都出现在首页 5 楼 whaosoft 2010-12-16 从发帖内容上看 就知道又快校园招聘了 6 楼 jasoncool 2010-12-17 whaosoft 写道从发帖内容上看 就知道又快校园招聘了
这其实讲的还是有一定水平的,比如说那寥寥无几的注释 7 楼 changyuxin 2010-12-18 一堆代码,也称得上是教程!!!!!! 8 楼 hxangel 2010-12-18 changyuxin 写道一堆代码,也称得上是教程!!!!!!
完全同意楼上的说法 9 楼 suiye007 2010-12-21 其实你不反对这样的代码式的,只是感觉,代码也要高这显示一下吧,这样看累人啊!论坛不是本身加了这样的功能吗? 10 楼 magic_yao 2010-12-24 其实吧,代码写的还不错。。。但确实太新手了 11 楼 ml365 2010-12-24 终于可以回复了。哎。之前第一次用博客同步论坛的功能。没想到被扣分。以后绝对不把博文发论坛了。不好意思各位,这篇其实是我写给自己留档的。方便以后查看。呵呵 12 楼 沈冠军 2010-12-26 changyuxin 写道一堆代码,也称得上是教程!!!!!!
我还以为是什么教程呢,唉…… 13 楼 a155069480 2011-05-06 楼主 你这个东西 有错误
document.getElementById("value").value = str;
不应该是这个 应该是
document.getElementByName("value").value = str;

读书人网 >Ajax

热点推荐