Ajax简述

来源：互联网发布：淘宝里的极有家是什么编辑：程序博客网时间：2024/05/19 18:13

传统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.1dom中的文档层次结构

在dom模型中，整个文档是一棵树的结构，树的根节点是document对象，表示整个文

档对象，并且它仅包含一个子节点<html>.

例如：

<html>

<head>

<title> new Document </title>

</head>

<body>

Hello,ajax.

</body>

document

这个文档的层次结构是：

html

文本节点

根节点： document

子节点： html

文本节点:

父节点

兄节点：

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

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

节点的类型

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

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

例如：

<label for =”checkbox1”>labelll </lebel>

3 处理DOM中节点

3.1、直接引用节点

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

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

在html文档中，每个标记都可以有一个id属性。标准中规定：这个id必须是整个文档中唯一的。对于这个属性，document提供了getElementById方法来获取这个节点的应用。

例如：

<html>

<head>

<title> new Document </title>

</head>

<body>

<span id=”span1”>Hello,ajax.</span>

</body>

</html>

var spna1=document.getElementById(“span1”);

span1.innerHTML=”innerHTMLchanged”;

</script>

(2)使用 document.getElementsByTagName()引用指定标记名称的节点

<html>

<head>

<title> new Document </title>

</head>

<body>

<span id=”span1”>Hello,ajax.</span>

<span id=”span2”>Hello,ajax.</span>

</body>

</html>

var spna= document.getElementsByTagName(“span”)

for(var i=0;i< spna.length;i++)

{

Spna[i].innerHTML=”innerHTMLchanged”;

}

</script>

3.2、使用innerHTML改变节点的内容

innerHTML属性表示两HTML 标记间以代码形式表示的所有内容。

可以通过innerHTML属性获取或改变其中的内容。

3.3 获取和设置属性节点的值

每个属性节点都是元素节点的一个属性，可以通过如下形式访问：

元素节点.属性节点

例如：

可以使用如下的代码来获取和改变图片的地址：

Var imgNode-document.getElementById();

imgNode.src=”ok.jpg”;

</script>

0 0