ajax-总结
|
ajax相关技术： DOM(Document Obj Model),树形文档结构 XML：通信载体//很规范 JS:基于(大量内置)对象 Ajax的问题： 前进/后退，失效。浏览器会缓存上一个页面的信息 Ajax通信的是数据段(xml,html)片段，不是完整的文档，不会被缓存 刷新失效
XMLHttpRequest对象, 已获得现代浏览器较好的支持，W3C 已经开始了标准化的工作 属性 onreadystatechange 指定当readyState属性改变时的事件处理句柄，属性为只写 readyState 返回当前请求的状态，属性为只读 0 未初始化 对象已经建立，但是未初始化，即尚未调用open方法创建http请求 1 初始化 对象已经建立，但是为调用send方法发送http请求 2 发送数据 send方法已经被调用，但是当前的状态以及http头未知 3 数据传送中 已经接收部分数据，因为响应及http头不全，这是通过response系列方法获取部分数据会出现错误 4 传送完成 数据接收完毕，此时可以通过response系列方法获取完整的回应数据 responseBody 将回应信息正文以unsigned byte数组形式返回，属性为只读 responseStream 以Ado Stream对象的形式返回响应信息，属性为只读 responseText 以字符串的形式返回服务器响应信息，属性为只读 responseXML 将响应信息格式化为XML Document对象返回，属性为只读 status 返回当前HTTP请求的状态码，属性为只读。如：404 = "文件未找到" 、200 ="成功" statusText 返回当前HTTP请求的状态行，属性为只读 方法 abort 取消当前请 求关闭连接并且结束任何未决的网络活动。重置为 readyState 为 0。如果请求用了太长时间，而且响应不再必要的时候，可以调用这个方法。 getAllResourceHeaders 获取相应的全部http头信息 getResourceHeader 从响应信息中获取指定的http头信息 open(method,url,async,username,password)初始化 HTTP 请求参数，实现通常不会打开一个到 Web 服务器的网络连接。 method 参数是用于请求的 HTTP 方法。值包括 GET、POST 和 HEAD。 url 参数是请求的主体。大多数浏览器实施了一个同源安全策略，并且要求这个 URL 与包含脚本的文本具有相同的主机名和端口。 async 参数指示请求使用应该异步地执行。如果这个参数是 false，请求是同步的，后续对 send() 的调用将阻塞并不会返回，直到响应完全接收。 如果这个参数是 true 或省略，请求是异步的，且通常需要一个 onreadystatechange 事件句柄。 username 和 password 参数是可选的，为 url 所需的授权提供认证资格。如果指定了，它们会覆盖 url 自己指定的任何资格。 send 发送请求到http服务器并接收回应 setRequestHeader 单独设定请求的某个http头 browser client -- javaScript call -- ajax engine --http request -- server --xml data -- html+css data --browser client ---------------------------ajax例子：------------------------------------------------------------- 主要checkUser()--initXMLHttpRequest()--call()--CheckUserServlet()--web.xml /**checkUser()必须写在jsp中--wnj function checkUser() { var loginname=document.getElementById("loginname").value.trim(); var http_request=initXMLHttpRequest(); //设置回调函数 http_request.onreadystatechange=call; //使用AJAX引擎的核心对象发送请求 //"&ts="+new Date()解决IE不刷新的bug var url="${pageContext.request.contextPath}/checkUser.ok?loginname="+encodeURI(loginname); http_request.open("GET",url+"&ts="+new Date(),true); http_request.send(null); } */ function initXMLHttpRequest(){ if(window.XMLHttpRequest){ //firefox http_request=new XMLHttpRequest(); if(http_request.overrideMineType){ http_request.overrideMineType("text/xml"); } }else if(window.ActiveXObject){ //ie系列 try{ http_request=new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ //IE5.x http_request=new ActiveXObject("Microsoft.XMLHTTP"); } } return http_request; } function call(){ if(http_request.readyState==4){ if(http_request.status==200){ var temp=http_request.responseText; if(temp=="true"){ appendError("loginname",eMsg[1]); }else{ appendMsg("loginname",eMsg[0]); } }else{ alert("ajax错误!"); } } } function appendMsg(id,msg) { var a = document.getElementById(id); var b =document.getElementById(id + "err"); if(b!=null){ a.parentNode.removeChild(b); // 如果span元素存在，则先删除此元素 } var spanNew = document.createElement("span");// 创建span spanNew.id = id + "err";// 生成spanid spanNew.style.color = "red"; //spanNew.appendChild(document.createTextNode("hhh"));// 给span添加内容 spanNew.innerHTML=msg; a.parentNode.insertBefore(spanNew,a.nextSibling);// 给需要添加元素后面添加span } public class CheckUserServlet extends HttpServlet { protected void doGet(HttpServletRequest request,HttpServletResponse response){ request.setCharacterEncoding("utf-8"); PrintWriter out = response.getWriter(); String loginname = request.getParameter("loginname"); boolean passed = hasName(loginname); out.print(passed); out.close(); } private boolean hasName(String loginname) { WebApplicationContext ctx = WebApplicationContextUtils.getWebApplicationContext(this.getServletContext()); IUserService userService= (IUserService) ctx.getBean("BiUserService"); return userService.hasUser(loginname); } } web.xml <servlet> <servlet-name>checkUser</servlet-name> <servlet-class>*.CheckUserServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>checkUser</servlet-name> <url-pattern>/checkUser.ok</url-pattern> </servlet-mapping> （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |