【颗粒归仓】（二）ajax的了解和应用

通过对项目中ajax的使用，对其进行总结。

一、ajax是什么

      AJAX = 异步 JavaScript和XML（标准通用标记语言的子集），通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
在项目中，类似于下拉框中内容的动态加载，不刷新整个页面的情况下使用ajax技术恰到好处。

二、js和jquery和ajax之间的关系与区别

      简单来说，javascript是一种前台语言，至于是脚本语言还是编程语言各有其说，不过在项目中发现js是不用编译的。如果要来比较jquery和ajax的话，jquery和ajax是不能够进行比较的，因为jquey属于一套Javascript脚本,它提供了强大的功能函数,解决浏览器兼容性问题，而ajax则是使得js实现异步的一种技术，一个是库，一个是一门技术，不可同日而语啊。

三、原生ajax和jquery-ajax的了解

      关于原生ajax和jquery封装的ajax方法，后面会有一个专门的博客进行对比。在此了解我们使用ajax技术宏观上有两种方式，一种使用原生的ajax，另外一种使用jquery封装的ajax，在.net项目当中我们使用的是后者，但是在ssh学习时遇到了原生的ajax算是了解，在公司里对于原生ajax也得会写。
      比较而言，原生ajax写起来5个步骤，代码行相比而言会多一些，而jquery封装ajax的仅仅按照格式书写就ok了。没有jquery的话，ajax的使用就得用原生的javascript去写，比较麻烦。

四、常用写法总结

      在此以jquery封装的ajax方法做示例：

      （1）ajax标准写法：（相关属性见注释）

$.ajax({    url:"http://www.microsoft.com",    //请求的url地址    dataType:"json",   //返回格式为json    async:true,//请求是否异步，默认为异步，这也是ajax重要特性    data:{"id":"value"},    //参数值    type:"GET",   //请求方式    beforeSend:function(){        //请求前的处理    },    success:function(req){        //请求成功时处理    },    complete:function(){        //请求完成的处理    },    error:function(){        //请求出错处理    }});

      一个用到的代码段：

$.ajax(            {                url: '/Building/ModifyBuilding',                type: "post",                async: true,                dataType: 'json',                data: { 'enViewModel': enViewModel},                success: function (data) {                    if (data == 'true') {                        alert("更新成功！");                    }                },                error : function() {                      // view("异常！");                      alert("异常！");                  }              }        );

    (2)ajax的简化写法

     1、post方法

$.post('/CalculateScoreFrame/CalculateDevelopmentQuantityResult',                    { "checkyear": CheckYear, "targetID": targetID },                     function () {                         $.messager.alert('提示', '录入情况已完成的指标计算成功，录入情况未完成的指标请完善数据！', 'info');                         $("#dg").datagrid("reload");                     });

      上述例子中的写法，“url”、"data"参数、“回调函数”三部分构成了post方法的主要内容。在项目中，除了将"url"和"data"分开这种写法之外，还有一种将"url"和"data"合起来的写法，如下：

$.post('/CadresRate/deletDocument?DocumentID=' + strID + '&DocumentName=' + strName , function (jsonObj) {        if (jsonObj > 0) {            $.messager.alert('提示', '删除成功！');            $("#dg").datagrid("reload");//删除成功后 刷新页面            $('#dg').datagrid('clearSelections');//解决删除后全选问题        } else {             $.messager.alert('提示信息', '删除失败，请联系管理员！', 'warning');        }     });

    2、get方法

$.get("jqueryget.htm", { "id": this.id },    function(req) {        //成功时的回调方法        $("#showget").html(req);    });})

      该方法与post的写法一样，都是由"url"、"data"、回调函数三部分构成，也可以通过url后直接“+”附加data来实现，但是这二者何时做选择呢？

           1、get方式的安全性较Post方式要差些，包含机密信息的话，建议用Post数据提交方式；

           2、在做数据查询时，可以用Get方式，因为它效率高；而在做数据添加、修改或删除时，建议用Post方式，因为它安全；

回调函数中"success"、"error"、"complete"解读

         success是ajax成功后后执行的函数。 complete 是ajax完成后执行的函数。 error是ajax失败后执行的函数。就像是try catch finally一样，finally永远都会执行，在"success"、"error"、"complete"当中，complete也是会永远执行的。