ajax简述过程
Ajax简述
传统Web应用允许用户填写表单,当提交表单时向Web服务器发送一个HTTP请求。服务器接收并处理传来的表单,然后返回一个新的网页到用户浏览器。使用传统Web应用时若要改变页面的一小部分数据,需要重新加载整个页面,这是一种不友好的用户体验。而且由于每次应用的交互都需要向服务器发送请求,应用的响应时间依赖于服务器的响应时间,这有可能导致用户花费较长的等待时间。
与传统Web应用不同的是,AJAX采用异步交互过程。AJAX可以仅向服务器发送并取回必须的数据,它使用SOAP(简单对象访问协议)或其他一些基于XML的Web Service接口,并在客户端采用JavaScript处理来自服务器的响应。用户在页面上获得的数据是通过AJAX引擎提供的,由于页面不需要与服务器直接交互,所以客户端浏览器不需要刷新页面就能获得服务器的信息,提高了页面的友好度。
一、ajax
Ajax(Asynchronous Javascript and XML)的缩写。
包括:
XHTML CSS:标准化呈现
DOM:实现动态显示和交互
XML和XSLT:数据交换和处理
XMLHttpRequest:异步读取数据
JavaScript:绑定和处理所有数据
JSON:数据交互
二、XMLHttpRequest对象
如何创建:
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
1、XMLHttpRequest 对象的方法
方法名称描述open(“method”,url)建立对服务器的调用send(context)向服务器发送请求abort()停止当前请求。。。。
2、XMLHttpRequest 对象的属性
属性名称描述onreadystatechange状态改变的事件触发器,通常绑定一个js函数,当状态发送改变是,就调用该函数readyState请求状态:
0:未初始化
1:读取中
2:已读取
3:交互中
4:完成status从服务器返回的状态码
200:成功
404:文件找不到
500:服务器代码错误
。。。responseText从服务器返回的文本形式的响应内容
responseXML从服务器返回的兼容DOM的xml的文档对象
。。。
三DOM 模型入门
1、入门简介
dom模型的全称是Document Object Module,即文档对象模型,它定义了操作文档对象的接口。在这个模型中,一个文档被看作结构化的数据,对于xml就像一棵树的结构,树中的每个节点对应一个XML标记,都是一个对象。
例如web 页面的Html文档,doucument就是根节点,其他的子对象,如链接、图片、表单等都是树叶。
如图:
在Ajax开发中,dom模型是最核心的结构,是所有ajax开发的基础架构。如果没有dom模型,就没有办法在客户端改变页面的内容,所有 的局部刷新、异步请求也就无从实现。
Dom模型提供了对页面文档对象进行操作的手段。
2、dom结构模型
2.1 dom中的文档层次结构
在dom模型中,整个文档是一棵树的结构,树的根节点是document对象,表示整个文
档对象,并且它仅包含一个子节点.
例如:
new DocumentHello,ajax.
这个文档的层次结构是:
根节点: document
子节点: html
文本节点:
父节点
兄节点:
整个html文档实际上是具有树状层次结构的节点组成,彼此之间可以通过父节点、子节点和兄节点的关系互相引用。
当引用到一个节点,实际上就是获取一个节点对象。通过dom定义的方法,可以对该节点进行操作。
节点的类型
在xml(html)文档中,不仅每个闭合的标记是一个节点,而且闭合标记中的文本、标
记内的属性也是节点。分别称为元素节点、文本节点和属性节点。
例如:
labelll
3 处理DOM中节点
3.1、直接引用节点
在dom模型中引用一个节点可以有多种方式,下面分别介绍。
(!)使用document.getElementById()引用指定id的节点
在html文档中