请简述ajax的过程,ajax简述过程.doc

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 Document

Hello,ajax.

这个文档的层次结构是：

根节点： document

子节点： html

文本节点:

父节点

兄节点：

整个html文档实际上是具有树状层次结构的节点组成，彼此之间可以通过父节点、子节点和兄节点的关系互相引用。

当引用到一个节点，实际上就是获取一个节点对象。通过dom定义的方法，可以对该节点进行操作。

节点的类型

在xml(html)文档中，不仅每个闭合的标记是一个节点，而且闭合标记中的文本、标

记内的属性也是节点。分别称为元素节点、文本节点和属性节点。

例如：

labelll

3 处理DOM中节点

3.1、直接引用节点

在dom模型中引用一个节点可以有多种方式，下面分别介绍。

(！)使用document.getElementById()引用指定id的节点

在html文档中