Ajax知识点总结
|
Ajax：AsynchronousJavaScriptandXML 功能：允许浏览器与服务器通信而无需刷新当前页面 例如：用户名检验，购物车更新等，能极大提高用户体验度 服务器与客户端的语言传输格式 1：HTML：轻松嵌入预订格式 2：XML：通用，但沉重 3：Json：方便简单，但有一定安全隐患 原生Ajax 原理：通过使用XMLHTTP组件XMLHttpRequest的方法，进行异步数据读取。 运行流程： varrequest=newXMLHttpRequest(); request.open（“method”，“url”）；//建立对服务器的调用 request.send（）；//向服务器发送请求 Request.onreadystatechange=function（）{}；//追踪改变 request.readystate==4//判断响应是否完成，共四个状态 Request.status==200||Request.status==304//判断响应是否可用 request.responseText//以文本格式返回响应结果 request.responseXML//以XML格式返回响应结果 jQuery封装的Ajax方法 1：$.load(url，method，回调函数).直接载入需要的HTML。 Method默认为GET方法 可通过url+空格+selector来选择指定处返回。 如：varurl=this.href+“h2a”； 2：$.get(url，args，回调函数),$.post(url，args，回调函数)； 主页： <scripttype="text/javascript"src="jquery-1.7.2.js"></script> <scripttype="text/javascript"> $(function(){ $(":input[name='username']").change(function(){ varval=$(this).val(); val=$.trim(val); if(val|=""){ varurl="valiateUserName"; varargs={"userName":val,"time":newDate()}; $.post(url,args,function(data){ $("#message").html(data); }); } }); }) </script> </head>
<body> <formmethod="post"action=""> UserName: <br/><inputtype="text"name="username"> <divid="message"></div> <br/> <inputtype="submit"value="submit"/> </form> </body> </html> Servlet的配置和映射 <?xmlversion="1.0"encoding="UTF-8"?> <web-appversion="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <servlet> <servlet-name>valiateUserNameServlet</servlet-name> <servlet-class>valiateUserNameServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>valiateUserNameServlet</servlet-name> <url-pattern>/valiateUserName</url-pattern> </servlet-mapping> </web-app> 继承自HttpServlet的valiateUserNameServlet importjava.io.IOException; importjava.util.Arrays; importjava.util.List;
importjavax.servlet.ServletException; importjavax.servlet.http.HttpServlet; importjavax.servlet.http.HttpServletRequest; importjavax.servlet.http.HttpServletResponse;
publicclassvaliateUserNameServletextendsHttpServlet{ privatestaticfinallongserialVersionUID=1L;
publicvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{ List<String>userName=Arrays.asList("AA","BBB","CCC"); Stringusername=request.getParameter("userName"); Stringresult=null; if(userName.contains(username)){ result="<fontcolor='red'>该用户名已经被使用</font>"; }else{ result="<fontcolor='red'>该用户名可以被使用</font>"; } //response常用的三个方法 response.setContentType("text/html;charset=UTF-8"); response.setCharacterEncoding("UTF-8"); response.getWriter().print(result);//在浏览器中打印 } }
注意：1.jQuey中的ajax方法中url，必须和WEB.XML中Servlet的数据匹配 2.可通过$("#message").html(data);的方式在指定位置显示需要的内容 3.谨记List<String>userName=Arrays.asList("AA","CCC"); 4.List的contains（）方法，判断是否包含
易-14-10-21-1-25 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |