- 什么是AJAX：
客户端（特指PC浏览器）与服务器，可以在【不必刷新整个浏览器】的情况下，与服务器进行异步通讯的技术，AJAX是一个【局部刷新】的【异步】通讯技术。
- Ajax实例：
1.无需刷新整个Web页面显示服务器响应的当前时间
//浏览器端 //1.Ajax的创建 <script type="text/javascript"> //创建AJAX异步对象 function createAJAX(){ var ajax = null; try{ //如果IE5=IE12的话 ajax = new ActiveXObject("microsoft.xmlhttp"); }catch(e1){ try{ //如果是非IE的话 ajax = new XMLHttpRequest(); }catch(e2){ alert("你的浏览器中不支持异步对象，请换浏览器"); } } return ajax; } </script> <script type="text/javascript"> document.getElementById("buttonID").onclick = function(){ //NO1)创建AJAX异步对象 var ajax = createAJAX(); //NO2)准备发送请求 var method = "GET"; //在后面加上时间毫秒 主要是为了兼容老版IE var url = "${pageContext.request.contextPath}/AjaxTimeServlet?time=" + new Date().getTime(); ajax.open(method,url); //NO3)真正发送请求体的数据到服务器，如果请求体中无数据的话，就用null表示 ajax.send(null); //------Ajax请求已经发送，等待后台处理 返回xml格式返回数据---------- //响应正确 并且完全响应，进行回调处理 ajax.onreadystatechange = function(){ //如果状态码为4的话 if(ajax.readyState == 4){ //如果响应码为200的话 if(ajax.status == 200){ //NO5)从AJAX异步对象中获取服务器响应的HTML数据 var nowStr = ajax.responseText; //NO6)将结果按照DOM规则，动态添加到web页面指定的标签中 var spanElement = document.getElementById("time"); spanElement.innerHTML = nowStr; } } } } </script> //后台服务端处理代码： /** * 无需刷新整个Web页面显示服务器响应的当前时间 * @author AdminTC */ public class AjaxTimeServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); String nowStr = sdf.format(new Date()); //以流的方式将结果响应到AJAX异步对象中 response.setContentType("text/html;charset=UTF-8"); PrintWriter pw = response.getWriter(); pw.write(nowStr); pw.flush(); pw.close(); } }2.Ajax用户名校验提示（文字提示）
//客户端页面 <html> <head> <title>基于HTML，以GET或POST方式，检查注册用户名是否在数据库中已存在</title> </head> <body> <form> 用户名[GET]：<input id="usernameID" type="text" name="username" maxlength="4"/> 光标移出后，立即检查结果 </form> <hr/> <span id="resID"></span> <script type="text/javascript"> //创建AJAX异步对象，即XMLHttpRequest function createAJAX(){ var ajax = null; try{ ajax = new ActiveXObject("microsoft.xmlhttp"); }catch(e1){ try{ ajax = new XMLHttpRequest(); }catch(e2){ alert("你的浏览器不支持ajax，请更换浏览器"); } } return ajax; } </script> <script type="text/javascript"> //定位文本框，同时提供焦点失去事件 document.getElementById("usernameID").onblur = function(){ //获取文本框中输入的值 var username = this.value; //如果用户没有填内容 if(username.length == 0){ //提示 document.getElementById("resID").innerHTML = "用户名必填"; }else{ //对汉字进行UTF-8(U8)的编码 username = encodeURI(username); //NO1) var ajax = createAJAX(); //NO2) var method = "GET"; //GET请求数据直接拼接在请求的URL后 var url = "${pageContext.request.contextPath}/UserServlet?time="+new Date().getTime()+"&username=" + username; ajax.open(method,url); //NO3) ajax.send(null); //--------------------------------------------------------等待 //NO4) ajax.onreadystatechange = function(){ if(ajax.readyState == 4){ if(ajax.status == 200){ //NO5) var tip = ajax.responseText; //NO6) document.getElementById("resID").innerHTML = tip; } } } } } </script> </body> </html> //服务端代码： /** * 基于HTML，以GET或POST方式，检查注册用户名是否在数据库中已存在 * @author AdminTC */ public class UserServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { String username = request.getParameter("username"); byte[] buf = username.getBytes("ISO8859-1"); username = new String(buf,"UTF-8"); System.out.println("username=" + username); String tip = "<font color='green'>可以注册</font>"; if("杰克".equals(username)){ tip = "<font color='red'>该用户已存在</font>"; } response.setContentType("text/html;charset=UTF-8"); PrintWriter pw = response.getWriter(); pw.write(tip); pw.flush(); pw.close(); } }总结：上述两种异步都是通过GET方式请求，请求数据内容放在URL后，GET请求方式需要对编码（中文）进行相应处理。
基于POST提交方式的Ajax请求：
1.检查注册用户名是否在数据库中已存在（图片提示）
//客户端 <html> <head> <title>基于HTML，以GET或POST方式，检查注册用户名是否在数据库中已存在</title> <!-- 引入外部js文本 --> <script type="text/javascript" src="js/ajax.js"></script> </head> <body> 用户名[POST]：<input id="usernameID" type="text" maxlength="4"/> <span id="resID"> <!-- <img src="tip变量" width="12px" height="12px"/> --> </span> <hr/> <script type="text/javascript"> document.getElementById("usernameID").onblur = function(){ var username = this.value;//杰克 //NO1) //创建对象引自"js/ajax.js" var ajax = createAJAX(); //NO2) var method = "POST"; var url = "${pageContext.request.contextPath}/UserServlet?time="+new Date().getTime(); ajax.open(method,url); //设置AJAX请求头为POST，他会将请求体中的汉字自动进行UTF-8的编码 ajax.setRequestHeader("content-type","application/x-www-form-urlencoded"); //NO3) var content = "username=" + username; ajax.send(content); //===========================================等待 //NO4) ajax.onreadystatechange = function(){ if(ajax.readyState == 4){ if(ajax.status == 200){ //NO5) var tip = ajax.responseText; //NO6) //创建img标签 var imgElement = document.createElement("img"); //设置img标签的src/width/height的属性值 imgElement.src = tip; imgElement.style.width = "12px"; imgElement.style.height = "12px"; //定位span标签 var spanElement = document.getElementById("resID"); //清空span标签中的内容 spanElement.innerHTML = ""; //将img标签加入到span标签中 spanElement.appendChild(imgElement); } } } } </script> <!-- <form action="" method="" enctype="application/x-www-form-urlencoded"></form> --> </body> </html> //后台处理代码 /** * 基于HTML，以GET或POST方式，检查注册用户名是否在数据库中已存在 * @author AdminTC */ public class UserServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { doPost(request,response); } public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); String username = request.getParameter("username"); System.out.println("username=" + username); String tip = "images/MsgSent.gif"; if("杰克".equals(username)){ tip = "images/MsgError.gif"; } response.setContentType("text/html;charset=UTF-8"); PrintWriter pw = response.getWriter(); pw.write(tip); pw.flush(); pw.close(); } }2.基于XML，以POST方式，完成省份-城市二级下拉联动
//客户端 <html> <head> <title>基于XML，以POST方式，完成省份-城市二级下拉联动</title> <script type="text/javascript" src="js/ajax.js"></script> </head> <body> <select id="provinceID" style="width:111px"> <option>选择省份</option> <option>湖南</option> <option>广东</option> </select> <select id="cityID" style="width:111px"> <option>选择城市</option> </select> <script type="text/javascript"> //定位省份下拉框，同时添加内容改变事件 document.getElementById("provinceID").onchange = function(){ //清空城市下拉框中的内容，除第一项外 var cityElement = document.getElementById("cityID"); //主要每次append城市节点时会直接往后追加，所以每次点击省份后 先清除再放 cityElement.options.length = 1; //获取选中option标签的索引号，从0开始 var index = this.selectedIndex; //定位选中的option标签 var optionElement = this[index]; //获取选中的option标签中的内容，即省份 var province = optionElement.innerHTML; //如果选中的内容不是"选择省份" if("选择省份" != province){ //NO1) var ajax = createAJAX(); //NO2) var method = "POST"; var url = "${pageContext.request.contextPath}/ProvinceCityServlet?time="+new Date().getTime(); ajax.open(method,url); //设置AJAX请求头 ajax.setRequestHeader("content-type","application/x-www-form-urlencoded"); //NO3) var content = "province=" + province; ajax.send(content); //---------------------------------等待 //NO4) ajax.onreadystatechange = function(){ if(ajax.readyState == 4){ if(ajax.status == 200){ //NO5)从AJAX异步对象中获取服务器响应的xml文档 var xmlDocument = ajax.responseXML; //NO6)按照DOM规则，解析XML文档 var cityElementArray = xmlDocument.getElementsByTagName("city"); var size = cityElementArray.length; for(var i=0;i<size;i++){ //innerHTML只能用在html/jsp中，不能用在xml中，xml解析应当是获取每一个节点值 var city = cityElementArray[i].firstChild.nodeValue; //<option></option> var optionElement = document.createElement("option"); //<option>广州</option> optionElement.innerHTML = city; //<select><option>广州</option></select> //每一个节点值 放入城市下拉框中 cityElement.appendChild(optionElement); } } } } } } </script> </body> </html> 后台处理代码： /** * 基于XML，以POST方式，完成省份-城市二级下拉联动 * @author AdminTC */ public class ProvinceCityServlet extends HttpServlet { public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); String province = request.getParameter("province"); //通知AJAX异步对象，服务器响应的数据为xml格式的 response.setContentType("text/xml;charset=UTF-8"); //获取字符输出流 PrintWriter pw = response.getWriter(); pw.write("<?xml version='1.0' encoding='UTF-8'?>"); pw.write("<root>"); if("广东".equals(province)){ pw.write("<city>广州</city>"); pw.write("<city>深圳</city>"); pw.write("<city>中山</city>"); }else if("湖南".equals(province)){ pw.write("<city>长沙</city>"); pw.write("<city>株洲</city>"); pw.write("<city>湘潭</city>"); pw.write("<city>岳阳</city>"); } pw.write("</root>"); //组装成List<String> 的形式 pw.flush(); pw.close(); } }总结：POST提交方式，需要在 ajax.open(method,url) 和 ajax.send(content)中间设置请求头，将请求体中的汉子自动进行UTF-8的编码转换。
设置内容为：ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
;
72
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
