AJAX学习(一)

最新推荐文章于 2024-09-14 14:18:13 发布

原创最新推荐文章于 2024-09-14 14:18:13 发布 · 965 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #javascript #colors #xmlhttprequest #function #asynchronous

本文介绍了AJAX技术及其与传统Web应用的区别，并深入探讨了JavaScript的基础知识，包括语法、变量、数组、函数及对象等内容。

引言早听说AJAX神奇的功能，从今天开始关注此技术。并分享自己的学习心得，浏览此篇文章的网友，也请你

们多多留下你们的经验，让我们一起进步...呵呵

一、AJAX基础

1. 首先了解什么是AJAX？

先从实例入手，我们可以打开www.google.cn搜索时，输入搜索条件，马上下面会显示很多类似的条件供我

们选择，看似好像从客户端出来，其实是从服务器端调的数据，这就是AJAX的一个实例，从这一点我们就可以

完全感觉到AJAX确实有非比寻常之处。

　　2.AJAX定义

n　　Ajax (Asynchronous JavaScript and XML)不是一个新的技术，事实上，它是一些旧有的成熟的技术以一种全新的更加强大的方式整合在一起。

　　Ajax的关键技术：

　　使用XHTML(HTML)和CSS构建标准化的展示层

　　使用DOM进行动态显示和交互

　　使用XML和XSLT进行数据交换和操纵

　　使用XMLHttpRequest异步获取数据

　　使用JavaScript将所有元素绑定在一起

　 3. 传统的WEB应用与AJAX应用的区别

从上图我们可知,左边的是一个传统的web应用,基于b/s结构,用户通过客户端提交请求(表单形式)通过HTTP协议给服

务器端,服务器端接收数据,在后台进行逻辑处理,把请求结果通过html+css展示给用户.右边的图也是b/s结构,但是在

客户端多了一个重要的层次,ajax engine.用户发送的请求不再直接发给服务器了,而是通过javascript的调用,把它发

送给ajax-engine,然后再通过ajax-engine发送给服务器端,也是通过http协议,服务器对数据的处理与传统的web应用

基本类似,但处理结果只包含客户端需要的数据,当然可以以xml的格式,但不局限于此格式,(传统的web 应用是返回整

个页面的结果).返回是仍然通过ajax-engine这一层,由它做进一步的处理,然后以html+css 形式返回最终的结果,

从上面分析我们可知,传统的web应用,当服务器在处理请求时,用户能够做什么呢?只有等待!!!

javascript基础

JavaScript是Netscape公司与Sun公司合作开发的。在JavaScript出现之前，Web浏览器不过是一种能够显示超文

本文档的软件的基本部分。而在JavaScript之后，网页的内容不再局限于枯燥的文本，可交互性得到了显著的改

善。
JavaScript是一种脚本语言，一种解释性的，基于对象的脚本语言。JavaScript脚本通常只能通过Web浏览器进行解

释和执行而不是像普通意义上的程序那样可以独立运行。

在HTML基础上，使用JavaScript 可以开发交互式Web网页。 JavaScript的出现使得网页和用户之间实现了一种实

时性的、动态的、交互性的关系，使网页包含更多活跃的元素和更加精彩的内容。

注意，JavaScript与Java没有任何联系。只不过名称上近似而已!/

下面我们来学习javascript的语法,语句是javascript基本的组成单位,我们只要把各条语句分在不同的行上即可,没有分

号结束也可,但在每条语句结束,是一个非常好的编程习惯!整个结构非常清析.

注释:

单行注释 //line

多行注释 /* line1

line2 */

变量

javacsript变量比较特殊,JavaScript不要求在声明变量时必须明确指出其数据类型（所以称JavaScript为弱类型语言），可以使用统一的关键字var进行声明：

var age = “thirty three”;
age = 33;

但是提前对变量做出声明是一种良好的编程习惯,变量名允许包含字母、数字、美元符号和下划线字符，但不允许包括空格或标点符号.

JavaScript中重要的数据类型：
    未定义（Undefined），变量未定义
   空（Null），变量未初始化
    字符串（String），可以放在单引号或双引号中
    数值（Number），可以表示整数、浮点数
    布尔型（Boolean），true或false
    对象（Object）

数组

数组用来存储一组值，使用关键字Array来声明，声明时可以指明数组的长度：
var colors = new Array();
var colors = new Array(3);
其中new关键字可以省略，类似其它语言，数组的下标从0开始，赋值方法也和其它语言类似：
colors[0] = “red”;
colors[1] = “black”;
colors[2] = “white”;
还可以使用方括号创建数组时同时初始化：
var colors = [“red”, “black”, “white”];

n使用方括号创建数组对象的简单方法：
nvar colors = [ ]; //声明空数组对象
ncolors[0] = “red”;
ncolors[1] = “black”;
n通过数组的length属性可以得到数组中元素的个数。如:colors.lenght 数组的长度可以动态扩展：
ncolors[3] = “blue”;
ncolors[8] = “grey”;
n关联数组：在填充数组时为每个新元素明确地给出下标：
ncolors[“r”] = “red”; //注意:关联数组下标必须使用” ”
nColors[“b”] = “black”;

JavaScript语法——操作、条件语句、循环语句

JavaScript中的算术运算符（+、-、*、/、++、--等）、比较运算符（>、<、=、<=、>=）、条件语句（if、while、for等）

使用函数可以避免重复输入大量相同的内容。JavaScript中使用function关键字定义函数：
function name (arg1, arg2, …) {
statements;
}
声明一个简单的函数：
function multiply(num1, num2){
var total = num1 * num2;
return total;
}
声明后可以直接调用此函数获取结果：
var result = multiply (5, 9);
注意，JavaScript中的函数不需声明返回类型，参数也不需要声明类型

函数

对象

和JavaScript对象是由一组相关的属性和方法构成的数据实体。属性和方法都要使用“.”来访问：
object.property
object.method()
使用函数来定义“类”：
function Person() {
this.age = 12;
this.name = “no name”;
this.sayHello = function() {
alert (“Hello everyone!”);
}
}
使用new关键字来创建对象实例：
var vincent = new Person();

时间不早了,今天就讲到这,明天开始学习DOM基础!