AJAX初级教程之初识AJAX

从刚刚接触B/S开发,就耳闻AJAX技术,但一直处于模棱两可的状态,大道理明白,一到动手就傻眼了。

AJAX仿佛就是深不可测的技术,成为B/S学习过程中的一个阴影。

直到前些日子,小菜才真正开始AJAX实践,真正动手了才发现,AJAX并没有那么困难,如果不考虑AJAX的变型应用,只考虑AJAX基本应用,它还是相当简单的,过于复杂的理论阻碍了我们动手的积极性。

因此,本系列教程将从实用的角度出发,以最快的速度让读者掌握基本的AJAX应用,以最直接的方式展示AJAX技术。

为了更好的阅读本系列教程,对读者有如下要求:

l 熟悉HTML。

l 熟悉HTTP协议。

l 熟悉javascript。

l 熟悉XML。

l 熟悉XML DOM。

AJAX并不是一项新技术,它只是一个新标准。根据小菜个人理解,所谓AJAX技术,即为了实现客户端和服务器的后台交互,以xml作为信息载体,利用javascript进行控制,通过HTTP协议进行交互,达到html界面部分刷新的效果。

下面小谈一下这些技术。

HTML没啥好说的。

HTTP协议内容就比较多了。在AJAX实践中,会涉及到POST、GET方法请求数据、HTTP头部信息的构造、数据的解析格式等,主要就是这三项,看看哪个不熟悉,赶紧补习吧!不过都很简单,不要有压力。

小菜觉得AJAX就是在写Javascript脚本,javascript负责声明一个至关重要的XMLHttpRequest对象,这个对象通过POST或GET方法向服务器发送请求,取得xml的格式的返回数据,再把xml解析,展示在界面上,这就是AJAX执行过程。

xml无非就是一种数据规范,它可以使数据具有一定结构,这样一来,方便了数据组织,又方便了数据扩展。

xml的基本组成是元素,也就是HTML中常说的标签,例如:<book></book>;而元素和元素又可以嵌套,例如:<book><name></name></book>。同时,元素又可以拥有属性,例如:<book><name data=”一千零一夜”></name></book>。

这样一来,xml就可以表示非常丰富、灵活的信息,甚至可以当成小型数据库来用。

在此,小提一下,建议用子元素的方法来扩展元素,例如:<book><name></name></book>,不建议用属性的方式扩展元素,例如:<book name=””></book>,因为子元素比属性更加灵活,也符合xml的设计思想。

想要用Javascript操作xml,必须了解基本的DOM(Document Object Model)知识。为了方便读者学习,小菜简单介绍一下XML DOM。

根据DOM定义,xml中每个成分都是一个节点。根据小菜的理解,成分的含义就是xml的组成部分。

具体如下:

l 整个文档是一个文档节点。

l 每个xml标签是一个元素节点。例如<book></book>是一对标签,也叫元素节点,又叫元素。

l 包含在xml元素中的文本是文本节点。例如<name>一千零一夜</name>,其中“一千零一夜”就是文本节点。

l xml元素的属性叫属性节点。例如<book serialNumber=”0905024”></book>,其中serialNumber就是属性节点。

节点有三个非常重要的属性,分别为:nodeName(节点名称)、nodeValue(节点值)、nodeType(节点类型)。其中nodeName和nodeValue非常常用,必须搞清楚。

对于nodeName(只读)有:

l 元素节点的nodeName与该元素的标签名相同。例如元素<book></book>,它的nodeName就是book。

l 属性节点的nodeName就是属性名称。例如<book serialNumber=” 0905024”></book>,属性节点是serialNumber,那么它的nodeName属性也是serialNumber。

l 文本节点的nodeName是固定的#text字符串。例如<name>一千零一夜</name>,文本节点是“一千零一夜”,它的nodeName将返回”#text”这个固定字符串。

对于nodeValue(读/写)有:

l 元素节点的nodeValue返回undefind。例如<book></book>元素,它的nodeValue属性将返回undefind。

l 属性节点的nodeValue即该属性的值。例如<book serialNumber=” 0905024”></book>,属性节点是serialNumber,它的nodeValue返回0905024。

l 文本节点的nodeValue即文本自身内容。例如<name>一千零一夜</name>,文本节点是“一千零一夜”,它的nodeValue返回“一千零一夜”。这个一定要特别注意!!!本例中name元素包含了一个“一千零一夜”文本节点,“一千零一夜”并不是name元素的值(nodeValue)!name元素的值(nodeValue)是undefind!因此实际编程时要注意,当获取到name元素时,还要类似firstChild、childNodes[0]这样进一步获取元素中包含的文本节点,然后才能用nodeValue属性读出文本内容。

综上,可以用一张图概括AJAX技术:

小菜精力有限,水平也有限,不可能把这些技术讲的很细,还需要读者有一定基础,本系列文章的目的是通过小菜的实战例子,让读者对AJAX恍然大悟,认清AJAX本质。

(0)

相关推荐

  • ThinkPHP中ajax使用实例教程

    本文实例讲述了ThinkPHP中使用ajax的方法,提交表单如下图所示: 点击提交,不需要刷新本页,将内容提交到数据库当中,并在本页显示提交的内容.如下图所示: 一.jquery实现方法: MessageAction.class.php页面代码如下: <?php class MessageAction extends Action{ function index(){ $this->display(); } function add(){ //ajaxReturn(数据,'提示信息',状态)

  • ASP ajax分页教程一

    为什么我写ASP分页教程要提到AJAX呢,因为我们要多练习一下编程过程中,结构化的重要性. 再加上很多朋友对分页感到很高深,所以一直都不敢去碰他,要么就用别人写好的组件,要么就是改改别人的东西.特别是.net,我深有感触,假如要快速开发一个项目,我想.net是一个非常优秀的平台.但是,因为他的严重控件化,反而是新手接触不到编程的思想,完全找不到编程的感觉,仿佛就象在搭积木.有时候还是要练习一下底层一点的东西,这样个人的技术能力才会得到提高.我可不想做只会用.NET的组装工人. 好了,下面给出AS

  • jquery 框架使用教程 AJAX篇

    小试了下AJAX,感觉比prototype简洁多了,在JQuery中,AJAX有三种实现方式:$.ajax(),$.post,$.get(). XHTML(主要): <div id="result" style="background:orange;border:1px solid red;width:300px;height:400px;"></div> <form id="formtest" action=&qu

  • 十大最佳Ajax教程收集(图文)

    由于它的灵活性.优美以及快速的响应时间可以提高开发体验等原因,Ajax在许多开发领域变得越来越流行.本文作者推荐了十大最佳Ajax教程,全文如下: 我承认Ajax有一个学习曲线,但一旦你把握要领认真学习并在项目中实施之,你就会享受到Ajax带来的开发乐趣.网上有成百上千的Ajax教程,你可以从头学习直至成长为高手. 我纵览网络收集了十大最佳Ajax教程,你可以从它们开始学习Ajax,也可以借助它们获得提高: 1.Easy Ajax with jQuery(http://articles.site

  • 分享精心挑选的12款优秀jQuery Ajax分页插件和教程

    Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 jQuery 框架很容易实现各种基于 Ajax 技术实现的功能.我们一起来看看下面这些优秀的分页插件. 1.Client-side jQuery pagination plugin : jPages jPages 是一款非常不错的客户端分页插件,有很多特色,例如自动播放.按键翻页.延迟加载等等. 浏览详情  在线演示 2. jPaginate: A Fancy jQuery Pagination Plugin jPa

  • ajax初级教程之获取博文列表

    在写这个Demo时,原本是想直接访问小菜博客的rss,但这是明显的跨域访问,是不允许的. 因此,小菜把博客rss保存到了本地,就是一个xml格式文件,直接用AJAX请求本地的xml文件. 通过本例,展示了如下技术: l  AJAX的核心类XMLHttpRequest的使用. l  AJAX通过GET方式获取服务端xml文件. l  利用Javascript操作xml文件. l  利用Javascript更新html界面.          Demo概要说明: index.html作为主页,引用a

  • jquery1.4 教程二 ajax方法的改进

    1 允许序列化嵌套的参数. 比如:{foo: ["bar", "baz"]} 将被序列化成foo[]=bar&foo[]=baz,而不是序列化成以前的foo=bar&foo=baz. 如果你想要使用旧的序列化方式,有三种设置方法: 复制代码 代码如下: jQuery.ajaxSettings.traditional = true; jQuery.param( stuff, true ); $.ajax({ data: stuff, tradition

  • Ajax+PHP简单基础入门实例教程

    首先我们来了解怎么在javascript中创建这个对象: 程序代码 var xmlHttp = new XMLHttpRequest(); 这行简单的代码在 Mozilla.Firefox.Safari.Opera 以及基本上所有以任何形式或方式支持 Ajax 的非 Microsoft 浏览器中,创建了 XMLHttpRequest 对象.但是对于市场占有率达到70%的IE来说,这种方法是不行的,而不同的IE版本还有不同的创建方法,所以我们需要在IE下面使用下面两种创建对象的办法: 程序代码 t

  • Ajax.基础教程 电子书版 提供下载

    Ajax.基础教程提供下载时间为2个星期以内,需要的抓紧下 screen.width-461) window.open('/upload/200729131038873.jpg');" src="http://files.jb51.net/upload/200729131038873.jpg" border=0> http://www.javascript.com.cn/Ajax.pdf 最好用迅雷下 (此资源来源于网络,如果侵犯您的版权,我们会马上删掉)

  • 比较简单的jquery教程 Easy Ajax with jQuery 中文版全集第1/3页

    Ajax在改变着web应用,并且带来了一种前所未有的桌面应用程序之外的震撼.但是,在这些宣传的背后我们应该意识到,其实ajax不过是--(X)HTML,Javascript以及XML,没什么新鲜的.在这个教程中,我将给你展示如何让简单的添加ajax到你的应用中去,并且教你如何使用一个流行的javascript库Jquey进行ajax开发. 1. 什么是ajax 你以前可能听说过ajax,或者至少用过ajax的应用--比如Gmail.简单的说,ajax就是使用javascript来异步地处理数据,

随机推荐