Ajax简述
一、AJAX
AJAX 是一个比较莫名的缩写单词：Asynchronous JavaScript + XML
AJAX包含以下五个部分：
- 基于标准的表示技术，使用XHTML与CSS
- 动态显示和交互技术，使用Document Object Model(文档对象模型)
- 数据互换和操作技术，使用XML与XSLT
- 异步数据获取技术，使用XMLHttpRequest
- 而JavaScript 将以上的一切都结合在一起
二、创建XMLHttpRequest对象
统一创建方法：
//创建XMLHttpRequest对象 function createXmlHttpRequest(){ if(window.XMLHttpRequest){//判断浏览器版本是不是IE7以上和其它浏览器 return new XMLHttpRequest(); }else if(window.ActiveXObject){//判断浏览器版本是不是IE5，IE6浏览器 return new ActiveXObject("Microsoft.XMLHTTP"); } }
工作原理
三、XMLHttpRequest方法
3.1、详细介绍
四、XMLHttpRequest属性
4.1、readyState属性
4.2、status属性
4.3、其它属性
五、发送get响应
六、Post方式
七、简单例子
servlet
package servlet; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class LoginServlet extends HttpServlet { private static final long serialVersionUID = 1L; public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=utf-8"); PrintWriter out = response.getWriter(); String uname=request.getParameter("uname"); boolean flag=false; if("accp".equalsIgnoreCase(uname)){ flag=true; out.println(flag); System.out.println(flag+" "+uname); }else{ out.println(flag); System.out.println(flag+" "+uname); } out.flush(); out.close(); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>用户注册</title> <script type="text/javascript"> //判断用户名 function checkuname(ouser){ //取用户名的值 var uname=ouser.value; //判断是否为空 if(!uname){ alert("用户名不能为空!"); //ouser.focus(); return false; } /* get方式 //创建发送请求的url var url="LoginServlet?uname="+uname; //接收返回的XMLHttpRequest对象创建对象 xmlHttpRequest=createXmlHttpRequest(); //设置回调函数 xmlHttpRequest.onreadystatechange=haoLeJiaoWo; //初始化xmlHttpRequest xmlHttpRequest.open("GET",url,true); //发送请求,因为是get方式，所以参数为null xmlHttpRequest.send(null); */ //post方式 //请求的url var url="LoginServlet"; //创建xmlHttpRequest对象 xmlHttpRequest=createXmlHttpRequest(); //创建回调函数 xmlHttpRequest.onreadystatechange=haoLeJiaoWo; //初始化 xmlHttpRequest.open("POST",url,true); //设置请求头类型 xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlHttpRequest.send("uname="+uname); } //回调函数 function haoLeJiaoWo(){ //表示数据接收完成，并正确返回 if(xmlHttpRequest.readstate=4 && xmlHttpRequest.status==200){ //接收服务器返回的值这里为文本 var result=xmlHttpRequest.responseText; //去掉字符串前后的空格 result=result.replace(/(^\s*)|(\s*$)/g,""); //判断值 if(result=="true"){ alert("用户已经存在"); return false; }else{ alert("用户可以使用"); return true; } } } //创建XMLHttpRequest对象 function createXmlHttpRequest(){ if(window.XMLHttpRequest){//判断浏览器版本是不是IE7以上和其它浏览器 return new XMLHttpRequest(); }else if(window.ActiveXObject){//判断浏览器版本是不是IE5，IE6浏览器 return new ActiveXObject("Microsoft.XMLHTTP"); } } </script> </head> <body> <form action="LoginServlet" method="get"> <table align="center"> <tr> <td> <p>用户账户: <input type="text" name="uname" onblur="checkuname(this);"/> </p> </td> </tr> <tr> <td> <p>用户密码: <input type="password" name="passwd"/> </p> </td> </tr> <tr> <td> <p>确认密码: <input type="password" name="repasswd"/> </p> </td> </tr> <tr> <td> <input type="submit" value="提交"/> <input type="reset" value="重置"/> </td> </tr> </table> </form> </body> </html>
八、处理XML
九、XML简单例子
package servlet; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class doGetU extends HttpServlet { private static final long serialVersionUID = 1L; public doGetU() { } public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //设置响应为xml字符编码为UTF-8 String uname=request.getParameter("uname"); response.setContentType("text/xml;charset=utf-8"); PrintWriter out = response.getWriter(); StringBuilder bd=new StringBuilder(); bd.append("<userinfo>"); bd.append("<username>"); if(uname==null || uname.length()==0 ){ bd.append("请选择用户"); }else{ bd.append(uname); } bd.append("</username>"); bd.append("</userinfo>"); out.println(bd.toString()); out.flush(); out.close(); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Ajax中xml处理</title> <script type="text/javascript"> function checkUser(ouser){ //获取下拉框的值 var uname=ouser.value; //提交的URL get方式 var url="doGetU?uname="+uname; //创建xmlHttpRequest对象 xmlHttpRequest=createXmlHttpRequest(); //设置回调函数 xmlHttpRequest.onreadystatechange=haoLeJiaoWo; //初始化 xmlHttpRequest.open("GET",url,true); //post方式 //xmlHttpRequest.open("post",url,true); //xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //发送数据get方式，可以没有参数 xmlHttpRequest.send(); //post发送参数 //xmlHttpRequest.send("uname="+uname) } function haoLeJiaoWo(){ //接收完成，正确返回 if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){ var xml=xmlHttpRequest.responseXML; //判断是否为空 if(xml){ //获取useranem的子节点数组 var userNodes=xml.getElementsByTagName("username"); if(userNodes.length>0){ var uname=userNodes[0].firstChild.nodeValue; document.getElementById("username").value=uname; } } } } function createXmlHttpRequest(){ if(window.XMLHttpRequest){//判断浏览器版本IE7.0以上，或者其它的浏览器 return new XMLHttpRequest(); }else{//IE5.0，6.0 return new ActiveXObject("Microsoft.XMLHTTP"); } } </script> </head> <body> <form action="doGetU" method="get"> <table> <tr> <td>请选择用户:</td> <td style="width:150px"><select name="user" onchange="checkUser(this);"> <option value="accp">accp</option> <option value="test">test</option> </select></td> </tr> <tr> <td>用户名:</td> <td><input type="text" id="username" style="width: 150px" /> </td> </tr> </table> </form> </body> </html>
