ASP.NET学习网|ASP.NET教程|ASP.NET MVC|ASP.NET 源码|VS2010教程|ASP.NET视频教程

0】开篇序言：
    在《WCF分布式安全开发实践》系列文章之后，很想重新开启一个系列文章，来完善WCF的学习知识。思考很久，决定写一下WCF和AJAX学习的文章，取名为《WCF与AJAX编程开发实践》。
   这个系列主要关注在WCF于AJAX集成的开发学习上。考虑到很多没有AJAX的朋友，可能要接触WCF。这里会从头开始。最初的AJAX概念和原理，然后会讲解微软的ASP.NET AJAX，中间是支持AJAX的Web　Service，因为在WCF之前,Web　Service已经支持AJAX集成交互了，这里作为过渡知识，会单独给出一篇介绍。最后正式进入WCF和AJAX的学习阶段，进而分析一些与AJAX相关的重要的WCF的特性。

            图1.WCF与AJAX编程开发时间课程方向

    1.AJAX = Asynchronous JavaScript and XML.
    2.AJAX is based on JavaScript and HTTP requests.（）。
    3.AJAX is a type of programming made popular in 2005 by Google (with Google Suggest).
    4.AJAX is not a new programming language, but a new way to use existing standards.
    翻译为中文以后就是：
    1.AJAX等价于Asynchronous JavaScript and XML.
    2.AJAX基于JavaScript和HTTP请求
    3.AJAX是一种由Google 提示而流行起来的编程方式，
    4.AJAX 不是一种新的编程语言，而是一种使用现有标准的新方法。

【1.1】历史回顾：AJAX在1998年前后得到了应用。允许客户端脚本通过XMLHTTP对象发送HTTP请求给服务端。第一个XMLHTTP组件由Outlook Web Access小组完成。该组件原属于微软Exchange Server服务器产品，并且迅速地成为了Internet Explorer 4.0的一部分。所以很多人认为第一个比较成熟应用了Ajax技术的成功的商业应用程序久是：Outlook Web Access。它使得Outlook Web Access成为包括Oddpost的网络邮件产品在内的许多产品的领头羊。但是AJAX的推广不得不提到另外一个公司：GOOGLE。2005年初，正是由于Google的大规模应用，才使得Ajax被大众所了解。Google在它著名的交互应用程序中使用了异步通讯，如Google讨论组、Google地图、Google搜索建议、Gmail等。只要使用到Google产品的人都知道，最简单的就是搜索提示，当用户输入一个字符的时候，会自动提示匹配的结果数目。大家可以到这里测试一下：http://www.google.com/。
    Ajax这个词由Jesse James Gaiiett2005年在《Ajax: A New Approach to Web Applications》一文所创。从此AJAX为业界接受。另外，Mozilla Firefox、Opera 以及 Safari 浏览器的支持，也使得AJAX的得推广更加容易，使得该技术走向成熟。
【1.2】基本原理与优点：
     AJAX技术的本质原理就是：使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象，JavaScript 可在不重载页面的情况与 Web 服务器交换数据。然后通过DOM更新部分页面原属。

     Ajax最大的优点在于它带来的更好的用户体验。传统的web页面请求不同，AJAX技术当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单，然後返回一个新的网页。这个做法浪费了许多带宽，因为在前後两个页面中的大部分HTML代码往往是相同的。AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。
     AJAX 可使因特网应用程序更小、更快，更友好。
【2】相关的重要Web技术：
   AJAX基于JavaScript和HTTP请求，那一定会使用到一些现有的技术，或者标准。简单来说就是：
（1）JavaScript，脚本语言，操作DOM页面对象，使用XMLHttpRequest 对象来直接与服务器进行通信。
（2）XML ：跨平台数据传递的标准。
（3）HTML ：超文本标记语言。
（4）CSS ：级联样式表，CSS提供了从内容中分离应用样式和设计的机制。
  在 AJAX 中使用的 Web 标准已被良好定义，并被所有的主流浏览器IE5+，Mozilla Firefox、Opera 以及 Safari 支持。AJAX 应用程序独立于浏览器和平台。
所以说AJAX不是一个新技术，而是现有技术和标准的结合。
【3】浏览器兼容性：
     关于AJAX的应用，要考虑的一个重要问题就是浏览器的兼容性，因为各个厂商在定义诸如AJAX和CSS样式特性的时候，标准不统一，应用过程中会出现浏览器兼容的问题。例如对于XMLHttpRequest。构建一个运行在不同浏览器就需要特别注意。
    这个问题解决的办法之一就是在使用这些对象的时候，判断浏览器，进而区别对待。另外一个推荐的方式就是使用现有的AJAX框架，它们符合跨浏览器AJAX开发的客户端JavaScript库。一些流行的框架包括:AJAX.Net, Backbase, Bitkraft, Django, DOJO, DWR, MochiKit, Prototype, Rico, Sajax, Sarissa, and Script.aculo.us.可以直接使用。XMLHttpRequest 对象得到下列浏览器的支持：Internet Explorer 5.0+、Safari 1.2、Mozilla 1.0 / Firefox、Opera 8+ 以及 Netscape 7。
【4】XMLHttpRequest:

    前面我们提到，AJAX的核心在于XMLHttpRequest 对象。它是AJAX实现的基础。AJAX通过使用 XMLHttpRequest 对象创建一种动态性极强的web 界面。Google 就是很好的例子。当你在Google 的搜索框中输入查询时，XMLHttpRequest 会向某个服务器发出这些字词，然后服务器会返回一系列的搜索提示。
【4.1】对象创建：
    不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。IE 浏览器使用 ActiveXObject，而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。代码如下：

<script type="text/javascript">
function ajaxCall()
 {
 var xmlHttp;
 try
    {
   // Safari 1.2、Mozilla 1.0 / Firefox、Opera 8+ 以及 Netscape 7等浏览器
    xmlHttp=new XMLHttpRequest();
    }
 catch (e)
    {
  // Internet Explorer 5.0+浏览器
   try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
   catch (e)
      {
      try
         {
         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
         }
      catch (e)
         {
         alert("浏览器不支持AJAX！");
         return false;
         }
      }
    }
 }
</script>
    这里代码在实例化XMLHttpRequest 对象的时候做了异常处理，从而尝试创建浏览器支持的实例。
【4.2】对象状态：
    在使用XMLHttpRequest对象时， 我们可以通过readyState属性来判断服务器响应状态。返回值与状态的关系如下：
状态 描述
0 请求未初始化（在调用 open() 之前）
1 请求已提出（调用 send() 之前）
2 请求已发送（这里通常可以从响应得到内容头部）
3 请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）
4 请求已完成（可以访问服务器响应并使用它）
    也就是说，我们在readyState==4的时候，来处理返回结果。这样保证了XMLHttpRequest对象完成了与服务器的交互过程。

(责任编辑：admin)