Ajax简单易懂实例教程
日期：2014-05-16 浏览次数：20690 次
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;">
????????????
??????????? </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
