Dojo的Ajax简单应用

Dojo的Ajax简单应用2010-07-08zolly代码如下：
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>