ajax总结
来源：互联网 发布：vba提取网页数据 编辑：程序博客网 时间：2024/04/28 06:51
1、从 Web 表单中获取所有需要的参数；
2、建立要连接的 URL
3.设置服务器在完成后要运行的函数（回调函数）
4、打开到服务器的连接
5、进行相关连接设置，包括缓存清空设置、等
java servlet代码，传递数字：
java servlet代码 传递字符串：
java servlet代码 传递xml格式的字符串：
jsp代码，以及如何在异步请求时对div快进行处理：
java servlet代码：
jsp代码，以及如何对下拉列表进行处理：
2、建立要连接的 URL
3.设置服务器在完成后要运行的函数（回调函数）
4、打开到服务器的连接
5、进行相关连接设置，包括缓存清空设置、等
5、发送请求
javascript代码：
<script type="text/javascript"> //声明XMLHttpRequest对象 var xmlHttp; //异步请求验证用户注册账号是否可用 function checkUserName(){ //1、从 Web 表单中获取所有需要的参数 var userName=document.registerForm.user.value; if(userName.length<6){ alert("请填写用户名称"); return; } //2、建立要连接的 URL var url="checkNameServlet?userName="+userName; //我们使用get方法进行异步提交，故对可能存在中文数据进行编码 url=encodeURI(encodeURI(url)); //3.设置服务器在完成后要运行的函数 //a)创建XMLHttpRequest对象 xmlHttp = new XMLHttpRequest(); //b)设置回调函数:主要告诉服务器数据返回后应该怎么处理 xmlHttp.onreadystatechange=handler; //4、打开到服务器的连接 xmlHttp.open("get",url,true); xmlHttp.setRequestHeader("If-Modified-Since","0"); //5、发送请求 xmlHttp.send(null); } //声明回调函数 function handler(){ //就绪状态是 4 而且状态码是 200，就可以处理服务器的数据了，而且这些数据应该就是要求的数据 if(xmlHttp.readyState==4){ //响应已完成，可以访问服务器响应并使用它 if(xmlHttp.status==200){ var data=xmlHttp.responseText; var txtNameObj = document.registerForm.user; if(parseInt(data)==0){ txtNameObj.style.borderColor="green"; txtNameObj.style.color="black"; }else{ txtNameObj.style.borderColor="red"; txtNameObj.style.color="red"; } } } } //异步：post //异步请求验证用户注册账号是否可用 function initCheckCode(){ //2、建立要连接的 URL var url="checkCode"; //3.设置服务器在完成后要运行的函数 //a)创建XMLHttpRequest对象 xmlHttp = new XMLHttpRequest(); //b)设置回调函数:主要告诉服务器数据返回后应该怎么处理 xmlHttp.onreadystatechange=fillCode; //4、打开到服务器的连接 xmlHttp.open("post",url,true); xmlHttp.setRequestHeader("If-Modified-Since","0"); xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //5、发送请求 xmlHttp.send(null); } //回调函数 function fillCode(){ if(xmlHttp.readyState==4){ //响应已完成，可以访问服务器响应并使用它 if(xmlHttp.status==200){ var code = xmlHttp.responseText; //alert(code); document.getElementById("check_code").innerHTML=code; } } }//只有勾选已同意协议，才可以进行表单的提交 function agree(obj){ if(obj.checked==true){ document.getElementById("btn_smt").disabled=false; }else{ document.getElementById("btn_smt").disabled=true; } } //表单的onsubmit事件 function checkData(){ if(document.registerForm.pwd.value.length<6){ alert("password length less than 6"); return false; } return true; }</script>对应的网页的html的form表单：<form action="" method="post" name="registerForm" onsubmit="return checkData();"><dl><dt>用户名</dt><dd><input type="text" name="user" class="text" onblur="checkUserName();" /></dd></dl><dl><dt>密码</dt><dd><input type="password" name="pwd" class="text"/></dd></dl><dl><dt>确认密码</dt><dd><input type="password" name="repwd" class="text"/></dd></dl><dl><dt>邮箱</dt><dd><input type="text" name="email" class="text"/></dd></dl><dl><dt>验证码</dt><dd><input type="text" name="code" class="text" size="10" style="width:58px;"/> <span id="check_code" style="position:relative;top:-2px;width:120px;"></span> <a onclick="initCheckCode();" style="cursor:pointer;">看不清，换一张</a></dd></dl><dl><dt> </dt><dd><input type="submit" id="btn_smt" value="立即注册" class="submit" disabled="disabled"/><input type= "checkbox" onclick="agree(this);"/>阅读并同意<a href="" class="forget">服务协议</a></dd></dl></form>
java servlet代码，传递数字：
import java.io.IOException;import java.io.PrintWriter;import java.net.URLDecoder;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class CheckNameServlet extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {this.doPost(request, response);}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {String name=request.getParameter("userName");name=URLDecoder.decode(name,"UTF-8");int flag=0;//模拟查询数据库,判断用户名称是否已存在String nameList="jack,刘一手,xuebagou123";if(nameList.indexOf(name)!=-1){//用户名称已存在flag=1;}//异步处理后的返回：text/xmlresponse.setContentType("text/xml");PrintWriter out = response.getWriter();//输出给客户端请求的响应结果out.println(flag);out.flush();out.close();}}java servlet代码 传递字符串：
import java.io.IOException;import java.io.PrintWriter;import java.util.Random;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class CheckCode extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {this.doPost(request, response);}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("text/xml;charset=utf-8");PrintWriter out = response.getWriter();Random rd = new Random();char[] chs = new char[4];int num=-1,index=0;while(true){num = rd.nextInt(122-48+1)+48;if((num>=58&&num<=64)||(num>=91&&num<=96)){continue;}chs[index++]=(char)num;if(index>3){break;}}String code = new String(chs);request.getSession().setAttribute("check_code", code);out.println(code);out.flush();out.close();}}java servlet代码 传递xml格式的字符串：
import java.io.IOException;import java.io.PrintWriter;import java.util.List;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class SysManager extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {this.doPost(request, response);}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {int type=Integer.parseInt(request.getParameter("type"));List<Menu> datas=new MenuDao().queryMenu(type);request.setAttribute("parentMenus",datas);if(type==0){//同步请求request.getRequestDispatcher("menu.jsp").forward(request, response);}else{//异步请求response.setContentType("text/xml;charset=utf-8");PrintWriter out =response.getWriter();//把要返回的数据已xml格式发送给客户端StringBuffer buff = new StringBuffer();buff.append("<menus>");for(Menu me: datas){buff.append("<menu>").append("<id>").append(me.getId()).append("</id>").append("<title>").append(me.getTitle()).append("</title>").append("<url>").append(me.getUrl()).append("</url>").append("<pno>").append(me.getParentId()).append("</pno>") .append("</menu>");}buff.append("</menus>");//输出数据到客户端out.println(buff.toString());out.flush();out.close();}}}/* * xml格式:<menus> <menu> <id></id> <title></title> <url></url> <pno></pno> </menu></menus> */jsp代码，以及如何在异步请求时对div快进行处理：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>menu.jsp</title> <script type="text/javascript"> var xmlHttp=new XMLHttpRequest(); function showMenu(childMenuDivNo){ //设置请求的url var url="sysManager?type="+childMenuDivNo; //设置回调函数 xmlHttp.onreadystatechange=handler; xmlHttp.open("get",url,true); xmlHttp.send(null); } //回调函数 function handler(){ if(xmlHttp.readyState==4){ if(xmlHttp.status==200){ //alert(xmlHttp.responseText); var xmldoc = xmlHttp.responseXML; //alert(xmldoc); var titleArray = xmldoc.getElementsByTagName("title"); var content="<ul style='list-style-type:none;'>"; for(var i=0;i<titleArray.length;i++){ //alert(titleArray[i].firstChild.data); content+="<li>"+titleArray[i].firstChild.nodeValue+"</li>"; } content+="</ul>"; //alert(content); //显示子菜单div var pno= xmldoc.getElementsByTagName("pno")[0].firstChild.nodeValue; var childMenuDiv=document.getElementById("menu_"+pno); childMenuDiv.innerHTML=content; if(childMenuDiv.style.display=="block"){ childMenuDiv.style.display="none"; }else{ childMenuDiv.style.display="block"; } } } } </script> </head> <body> <c:forEach items="${requestScope.parentMenus}" var="menu"> <label onclick="showMenu('${menu.id }');">${menu.title }</label> <div id="menu_${menu.id }" style="display:none;width:150px;"> </div><br/> </c:forEach> </body></html> java servlet代码：
import java.io.IOException;import java.io.PrintWriter;import java.sql.Connection;import java.sql.PreparedStatement;import java.sql.ResultSet;import java.sql.SQLException;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import com.xiaogang.demo02.DBConnection;public class FillStudent extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {this.doPost(request, response);}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { request.setCharacterEncoding("utf-8"); String classNo = request.getParameter("classno"); Connection con = DBConnection.getDbcon(); String sql="select * from t_student where classno=?"; PreparedStatement pst; StringBuffer buff = new StringBuffer();try {pst = con.prepareStatement(sql);pst.setString(1, classNo);ResultSet rs = pst.executeQuery();buff.append("<students>");while(rs.next()){buff.append("<student>").append("<no>").append(rs.getInt(1)).append("</no>").append("<name>").append(rs.getString(2)).append("</name>").append("<cno>").append(rs.getString(3)).append("</cno>").append("</student>");}buff.append("</students>");rs.close();pst.close();} catch (SQLException e) {e.printStackTrace();}DBConnection.closeDbcon(con);response.setContentType("text/xml;charset=utf-8");PrintWriter pw = response.getWriter();pw.println(buff.toString());pw.flush();pw.close();}}/*<students> <student> <no></no> <name><name> <cno></con> </student></students> */jsp代码，以及如何对下拉列表进行处理：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>My JSP 'selectCacade.jsp' starting page</title> <script type="text/javascript"> var xmlHttp = new XMLHttpRequest(); function fillStudentSel(selObj){ var selVal=selObj.value; if(selVal==-1){ document.getElementById("stu_sel").length=1; return; } //发送异步请求：查询选择班级的所有学生信息 var url = "fillStudent"; xmlHttp.open("post",url,true); xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); var param ="classno="+selVal; xmlHttp.onreadystatechange=fillStudents; xmlHttp.send(param); } function fillStudents(){ if(xmlHttp.readyState==4){ if(xmlHttp.status==200){ //alert(xmlHttp.responseText); operatorSel(xmlHttp.responseXML); } } } //动态创建和添加option选项对象 function operatorSel(xmldoc){ var noList = xmldoc.getElementsByTagName("no"); var nameList = xmldoc.getElementsByTagName("name"); document.getElementById("stu_sel").length=1; for(var i=0;i<noList.length;i++){ //创建<option>元素 var optionObj=document.createElement("option"); optionObj.value=noList[i].firstChild.data; optionObj.text=nameList[i].firstChild.data; //把option标签追加的下拉列表中 document.getElementById("stu_sel").appendChild(optionObj); } } </script> </head> <body> 班级: <select name="classroom" onchange="fillStudentSel(this);"> <option value="-1">--请选择--</option> <option value="J160501">J160501</option> <option value="J150501">J150501</option> <option value="J150402">J150402</option> </select> 学生: <select id="stu_sel" name="student"> <option>--请选择--</option> </select> <br> </body></html> 0 0
- 【Ajax】Ajax总结
- Ajax总结
- Ajax 总结
- AJAX总结
- ajax总结
- AJAX总结
- Ajax总结
- AJax总结
- Ajax总结
- Ajax总结
- Ajax总结
- ajax总结
- Ajax总结
- Ajax总结
- AJAX总结
- Ajax总结
- ajax总结
- Ajax总结
- 设计模式之单例模式
- 在ubuntu中配置java环境并运行java程序
- 在Service中弹出对话框
- 异常类型
- Nginx源码剖析
- ajax总结
- Android 开发中的日常积累
- Zero Defects 迷思
- hdu 3065 病毒侵袭持续中（AC自动机）
- Learning Python 008 正则表达式-003 search()方法
- iOS 如何实现顶部图片的在滑动时的伸缩
- Ubuntu下多个版本OpenCV管理（Multiple Opencv version）
- 跟我一起学习MySQL技术内幕（第五版）：（第四章学习日记1）
- JavaScript中的一些常用事件
