I'll be back!

  Focus on BPM, celebrate PegaRULES Process Commander (PRPC)
posts - 76, comments - 161, trackbacks - 0, articles - 2
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

Dojo 的 Ajax 简单应用

Posted on 2006-10-24 18:56 zolly 阅读(4649) 评论(0)  编辑  收藏
在同一个页面插入数据到数据库,成功后返回成功插入的结果,相关文件PRPC.htm,SerDojo.java,DataDAO.java。
Dojo开发包:dojo-0.3.1-ajax.zip.

相关网站:http://www.blogjava.net/burnet/archive/2006/06/27/55339.html
http://manual.dojotoolkit.org/(官方)
http://manual.dojotoolkit.org/WikiHome/DojoDotBook (Dojo Book)
http://ajaxcn.org/forum/posts/list/127.page (Ajax 中文站,Dojo 文档列表)

代码如下:
PRPC.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>PRPC Test</title>
<script type="text/javascript" src="js/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require(
"dojo.io.*");

function mySubmitProfile() {
    dojo.byId('btnAddProfile').disabled 
= 'disabled';
    
    dojo.io.bind (
{
        url: 'SerDojo
?flag=profile',
        handler: callBack,
        formNode: dojo.byId('main')
    }
);
}


function mySubmitCountry() {
    dojo.byId('btnAddCountry').disabled 
= 'disabled';

    dojo.io.bind (
{
        url: 'SerDojo
?flag=country',
        handler: callBack,
        formNode: dojo.byId('main')
    }
);
}


function callBack(type, data, evt) {
    
if (data == 'profileYES') {
        insertStrProfile();
        dojo.byId('stateFlag').innerHTML 
= data;
        dojo.byId('btnAddProfile').disabled 
= '';
    }
 else if (data == 'countryYES') {
        insertStrCountry();
        dojo.byId('stateFlag').innerHTML 
= data;
        dojo.byId('btnAddCountry').disabled 
= '';
    }

}


function insertStrProfile() {
    
var frm = dojo.byId('main');
    
var name = frm.name.value;
    
var sex;
    
var radio = document.getElementsByName('sex');
    
for (var i = 0; i < radio.length; i ++{
        
if(frm.sex[i].checked) {
            sex 
= radio[i].value;
        }

    }

    
var age = frm.age.value;
    
var address = frm.address.value;
    
    
var txtName = document.createTextNode(name);
    
var txtSex = document.createTextNode(sex);
    
var txtAge = document.createTextNode(age);
    
var txtAddress = document.createTextNode(address);
    
    
var tdName = document.createElement("td");
    
var tdSex = document.createElement("td");
    
var tdAge = document.createElement("td");
    
var tdAddress = document.createElement("td");
    
    
var tr = document.createElement("tr");

    tdName.appendChild(txtName);
    tdSex.appendChild(txtSex);
    tdAge.appendChild(txtAge);
    tdAddress.appendChild(txtAddress);
    
    tr.appendChild(tdName);
    tr.appendChild(tdSex);
    tr.appendChild(tdAge);
    tr.appendChild(tdAddress);

    
var parNode = document.getElementById("tbProfile");
    parNode.appendChild(tr);
}


function insertStrCountry() {
    
var frm = dojo.byId('main');
    
var country = frm.country.value;
    
var company = frm.company.value;
    
var website = frm.website.value;

    
var txtCountry = document.createTextNode(country);
    
var txtCompany = document.createTextNode(company);
    
var txtWebsite = document.createTextNode(website);

    
var tdCountry = document.createElement("td");
    
var tdCompany = document.createElement("td");
    
var tdWebsite = document.createElement("td");

    
var tr = document.createElement("tr");

    tdCompany.appendChild(txtCompany);
    tdCountry.appendChild(txtCountry);
    tdWebsite.appendChild(txtWebsite);

    tr.appendChild(tdCompany);
    tr.appendChild(tdCountry);
    tr.appendChild(tdWebsite);

    
var parNode = document.getElementById("tbCountry");
    parNode.appendChild(tr);
}

</script>
</head>

<body>
<form id="main">
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" style="border: 1px dashed #000000;">
  
<tr>
    
<td valign="top">
      
<table width="100%" border="0" cellspacing="0" cellpadding="3">
        
<tr>
          
<td><table width="80%" border="1" align="center" cellpadding="1" cellspacing="1">
           
<tbody id="tbProfile">
            
<tr>
              
<td>Name</td>
              
<td>Age</td>
              
<td>Sex</td>
              
<td>Address</td>
            
</tr>
           
</tbody>
          
</table></td>
        
</tr>
        
<tr>
          
<td><table width="50%" border="0" align="center" cellpadding="2" cellspacing="1" bgcolor="#CCCCCC">
            
<tr>
              
<td width="29%" bgcolor="#EBEBEB">Name:</td>
              
<td width="71%" bgcolor="#EBEBEB"><input type="text" name="name" /></td>
            
</tr>
            
<tr>
              
<td bgcolor="#EBEBEB">Age:</td>
              
<td bgcolor="#EBEBEB"><input type="text" name="age" /></td>
            
</tr>
            
<tr>
              
<td bgcolor="#EBEBEB">Sex:</td>
              
<td bgcolor="#EBEBEB"><input type="radio" name="sex" checked="checked" value="Male" />
                Male
                  
<input type="radio" name="sex" value="Female" />
                  Female
</td>
            
</tr>
            
<tr>
              
<td bgcolor="#EBEBEB">Address:</td>
              
<td bgcolor="#EBEBEB"><input type="text" name="address" /></td>
            
</tr>
            
<tr>
              
<td colspan="2" bgcolor="#EBEBEB"><div align="right">
                
<input type="button" name="btnAddProfile" value="AddNew" onclick="mySubmitProfile()" />
              
</div></td>
              
</tr>
          
</table></td>
        
</tr>
      
</table>
    
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  
<tr>
    
<td height="20"><font color="#FF0000"><div id="stateFlag">State</div></font></td>
  
</tr>
</table>

    
<hr width="90%" size="1" noshade="noshade" />
    
</td>
  
</tr>
  
<tr>
    
<td valign="top">
      
<table width="100%" border="0" cellspacing="0" cellpadding="3">
        
<tr>
          
<td><table width="80%" border="1" align="center" cellpadding="1" cellspacing="1">
              
<tbody id="tbCountry">
            
<tr>
              
<td>Company</td>
              
<td>Country</td>
              
<td>WebSite</td>
            
</tr>
            
</tbody>
          
</table></td>
        
</tr>
        
<tr>
          
<td><table width="50%" border="0" align="center" cellpadding="2" cellspacing="1" bgcolor="#CCCCCC">
            
<tr>
              
<td width="29%" bgcolor="#EBEBEB">Company:</td>
              
<td width="71%" bgcolor="#EBEBEB"><input type="text" name="company" /></td>
            
</tr>
            
<tr>
              
<td bgcolor="#EBEBEB">Country:</td>
              
<td bgcolor="#EBEBEB"><input type="text" name="country" /></td>
            
</tr>
            
<tr>
              
<td bgcolor="#EBEBEB">WebSite:</td>
              
<td bgcolor="#EBEBEB"><input type="text" name="website" /></td>
            
</tr>

            
<tr>
              
<td colspan="2" bgcolor="#EBEBEB"><div align="right">
                  
<input type="button" name="btnAddCountry" value="AddNew" onclick="mySubmitCountry()" />
              
</div></td>
            
</tr>
          
</table></td>
          
<tr>
              
<td align="right">
                  
<input type="button" value="NEXT" onclick="javascript:window.open('dojoBind.htm','_self')" />
              
</td>
          
</tr>
        
</tr>
      
</table>
    
</td>
  
</tr>
</table>
</form>
</body>
</html>

SerDojo.java
package servlet;

import DAO.DataDAO;

import java.io.IOException;
import java.io.PrintWriter;

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


/**
 * Servlet implementation class for Servlet: SerDojo
 *
 
*/

public class SerDojo extends javax.servlet.http.HttpServlet
    
implements javax.servlet.Servlet {
    
/* (non-Java-doc)
         * @see javax.servlet.http.HttpServlet#HttpServlet()
         
*/

    
public SerDojo() {
        
super();
    }


    
/* (non-Java-doc)
     * @see javax.servlet.http.HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     
*/

    
protected void doGet(HttpServletRequest request,
        HttpServletResponse response) 
throws ServletException, IOException {
        
// TODO Auto-generated method stub
        PrintWriter out = response.getWriter();
        String strFlag 
= request.getParameter("flag");

        String strName 
= request.getParameter("name");
        String strAge 
= request.getParameter("age");
        String strSex 
= request.getParameter("sex");
        String strAddress 
= request.getParameter("address");

        String strCompany 
= request.getParameter("company");
        String strCountry 
= request.getParameter("country");
        String strWebSite 
= request.getParameter("website");

        DataDAO dao 
= new DataDAO();
        
boolean isSuccess = false;

        
if (strFlag.equals("profile")) {
            
try {
                isSuccess 
= dao.insertProfile(strName, strAge, strSex,
                        strAddress);
            }
 catch (Exception e) {
                e.printStackTrace();
            }


            
if (isSuccess) {
                out.print(
"profileYES");
            }
 else {
                out.print(
"profileNO");
            }

        }
 else if (strFlag.equals("country")) {
            
try {
                isSuccess 
= dao.insertCompany(strCompany, strCountry, strWebSite);
            }
 catch (Exception e) {
                e.printStackTrace();
            }


            
if (isSuccess) {
                out.print(
"countryYES");
            }
 else {
                out.print(
"countryNO");
            }

        }

    }


    
/* (non-Java-doc)
     * @see javax.servlet.http.HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     
*/

    
protected void doPost(HttpServletRequest request,
        HttpServletResponse response) 
throws ServletException, IOException {
        
// TODO Auto-generated method stub
        doGet(request, response);
    }

}

DataDAO.java
package DAO;

import java.sql.Connection;
import java.sql.Statement;


public class DataDAO {
    
public boolean insertCompany(String djCompany, String djCountry,
        String djWebSite) 
throws Exception {
        
boolean success = false;
        String sql 
= "insert into Dojo_Table_Company  ";
        sql 
+= ("values('" + djCompany + "','" + djCountry + "','" + djWebSite +
        
"')");
        
        
//ResultSet rs=null;
        Connection con = null;
        Statement stat 
= null;

        
try {
            con 
= Login.getConnection();
            stat 
= con.createStatement();
            stat.executeUpdate(sql);
            success 
= true;
        }
 catch (Exception e) {
            
//e.printStackTrace();
            throw e;
        }

        
finally {
            Login.closeStatement(stat);
            Login.closeConnection(con);
        }


        
return success;
    }


    
public boolean insertProfile(String djName, String djSex, String djAge,
        String djAddress) 
throws Exception {
        
boolean success = false;
        String sql 
= "insert into Dojo_Table_Profile  ";
        sql 
+= ("values('" + djName + "','" + djSex + "','" + djAge + "','" +
        djAddress 
+ "')");

        
//ResultSet rs=null;
        Connection con = null;
        Statement stat 
= null;

        
try {
            con 
= Login.getConnection();
            stat 
= con.createStatement();
            stat.executeUpdate(sql);
            success 
= true;
        }
 catch (Exception e) {
            
//e.printStackTrace();
            throw e;
        }

        
finally {
            Login.closeStatement(stat);
            Login.closeConnection(con);
        }


        
return success;
    }

}


关于dojo.io.bind的学习笔记

模块:dojo.io.IO

dojo.io.bind


处理请求取回需要的数据并处理

 

这个函数是AJAX中最为重要和有用的函数,dojo.io.bind这个类是用来处理客户端与服务器间通讯的,需要通讯的参数由对象dojo.io.Request所定义,具体通讯的方法则由另外一个对象Transport所提供。

 

因此,我们如果需要与服务器通讯,则应该定义一个Request对象,其中包括服务器地址及回调函数,例子中Requset都是以匿名对象方式定义的


虽然我们可以定义一个自己的Transport,但是显然不如直接利用现成的Transport方便。


Dojo里提供了一个同时兼容IE和Firefox的dojo.io.XMLHTTPTransport,但是这个对象位于dojo.io.BrowserIO,因此,一般require dojo.io.IO时,还应该require dojo.io.BrowserIO

 

Usage Example:

  dojo.io.bind({
    url: "http://localhost/test.html", //要请求的页面地址
    mimetype: "text/html", //请求的页面的类型,应该设置为与你请求页面类型对应的mimetype,默认为 "text/plain"
    method:"GET", //默认为"GET"
    sync: false, //默认为异步执行
    useCache: false, //默认为不使用页面缓存,注意这里的缓存并不是浏览器的缓存,而是Dojo自身所维护的页面缓存
    preventCache: false, //默认为启用浏览器缓存,否则将通过自动增加不同的参数来确保浏览器缓存失效
    timeoutSeconds: 3000,  //3秒后超时,如果为0则永不超时

    load: function(type, data, evt) { alert(data); }, //type should be "load", data is that we wanted
    error: function(type, error) { alert(error.message); }, //error is dojo.io.Error
    timeout: function(type) { alert("请求超时!"); }
  });


  你也可以用一个handle来处理所有的事件

 

  dojo.io.bind({
    url: "http://localhost/test.html", //要请求的页面地址
    mimetype: "text/html", //请求的页面的类型,应该设置为与你请求页面类型对应的mimetype
    timeoutSeconds: 3000,  //3秒后超时,如果为0则永不超时
    handle: function(type, data, evt){
      if(type == "load") { alert(data); } //data is that we wanted
      else if (type == "error") { alert(data.message); } //data is the error object
      else { ; } //other events maybe need handled
    }
  });
 
  如果没有在Request中指定所用的transport,则Dojo会自动的在已注册的transports中寻找能够处理这个Request的transport,如果不能找到,则返回指定的Request。下面是一个指定了transport的例子:


  dojo.io.bind({
    url: "http://localhost/test.html", //要请求的页面地址
    mimetype: "text/html", //请求的页面的类型,应该设置为与你请求页面类型对应的mimetype
    timeoutSeconds: 3000,  //3秒后超时,如果为0则永不超时
    transport: "XMLHTTPTransport",

    load: function(type, data, evt) { alert(data); }, //type should be "load", data is that we wanted
    error: function(type, error) { alert(error.message); }, //error is dojo.io.Error
    timeout: function(type) { alert("请求超时!"); }
  });


  你还可以利用bind来得到一个JavaScript所定义的对象(注意mimetype必须要定义为"text/javascript")

 

  testObj = dojo.io.bind({
    url: "http://localhost/test.js", //test.js里定义了一个对象
    mimetype: "text/javascript", //请求的页面的类型,应该设置为与你请求页面类型对应的mimetype
    timeoutSeconds: 3000,  //3秒后超时,如果为0则永不超时
    handle: function(type, data, evt){
      if(type == "load") { alert(data); } //data is a object or value
      else if (type == "error") { alert(data.message); } //data is the error object
      else { ; } //other events maybe need handled
    }
  });
 
  下面是一个Post的例子:
 
  dojo.io.bind({
    url: "http://localhost/test.aspx", //要提交的页面地址
    mimetype: "text/html", //请求的页面的类型,应该设置为与你请求页面类型对应的mimetype
    timeoutSeconds: 3000,  //3秒后超时,如果为0则永不超时
    method: "POST",
    formNode: dojo.byId("myForm"), //指定提交的Form名称

    load: function(type, data, evt) { alert(data); }, //type should be "load", data is that we wanted
    error: function(type, error) { alert(error.message); }, //error is dojo.io.Error
    timeout: function(type) { alert("请求超时!"); }
  });

 

  另一个Post的例子(without Form to post):


  dojo.io.bind({
    url: "http://localhost/test.aspx", //要提交的页面地址
    mimetype: "text/html", //请求的页面的类型,应该设置为与你请求页面类型对应的mimetype
    timeoutSeconds: 3000,  //3秒后超时,如果为0则永不超时
    method: "POST",
    content: {a: 1, b: 2}, //要提交的数据

    load: function(type, data, evt) { alert(data); }, //type should be "load", data is that we wanted
    error: function(type, error) { alert(error.message); }, //error is dojo.io.Error
    timeout: function(type) { alert("请求超时!"); }
  });


 

dojo.io.queueBind


  有时,我们需要一次发出多个网页请求,则应该使用dojo.io.queueBind,因为浏览器可能只允许同时发出有限个数的请求,如果是使用dojo.io.bind的话,则有可能会申请不到新的XMLHttp对象而导致出错。

  用法与dojo.io.bind是一样的。


 

dojo.io.argsFromMap


  用来把对象转换为URL的参数形式
 
Usage Example:


  dojo.io.argsFromMap({a:1,b:2,c:3}); //will return "c=3&b=2&a=1"
  dojo.io.argsFromMap({name:"名称",value:"值"},"utf"); //will return "value=%E5%80%BC&name=%E5%90%8D%E7%A7%B0", 有中文的话应该指定utf格式,否则dojo.string.encodeAscii返回的编码是很怪异的
  dojo.io.argsFromMap({a:1,b:2,c:3}, "utf", "c"); //will return "b=2&a=1&c=3",最后一个参数可以控制指定名称的值出现在最后
 

 

dojo.io.setIFrameSrc


  设置IFrame的Src
 
Usage Example:

 

  dojo.io.setIFrameSrc(dojo.byId("myFrame"), "http://localhost/test.htm"); //myFrame打开指定的网页
  dojo.io.setIFrameSrc(dojo.byId("myFrame"), "http://localhost/test.htm", true); //myFrame打开指定的网页,并覆盖浏览器的历史记录


 

TODO: 补充一个kwArgs的例子,我之前在网上看见过,可是现在无论如何也找不到相关的页面了,只好以后在举例了

 


模块:dojo.io.BrowserIO

 

基本上就提供了dojo.io.XMLHTTPTransport这个对象


XMLHTTPTransport一般能够满足我们的需求,但是其有几个限制:它不能传输文件,不能够成功执行跨域名的远程请求,并且不支持 file:// 这样的协议


因此,根据应用要求,我们可能会需要选用其它的transport: dojo.io.IframeTransport, dojo.io.repubsubTranport, dojo.io.ScriptSrcTransport, ShortBusTransport

 

dojo.io.IframeTransport,用法与xmlhttp是一样的,其优点就是可以跨域,不存在任何的安全问题
如果Request指定的mimetype是text或javascript,返回的内容应该是放在第一个textarea里的内容,如果指定的mimetype是html,则IFrame里的html则是需要的内容。因为浏览器兼容的原因,IframeTransport不能正确处理返回类型为XML的请求。

摘自:http://www.cnblogs.com/Icebird/archive/2006/08/07/dojo_study_6.html


只有注册用户登录后才能发表评论。


网站导航: