【颗粒归仓】二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也是会永远执行的。

原文地址：https://www.jb51.cc/ajax/162195.html