ajax基本原理(必读).docVIP

第16讲 认识Ajax Ajax(Asynchronous JavaScript and XML,即JavaScript和XML)是一个相对较新的名字. Ajax的基本概念 用户在浏览网页的时候,无论是打开一段新的评论,还是填写一张调查问卷,都需要反复与服务器进行交互,但是传统的Web应用采用同步交互形式,即用户向服务器发送一个请求,然后Web服务器根据用户的请求执行相应的任务,并返回结果.这是一种十分不连贯的运行模式,常常需要长时间按的等待以及整个页面的刷新,即通常所说的”白屏”现象,而且是整个页面的刷新,这就增加了用户等待时间,数据重复传递也浪费了大量的资源和网络带宽,而Ajax采用的是异步处理,可以更新局部的内容. 优点: 减轻服务器的负担,加快浏览速度. 带来更好的用户体验,传统是白屏现象很不友好,后者采用的局部刷新,使用户感觉是在使用桌面应用程序一样 基于标准化,并被广泛的支持的技术,不需要下载插件(flash)或小程序.（RIA） 进一步呈现与数据分离,Ajax获取服务器可以完全利用单独的模块进行操作,从而使得技术人员和美工人员能够更好的分工与配合 Ajax的组成部分 Ajax不是单一的技术,而是4种技术的集合,跟灵活地运用Ajax必须深入了解这些不同的技术 技术名称 说明 JavaScript JavaScript是通用脚本语言,用来嵌入在某种应用中,Ajax应用程序是使用JavaScript编写的 CSS Ajax用户界面的样式可以要通过CSS独立修改 DOM 通过JavaScript修改DOM,AJAX用用程序可以在运行时改变用户界面,或局部更新页面的某个节点 XMLHttpRequest XMLHttpRequest对象允许WEB程序员从WEB服务器以后台的方式获取数据,数据的格式通常是XML或者是文本 XSLT(可扩展语言和转换) 一种为客户端提供XML信息转换显示的模板技术 经验:使用Ajax制作网页,同样要求主流浏览器之间显示的效果基本一致,通常做法是编写Ajax,JavaScript代码,一边在两个不同的浏览器上进行预览,并及时地调整细节, Ajax成功案例 下拉菜单select是表 Ajax异步交互 XMLHttpRequest对象 XMLHttpRequest是Ajax技术的核心。在IE5.5中，该对象以ActiveX对象的方式引入，被称为XMLHTTP。后来，其他主流浏览器都提供了XMLHttpRequest类。以ActiveX对象方式出现的XMLHTTP与正统的XMLHttpRequest类创建的方式并不一样，但创建之后所生成的对象的使用方式却是一样的 XMLHttpRequest对象的方法 方法 描述 abort() 停止当前请求 getAllResponseHeaders() 把HTTP请求的所有响应首部作为键/值对返回 getAllResponseHeaders(head_name) 返回指定首部的串值 open(method,url，asynch) 建立对服务器的调用。Method参数可以是get或者post。url参数可以是相对url或绝对url。asnych参数是一个布尔值，true为异步方式，false为同步方式。 send(string) 向服务器发送请求 setRequestHeader(head_name,value) 把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。P XMLHttpRequest对象的属性 属性 描述 onreadystatechange 每个状态改变时都会触发这个事件处理器，通常会调用一个javascrpt函数 readyState 请示的状态。有5个可取的值： ０：未初始化 １：正在加载 ２：已加载 ３：交互中 ４：完成 responseText 服务器的响应，表示为一个字符串 responseXML 服务器的响应，表示为XML。这个对象可以解析为一个DOM对象 status 服务器的HTTP状态码。 200对应OK 404对应Not Found statusText HTTP状态码的相应文本 在Web中script language=javascript type=text/javascript var xmlHttp; function createXMLHttpReques() { if(window.ActiveXObject) //判断是否是IE浏览器 { xmlHttp=new ActiveXObject(Microsoft.XMLHTTP);