Ajax入门及JavaScript基础

2018-05-03作者:陈华 著编辑:Solomon

Ajax 全称是 Asynchronous JavaScript and XML,即异步 JavaScript 和 XML,这也概括了 Ajax 应用 程序的基本特点:由 JavaScript 编写、程序异步执行、用 XML 来封装和传输数据。Ajax 并不是什么新技术,而是将各种已经存在的成熟技术,采用一种崭新的开发模式重新揉合在一起,使得古老的 B/S 方式的 Web 开发焕发了新的活力,迎来了第二个春天。具体来说,Ajax 主要由以下技术组成:

1、HTML

 2、CSS

 3、DOM(HTML DOM 和 XML DOM)

 4、JavaScript

 5、XML

 6、XMLHttpRequest


虽然 XMLHttpRequest 的出现已经有近十个年头,但是 Ajax 这个概念却是直到 2005 年 2 月才被 Adaptive Path 公司负责用户体验策略的主管 Jesse James Garrett 正式提出。他在 2005 年 2 月 18 日发表了一篇题为《Ajax:A New Approach to Web Applications》(Ajax:一个 Web 应用的新途径)的论文,明确地将 Ajax 定义为 Asynchronous JavaScript and XML,这就是 Ajax 这个名词的由来。而 Ajax 技术应用的先驱和主要推动者则是著名的搜索引擎公司:Google。Google 在 2005 年推出 的 Gmail,充分展示了 Ajax 的魅力所在,吸引了无数用户。从此,在全世界范围内逐渐刮起了一阵 Ajax的旋风。Google 公司在之后相继推出的新版 Google Groups、Google Suggest 和 Google Maps 中,都给予了Ajax 充分的表现空间。Google Suggest 能够根据用户的输入立刻显示关键词的建议和相关条目的搜索 结果数量。Google Maps 给用户呈现出可以任意放大、缩小和移动地图的超凡体验。而后,Google 公司更是基于 Ajax 构建出了 Gmail Chat、电子表格、日历等接近传统桌面应用程序体验的 Web 应用程序,将 Ajax 和 Web 的发展又往前推进了一大步。


与此同时,其他厂商也不甘示弱。微软在推出的 MSN Space 和 MSN Virtual Earth 服务中都大量采 用了 Ajax 技术,并且还提供了一个名为 Atlas 的基于 ASP.NET 2.0 的 Ajax 开发框架(最终被命名为 ASP.NET Ajax)。另一个广为人知的 Ajax 应用,则是被雅虎收购的 Flickr.com 提供的一种基于 Ajax 技术的图片管理服务。虽然其功能并不是十分强大,但是用户可以非常方便地在浏览器中对图片的标题、描述和标签等内容进行修改,这些改变在用户结束输入的同时就被保存了下来,并留在了网页上。随着 Ajax 应用的逐渐广泛和深入,Ajax 应用程序的开发效率成为了一个重要的问题。在这时,先 后涌现出了一大批优秀的 Ajax 应用框架:从底层开发框架 Prototype.js 到 UI 框架 YUI/YUI-ext,再到 代码组织框架 JSVM 等;从早期单纯的客户端框架,到后期与服务端整合的开发框架,如 ASP.NET Ajax、 GWT 等,都标志着 Ajax 技术正在逐渐走向成熟和辉煌。


111111.jpg


本节将向读者展示本书第一个 Ajax 程序实例,正如同很多程序设计教程的实例都从 Hello World 开始一样,本书的第一个例子名字就叫“Hello World!”。“Hello World!”的流程很简单,当页面打开时,页面的脚本程序向后台程序发送 Ajax 请求,从 而获得后台程序输出的问候语:Hello World!,然后以对话框的形式显示出来。前台页面 HelloWorld.html 代码如下所示。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hello World</title>

<script type="text/javascript">

try {

      var xmlhttp = new XMLHttpRequest(); }

      catch(e) {

      var xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); }

      xmlhttp.open('GET','hello_world.php',true); xmlhttp.onreadystatechange = function()

  {

      if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {

      alert(xmlhttp.responseText); }

  }

xmlhttp.send(); </script>

</head>

<body> 

</body>

 </html>


本章主要是让读者对 Ajax 技术有一个初步的认识。通过 Ajax 概述,读者可以了解到 Ajax 技术实际上是由几种成熟的技术所组成的一个综合性的应用,通过 XMLHttpRequest 对象来发送异步请 求,从而创造了一种新的 Web 开发模式。接着向读者介绍了两个经典的 Ajax 例:GoogleSuggest 和 Gmail,让读者认识了现实中的 Ajax 应用程序到底是什么模样,了解了广泛应用的 Ajax 程序的一些基 本模式。最后一节向读者展示了一个基本的 Ajax 应用程序的代码。将会辅以实例着重向 读者介绍 Ajax 的主要开发语言:JavaScript。


JavaScript 最初叫作 LiveScript,是网景(Netscape)公司在设计浏览器时,一方面为了辅助本身发 展的一种名为 LiveWire 的技术,另一方面为了提高网页的互动性,而创造的一种程序设计语言。后来 网景公司与 Sun 公司合作,为了辅助 Java 在网页程序方面的设计,而共同发展 LiveScript 语言,并且 将其改名为 JavaScript,这就是 JavaScript 的由来。


JavaScript 是一种轻量级的、解释性的程序设计语言,而且具备一定面向对象的能力JavaScript 与操作系统无关,它依赖于 JavaScript 的解释引擎。浏览器通过内嵌 JavaScript 的解释引擎从而获得了 对 JavaScript 的处理能力。通过在网页中嵌入<script>标签,将JavaScript 脚本添加到网页中,使得网页 不再是简单的静态 HTML,而是包含了控制浏览器的程序、动态创建 HTML 内容和与用户交互的程序, 即动态 HTML(DHTML)。


在语法结构上,JavaScript 继承了 C 语言的一些特点,诸如 if 语句、while 循环和&&运算符这样的 结构。但是与 C、C++、Java 等程序设计语言所不同的是,JavaScript 是一种无类型(弱类型)的语言, 这就是说,它的变量不需要具有一个明确的数据类型。而且,JavaScript 中的对象也与 C 中的结构或 C++和 Java 中的对象不太一样,它更像 Perl 中的关联数组。另外,JavaScript 面向对象的继承机制也与 C++和 Java 大相径庭。


一直以来,人们对 JavaScript 有着很多误解,此时很有必要在读者进一步了解它之前对其进行澄清。

   1、JavaScript 不是 Java 的简化版在最新的金山词霸中查找 JavaScript

   2、JavaScript 并不简单

JavaScript 在很多人心目中都是一种简单的脚本语言的形象。而脚本语言与程序设计语言的差别在 于:脚本语言往往很简单,它们是提供给非程序设计人员的程序设计语言。JavaScript 的很多特性使得 它更加灵活,让程序设计的新手能更容易地使用,而非程序设计人员也可以用它来做一些简单的工作。 其实 JavaScript 是一种具有丰富特性的程序设计语言,它和其他所有的语言一样复杂,甚至比某些语言 还要复杂得多。当一个程序设计人员没有扎实的 JavaScript 基础,要想进行复杂的任务,例如搭建大型Ajax 应用时,就会显得举步维艰了。

  3、JavaScript、JScript 与 ECMAScript

很多人并不清楚 JavaScript、JScript 与 ECMAScript 之间的联系和区别。因为 JavaScript 作为网页 的客户端脚本语言非常成功,使得微软(Microsoft)在 1996 年 8 月将之引入了自己的浏览器 Internet Explorer 3.0 中,并取名为 JScript。1996 年 11 月,网景(Netscape)将 JavaScript 提交给欧洲计算机制 造商协会进行标准化,并在 1997 年 6 月被采纳推出 ECMA-262 标准,并将其命名为 ECMAScript。 JavaScript 与 JScript 都与 ECMAScript 相容,并包含超出 ECMAScript 的功能。本书中统一使用 JavaScript 来引用这些版本中的一个,包括微软(Microsoft)公司的 JScript。


JavaScript 的版本

JavaScript 发展到现在,经历了多次版本的更替。现在主流的浏览器中使用的版本都是基于

ECMAScript v3 的实现,本书也主要针对这个版本做相关介绍。


2222.jpg


数据类型和值

所有的计算机程序都是通过操作各种不同的值(value)来运行的,而值的类型称为数据类型(data type)。程序设计语言最基本的特性之一,就是它所支持的数据类型的集合。JavaScript 支持 3 种最基 本的数据类型:数字、字符串和布尔值,另外还支持两种比较特殊的小数据类型:null(空)和 undefined(未定义),它们各自只被定义了一个可以被使用的值。除此之外,JavaScript 还支持复合数据类型:

对象、数组、函数以及一些对象类。下面将对它们一一介绍。


数字

数字(number)是最基本的数据类型。与其他程序设计语言不同,JavaScript 并不区分整型数值 和浮点数值,所有的数字都是由浮点型表示的。JavaScript 采用 IEEE754 标准定义的 64 位浮点格式来 表示数字。当一个数字大于 JavaScript 所能表示的最大值时,会返回一个特殊的无穷大值:Infinity。同样,当 一个负值比 JavaScript 所能表示的最小的负值还要小时,结果就是负无穷大:-Infinity。当一个数值的 运算产生了未定义的结果或者是发生错误后返回时,这时结果会是一个非数字的特殊值:NaN,它与 包括自己在内的任何值都不相等,所以 JavaScript 提供了一个专门的函数 isNaN()来检测它,相关的函 数 isFinity()可以用来检测一个 NaN、Finity 或-Finity 值。

var a = 1000;

var b = 3.1415926; var c = 4.14e2;

var d = 3.28E-5;


字符串

字符串(string)是由单引号或者双引号括起来的 Unicode 字符序列,其中可以含有 0 个或多个字 符。与 C、C++或 Java 不同的是:JavaScript 并没有 char 这种单个字符的数据类型,所以要表示单个字 符,只能用长度为 1 的字符串来代替。用引号界定的字符串中可以包含单引号,用单引号界定的字符串中可以再包含双引号。如果用单 引号界定的字符串中需要再使用单引号,或者用双引号界定的字符串中需要再使用双引号,则可以使 用转义符(反斜线)对其进行转移。

var str1 = 'Hello World!'; 

var str2 = "Hi,my friend!";

var str3 = 'b'; 

var str4 = " ";

用引号界定的字符串中可以包含单引号,用单引号界定的字符串中可以再包含双引号。如果用单 引号界定的字符串中需要再使用单引号,或者用双引号界定的字符串中需要再使用双引号,则可以使用转义符(反斜线)对其进行转移。

var str1 = 'Please say: "Hello".';

var str2 = "I know what 'JavaScript' is. ";

var str3 = 'I don’t know.';

var str4 = "We usually use ” to mark a string.";


布尔值

布尔值(bool)只有两个值:true 和 false,用于表示某个事务为真还是为假。在 JavaScript 中,布尔值通常用在作为比较的结果和流程控制中。

if(a == 4) {

alert("a 等于 4"); }

else {

alert("a 不等于 4"); 

}

在上例代码中,表达式 a == 4,判断变量 a 的值是否与 4 相等,返回一个表示比较结果的布尔值。 如果这个值为真(true),则执行“alert("a 等于 4");”这行代码;否则,则执行“alert("a 不等于 4");” 这行代码。


函数

函数(function)是一个可执行的程序代码段。函数被定义后,可以多次被程序所调用。JavaScript 的函数可以带有实际参数或形式参数,用于指定这个函数执行计算时所需要使用到的一个或者多个值, 在函数执行完后可以返回一个值来表示计算结果。一个计算两数和的函数代码如下所示。

function add(a,b) {

var c;

c = a + b; return c;

//函数声明,函数名为 add,接受两个参数:a 和 b //函数体开始

//声明变量 c

//计算 a 和 b 的和并保存到变量 c 中

//将 c 的值作为函数的返回值返回 //函数体结束

}

这里为了让读者更容易理解,书写的比较繁琐,其实可以更简洁地表达这个函数,代码如下所示。

function add(a,b) {

return a + b; }

下面是调用它的代码。

var a = add(1,3); var b = add(1,2); var c = add(a,b);

//a = 4 //b = 3 //c = 7

JavaScript 一个非常重要的特性就是 JavaScript 代码可以对函数进行操作。在许多其他语言中,函 数都只是语法结构,它们可以被定义和调用,但却不是数据类型。而 JavaScript 中的函数却是一个真正 的数据类型,这使得函数可以被存储在变量、数组和对象中,而且还可以把函数作为参数传递给其他 函数,给语言带来了巨大的灵活性。

将函数保存在变量中,代码如下所示。

var add = function(a,b) //使用匿名方法声明函数,并保存在 add 变量中 {

return a + b; }

var c = add(1,2); //调用 add 变量中保存的函数,运行结果为 c = 3 将函数作为参数传递,代码如下所示。

function add(a,b) //声明一个计算两数和的函数,函数名为 add {

return a + b;

}

function exec(a,b,func) {

//声明一个函数名为 exec 的函数,接受 3 个参数:a、b、func //以 a 和 b 为参数调用函数 func,并返回计算结果

//以 1、2 和函数 add 作为参数调用函数 exec,运行结果为 c = 3

return func(a,b);

var c = exec(1,2,add); 函数还可以被保存到对象的属性中,此时往往被当作对象的方法来使用,

}

var person = new Object(); person.name = 'Robin Chen'; person.getName = function()

{

return this.name;

var name = person.getName();


对象

//创建一个对象:person

//给 person 对象添加一个 name 属性,其值为'Robin Chen' //给 person 对象添加一个 getName 属性 //并声明一个匿名函数保存在该属性中

//返回当前对象的 name 属性

//调用 getName 方法(即调用 getName 属性中所保存的函数)

//运行结果为 name = 'Robin Chen'

对象(object)是已经命名的数据的集合,这些被命名的数据通常被作为对象的属性来使用,数据 的名称是对象的属性名,而数据的值则是对象的属性值。对象的属性本身可以是任何的 JavaScript 数据 类型。创建一个对象可以使用 new 关键字创建对象实例,也可以使用对象直接量的语法。

var person = new Object(); 

person.name = 'Robin Chen'; 

person.sex = 'male';

与下面的写法是等价的。

var person = { name:'Robin Chen',

sex:'mail' }

注意:当使用诸如 person.name = 'Robin Chen'的语句时,程序首先会检查 person 对象是否包含 name 属性,如果包含,则将 name 属性的值改变为'Robin Chen';如果不包含,则会为 person 对象创建 一个名为 name 的属性,并将其值设置为'Robin Chen'。

对象还可以作为关联数组来使用,代码如下所示。 

var name = person.name;

var sex = person.sex;

和下面的写法是等价的。

var name = person['name']; var sex = person['sex'];


数组

数组(array)和对象一样,都是数据的集合,所不同的是:对象中每一个数据元素都有一个名字, 而数组中的每一个数据元素都有一个编号(下标)。数组的下标是从 0 开始的。例如有一数组名字为 a, 则 a[0]表示第一个元素,a[1]表示第二个元素,依此类推。数组的元素可以为任何 JavaScript 数据类型。 JavaScript 没有多维数组,但是数组的元素可以为其他数组。JavaScript 是一种无类型的语言,所以 JavaScript 中数组的元素不需要具有相同的类型。数组的创建也和对象的创建一样,支持两种方式,代码如下所示。

var a = new Array(); a[0] = 1;

a[1] = 'Robin Chen'; a[2] = new Object();

和下面的写法是等价的。

var a = [1,'Robin Chen',new Object()];

new Array()还可以带参数使用。当参数只有一个时,如果该参数为数字,则会返回一个含有该参 数所标识的元素数量的数组,如果数字不是整数,则会发生错误并抛出异常。如果该参数不是数字, 或者提交的参数不止一个时,则参数会被按照书写顺序作为返回的数组的元素保存下来。

var a = new Array(8);

数组 a 有 8 个元素。

var a = new Array(3.14); 则发生错误,提示:数组长度必须为有限正整数。

var a = new Array('abc');

数组 a 有 1 个元素,为'abc'。

var a = new Array(1,3.14,'abc');

数组 a 有 3 个元素,按照下标顺序依次为:1、3.14、'abc'。


null 值

JavaScript 中的 null 关键字是一种特殊的值,它表示“没有值”。它是独一无二的,有别于所有其 他类型的值。null 通常用来标识和判断目标对象是否有意义。当一个变量的值为 null 时,就可以判断 它的值不是有效的数字、字符串、布尔值、对象和数组。


undefined 值

未声明的变量,或者使用了一个声明了但并未赋值的变量,或者使用了一个并不存在的对象的属性/方 法时,程序就会返回这个值。注意,undefined 和 null 虽然不同,但是表达式 undefined == null 却是返 回 true,所以如果要比较 undefined 值和 null 值,需要使用全等运算符===。


关注微信公众号书问,免费领取万本好书!


内容来源:书问

作者强锋科技、陈华
出版清华大学出版社
定价76元
书籍比价

分享到

扫描二维码 ×

参与讨论

电子纸书

程序员突击——Ajax原理与系统开发

陈锋敏、罗田、李颖智
清华大学出版社[2009] ¥20

JavaScript从入门到项目实践(超值版)

聚慕课教育研发中心
清华大学出版社[2018] ¥63

HTML5+CSS3+JavaScript从入门到精通(微课精编版)

前端科技
清华大学出版社[2018] ¥48

JavaScript 网页编程从入门到精通

杨凡
清华大学出版社[2017] ¥71

HTML+CSS+JavaScript网页设计从入门到精通

胡晓霞
清华大学出版社[2017] ¥65

JavaScript从入门到精通(第2版)

明日科技
清华大学出版社[2017] ¥48

JavaScript从入门到精通

明日科技
清华大学出版社[2012] ¥35

HTML5+ CSS3+JavaScript 网页设计实战

常新峰, 王金柱, 编著
清华大学出版社[2018] ¥40

看透JavaScript:原理、方法与实践

韩路彪
清华大学出版社[2017] ¥51

出版业领先的TMT平台

使用社交账号直接登陆

Copyright © 2018 BookAsk 书问   |   京ICP证160134号


注册书问

一键登录

Copyright © 2018 BookAsk 书问   |   京ICP证160134号