`

ajax-总结

    博客分类:
  • W3C
 
阅读更多

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>

分享到:
评论

相关推荐

    Pushlet的Ajax-pushlet-client.js分析

    总结来说,Ajax-pushlet-client.js是通过面向对象的JavaScript技术,利用XMLHttpRequest对象实现HTTP长连接,从而实现服务器向客户端的实时数据推送。其内部结构清晰,逻辑严谨,通过状态管理和事件驱动,有效地处理...

    dynatrace-AJAX-edition-4.2.0.1528.zip

    总结来说,Dynatrace AJAX Edition 4.2.0.1528是Web开发者不可或缺的工具,它通过强大的性能监控和智能诊断功能,为AJAX应用的优化提供了有力的支持。无论是在开发阶段还是生产环境中,都能帮助团队提高应用性能,...

    ajax-ext框架

    总结来说,Ajax-ext框架是建立在Ajax技术和ExtJS基础上的一个强大工具,它简化了Web应用的开发流程,提高了开发效率。通过熟练掌握Ajax-ext,开发者可以构建出功能丰富、用户体验优良的Web应用。

    dynatrace-AJAX-edition软件

    总结来说,“dynatrace-AJAX-edition”是一款强大的前端性能测试工具,它通过对AJAX应用的深度剖析,帮助开发者提升用户体验,优化网站性能。无论是开发阶段的性能调试,还是上线后的持续监测,它都能提供有力的支持...

    ajax-bridge 以及它在web中的应用

    **总结** Ajax-Bridge 是一个方便的前端工具,用于实现Web应用程序中的Ajax通信。它简化了与服务器的交互,提升了用户体验。通过对源码的深入理解,我们可以更高效地利用Ajax-Bridge,同时也可以根据项目需求进行...

    struts-ajax-json-struts包

    总结来说,Struts-AJAX-JSON-Struts包是一个整合了Struts框架、AJAX和JSON功能的开发工具包,旨在帮助开发者构建更动态、交互性更强的Web应用,提高用户界面的响应速度和整体性能。通过合理地利用这个包中的组件和库...

    谷歌浏览器插件—— Ajax Interceptor

    总结来说,Ajax Interceptor 是一个方便的Chrome插件,它利用AJAX的异步特性,为开发者提供了强大的控制和调试能力。通过理解和运用这个工具,开发者可以更高效地进行前端开发,尤其是在处理复杂的API交互时。同时,...

    Laravel开发-ajax-forwarder

    总结,"ajax-forwarder"为Laravel开发者提供了一种灵活且安全的方式来处理跨域Ajax请求,它简化了与远程服务器的通信,同时保证了应用的安全性。在实际开发中,结合合理的配置和安全措施,这个工具能大大提升开发...

    Ajax-Uploader批量上传控件

    总结来说,Ajax-Uploader批量上传控件是网页应用中提升用户体验的重要工具,它通过Ajax技术实现了文件的批量、异步上传,并提供了丰富的交互功能。对于处理大量图片或其他文件的网站来说,Ajax-Uploader是一个不可或...

    ajax-tab标签

    总结,Ajax-Tab是Web开发中提高用户体验的重要工具,它结合了Ajax的异步特性与CSS的样式灵活性,为用户提供流畅的内容切换体验。理解并掌握Ajax-Tab的实现原理和优化技巧,能让你的Web应用更具吸引力和实用性。

    ajax-context.zip

    总结一下,"ajax-context.zip"中的测试文件着重于`context`参数的使用,展示了如何根据不同的需求(DOM元素或自定义对象)来设置`this`的上下文,以优化AJAX请求的处理逻辑。这对于理解JavaScript中`this`的行为,...

    ajax-Popup

    总结,Ajax-Popup是Ajax技术的一种实用应用,通过它,开发者可以创建交互性强、响应速度快的弹出窗口,提升网站或应用程序的用户体验。理解和掌握Ajax-Popup的原理和实现方法,对于Web开发人员来说是非常有价值的...

    Google-AJAX-Search.zip_google

    总结来说,"Google-AJAX-Search.zip_google"包含了一个可能实现Google AJAX搜索功能的PHP脚本,通过AJAX技术提供快速可靠的搜索体验。开发者需要理解AJAX的基本原理,以及如何使用PHP与Google的API进行交互,以构建...

    ajax-FileUpload功能

    **总结** Ajax-FileUpload技术在Web 2.0时代为用户提供了一种高效、便捷的文件上传方式,提高了Web应用的交互性和用户体验。随着HTML5和Web技术的发展,Ajax-FileUpload功能不断得到完善,包括文件预览、进度显示、...

    Ajax-0.11 Ajax.js文件 Ajax.js例子

    总结来说,Ajax-0.11版本的`Ajax.js`文件和相关示例是学习和使用Ajax技术的重要资源,它展示了如何通过JavaScript实现与服务器的异步通信,以及如何利用返回的数据动态更新网页内容,从而提高网站的交互性和性能。

    ajax-jquery-demo

    **总结** Ajax结合jQuery使得网页的动态交互变得简单而强大。通过`ajax-jquery-demos`中的实例,你可以深入理解并掌握如何利用jQuery实现Ajax请求,包括数据的发送与接收、错误处理以及与用户的交互。学习和实践...

    Ajax-database.zip_ajax连接数据库

    总结来说,"Ajax-database.zip_ajax连接数据库"这个资源提供了一个关于如何使用Ajax技术与数据库进行交互的完整示例。它涵盖了前端的Ajax请求、后端的数据库连接和查询,以及数据的传输和显示。这对于学习和实践Web...

    up_633847_wp-ajax-newsletter_8vwkyp.rar

    总结来说,"up_633847_wp-ajax-newsletter_8vwkyp.rar"是一个使用PHP和AJAX技术的Wordpress插件,它的主要功能是让用户能方便地订阅博客的最新简报,提升用户与博客的互动性。这个插件的实现涉及到了Wordpress的插件...

    up_1245276_wp-ajax-newsletter_tpi2w.rar

    总结来说,"up_1245276_wp-ajax-newsletter_tpi2w.rar"这个插件利用PHP和Ajax技术实现了WordPress中的无刷新订阅功能,为用户提供了一个便捷的方式获取博客的最新内容。通过理解和研究这个插件,开发者可以深入理解...

Global site tag (gtag.js) - Google Analytics