学无止境的专栏

Live And Learn

AJAX基础知识
AJAX基础知识基于XHTML和CSS标准的表示;
使用Document Object Model进行动态显示和交互;
使用XMLHttpRequest与服务器进行异步通信;
使用JavaScript绑定一切。
动态更新购物车的物品总数,无需用户单击Update并等待服务器重新发送整个页面。
提升站点的性能,这是通过减少从服务器下载的数据量而实现的。例如,在Amazon的购物车页面,当更新篮子中的一项物品的数量时,会重新载入整个页面,这必须下载32K的数据。如果使用Ajax计算新的总量,服务器只会返回新的总量值,因此所需的带宽仅为原来的百分之一。
消除了每次用户输入时的页面刷新。例如,在Ajax中,如果用户在分页列表上单击Next,则服务器数据只刷新列表而不是整个页面。
直接编辑表格数据,而不是要求用户导航到新的页面来编辑数据。对于Ajax,当用户单击Edit时,可以将静态表格刷新为内容可编辑的表格。用户单击Done之后,就可以发出一个Ajax请求来更新服务器,并刷新表格,使其包含静态、只读的数据。
一  ajax
Ajax是一个客户端技术,在一般的Web应用中,服务器端代码会呈现一个完整的页面,并涉及一个完整的工作单元。利用Ajax,可能只返回一点点文本,而且只涉及一个业务应用的很小子集。
二 XMLHttpRequest
  1作用:发送请求和处理响应
   Internet Explorer把XMLHttpRequest实现为一个ActiveX对象,其他浏览器(如Firefox、Safari和Opera)把它实现为一个本地JavaScript对象。
  2创建XMLHttpRequest对象的一个实例
   var xmlHttp:// 建一つ変
      // createXMLHttpRequest方法完成创建XMLHttpRequest实例的具体工作。
   function createXMLHttpRequest() {
          if (window.ActiveXObject) { // 浏览器是否支持ActiveX控件,
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");//例化ActiveXObject的一个新实例来创建XMLHttpRequest对象,并传入一个串指示要创建何种类型的ActiveX对象。
            }
           else if (window.XMLHttpRequest){ //浏览器是否把XMLHttpRequest实现为一个本地JavaScript对象。
    xmlHttp= new XMLHttpRequest();
    }
    3 准XMLHttpRequest操作

 准XMLHttpRequest操作


  abort()
  停止当前请求
 
 getAllResponseHeaders()
  把HTTP请求的所有响应首部作为键/值对返回
 
 getResponseHeader("header")
  返回指定首部的串值
 
 open("method", "url")
  建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数
 
 send(content)
  向服务器发送请求
 
 setRequestHeader("header", "value")
  把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()
     void open(string method, string url, boolean asynch, string username, string password):这个方法会建立对服务器的调用。这是初始化一个请求的纯脚本方法。它有两个必要的参数,还有3个可选参数。要提供调用的特定方法(GET、POST或PUT),还要提供所调用资源的URL。另外还可以传递一个Boolean值,指示这个调用是异步的还是同步的。默认值为true,表示请求本质上是异步的。如果这个参数为false,处理就会等待,直到从服务器返回响应为止。由于异步调用是使用Ajax的主要优势之一,所以倘若将这个参数设置为false,
    void send(content):这个方法具体向服务器发出请求。如果请求声明为异步的,这个方法就会立即返回,否则它会等待直到接收到响应为止。可选参数可以是DOM对象的实例、输入流,或者串。传入这个方法的内容会作为请求体的一部分发送。

  4表2-2 标准XMLHttpRequest属性


   onreadystatechange
   每个状态改变时都会触发这个事件处理器,通常会调用一个JavaScript函数
 
  readyState
   请求的状态。有5个可取值:0 = 未初始化,1 = 正在加载,2 = 已加载,3 = 交互中,4 = 完成
 
  responseText
   服务器的响应,表示为一个串
 
  responseXML
  服务器的响应,表示为XML。这个对象可以解析为一个DOM对象
 
 status
  服务器的HTTP状态码(200对应OK,404对应Not Found(未找到),等等)
 
 tatusText
  HTTP状态码的相应文本(OK或Not Found(未找到)等等)
 5 get post
     从理论上讲,如果请求是幂等的就可以使用GET,所谓幂等是指多个请求返回相同的结果。实际上,相应的服务器方法可能会以某种方式修改状态,所以一般情况下这是不成立的。这只是一种标准。更实际的区别在于净荷的大小,在许多情况下,浏览器和服务器会限制URL的长度URL用于向服务器发送数据。一般来讲,可以使用GET从服务器获取数据;换句话说,要避免使用GET调用改变服务器上的状态。
     般地,当改变服务器上的状态时应当使用POST方法。不同于GET,需要设置XML- HttpRequest对象的Content-Type首部,如下所示:

     xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
     与GET不同,POST不会限制发送给服务器的净荷的大小,而且POST请求不能保证是幂等的。
6 使用XMLHttpRequest对象发送请求的基本步骤如下:
  为得到XMLHttpRequest对象实例的一个引用,可以创建一个新的实例,也可以访问包含有XMLHttpRequest实例的一个变量。
  2. 告诉XMLHttpRequest对象,哪个函数会处理XMLHttpRequest对象状态的改变,为此要把对象的onreadystatechange属性设置为指向JavaScript函数的指针。
  3. 指定请求的属性。XMLHttpRequest对象的open()方法会指定将发出的请求。open()方法取3个参数:一个是指示所用方法(通常是GET或POST)的串;一个是表示目标资源URL的串;一个是Boolean值,指示请求是否是异步的。
  4. 将请求发送给服务器。XMLHttpRequest对象的send()方法把请求发送到指定的目标资源。send()方法接受一个参数,通常是一个串或一个DOM对象。这个参数作为请求体的一部分发送到目标URL。当向send()方法提供参数时,要确保open()中指定的方法是POST。如果没有数据作为请求体的一部分被发送,则使用null。
7 XMLHttpRequest对象提供了两个可以用来访问服务器响应的属性。第一个属性respo-
nseText将响应提供为一个串,第二个属性responseXML将响应提供为一个XML对象。
8 使用innerHTML属性创建动态内容、表示一组开始标记和结束标记之间的内容。
9 文档对象模型(DOM)是与平台和语言无关的接口,允许程序和脚本动态地访问和更新文档的内容、结构和样式。文档可以进一步处理,处理的结果可以放回到所提供的页面中。

用于处理XML文档的DOM元素属性

childNodes
 返回当前元素所有子元素的数组
 
firstChild
 返回当前元素的第一个下级子元素
 
lastChild
 返回当前元素的最后一个子元素
 
nextSibling
 返回紧跟在当前元素后面的元素
 
nodeValue
 指定表示元素值的读/写属性
 
parentNode
 返回元素的父节点
 
previousSibling
 返回紧邻当前元素之前的元素
 

用于遍历XML文档的DOM元素方法

getElementById(id) (document)
 获取有指定惟一ID属性值文档中的元素
 
getElementsByTagName(name)
 返回当前元素中有指定标记名的子元素的数组
 
hasChildNodes()
 返回一个布尔值,指示元素是否有子元素
 
getAttribute(name)
 返回元素的属性值,属性由name指定 

阅读更多
个人分类: AJAX学习
想对作者说点什么? 我来说一句

dwr.jar 2.0.3 ajax框架

2008年04月11日 489KB 下载

AJAX教程

2008年03月12日 2.33MB 下载

ASP.NET与AJAX

2008年01月03日 1.36MB 下载

J2EE与AJAX

2008年01月03日 2.33MB 下载

ajax教程

2007年06月03日 2.4MB 下载

AJAX教程(中文版)

2010年09月18日 44KB 下载

asp.net3.5电子商城源代码

2009年03月25日 5.35MB 下载

没有更多推荐了,返回首页

不良信息举报

AJAX基础知识

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭