零基础“单刀直入”AJAX（含Demo演示源文件）_建站学-个人建站指南,网页制作,网站设计,网站制作教程

摘要：因为笔者的大四毕业设计是做WebGIS系统，用过Web版的Google地图人都应该深有体会，这是一种交互性很强而且很注重用户体验的一种网页，因此AJAX技术这进入此领域最基本的技能之一。这几个月来，笔者一路单人摸索过来，途经了多少昏暗迷茫的日子，最后终于从开始的甚至对ASP.NET网络编程都一无所知的小白成长到现在对AJAX技术已经有了一些整体了解的入门级小白了。以前在网上找到的资料要么就是从最的讲起（太底层了没用，干扰大家视线），要么就是直接来个应用（缺少基本介绍，初学者难以一下接受）。本文也就不来个“深入浅出”的客套了，直接来个“单刀直入”吧。本文是由一位“初学者”而写，也是为初学者而写，所以希望读过本文后，会对各位初学AJAX的同学有所帮助，还有，正因为是初学者所以难免有些疏漏，请大家不吝指正。

说明：本文所提及程序都是基于VS2008的.NET开发平台

AJAX简要介绍：

关于AJAX的发展史本文就不再重述了，有兴趣的同学可以到网上去搜索，这种你可以说我也可以说的话，应该到处都是，本文就都略去不讲了。对于AJAX的简要概述，笔者也只有一段话：

AJAX技术是一种能够将桌面应用程序的体验效果带给Web应用程序的技术。这种体验效果主要就是页面的无刷新数据交换以及页面无刷新改变内容。AJAX技术已经是动态网页必不可少的技术了，最著名也最经典的应用就是Google主页搜索框的“搜索建议”（用户输入一个词条后，搜索框立刻出现很多相关词条提示），还有Google地图，Gmail，各种微博客，校内人人网，WebQQ等等，AJAX技术已经将很多桌面应用程序搬到Web上去了,Web的传播力量是无与伦比的，用户在有网络和浏览器的情况下可以不需要安装任何桌面软件直接访问Web应用程序来获取自己需要的信息（比如Google Map）或者达到一些基本的通讯和办公需求（如WebQQ，Google Docs）。

好处不说了，自己去到上面说的那些网页上去体验吧。在开发过程中，如果你只是想达到目的不在乎过程，那么异步通讯是什么原理，你就可以不用看，只要知道经过哪些函数后能够传输数据，在哪些函数后可以接收数据，找到接口就足够了本文将对这些接口进行介绍。下面开始进入“单刀直入”环节。

Ajax(AsynchronousJavaScript and XML,异步JavaScript和XML)

A: Aschronorous	异步通讯，负责数据在服务器和客户端后台之间传输数据。
J: JavaScript	客户端编程语言，负责客户端数据编码解码数和数据的发送和接收以及通过操作DOM来改变和更新客户端浏览器中的页面内容。
A: And	这个单词大家都认识，我就不介绍了^_^。
X: XML	（Extensible Markup Language）即可扩展标记语言。负责数据的编码和解码。

下面就开始从三个重要组成来讲解AJAX技术

一、Aschronorous异步通讯的几种框架

1. 最基本的XmlHttpRequest

这基本上是所以的框架的基础，即使是后面介绍的几种实现起来更加简单的框架除去华丽的外衣，内部好像都是基于它。因为是最基础也是最底层的，所以缺点也就来了，不管实现什么功能都要面临繁重的代码工作量，笔者最初用过这种框架，后来发现了后面的几种在此基础上改进的框架后，就再也没有用过此框架了。所以，在此也只作简单介绍。

下面奉上一段客户端代码作为示例，里面有详细注释介绍（代码是很久前到网上找的，然后自己进行了一些修改并注释的，出处也忘记了，所以原创作者见谅）：

XmlHttpRequest异步通讯

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Ajax_AlertExample.aspx.cs" Inherits="ajax2" %>

<!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 runat="server">

<title>用AJAX的XMLHTTP技术显示服务器端XML内容</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<script type="text/javascript" language="javascript">

if(typeof($)!="function")

{

function $(id)

{

return document.getElementById(id); 

}

}

var http_request = false;

function makeRequest(url) 

{

http_request = false;

if (window.XMLHttpRequest) 

{ // Mozilla, Safari,...

http_request = new XMLHttpRequest();

if (http_request.overrideMimeType)

{

http_request.overrideMimeType('text/xml');

}

} else if (window.ActiveXObject) 

{ // IE

try

{

http_request = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e)

{

try

{

http_request = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e) {}

}

}

if (!http_request) 

{

alert('Giving up :( Cannot create an XMLHTTP instance');

return false;

}

//onreadystatechange：每个状态发生改变时，都会触发这个事件处理器，通常调用一个JS函数

http_request.onreadystatechange = alertContents;

http_request.open('GET', url, true);//建立对服务器的调用，第三个参数true表示是异步的

http_request.send(null);//向服务器发送请求，如果是异步的，那么就立刻返回，同步的话就会等待直到接收到响应为止。

}

function alertContents() 

{

if (http_request.readyState == 4) //readyState：请求的状态，共有5个状态，4表示完成。

{

if (http_request.status == 200)//status：服务器的HTTP状态码 200表示交易成功

{

var xmldoc = http_request.responseXML;

var root_node = xmldoc.getElementsByTagName('root').item(0);

$("receive").innerHTML=root_node.firstChild.data;

} 

else

{

alert('There was a problem with the request.');

}

}

}

</script>

<span style="cursor: pointer; text-decoration: underline" onclick="makeRequest('test.xml')" >

Make a request

</span>

<br />

<br />

<br />

<span id="receive">显示接收服务器数据</span>

</div>

</form>

</body>

</html>

上面的例子是对服务器端的一个xml文档进行请求，所以不需要在服务器端额外加入代码，只需要将一个如下格式的test.xml文档放在服务器根目录下即可。

<?xml version="1.0" ?>
<root>
I'm a test.
</root>

通过上面的例子可以看出，AJAX的实现过程就是客户端利用JS函数建立一个异步通讯类，然后向服务器端发起一个URL来请求数据，然后服务器端将客户端请求的XML文档发给客户端，客户端收到数据后，再进行解码提取出有用数据，并利用JS操作客户端的控件来显示出来。整个过程页面都没有进行任何刷新就更新了数据。具体效果，开发者可以自己去试试（源码见附件Demo）。

(责任编辑：admin)

搜索

热门标签:

零基础“单刀直入”AJAX（含Demo演示源文件）