William

JQuery Ajax Loading image实例

一直以来对ajax只是存在于听说过这个名词的阶段，没有实际用过。由于项目的需要，使得有机会实际使用它。通过初次使用，让我对ajax的敬畏少了许多。

维基百科对ajax有如下的说明：

AJAX为“Asynchronous JavaScript and XML”（异步的JavaScript与XML技术），指的是一套综合了多项技术的浏览器端网页开发技术。Ajax的概念由 Jesse JamesGarrett 所提出[1]。传统的Web应用允许用户端填写表单（form），当提交表单时就向Web服务器发送一个请求。服务器接收并处理传来的表单，然后送回一个新的网页，但这个做法浪费了许多带宽，因为在前后两个页面中的大部分HTML码往往是相同的。由于每次应用的沟通都需要向服务器发送请求，应用的回应时间依赖于服务器的回应时间。这导致了用户界面的回应比本机应用慢得多。与此不同，AJAX应用可以仅向服务器发送并取回必须的数据，它使用SOAP或其它一些基于XML的页面服务接口（接口），并在客户端采用JavaScript处理来自服务器的回应。因为在服务器和浏览器之间交换的数据大量减少（大约只有原来的5%）。结果，我们感觉服务器回应更快了。同时，很多的处理工作可以在发出请求的客户端机器上完成，因此Web服务器的负荷也减少了。类似于DHTML或LAMP，AJAX不是指一种单一的技术，而是有机地利用了一系列相关的技术。事实上，一些基于AJAX的“派生／合成”式（derivative/composite）的技术正在出现，如AFLAX。

原始的ajax开发是很复杂的，并且对于不同的浏览器需要进行相应的编码，而JQuery ajax这种对ajax的有效封装，将ajax开发变得简单，下面通过项目中的实例来简单介绍JQuery ajax的使用。

前端html(edit_card.jade):

...
div.image#loading
    img(src="#{card.img}").imagesize
    button#startAjaxRequest(type='button').primary.right Preview
...

前端html采用jade模版引擎

前端JS(edit_card.js)：

$("#startAjaxRequest").click(function () {
      $('#loading').showLoading({
          'addClass': 'loading-indicator-bars',
          'afterShow':
          function() {
               var data = {};
              data.card_title = $('#card_title').val();
              data.card_body = $('#card_body').val();
              data.card_from = $('#card_from').val();
     
              $.ajax({
                  type:'POST',
                   data: data,
                  timeout:5000,
                  url:'/dynamic-merge',
                  success:function(data,textStatus){
                      $('#loadingimg').attr('src','/images/cards/'+data);
                  },
                   complete:function(XMLHttpRequest,textStatus){
                      $('#loading').hideLoading();
                  },
                  error:function(XMLHttpRequest,textStatus,err){
                       alert(err);
                  }
              });
           }
       });
});

使用jquery plugin “showLoading” 作为jquery ajax loading的动画特效。

本实例使用jquery ajax的基础ajax方法，而没有使用更高封装的post方法。

具体参数settings详见http://api.jquery.com/jQuery.ajax/

后端node.js(app.js)

…
var dynamic_merge =require('./routes/dynamic_merge');
app.all('/dynamic-merge',dynamic_merge.dynamic_merge);
…

后端node.js(dynamic_merge.js)

exports.dynamic_merge = function(req,res){
   
    var mxiao = require('./mxiao');
    var image_name = req.session.image_name;
    var asset_id = req.session.asset_id;
    var xml_name = image_name+'_text';
//    console.log(req.param('card_body'));
//    var card = JSON.parse(req.data);
    var card_title = req.param('card_title');
    var card_body = req.param('card_body');
    var card_from = req.param('card_from');
    console.log(card_title);
   
    mxiao.gen_textxml(card_title,card_body,card_from,image_name);
   
    var pabloDebug_url = 'D:/Pablo/PabloServer/binaries/Win32/Debug/';
    var pabloRelease_url = 'D:/Pablo/PabloServer/binaries/Win32/Release/';
   
    var xml = pabloDebug_url+'xml/'+xml_name;
    var psd = pabloDebug_url+'psd/'+asset_id;
    var output = pabloDebug_url+'public/images/cards';
   
    var exec = require('child_process').exec;
   
    var child = exec(pabloRelease_url+'PabloTest.exe '+xml+' '+psd+' '+output, function(error,stdout,stderr){
        if(error!=null){
            console.log(stderr);
        }else{
            console.log(stdout);
            console.log('merge successful!');
        }
   
    });
   
    child.on('close',function(code){
        res.send(image_name+'_text.jpg');
    });
   
};

Ajax的type参数设置为post，需要传输的数据被封装成一个表单，所以在后端可以用类似var card_title = req.param(‘card_title’);的方法来得到前端数据。当后端处理完，通过在close事件中利用res.send(image_name+’_text.jpg’);来返回给前端生成的图片名称。