开心编程网

        作为Web应用程序模型的AJAX的出现使服务器端的面貌发生了巨大的变化。用户对着Web页面填写表单并单击提交按钮转到下一个链接的典型Web使用模式现在正在转变为更先进的客户端JavaScript以及功能更丰富的用户界面，只要对表单进行操作，比如单击一个复选框、按下一个键或将鼠标移到一个选项卡上，该用户界面就会不断地与服务器交互。
　　考虑一下从客户端传输到服务器的数据量有多大。从可用性的角度来看，用户在一个薄客户端浏览器上获得了富用户界面，无需安装任何东西。但是，当在服务器端扩展这些应用程序时就要付出代价了。AJAX应用程序的典型容量规划数可能会是标准Web应用程序的3到4倍。
　　有人可能会问：这对WebLogic Server有何影响?每个发送给WebLogic的HTTP请求都要使用一个执行线程。根据AJAX编程的性质以及许多短期的请求会以轮询的形式不断发送的情况，该行为模式可能造成大量客户端请求不断冲击服务器的局面。多年来，WebLogic都将这一问题考虑在内，并构建了一个相当棒的特性，即FutureResponseServlet。该范型构建于异步servlet理念的基础之上。从版本6.1开始，该功能就允许开发人员提供真正异步的来自服务器的通知，而无需对事件进行客户端轮训并在服务器端使用执行线程。在9.x之前，BEA还不急于公开该类。
　　如何在现实中利用该类呢?我们来看一个例子。假定业务需求是要构建一个基于Web的应用程序，该应用程序以近乎实时的方式向服务器发送数据而无需刷新浏览器。这样的应用程序可以向服务器提交一个需要花很长时间处理的请求，而仍然能够接收到关于其状态的异步事件并监听事件。从技术角度来看，这有许多实现方法。其中一种方法就是使用一个与Java Servlet通信的Java Applet来获得异步信息。这是一种不错的方法，但是对于用户来说有些不太方便，因为他们必须下载一个JVM，还要下载一个applet到浏览器。此外，还必须维护一个从客户端到服务器的持久性套接字连接，以便接收异步消息。设想一下，如果有1000个用户使用该applet，那么就有1000个执行线程几乎是在空等着发送事件通知到客户端。当然了，还有其它方法，比如从applet或AJAX应用程序构建轮询机制来定期检查新数据。而如果不经常接收到数据，那么轮询就显得无用了，而且还浪费了服务器资源，占用了执行线程。反之，服务器可以定期轮询，将事件传播回客户端，并维护套接字线程，而无需使用持久性执行线程。这非常类似于Java NIO的运行方式。理想情况下，我们都希望构建一个从服务器“异步”接收事件通知而无需在服务器端使用持久性执行线程的应用程序，不管它是一个applet还是一个基于AJAX的薄Web应用程序。
以下是引用片段：
import java.io.IOException; 
import java.io.PrintWriter; 
import java.util.Date; 
import java.util.Stack;  
import javax.servlet.ServletException; 
import javax.servlet.http.HttpServletRequest;  
import weblogic.servlet.FutureResponseServlet; 
import weblogic.servlet.FutureServletResponse;  
// An AsynchronousServlet that handles HTTP requests from a “separate” thread and 
// not the execute thread used to invoke this servlet. 
public class AsynchronousServerResponseServlet extends FutureResponseServlet {  
 
 private final Notifier notifier; 
 
 public AsynchronousServerResponseServlet() {   
  this.notifier = new Notifier();   
  this.notifier.start();  
 }   
 
 public void service(HttpServletRequest request, FutureServletResponse response) throws [...]

据国外媒体报道，微软公司已经加入了开放Ajax联盟。
开放Ajax联盟是一个行业组织，旨在开发和推广非同步Java脚本与XML编程技术。JavaScript和XML都是在线应用的重要基础标 准。
微软平台与工具业务集团产品经理Smith说：“微软加入开放Ajax联盟的目的是与其他行业领先者合作，以便在高度兼容的前提下推进Ajax 的开发。”
软件制造商在今年早些时候推出了免费的ASP.Net Ajax 1.0开发工具，它提供了构建Ajax应用的图形用户接口。该免费工具针对那些熟悉微软Visual Studio .net开发工具包的程序员。
开放Ajax联盟目前有72名成员，其中包括Adobe公司、BEA公司、Dojo基金、Eclipse基金和IBM公司。

GWT没有这个概念，这个概念是Cypal插件定义的，它其实就是指GWT访问远程服务的代码，共有三个类：
XXXService：这是远程服务的定义接口，定义暴露的接口方法。该方法的实现   在XXXServiceImpl中实现，同时该类需要通过＠RemoteServiceRelativePath定义该服务的url路径名，由于XXXServiceImpl其实就是一个Servlet，所以这个路径会在web.xml的url-pattern用到XXXServiceAsync：该接口是XXXService的副本，它的作用是当Java（最终应该说是javascript）调用 XXXService后，该接口提供一个回调，所以该接口的方法定义比XXXXService的方法定义多了个 AsyncCallbak接口，该接口定义了两个方法：
onFailure(Throwable caught)//失败时调用
onSuccess(T result)//成功时调用
XXXServiceImpl：这是具体类，这就是具体实现远程接口的地方，可以在这里实现业务逻辑，访问ejb，访问web service等等
除了XXXServiceImpl这几个类外，其它两个接口都不需要我们实现，GWT会通过动态代理来实现这两个接口，所以那两个接口只要定义就可以了
那如何调用Remote Module呢？
调用Remote Module需要使用到XXXServiceAsync副本接口，首先需要通过GWT生成两个接口的动态代理：
XXXServiceAsync service = GWT.create(XXXService.class);
然后就可以调用了，在相关的界面事件处理的地方调用XXXServiceAsync的方法，该方法比XXXService多了一个AsyncCall回调参数，这是我们需要实现的类：
service.服务方法(new AsyncCallback(){
//该类可以定义成匿名类
public void onFailure(Throwable caught){
//处理失败
}
public void onSuccess(T result){
//处理成功
}
})

(1) js脚本缓存问题
答：这个问题是大家遇到最常见问题之一，因为修改了js内容调试的时候
并不能显示新写代码的结果，是因为js为了加速页面执行，当前页面会使用缓存保持
当前调用的相同连接。为了开发时调试方便可以在连接地址的后面增加一个随机函数。
如原地址：for.php 增加随机后 for.php?1293874
(2) 本地调试js脚本不起作用
答：因为使用ajxa传递参数的时候需要head支持，所以我们只有在站点下才可以
成功，比如我们放在Apache下面或者IIS下面进行调试。
(3) 调试代码查找错误困难
答：这是js调试存在已久的问题，简单点我们可以使用ie默认提示的错误框，还有就
是我们可以使用DW CS4提供的纠正错误，或者通过专业的插件如：firbug 等

使用POST方式
其实POST方式跟Get方式是比较类似的，只是在执行Ajax的时候稍有不同，我们简单讲述一下。
假设有一个用户输入资料的表单，我们在无刷新的情况下把用户资料保存到数据库中，同时给用户一个成功的提示。
//构建一个表单，表单中不需要action、method之类的属性，全部由ajax来搞定了。
＜form name=”user_info”＞
姓名：＜input type=”text” name=”user_name” /＞＜br /＞
年龄：＜input type=”text” name=”user_age” /＞＜br /＞
性别：＜input type=”text” name=”user_sex” /＞＜br /＞
＜input type=”button” value=”提交表单” onClick=”saveUserInfo()”＞
＜/form＞
//构建一个接受返回信息的层：
＜div id=”msg”＞＜/div＞
我们看到上面的form表单里没有需要提交目标等信息，并且提交按钮的类型也只是button，那么所有操作都是靠onClick事件中的saveUserInfo()函数来执行了。我们描述一下这个函数：
function saveUserInfo()
{
　//获取接受返回信息层
　var msg = document.getElementById(“msg”);
　//获取表单对象和用户信息值
　var f = document.user_info;
　var userName = f.user_name.value;
　var userAge = f.user_age.value;
　var userSex = f.user_sex.value;
　//接收表单的URL地址
　var url = “/save_info.php”;
　//需要POST的值，把每个变量都通过&来联接
　var postStr = “user_name=”+ userName +”&user_age=”+ userAge +”&user_sex=”+ userSex;
　//实例化Ajax
　var ajax = InitAjax();
　//通过Post方式打开连接
　ajax.open(“POST”, url, true);
　//定义传输的文件HTTP头信息
　ajax.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
　//发送POST数据
　ajax.send(postStr);
　//获取执行状态
　ajax.onreadystatechange = function() {
　　//如果执行状态成功，那么就把返回信息写到指定的层里
　　if (ajax.readyState == [...]

       AJAX无疑是2005年炒的最热的Web开发技术之一，当然，这个功劳离不开Google。我只是一个普通开发者，使用AJAX的地方不是特别多，我就简单的把我使用的心得说一下。（本文假设用户已经具有JavaScript、HTML、CSS等基本的Web开发能力）
[AJAX介绍]
      Ajax是使用客户端脚本与Web服务器交换数据的Web应用开发方法。Web页面不用打断交互流程进行重新加裁，就可以动态地更新。使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。
     异步JavaScript和XML（AJAX）不是什么新技术，而是使用几种现有技术——包括级联样式表（CSS）、JavaScript、XHTML、XML和可扩展样式语言转换（XSLT），开发外观及操作类似桌面软件的Web应用软件。
[AJAX执行原理]
      一个Ajax交互从一个称为XMLHttpRequest的JavaScript对象开始。如同名字所暗示的，它允许一个客户端脚本来执行HTTP请求，并且将会解析一个XML格式的服务器响应。Ajax处理过程中的第一步是创建一个XMLHttpRequest实例。使用HTTP方法（GET或POST）来处理请求，并将目标URL设置到XMLHttpRequest对象上。
       当你发送HTTP请求，你不希望浏览器挂起并等待服务器的响应，取而代之的是，你希望通过页面继续响应用户的界面交互，并在服务器响应真正到达后处理它们。要完成它，你可以向XMLHttpRequest注册一个回调函数，并异步地派发XMLHttpRequest请求。控制权马上就被返回到浏览器，当服务器响应到达时，回调函数将会被调用。
[AJAX实际应用]
1. 初始化Ajax
     Ajax实际上就是调用了XMLHttpRequest对象，那么首先我们的就必须调用这个对象，我们构建一个初始化Ajax的函数：
/**
* 初始化一个xmlhttp对象
*/
function InitAjax()
{
　var ajax=false;
　try {
　　ajax = new ActiveXObject(“Msxml2.XMLHTTP”);
　} catch (e) {
　　try {
　　　ajax = new ActiveXObject(“Microsoft.XMLHTTP”);
　　} catch (E) {
　　　ajax = false;
　　}
　}
　if (!ajax && typeof XMLHttpRequest!=’undefined’) {
　　ajax = new XMLHttpRequest();
　}
　return ajax;
}
     你也许会说，这个代码因为要调用XMLHTTP组件，是不是只有IE浏览器能使，不是的经我试验，Firefox也是能使用的。
     那么我们在执行任何Ajax操作之前，都必须先调用我们的InitAjax()函数来实例化一个Ajax对象。
2. 使用Get方式
    现在我们第一步来执行一个Get请求，加入我们需要获取 /show.php?id=1的数据，那么我们应该怎么做呢？
      假设有一个链接：＜a href=”/show.php?id=1″＞新闻1＜/a＞，我点该链接的时候，不想任何刷新就能够看到链接的内容，那么我们该怎么做呢？
//将链接改为：
＜a href=”http://cms.ddvip.com/index.php#” onClick=”getNews(1)”＞新闻1＜/a＞
//并且设置一个接收新闻的层，并且设置为不显示：
＜div id=”show_news”＞＜/div＞
同时构造相应的JavaScript函数：
function getNews(newsID)
{
　//如果没有把参数newsID传进来
　if (typeof(newsID) == ‘undefined’)
　{
　　return false;
　}
　//需要进行Ajax的URL地址
　var url = “/show.php?id=”+ newsID;
　//获取新闻显示层的位置
　var [...]

 
　　ZK是一套以 AJAX/XUL/Java 为基础的网页应用程式开发框架，用于丰富网页应用程式的使用接口。最大的好处是，在设计AJAX网络应用程式时，轻松简便的操作就像设计桌面程式一样。 ZK包含了一个以AJAX为基础、事件驱动(event-driven)、高互动性 的引擎，同时还提供了多样丰富、可重复使用的XUL与HTML组件，以及以XML为基础的使用接口设计语言 ZK User-interfaces Markup Language (ZUML)。
　　该版本发布的还包括一个以开发者为中心范式，其核心是CS模式融合和Ajax是服务的架构变革;集成最新的 jQuery 和 Java EE 6，同时还包含一些企业级应用功能。
　                         　点击这里下载 ZK 5.0正式版

1.前、端后都要做好安全的把关工作
不能单靠前端做安全验证工作，后端也必须有过滤机制，检验前方传来的资料。由于Ajax也会接收后端传送来的资料，对这些资料都要采不信任态度，必须加以检查。
2.尽量以HTTP POST方法传输资料
使用GET方法容易让有心人士得到资料，虽然POST并非万无一失，但比起GET至少较为安全。
3.不要直接用eval函式唤起JSON物件
JSON是采用JavaScript物件实字的资料格式，从后端传到Ajax程式时，必须采用eval函式将它从字串转成物件，这时必须先行检查资料中是否有非法字元，以免非法程式借机启用。
4.限制使用者可用的HTML语法
许多Ajax网站允许使用者在留言中使用HTML语法，而某些特定语法应该严格限制，例如＜plaintext＞或是＜!- -这类语法，都会让置于之后的程式码失效。
5.禁止可留言的网页页面使用JavaScript语法
虽然乍看之下觉得不可思议，不过的确在一些部落格平台上发生过，这让XSS攻击开了大门。
6.使用Ajax框架，必须注意安全性问题
由于骇客利用JavaScript进行攻击手法日新月异，当网页开发人员利用Ajax框架时，必须注意框架本身是否对某些特定手法具有防治行为。
7.让使用者知道自己身处的状况
当Ajax载入资料量大时，有时会让使用者产生错觉，不确定刚刚按下的按扭是否发生作用。因此开发人员必须设计适当的提示，让使用者了解目前程式的执行状况。
8.保持小量传输
Ajax的灵活性在于动态改变局部资料量，因此小量传输资料才能达到最高效益。如果一大张资料表都要透过DOM的操作来改变，不如就由后端程式与资料库来操作，效益更高。
9.注意易用性与内容的平衡
Ajax虽然为使用者带来浏览时的易用性，不过如果将所有内容都透过Ajax来产生，会造成搜寻引擎无法索引资料的情况。因此与内容相关的部分，需谨慎使用Ajax。
10.执行优雅降级原则
网站如果并非全面性采用Ajax技术，而只是为了局部增加互动性，这时必须考量不支援JavaScript的使用者，设法在不使用这些功能的前提下，让他们还能正常地浏览网站。

<script   language=”javascript”>  
  var   XMLHttpReq   =   false;  
  //   创建   XMLHttpRequest   对象(主函数不需改变)  
  function   createXMLHttpRequest(){  
  if(window.XMLHttpRequest){     //   Mozilla   浏览器  
  XMLHttpReq   =   new   XMLHttpRequest();  
  }else   if   (window.ActiveXObject){   //   IE   浏览器  
  try{  
  [...]

AJAX传递中文字符串时必须把中文字符串编码成unicode,一般会用到JS的自带函数escape().不过找到了更好的函数来确决中文字符转换成unicode编码的函数

function uniencode(text)   
{   
    text = escape(text.toString()).replace(/\+/g, ”%2B”);   
    var matches = text.match(/(%([0-9A-F]{2}))/gi);   
    if (matches)   
    {   
        for (var matchid = 0; matchid < matches.length; matchid++)   
        {   
            var code = matches[matchid].substring(1,3);   
            if (parseInt(code, 16) >= 128)   
            {   
                text = text.replace(matches[matchid], ’%u00′ + code);   
            }   
        }   
    }   
    text = text.replace(‘%25′, ’%u0025′);   
    
    return text;   
} 

当然服务器端要对编码过的字符串进行第二次转码.把字符串转换成UTF-8编码.

function convert_int_to_utf8($intval)   
{   
    $intvalintval = intval($intval);   
    switch ($intval)   
    {   
        // 1 byte, 7 bits   
        case 0:   
            return chr(0);   
        case ($intval & 0×7F):   
            return chr($intval);   
    
        // 2 bytes, 11 bits   
        case ($intval & 0×7FF):   
            return chr(0xC0 | (($intval >> 6) & 0×1F)) .   
                chr(0×80 | ($intval & 0×3F));   
    
        // 3 bytes, 16 bits   
        case ($intval & 0xFFFF):   
            return chr(0xE0 | (($intval >> 12) & 0×0F)) .   
                chr(0×80 | (($intval >> 6) & 0×3F)) .   
                chr (0×80 | ($intval & 0×3F));   
    
        // 4 bytes, 21 bits   
        case ($intval & 0×1FFFFF):   
            return chr(0xF0 | ($intval >> 18)) .   
                chr(0×80 | (($intval >> 12) & 0×3F)) .   
                chr(0×80 | (($intval >> 6) & 0×3F)) .   
                chr(0×80 | ($intval & 0×3F));   
    }   
} 

这样中文字符串就可以转换成UTF-8编码.这种方法适合各种服务器环境..