论坛首页 → Web前端技术论坛 →

Ajax简单易懂实例教程【原创】

浏览 9272 次
锁定老帖子 主题：Ajax简单易懂实例教程【原创】
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (17)
作者 正文
  • ml365
  • 等级: 初级会员
  • 性别:
  • 文章: 22
  • 积分: 0
  • 来自: 广州
   发表时间：2010-12-12  

jsp页面如下：

<%@ page contentType="text/html; charset=gb2312"%>

<html>
<head>
   <meta http-equiv=Content-Type content="text/html; charset=gb2312" />
   <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;">
             &nbsp;
            </p>
            <dl>
             <dt class="logindt">
              用户名：
             </dt>
             <dd class="logindd">

              <input name="email" type="text" value="" class="input"
               onchange="ajaxCheckEmail2();" maxlength="20"
               onfocus="lblEmail.innerText='';" />
              <label id="lblEmail" class="alert"></label>
              <br>
             </dd>
             </dl>
            
             <dl>
              <dl>
               得到的值:
              </dl>
              <dd>
              <input name="value" 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&amp;useUnicode=true&amp;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" />

 

搞定！

 
返回顶楼
         
  • Javakeith
  • 等级: 初级会员
  • 性别:
  • 文章: 80
  • 积分: 10
  • 来自: 大连
   发表时间：2010-12-13  
很快会被 隐藏下去！
返回顶楼
          回帖地址
0 请登录后投票
  • 夜之son
  • 等级: 初级会员
  • 性别:
  • 文章: 112
  • 积分: 20
  • 来自: 信阳
   发表时间：2010-12-13  
Javakeith 写道
很快会被 隐藏下去！

++
返回顶楼
          回帖地址
0 请登录后投票
  • yangdefeng95802
  • 等级: 初级会员
  • 性别:
  • 文章: 59
  • 积分: 50
  • 来自: 辽宁
   发表时间：2010-12-15  
这样的贴子怎么出现首页呢？
返回顶楼
          回帖地址
0 请登录后投票
  • knightzhuwei
  • 等级: 初级会员
  • 性别:
  • 文章: 22
  • 积分: 30
  • 来自: 杭州
   发表时间：2010-12-15  
yangdefeng95802 写道
这样的贴子怎么出现首页呢？

新发的帖都出现在首页
返回顶楼
          回帖地址
0 请登录后投票
  • whaosoft
  • 等级: 一星会员
  • 性别:
  • 文章: 3179
  • 积分: 100
  • 来自: 北京
   发表时间：2010-12-16  
从发帖内容上看 就知道又快校园招聘了
返回顶楼
          回帖地址
0 请登录后投票
  • jasoncool
  • 等级: 初级会员
  • 性别:
  • 文章: 9
  • 积分: 0
  • 来自: 北京
   发表时间：2010-12-17  
whaosoft 写道
从发帖内容上看 就知道又快校园招聘了

这··其实讲的还是有一定水平的，比如说那寥寥无几的注释····
返回顶楼
          回帖地址
0 请登录后投票
  • changyuxin
  • 等级: 初级会员
  • 性别:
  • 文章: 35
  • 积分: 0
  • 来自: 北京
   发表时间：2010-12-18  
一堆代码，也称得上是教程！！！！！！
返回顶楼
          回帖地址
0 请登录后投票
  • hxangel
  • 等级: 初级会员
  • 性别:
  • 文章: 11
  • 积分: 30
  • 来自: 苏州
   发表时间：2010-12-18  
changyuxin 写道
一堆代码，也称得上是教程！！！！！！

完全同意楼上的说法
返回顶楼
          回帖地址
0 请登录后投票
  • suiye007
  • 等级: 初级会员
  • 性别:
  • 文章: 23
  • 积分: 0
  • 来自: 北京
   发表时间：2010-12-21  
其实你不反对这样的代码式的，只是感觉，代码也要高这显示一下吧，这样看累人啊！论坛不是本身加了这样的功能吗？
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics