`

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

AjaxSQLStruts招聘MySQL 
阅读更多

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" />

 

搞定！

 

分享到：
| jquery技巧总结【转】
评论
13 楼 a155069480 2011-05-06  
楼主 你这个东西 有错误
document.getElementById("value").value = str;
不应该是这个 应该是
document.getElementByName("value").value = str;
12 楼 沈冠军 2010-12-26  
changyuxin 写道
一堆代码，也称得上是教程！！！！！！

我还以为是什么教程呢，唉……
11 楼 ml365 2010-12-24  
终于可以回复了。哎。之前第一次用博客同步论坛的功能。没想到被扣分。以后绝对不把博文发论坛了。不好意思各位，这篇其实是我写给自己留档的。方便以后查看。呵呵
10 楼 magic_yao 2010-12-24  
其实吧，代码写的还不错。。。但确实太新手了
9 楼 suiye007 2010-12-21  
其实你不反对这样的代码式的，只是感觉，代码也要高这显示一下吧，这样看累人啊！论坛不是本身加了这样的功能吗？
8 楼 hxangel 2010-12-18  
changyuxin 写道
一堆代码，也称得上是教程！！！！！！

完全同意楼上的说法
7 楼 changyuxin 2010-12-18  
一堆代码，也称得上是教程！！！！！！
6 楼 jasoncool 2010-12-17  
whaosoft 写道
从发帖内容上看 就知道又快校园招聘了

这··其实讲的还是有一定水平的，比如说那寥寥无几的注释····
5 楼 whaosoft 2010-12-16  
从发帖内容上看 就知道又快校园招聘了
4 楼 knightzhuwei 2010-12-15  
yangdefeng95802 写道
这样的贴子怎么出现首页呢？

新发的帖都出现在首页
3 楼 yangdefeng95802 2010-12-15  
这样的贴子怎么出现首页呢？
2 楼 夜之son 2010-12-13  
Javakeith 写道
很快会被 隐藏下去！

++
1 楼 Javakeith 2010-12-13  
很快会被 隐藏下去！
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ajax基础简单易懂教程

    **Ajax（Asynchronous JavaScript and XML）...通过学习提供的"Ajax基础教程.pdf"，可以深入理解这一技术，并借助"[说明].txt"解决学习中遇到的问题，而"幸运林 一个程序员的随笔.url"则可能提供更多的编程心得和技巧。

    AJAX入门实例-简单易懂

    在这个实例中，我们可能会看到一个简单的C#后台处理程序，它接收并处理来自AJAX请求的数据。在ASP.NET中，这些处理程序通常是HttpHandler或HttpModule。它们处理HTTP请求，执行业务逻辑，然后返回JSON或XML格式的...

    Ajax程序开发经典实例教程.zip

    本教程“Ajax程序开发经典实例教程”旨在帮助开发者深入理解和掌握Ajax技术，通过实例学习，使学习过程更加直观和易懂。 Ajax的核心在于创建XMLHttpRequest对象，它是JavaScript内置的对象，用于在后台与服务器进行...

    ajax实例教程

    **Ajax 实例教程** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使得网页实现异步更新。这种技术可以让网页更加...

    ajax 网页特效 实例教程

    **Ajax（Asynchronous JavaScript and XML）网页特效实例教程** Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。这种技术的运用极大地提升了用户体验，因为它允许网页在后台与服务器进行数据...

    ajax简单示例（易懂易上手）

    **二、Ajax简单示例** 以下是一个简单的Ajax GET请求示例： ```javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'AjaxHelloWorld.json', true); xhr.setRequestHeader('Content-type', 'application/...

    asp.net ajax简单应用实例

    在这个"asp.net ajax简单应用实例"中，我们将探讨如何利用ASP.NET AJAX实现一个功能：当用户在下拉框中选择不同的选项时，页面上的某个Label控件的值会相应改变，而无需整个页面重新加载。 首先，`Default.aspx`是...

    Ajax 操作实例 ASP.NET实例

    在这个实例中，我们将深入探讨如何将Ajax与GridView和UpdatePanel结合使用。 GridView是ASP.NET中一个强大的数据绑定控件，用于显示和编辑表格数据。在传统的Web应用中，当用户对GridView中的数据进行操作（如编辑...

    ajax+json实例

    **Ajax+JSON 实例详解** 在现代Web开发中，AJAX（Asynchronous JavaScript and XML）技术已经成为提升用户体验的重要工具，它允许网页在不刷新整个页面的情况下与服务器进行数据交互。结合JSON（JavaScript Object ...

    ajax异步调用实例

    ajax异步调用实例

    AJAX简易教程及实例

    **AJAX简易教程及实例详解** AJAX（Asynchronous JavaScript and XML）是一种在不刷新整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新，提升了用户体验。...

    Ajax精短实例教程

    **Ajax 精短实例教程** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新。本教程将重点介绍...

    ajax实例实例实例

    【Ajax 实例详解】 Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它的核心在于JavaScript，通过创建XMLHttpRequest对象，实现后台与服务器的异步数据交换，...

    AJAX简单实例(.net)

    下面是一个简单的.NET AJAX实例： 1. 首先，在.aspx页面上添加ScriptManager和UpdatePanel： ```html &lt;asp:ScriptManager ID="ScriptManager1" runat="server"&gt;&lt;/asp:ScriptManager&gt; ...

    AJAX入门实例教程

    **AJAX 入门实例教程** AJAX（Asynchronous JavaScript and XML）是一种在不刷新整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，实现了网页的异步更新，极大地提升了用户体验。...

    完整C#ajax简单实现实例

    在这个"完整C# Ajax简单实现实例"中，我们将会探讨如何使用C#后端配合Ajax前端来实现这一功能。 首先，让我们理解C#在Ajax中的作用。在ASP.NET框架中，C#是常用的服务器端编程语言，用于处理业务逻辑和数据库交互。...

    Ajax经典实例大全

    Ajax经典实例大全 Ajax经典实例大全 Ajax经典实例大全 Ajax经典实例大全 Ajax经典实例大全 Ajax经典实例大全 Ajax经典实例大全 Ajax经典实例大全 Ajax经典实例大全 Ajax经典实例大全 Ajax经典实例大全 Ajax经典实例...

Magicbox
Global site tag (gtag.js) - Google Analytics