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