William

“尽可能广泛地涉猎各门学问,并且尽可能深入地择一钻研。”
(Try to learn something about everything and everything about something.)--赫胥黎

JQuery Ajax实例

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’);来返回给前端生成的图片名称。