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>