对于网站开发人员,一定不会陌生的Ajax技术,本篇就让我们认识一下它,或许在日后的开发过程中我们就可以使用到。Ajax在那方面使用的比较多呢?答案:表单注册,传统的表单注册,有时需要填写大量的信息,当我们好不容易写完了,一点击提交,后台发现我们有一些字段填写有误,这是就会提示我们注册失败,请重新注册,遇到这样的情况,我想你和我一样,一定恨透这个网站了。那如何来优化这个过程呢?这个时候我们的Ajax就排上用场了,当我们填写完一行信息,就可以通过Ajax来异步的进行后台判断。说了这么多,简单的讲就是我们本篇谈到的Ajax可以实现异步操作。好了,下面我们来一起领略一下它的风采。
1、创建Ajax:
当我们需要使用Ajax时,便可以通过在javascript中创建一个
if(window.//检测浏览器版本是否支持 hppt = new //IE7+;Firefox;Chrome;Opera }else{
hppt = new ActiveXObject("Microsoft.//IE6;IE5
}
2、表单界面设计:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <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"> <style type="text/css"> input{ width: 160px; height: 25px; } </style> <script type="text/javascript"> function setStyle(x){ document.getElementById(x).style.background="yellow"; } function clearStyle(y){ document.getElementById(y).style.background="white"; var hppt = new "GET", "http://127.0.0.1:8080/Ajxy/servlet/ajax?name=小米&pwd=123456", true); http.send(); //http.open("POST", "http://127.0.0.1:8080/Ajxy/servlet/ajax", true); //http.send(); //http.open("POST", "http://127.0.0.1:8080/Ajxy/servlet/ajax", true); //http.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //http.send("name=小米&sex=男"); //处理结果判断 if (http.readyState==4) { if (http.status==200) { alert("处理完成"); document.getElementById("news").innerHTML = request.responseText; } else { alert("发生错误:" + request.status); } }else{ //alert(http.readyState); } } </script> </head> <body> <center> <div id="news"></div> <table> <form method="post" action="<%=request.getContextPath() %>/servlet/ajax" enctype="application/x-www-form-urlencoded"> <!-- onfocus="":监听获得焦点事件 onblur="":监听失去焦点事件 disabled="disabled":销毁,不存在的 readonly="readonly":只读--> <tr> <td>姓名:</td><td><input type="text" name="name" id="name" onfocus="setStyle(this.id)" onblur="clearStyle(this.id)"/></td> </tr> <tr> <td>密码:</td><td><input type="password" name="pwd" id="pwd" onfocus="setStyle(this.id)" onblur="clearStyle(this.id)"/></td> </tr> <tr> <td>邮箱:</td><td><input type="text" name="email" id="email" onfocus="setStyle(this.id)" onblur="clearStyle(this.id)"/></td> </tr> <tr> <td>操作:</td><td><input type="submit" id="submit" value="注册"/></td> </tr> </form> </table> </center> </body></html>
3、Ajax的状态码:
readyState 状态 状态说明
(0)未初始化
此阶段确认 (1)载入
此阶段对 (2)载入完成
此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据,并不能直接在客户端使用。值为2表示已经接收完全部响应数据。并为下一阶段对数据解析作好准备。
(3)交互
此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody、responseText或response (4)完成
此阶段确认全部数据都已经解析为客户端可用的格式,解析已经完成。值为4表示数据解析完毕,可以通过 概而括之,整个创建-初始化请求-发送请求-接收数据-解析数据-完成
4、获取相应的方式:
5、select类:用来接收Ajax传输过来的数据。
public class ajax extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); String name = request.getParameter("name"); name = new String(name.getBytes("iso-8859-1"), "utf-8"); String pwd = request.getParameter("pwd"); System.out.println("name="+name); System.out.println("pwd="+pwd); System.out.println("GET_______Ajax"); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); String name = (String) request.getParameter("name"); System.out.println("name="+name); String sex = (String)request.getParameter("sex"); System.out.println("sex="+sex); System.out.println("POST__________Ajax"); }}
好了对于Ajax基础知识的入门学习,就为大家分析完毕。
原标题:Ajax基础知识《一》
关键词:ajax