Ajax简述

转载 2015年11月19日 16:42:44

传统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>

   <script language=”JavaScript” type=”text/javascript”>

       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>

   <script language=”JavaScript” type=”text/javascript”>

       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 获取和设置属性节点的值

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

元素节点.属性节点

例如:

<img id=”imgDemo” src=”hello.jpg” alt=”demo”/>

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

 <script language=”JavaScript” type=”text/javascript”>

    Var imgNode-document.getElementById();

    imgNode.src=”ok.jpg”;   

</script> 

相关文章推荐

简述ajax的原理,如何实现刷新数据及优点

1.AJAX的工作原理 Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给A...

Ajax简述

一、什么是AJAX: Asynchronous JavaScript and XML,异步的javascript和XML   1, 它是一个客户端技术,是将原来的一些老的技术进行结合使用,产生一种新...

ajax 控件简述

UpdatePanel 局部刷新用 UpdateProgress 是一个和 ASP.Net AJAX UpdatePanel 控件相协作,可以使得页面用户在 UpdatePanel 向服务器提交请...

java jsp ajax

  • 2017年12月07日 08:39
  • 3.44MB
  • 下载

ajax页面传参 json数据渲染页面

ajax在两个页面之间进行传参操作一个页面获取值 并将获取的值 通过ajax传递到后台 并将数据返回的数据进行后台渲染...

oracle+ssm+ajax+Bootstrap

  • 2017年11月20日 20:45
  • 1.15MB
  • 下载

django 用ajax+post提交form 实现前后台数据绑定

首先要引入jquery文件,可以引入在线的,也可以下载离线的 添加进自己staticfiles 这里演示的是添加离线的 注意这句是要添加到自己写的ajax jquery脚本前。 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Ajax简述
举报原因:
原因补充:

(最多只允许输入30个字)