关闭

AJAX基础知识

标签: xmlhttprequest服务器javascriptajaxurl文档
440人阅读 评论(0) 收藏 举报
分类:
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指定 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:248217次
    • 积分:3399
    • 等级:
    • 排名:第10225名
    • 原创:21篇
    • 转载:306篇
    • 译文:3篇
    • 评论:42条