`
tianlovv
  • 浏览: 15181 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

AJAX一些容易被人忽略的重点

    博客分类:
  • ajax
阅读更多

用AJAX开发的时间也有一段日子了,但是“走都没走好,就直接开始跑了”。因为之前在学的AJAX的时间并不多,基本上都是略过,挑一下重点来讲。然后直接学习了了DWR这个简单、强大、好使的框架。所以很多AJAX的基本都忽略了。最近重新学了一下,记下一些关键点。
  
  忽略了这些,往往可能会让你的AJAX程序得到一些意料之外的结果。
  
  1、初始化连接 request.open(Param1,Param2,Param3);和提交请求request.send(null);
   Param1:连接到服务器使用的方法,跟表单的method属性一样。"GET"或"POST"可选。推荐一般使用"GET",原因后续。
   Param2:提交到服务器的URL地址。
   Param3:Boolean类型,决定同步会异步操作。后续会解析。
  
   request.send(null) 提交请求,null有些人可能不知道表示什么,其实就是附带给服务器的参数。就是POST方式提交的表单数据的消息体。
  
   要点:
  
   Param1,推荐使用"GET"。因为大多数情况下,通过AJAX提交的给服务器的参数并不多,使用"GET"的话更加简单,提交的时候直接使用 request.send(null);即可。如果使用"POST"的话,在提交请求的时候 request.send(null)的null就不能直接这样写了。必须改为key:value的形式参数。比较麻烦。
  
   Param2:除了服务器端的接口地址,一般都包含以URL方式传递的参数请求。但注意的是某些浏览器(IE、Opera)的内部缓存机制。这个解析起来有些麻烦,总之如果两次相同URL请求的话,浏览器会把第二次请求不提交到服务器上,而返回第一次已经获得的那次响应。某些情况下,这个是高效的,但是一些情况下却希望每次提交都是新的数据。所以需要加上一个dummy参数,确保每次的URL不同。这个dummy参数可以用当前时间或者random方法生成。
   另外,参数的value,可以使用JavaScript提供的escape方法来确保不出现一些非法的值而URL无效。所有的空格符、标点符号、特殊字符以及其他非ASCII字符都将被转化成%xx格式的字符编码(xx等于该字符在字符集表里面的编码的16进制数字)。比如,空格符对应的编码是%20。
  
   Param3:通常情况下,异步或者同步其实差别不大,因为服务端的响应时间足够快的话。
  
  2、同步synchronous和异步asynchronous的区别。
   学AJAX的时候基本都会了解这点的。不过很多时候都一知半解,简单说明的话就是同步情况下,通过request.send提交的请求必须等服务器响应给浏览器的时候页面才能做其他操作,不然点任何操作都是一个繁忙状态,鼠标例如WINDOW的旋转漏洞。异步的话,不受这影响,请求完毕后,可以在页面上继续其他操作。
   虽然通常情况下,服务端的响应都是十分快的。
  
   要点:
   如果是异步的话,注意request某些情况下会被覆盖。即第一个异步请求服务端没返回,第二个提交出去了。而使用同一个request对象的话,第一次的就被覆盖了。所以永远就只能得到一个返回数据了。所以异步情况下,推荐不使用全局request比较好。但request需要传参囖。并且回调函数使用完毕的时候记得初始化一下。
  
  3、回调函数。
   一个完善的回调函数,必须有两个判断条件。第一个是判断HTTP就绪状态request.readyState,另外一个是服务器的状态码request.status。
   一般是先判断request.readyState==4,然后request.status才真正执行回调函数体。
   前者是因为每个request请求,一个HTTP就绪状态request.onreadystatechange共会产生4次。我们知道,当 request.readyState==4才是真正获得了request.responseText的时候。没了这个的话,回调函数就会运行多次了。
   后者是因为调试提交到服务器的URL是否正确。一切顺利的话会返回200,找不到页面的话会404,资源被保护的话是403,这些常遇到的状态码相信大家也不会陌生。没了这个的话,开发的时候往往有时候会因为粗心写错URL但是又要花时间去找BUG。
  
  4、关于操作DIV或SPAN元素。
   希望使用DOM方式操作,因为所有浏览器通常都是支持DOM操作的。避免使用innerHTML方式,因为被认为不安全和不稳定的。逐渐的浏览器会对innerHTML兼容性降低,甚至慢慢抛弃。

分享到:
评论

相关推荐

    学习Ajax后的所有重点

    **Ajax技术详解** Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新。这种技术极大地改善了用户的...

    ajax ppt 一些ajax的讲解

    在本次的"ajax ppt 一些ajax的讲解"中,我们有三个PPT文件:AjaxDay1.ppt、AjaxDay2.ppt和AjaxDay3.ppt,它们分别可能涵盖了Ajax的基础知识、进阶应用和实战案例。 **Ajax基础知识:** 1. **工作原理**:Ajax的工作...

    AJAX AJAX AJAX AJAX AJAX AJAX AJAX AJAX AJAX

    AJAX AJAX AJAX AJAX AJAX AJAX AJAX AJAX AJAX

    ajax的一些代码

    用于js和ajax的理解,用ajax实现不刷新整个页面用户体验良好

    Ajax中文手册 API

    很不错的Ajax开发草考文档,方便快捷1. AJAX介绍AJAX是一种运用JavaScript和可扩展标记语言(XML),在网络浏览器和服务器之间传送或接受数据的技术。2. AJAX实例AJAX可以用来创建更多交互式的网络应用程序。3. AJAX源...

    AJAX原理 原理 AJAX

    而这也让微软感到无比的尴尬,因为早在97年,微软便已经发明了AJAX中的关键技术,并且在99年IE5推出之时,它便开始支持XmlHttpRequest对象,并且微软之前已经开始在它的一些产品中应用AJAX,比如说MSDN网站菜单中的...

    ajax最容易理解的例子

    在这个"ajax最容易理解的例子"中,我们将探讨如何在MyEclipse环境中实现一个简单的Ajax应用。 首先,你需要了解Ajax的基本工作原理。它主要由以下四个组件构成: 1. **用户界面**:用户与网页交互的部分,通常由...

    ajax最最容易的视频例子

    **Ajax 最容易的视频例子:全面解析Ajax技术** Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下更新部分网页内容的技术。这个“ajax最最容易的视频例子”为初学者提供了一个理想的...

    Ajax Ajax本质 Ajax本质源码

    而`51aspx源码必读.txt`可能是针对51aspx网站上关于Ajax学习资源的推荐,可能包含了一些教程或示例代码。 在实际开发中,我们不仅需要理解Ajax的基本概念,还要掌握如何在不同框架(如jQuery、AngularJS、Vue.js等...

    ajax代码 ajax代码

    **Ajax(Asynchronous JavaScript and XML)技术是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新。这种技术可以提升用户体验,因为它...

    AjaxRequest(Ajax使用包)

    下面是一些常见的AjaxRequest用法: 1. **创建实例**: 首先,需要创建一个AjaxRequest实例,通常使用`new`关键字。 ```javascript var xhr = new AjaxRequest(); ``` 2. **配置请求**: 设置请求的参数,如URL、...

    Ajax从入门到精通(含学习笔记)

    Ajax,全称Asynchronous JavaScript and XML,是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新,提升了用户体验,尤其是在网页应用中,...

    Ajax学习资料 Ajax

    然而,Ajax也存在一些缺点: 1. **浏览器兼容性**:不同的浏览器对Ajax的支持程度不同,需要编写兼容代码。 2. **SEO问题**:搜索引擎爬虫可能无法抓取通过Ajax加载的内容。 3. **前进/后退按钮**:如果处理不当,...

    ajax安装包,安装程序ajax

    - **安全性**:使用Ajax可能会暴露一些安全问题,如XSS(跨站脚本攻击)和CSRF(跨站请求伪造),因此需要采取相应的安全措施。 - **用户体验**:尽管Ajax能提高交互性,但也要注意不要过度使用,以免影响用户的浏览...

    ajax的所有组件.ajax的组件

    例如,`jQuery.ajax()`函数就封装了XMLHttpRequest的复杂操作,让开发者更容易地发送Ajax请求。 7. **Ajax Control Toolkit**:对于.NET开发者来说,Ajax Control Toolkit是一套强大的控件和扩展,用于简化ASP.NET...

    ajaxpool,ajax管理,ajax池

    在现代Web开发中,Ajax(Asynchronous JavaScript and XML)技术被广泛用于实现页面的无刷新更新,提升用户体验。然而,不恰当的Ajax使用有时会导致浏览器性能问题,特别是Internet Explorer(IE)上的“假死”现象...

    Ajax从入门到精通.pdf

    Ajax从入门到精通.pdf 本书籍旨在深入浅出地介绍 Ajax 技术,从基础知识到高级应用,全面覆盖 Ajax 的核心概念、技术原理、实现方法和实践应用。书籍的主要内容包括: 1. Ajax 概述:本书首先介绍了 Ajax 的概念、...

    ajax教程

    尽管现代浏览器对Ajax支持良好,但老版本的IE浏览器(尤其是IE6)存在一些兼容性问题。可以通过使用jQuery、Prototype等JavaScript库,或者使用Fetch API来解决这些问题。 **6. 注意事项** - 鉴于同源策略限制,...

    ASP.NET AJAX程序设计——第I卷:服务器端ASP.NET 2.0 AJAX Extensions与ASP.NET AJAX Control Toolkit 源代码

    只要在Visual Stuio中轻松拖放即可实现强大的客户端Ajax功能,例如局部页面更新、异步回送、拖放、动画等,非常适合为现有的ASP.NET 2.0应用程序添加少量的Ajax特性,或是基于ASP.NET 2.0的一些简单Ajax功能的实现。...

Global site tag (gtag.js) - Google Analytics