关闭

Ajax简述

标签: ajaxjs
176人阅读 评论(0) 收藏 举报
分类:

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

0
0

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:6447次
    • 积分:111
    • 等级:
    • 排名:千里之外
    • 原创:2篇
    • 转载:16篇
    • 译文:0篇
    • 评论:1条
    文章分类