Ajax例子大全整合版.doc

Ajax例子大全整合版例子一1. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13.Insert title here 14. 15. 16. 17.var reg = /da-zA-Zw.2,30da-zA-Z$/; 18.var regEmail = /a-zA-Zdw_-2,14a-zA-Zda-zA-Zd3,5(.a-zA-Z3|.a-zA-Z2|.a-zA-Z3.a-zA-Z2)$/; 19.newUserValidate(loginUName,loginUPwd,loginUPwdAgain,loginEmail) 20. 21. var loginUNameloginUName=loginUName.value; 22. var loginUPwdloginUPwd =loginUPwd.value; 23. var loginUPwdAgainloginUPwdAgain = loginUPwdAgain.value; 24. var loginEmailloginEmail = loginEmail.value; 25. 26. if(loginUPwd = loginUPwdAgain) 27. 28. alert(一致); 29. 30. else 31. 32. slert(两次密码输入的不一致); 33. return false; 34. 35. 36. if(reg.test(loginUName) & reg.test(loginUPwd) 37. 38. 39. 40. else 41. 42. alert(用户名和密码只能是a-z、A-Z、0-9、下划线的字符); 43. return false; 44. 45. 46. if(regEmail.test(loginEmail) 47. 48. alert(正确); 49. 50. else 51. 52. alert(Email输入不正确); 53. return false; 54. 55. 56. 57. 58. 59. var syj=; 60. /发送ajax请求的方法 61. syj.Ajax=(url,obj) 62. var httpRequest; 63. if (ActiveXObject)tryhttpRequest = new ActiveXObject(Microsoft.XMLHTTP);catch (e)tryhttpRequest = new ActiveXObject(Msxml2.XMLHTTP);catch (e) 64. if (!httpRequest)alert(不能创建XMLHTTP实例);obj.onComplete(); 65. httpRequest.onreadystatechange = ()if (httpRequest.readyState = 4)objonComplete(httpRequest); 66. if(url.indexOf(machineDate)=-1) url+=(url.indexOf(?)=-1?:&)+(machineDate=+new Date().getTime(); 67. url+=(url.indexOf(?)=-1?:&)+obj.parameters; 68. if(obj.asynchronous=true) httpRequest.open(obj.method, url); else httpRequest.open(obj.method, url,false); 69. httpRequest.send(null); 70. return httpRequest; 71. ; 72. test() 73. 74. var loginUName=forms0.loginUName.value;/获得用户名 75. 76. var url=test.jsp?loginUName=+encodeURI(loginUName);/传用户名 77. 78. var usernameMsg=getElementById(usernameMsg);/获得将要显示在jsp里的span标签的名字 79. 80. if(loginUName=) 81. usernameMsg.innerHTML= 请填写用户名;/用户名为空 82. return false;/用户名为空停止在这 83. else 84. usernameMsg.innerHTML= 正在登陆 85. 86. 87. 88. syj.Ajax(url, 89. method : GET, 90. parameters : s?wd=csdn, 91. asynchronous : true, 92. onFailure : (httpRequest) 93. alert(出错了!); 94. , 95. onComplete : (httpRequest) 96. if(httpRequest.status=200) 97. usernameMsg.innerHTML=httpRequest.responseText;/输出test.jsp里的值 98. 99. 100. 101. ); 102. 103. 104. 105. 106. 107. 108. 109. 110. 111. 112. 用户名 : 113. 114. 115. 116. 117. 密 码 : 118. 119. 120. 121. 重复密码: 122. 123. 124. 125. Email : 126. 127. 128. 129. 130. 131. 请输入验证码: 132. 133. 134. 135. 136. 137. 138. 139. 140. 141. 142. 143. 144. 145. 146. 147. 148. 149. 150. 151. Test.Jsp1. 3.% 4.request.setCharacterEncoding(utf-8); 5.response.setContentType(text/html); 6.response.setCharacterEncoding(utf-8); 7.String loginUName=request.getParameter(loginUName); 8. 9.if(loginUName.equals(tom) out.print( 用户名可用);/用户名可用 10.else 11.out.print( 用户名重复);/用户名重复 12. 13.% 例子二后台验证是WEB应用中使用非常广泛的一种应用形式,常用于验证用户登录后台数据校验等等.login.html 程序代码!-var xmlHttp ;function createXMLHttpRequest()if(window.ActiveXObject)xmlHttp = new ActiveXObject(Microsoft.XMLHTTP) ;else if(window.XMLHttpRequest)xmlHttp = new XMLHttpRequest() ;function checkUser()createXMLHttpRequest() ;var name = document.getElementById(username).value ;var password = document.getElementById(password).value ;var url = login_check.jsp?username=+name+&password=+password ;xmlHttp.open(GET,url,true) ;xmlHttp.onreadystatechange = showResult ;xmlHttp.send(null) ;function showResult()if(xmlHttp.readyState = 4)if(xmlHttp.status = 200)var result = xmlHttp.responseText;/在页面上显示返回的结果document.getElementById(checkResult).innerHTML=+result+ ;/-ajax用户名:密码:login_check.jsp程序代码ajax+name+ password-+password);if(name != null & password != null)if(name.equals(aja) & password.equals(ajax)out.write(恭喜你!此用户名可用);elseout.write(此用户名已被人占用) ;%例子三今天写了一个很简单的例子，当输入乘数和被乘数，单击“开始计算”按钮之后，乘数和被乘数被传送到Web服务器，经过类型转换和计算之后，结果以普通文本的方式返回并显示。其中：send_request()函数用来初始化XMLHttpRequest对象，并向Web服务器发起XMLHTTP请求;函数processRequest()则接受服务器返回的数据，并将这些数据解析后更新到页面相关区域，其作为XMLHttpRequest对象的回调函数使用；函数doCaculate响应按钮caculate的onClick事件，判断用户输入情况，并将目标url地址以参数的形式传送给函数send_request。calc.htmJava代码1. 2. 3. 4. Ajax例子5. 6. 7. /按钮“开始计算”响应函数，判断输入域情况后调用send_request函数。8. functiondoCaculate()9. varf=document.form1;10. if(f.number_1.value!=)&(f.number_2.value!=)11. document.getElementById(feedback).innerHTML=正在计算，请稍后.;12. send_request(process.jsp?number_1=+f.number_1.value+&number_2=+f.number_2.value);13. 14. elseif(f.number_1.value=)document.getElementById(feedback).innerHTML=乘数不能为空。;15. elseif(f.number_2.value=)document.getElementById(feedback).innerHTML=被乘数不能为空。;16. 17. varhttp_request=false;18. /向服务器发起XMLHTTP请求。19. functionsend_request(url)/初始化、指定处理函数、发送请求的函数20. http_request=false;21. /开始初始化XMLHttpRequest对象22. if(window.XMLHttpRequest)/Mozilla浏览器23. http_request=newXMLHttpRequest();24. if(http_request.overrideMimeType)/设置MiME类别25. http_request.overrideMimeType(text/xml);26. 27. 28. elseif(window.ActiveXObject)/IE浏览器29. try30. http_request=newActiveXObject(Msxml2.XMLHTTP);31. catch(e)32. try33. http_request=newActiveXObject(Microsoft.XMLHTTP);34. catch(e)35. 36. 37. if(!http_request)/异常，创建对象实例失败38. window.alert(不能创建XMLHttpRequest对象实例.);39. returnfalse;40. 41. http_request.onreadystatechange=processRequest;42. /确定发送请求的方式和URL以及是否同步执行下段代码43. http_request.open(GET,url,true);44. http_request.send(null);45. 46. /处理返回信息的函数47. functionprocessRequest()48. varf=document.form1;49. if(http_request.readyState=4)/判断对象状态50. if(http_request.status=200)/信息已经成功返回，开始处理信息51. varreturnStr=http_request.responseText;52. if(returnStr.indexOf(Error)=-1)53. f.result.value=returnStr;54. document.getElementById(feedback).innerHTML=;55. 56. else57. f.result.value=;58. document.getElementById(feedback).innerHTML=returnStr;59. 60. else/页面不正常61. alert(您所请求的页面有异常。);62. 63. 64. 65. 66. 67. 68. 69. 70. 71. 简单乘法计算72. 73. 74. 75. *76. 77. =78. 79. 80. 81. 82. 83. 84. 85. 86. 87. 88. 89. 90. 91. 92. process.jspJava代码1. 2. Ajax实现无刷新三联动下拉框1.html代码Ajax实现无刷新三联动下拉框/城市-functioncityResult()varcity=document.getElementById(DropDownList1);AjaxMethod.GetCityList(city.value,get_city_Result_CallBack);functionget_city_Result_CallBack(response)if(response.value!=null)/debugger;document.all(DropDownList2).length=0;vards=response.value;if(ds!=null&typeof(ds)=object&ds.Tables!=null)for(vari=0;ids.Tables0.Rows.length;i+)varname=ds.Tables0.Rowsi.city;varid=ds.Tables0.Rowsi.cityID;document.all(DropDownList2).options.add(newOption(name,id);return/市区-functionareaResult()vararea=document.getElementById(DropDownList2);AjaxMethod.GetAreaList(area.value,get_area_Result_CallBack);functionget_area_Result_CallBack(response)if(response.value!=null)document.all(DropDownList3).length=0;vards=response.value;if(ds!=null&typeof(ds)=object&ds.Tables!=null)for(vari=0;ids.Tables0.Rows.length;i+)varname=ds.Tables0.Rowsi.area;varid=ds.Tables0.Rowsi.areaID;document.all(DropDownList3).options.add(newOption(name,id);returnfunctiongetData()varprovince=document.getElementById(DropDownList1);varpindex=province.selectedIndex;varpValue=province.optionspindex.value;varpText=province.optionspindex.text;varcity=document.getElementById(DropDownList2);varcindex=city.selectedIndex;varcValue=city.optionscindex.value;varcText=city.optionscindex.text;vararea=document.getElementById(DropDownList3);varaindex=area.selectedIndex;varaValue=area.optionsaindex.value;varaText=area.optionsaindex.text;vartxt=document.getElementById(TextBox1);document.getElementById().innerText=省:+pValue+|+pText+市:+cValue+|+cText+区:+aValue+|+aText;省市城市市区2.cs代码usingSystem;usingSystem.Collections;usingSystem.ComponentModel;usingSystem.Data;usingSystem.Drawing;usingSystem.Web;usingSystem.Web.SessionState;usingSystem.Web.UI;usingSystem.Web.UI.WebControls;usingSystem.Web.UI.HtmlControls;namespaceAjaxTest/SummarydescriptionforWebForm1./publicclassWebForm1:System.Web.UI.PageprotectedSystem.Web.UI.WebControls.DropDownListDropDownList1;protectedSystem.Web.UI