[AJAX]:入门小实例,走进AJAX
|
由于考研，一段时间不摸键盘了，今天复习一下AJAX。写在51CTO，记录我的生活点滴。 实例说明：通过一步刷新的方式，将页面输入的内容返回到页面并显示。当然js很容易实现。 一：代码部分：
<html> <head> <title>测试界面</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <linkrel="stylesheet" type="text/css" href="styles.css"> --> </head>
<body> <div id="data"> <label for="username">用户名：</label> <input type="text"id="username" size="10"name="username" /> <br /> <label for="psw">密码：</label> <input type="password"id="psw" size="10"name="psw" /> <br/> <input type="submit"id="submit" name="submit"alt="提交" onclick="javascript:submit()"/> </div> <div id="show"> 数据显示区 </div> </script> </body> </html> 2.js脚本部分 <script type="text/javascript"> var xmlHttp = null; function submit() {
if(window.ActiveXObject){ xmlHttp = new window.ActiveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest){ xmlHttp = new window.XMLHttpRequest(); } var userName = document.getElementById("username").value; var psw = document.getElementById("psw").value; alert(userName); alert(psw); xmlHttp.onreadystatechange= dealData; xmlHttp.open("post","./servlet/first",true); xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlHttp.send("username="+userName+"&psw="+psw); } function dealData(){ if(xmlHttp.readyState == 4){ if(xmlHttp.status == 200){ alert("已经进入200"); var datass = xmlHttp.responseText; document.getElementById("show").innerHTML = datass; } else{ alert("错误"); } } else{ alert("round"); } </script> 3.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;
publicclassFirst extendsHttpServlet{
/** * */ privatestaticfinallongserialVersionUID= 1L; @Override protectedvoiddoPost(HttpServletRequest req,HttpServletResponse resp) throws ServletException,IOException { process(req,resp); } @Override protectedvoiddoGet(HttpServletRequest req,resp); } protectedvoidprocess(HttpServletRequest req,IOException { String userName = req.getParameter("username"); String psw = req.getParameter("psw"); System.out.println("usename:"+userName); PrintWriter pw = resp.getWriter(); pw.write("username:"+userName+";psw="+psw); pw.flush(); } } 二、解释：
2. 因为各公司对其实现不一样，主要分微软IE和非微软IE浏览器（尤其是早期的IE5,IE6，IE5 和 IE6 使用 ActiveXObject） 首先，这些对象都是内嵌在浏览器中，属于window所属，所以在获取时应对其进行获取，当然获取时先进行IE版本的判断 Var xmlHttp =null; <!―进行IE5,ie6的判断---> If(window.ActiveXObject){//若是该版本，则 XmlHttp = newwindow.ActiveXObject(“Microsoft.XMLHTTP”); } Else if(window.XMLHttpRequest){//若是非IE5,IE6版本 xmlHttp = newwindow.XMLHttpRequest(); } Else{ Alert(“您的浏览器暂不支持ajax技术，请升级”); } 3.获取完成，当然是使用了，先设置好所需属性，例： 返回处理的函数（回调函数），以及需要访问的url，传值方式，以及所传值的获取等。 正如上述： <!―获取所需传到后台的参数--> Var username = document.getElementById(“username”).value; Var password = document.getElementById(“psw”).value; <!―设置回调函数---> xmlHttp.onreadystatechange = 回调函数（注意：不带括号）; <!―设置传值方式以及url--> 调用xmlHttp对象去访问地址，或后台内容获取数据 首先，设置get方式传值： Var url = “./servlet/first?username =”+userName+“&password=”+password; xmlHttp.open(“get”,url,true); //发送参数值：当然get方式本身将参数拼接到url后面了，所以此处设置为null即可 xmlHttp.send(null); 设置为POST传值方式： Var url = “./servlet/first”; xmlHttp.open(“post”,true); 但是还比get方式多了一步操作:设置http数据报文的头部格式:即http报文中得属性，根据需要设置即可 XmlHttp.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”); Post方式需要通过send(进行传值)，所以需要将属性值放入send()中： Var value =”username=”+username+”&password=”+password; xmlHttp.send(value); 4: 编写回调函数：XMLHttpRequest函数返回类型有几种：responseText,responseXML,responseUrl. 下面章节会分类讲解，现在主要演示responseText:以帮助读者理解ajax的整个处理过程 XMLHttpRequest类拥有一个显示XMLHttpRequest对象状态的属性，即：readyState: When： XMLHttpRequest.readyState = 0: 表示“XMLHttpRequest”对象的一种未初始化状态，即：已经创建了它的对象，但未进行初始化 XMLHttpRequest.readyState = 1: 表示一种“未发送”状态：即：XMLHttpRequest.open()方法已经调用，但还未发送。并且XMLHttpRequest已经准备好把一个请求发送到服务器 XMLHttpRequest.readyState =2: 表示一种“已发送”状态，即：XMLHttpRequest.send()方法 已经调用，并且已经通过send()方法把一个请求发送到服务器端，但是还没有收到一个响应。 XMLHttpRequest.readyState=3: 表示一种“正在接收，未解析完”的状态，即：浏览器已经接收完目标服务器发来的HTTP报文的相应头部部分，但HTTP报文的消息体部分还未接收加载完 XMLHttpRequest.readyState= 4: 表示一种“已接收并且解析加载完”的状态，但是此时由于服务器会在返回的HTTP响应报文中 添“响应码”以表明请求资源当前的状态，所以这种情况下需要再分类进行解析
单独解析XMLHttpRequest.readyState= 4时的各种情况 根据XMLHttpRequest.status属性进行解析： When: XMLHttpRequest.status = 404:说明请求资源不存在 XMLHttpRequest.status = 200：表示已经顺利完成访问服务器后，顺利返回未发生异常 其他响应码代表的含义：请参见http协议 代码书写： function dealMethod(){ if(xmlHttp.readyState == 4){ if(xmlHttp.status == 200){ var responseData = xmlHttp.responseText； <!―对前台进行操作 --> document.getElementById(“show”).innerHTML = responseData; } } } 小弟排版不大好，请见谅哈。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |