AJAX在ASP.NET中的应用（二）——Jquery封装的AJAX

最新推荐文章于 2022-05-19 18:33:44 发布

NewClass

最新推荐文章于 2022-05-19 18:33:44 发布

阅读量1k

点赞数

分类专栏： ASP.Net 文章标签： ajax AJAX Ajax asp.net ASP.NET Asp.Net ASP.Net Asp.net ASP.net jquery jQuery JQUERY Jquery JQuery

本文链接：https://blog.csdn.net/mlcactus/article/details/8459851

版权

ASP.Net 专栏收录该内容

9 篇文章 2 订阅

订阅专栏

前言：如果你现在还不知道什么是Jquery，那么你必须先对它进行基础的了解和学习，当然对于已经有些html和javascript功底的开发者来说这是件比较容易的事情，网上关于Jquery的教程也非常多。

不得不说，Jquery是一个非常优秀的JS框架，它也达到其创始者的目标：write less,do more。当然它还有一个隐藏的功能，这个功能与微软的产品宗旨很相似，那就是：使用我产品的人都是傻瓜，所有我必须将所有事情都做好，所有可能的情况都考虑到，傻瓜们只要会用就行了。

Jquery-Ajax功能是Jquery框架中非常重要的一部分，也是开发者最常用到的功能之一。（啰嗦一下，在学习Jquery-Ajax之前有一个基本的概念必须要确立：Jquery-Ajax的实现仅仅是封装了原始Ajax后改头换面后的产物，它的底层用依然是XMLHttpRequest对象。）本篇博客将对该功能的使用进行简要的说明，它包含以下常用的方法：

一，最基础也是最全面的封装方法——ajax：

该方法基本的使用格式为：jQuery.ajax(url,[settings])或jQuery.ajax(settings)，其中url是请求的文本在服务器上的位置(对应XMLHttpRequest.open方法中url)，settings是为这次Ajax请求设置的各类参数(对应XMLHttpRequest.open方法中method、async以及通过setRequestHeader方法设定的各种参数)。

注意：当使用jQuery.ajax(settings)的时候，url必须要包含进settings对象中。下面是简单的使用示例：

Javascript：

//jQuery.ajax(url,[settings]);
function TestAjax_Url() {
var settings = {
    type: "GET",                                                                            //请求方式 ("POST" 或 "GET")
    contentType: "application/json; charset=utf-8",                                         //预期服务器返回的数据类型  
    error: function (err) { alert('Ajax请求失败，错误信息为：' + err.responseText); },      //当发生错误时执行的方法
    success: function (returnval) { alert(returnval); }                                     //但请求成功时执行的方法
};
//为了保证ajax方法能够满足不同情况下的ajax应用，因此参数设置也非常多
//参数对象可根据需要设置，这里只设置了几个简单常用的参数，关于ajax的全面参数设置情况请参考JqueryAPI。
$.ajax("Resource/DynamicText.aspx?rondom=" + Math.random(), settings);
}
//jQuery.ajax(settings);
function TestAjax_Settings() {
var settings = {
    url: "Resource/DynamicText.aspx?rondom=" + Math.random(),                               //请求的目标地址
    type: "GET",                                                                          
    contentType: "application/json; charset=utf-8",                                        
    error: function (err) { alert('Ajax请求失败，错误信息为：' + err.responseText); },   
    success: function (returnval) { alert(returnval); }                                   
};
$.ajax(settings);
}

HTML：

<input type="button" id="button_url" value="点击我测试URL为独立参数" οnclick="TestAjax_Url();" />
<input type="button" id="button_settings" value="点击我测试URL集成到参数对象中" οnclick="TestAjax_Settings();" />

在这个列子中，设定的请求类型为”Get”；文本地址为"Resource/DynamicText.aspx?rondom="+ Math.random()；当请求发生异常时调用异常时执行error方法；带请求成功后执行success方法。

二，最简单的Ajax方法——load

这个方法用于异步请求文本，并将该文本作为目标Jquery对象的InnerHTML，最简单的用法如：$('#result').load('ajax/test.html')，将ID为result的html元素的InnerHTML的替换为地址为’ ajax/test.html’文本。

Load的完整用法为：.load(url,[data],[complete(responseText,textStatus,XMLHttpRequest)])，其中data为请求文本地址传值，complete为请求成功后执行的代码。对应的三个参数为responseText：返回的结果字符串，textStatus：请求状态字符串表达式，成功为"success"，失败返回"error"，表示出现异常，XMLHttpRequest：返回的XMLHttpRequest对象，含有此次请求的所有信息，包括属性readyState、responseText、status、statusText。

下面是使用示例：

Javascript：

//Ajax请求返回字符串后更新div_contentDisplay元素的html内容
function AjaxLoadText_Simple() {
    //简单用法
    $("#div_contentDisplay").load("Resource/StaticText.txt");  
}
function AjaxLoadText_Full() {
    //完整用法     
    $("#div_contentDisplay").load("Resource/StaticText.txt", function (response, status, xhr) {
        alert('静态文本已加载成功！');  //这里可以修改为任何需要的后续操作
    });
    /*
    response：ajax加载后返回的结果字符串
    status：请求状态字符串表达式，成功为"success"，失败返回"error"，表示出现异常
    xhr：即为返回的XMLHttpRequest对象，含有此次请求的所有信息，包括属性readyState、responseText、status、statusText
    */
}

HTML：

<input type="button" id="button_trigger_simple" value="简单载入文本方法" οnclick="AjaxLoadText_Simple();" />
    <input type="button" id="button_trigger_full" value="完整载入文本方法" οnclick="AjaxLoadText_Full();" />
<div id="div_contentDisplay">
    这里是原始文本
</div>

三， ajaxEvents，在对Jquery进行Ajax更新的时发生的事件，这个机制与ASP.NET的页面周期有些相似。我们知道，在进行Ajax请求的时候需要经过几个步骤，大致为：开始发出请求，请求已受理、正在处理、请求已完成等等。而Jquery开发者考虑到在很多实际项目中，我们可能会需要在特定的某个阶段执行需要的代码，因此Jquery提供了为Ajax请求的各个过程中绑定特定的方法，以实现“在特定的阶段做想做的事”。

Jquery一共提供了一下事件绑定，按照执行先后顺序依次为：ajaxStart(开始Ajax请求)、ajaxSend(Ajax请求已发送)、ajaxSuccess(Ajax请求已成功)或ajaxError(Ajax请求发生异常)、ajaxComplete(Ajax请求已完成)、ajaxStop(Ajax请求已结束)，这里需要注意的是，ajaxSuccess与ajaxError不可能会同时出现。

下面是使用示例：

Javascript：

//当页面初始化后将元素div_contentDisplay的Ajax请求周期中发生的各个事件进行绑定
$(document).ready(function () {
    $("#div_contentDisplay").ajaxStart(function (event) {
        alert('一些事件引起了div_contentDisplay元素的Ajax请求！');
    });
    $("#div_contentDisplay").ajaxSend(function (event, request, settings) {
        alert('div_contentDisplay元素的Ajax请求已发送！');
    });
    $("#div_contentDisplay").ajaxSuccess(function (event, request, settings) {
        alert('div_contentDisplay元素的Ajax请求已成功！');
    });
    $("#div_contentDisplay").ajaxComplete(function (event, request, settings) {
        alert('div_contentDisplay元素的Ajax请求已完成！');
    });
    $("#div_contentDisplay").ajaxStop(function (event, request, settings) {
        alert('div_contentDisplay元素的Ajax请求已结束！');
    });
    $("#div_contentDisplay").ajaxError(function (event, request, settings) {
        alert('div_contentDisplay元素的Ajax请求出现异常！错误提示信息请常见提示信息区域！');
    });
    /*
    简要说明：1，Jquery封装的在对某个元素进行Ajax更新时，整个Ajax请求会被分割成上述6个步骤（ajaxSuccess与ajaxError不可能同时出现），
                    执行顺序依次为ajaxStart、ajaxSend、ajaxSuccess或ajaxError、ajaxComplete、ajaxStop，可以通过在各个事件上绑定特定的方法来达到特定的目的
                2，这个过程和ASP.NET的页面周期过程十分相似
                3，各个绑定事件的function的参数都是可加可不加的，不会影响其执行（这个功能是javascript的语法特点——参数可变），但是如果想要实时获取请求状态和请求参数，就要加上这些参数了。
                4，event：事件对象，描述本次事件，如属性type在ajaxStart事件中的值就是"ajaxStart"。
                5，request：XMLHttpRequest对象，描述ajax请求状态变化信息
                6，settings：本次请求的http表头信息，在一次Ajax请求过程中是固定的，不会像request那样实时变化。
    */
});
function AjaxLoadText() {
    //这里执行一次正确的Ajax请求
    $("#div_contentDisplay").load("Resource/StaticText.txt");
}
function AjaxLoadText_Error() {
    //这里故意将静态文本文件路径写错。
    $("#div_contentDisplay").load("Resource_Error/StaticText.txt", function (response, status, xhr) {
        $(this).html(response);    //这里将错误信息显示在页面中
    });
}

HTML：

<input type="button" id="button_trigger" value="点击我开始正确载入文本" οnclick="AjaxLoadText();" />
<div id="div_contentDisplay">
    这里是原始文本
</div>
<input type="button" id="button_error" value="点击我载入文本会出现异常" οnclick="AjaxLoadText_Error();" />

在该示例中，点击"点击我开始正确载入文本"按钮会依次弹出提示框“一些事件引起了div_contentDisplay元素的Ajax请求！”、“div_contentDisplay元素的Ajax请求已发送！”、“div_contentDisplay元素的Ajax请求已成功！”、“div_contentDisplay元素的Ajax请求已完成！”、“div_contentDisplay元素的Ajax请求已结束！”；而点击"点击我载入文本会出现异常"按钮弹出的提示信息与前者基本一致，只是将"div_contentDisplay元素的Ajax请求已成功！"换成了“div_contentDisplay元素的Ajax请求出现异常！错误提示信息请常见提示信息区域！”。当然，在示例中的各个请求阶段中，仅仅是弹出信息提示框而已，你可以将其替换为任意你需要的js代码。

四，与load方法类似的简单方法——get

Get方法是通过Ajax请求获取返回值后，在进行特定的处理。而load是直接将返回值以nnerHTML的方式赋值给特定的Jquery对象。一句话总结就是：load获取返回值后直接就用掉了；而get先获取返回值，后面的事后面再说。

下面是使用示例：

Javascript：

function AjaxLoadText() {
    $.get("Resource/StaticText.txt", function (response, status, xhr) {
        $("#div_contentDisplay").html(response);    //获取返回字符串后进行的操作，这里将该文本赋值到div_contentDisplay元素中
    });
    /*
    这里与load方法不同的地方很明显：load直接更新相应的jquery对象元素，而get仅仅是获取结果，后续操作应该在方法中执行。
    response：ajax加载后返回的结果字符串
    status：请求状态字符串表达式，成功为"success"，失败返回"error"，表示出现异常
    xhr：即为返回的XMLHttpRequest对象，含有此次请求的所有信息，包括属性readyState、responseText、status、statusText
    */
}
//$.post()与$.get()相似，只是请求方式不同（当然，post与get两种请求方式的不同会导致$.post()与$.get()的使用情况不同，不过这个不在这里的讨论范围内）

HTML:

<input type="button" id="button_trigger" value="点击我开始载入文本" οnclick="AjaxLoadText();" />
<div id="div_contentDisplay">
    这里是原始文本
</div>

五，返回json对象，而不是普通字符串——getJSON

之前讨论到的所有方法一般都是返回普通的字符串，而有时我们需要返回的值是json对象，这样我们就可以直接操作json对象了（如对其进行枚举，求和等等），况且我们经常会给服务器方法返回json格式的字符串，如果使用getJSON的话就不用获取到返回值后再通过evel来转化了。

下面是简单示例：

Javascript：

function getJSON() {
    $.getJSON("Resource/jsonTest.txt", function (data) {
        alert("返回的json对象包含值data.root[0].item2为：" + data.root[0].item2);   //这里返回的不是常规的字符串，而是将字符串转化为json格式的数据
    });
}
//使用get方法来达到相同目的
function useget() {
    $.get("Resource/jsonTest.txt", function (response, status, xhr) {
        var data = eval("(" + response + ")");                                      //这里返回字符串，并将字符串手动转化为json格式对象
        alert("返回的json对象包含值data.root[0].item2为：" + data.root[0].item2);   //获取返回字符串后进行的操作，这里将该文本赋值到div_contentDisplay元素中
    });
}

HTML：

<input type="button" id="button_trigger" value="点击我开始载入JSON" οnclick="getJSON();" />
<input type="button" id="button_userget" value="使用get方法实现相同目的" οnclick="useget();" />

注：Resource/jsonTest.txt文件中的内容为标准的json格式的字符串表达式：{"root":[{"item1":"value1","item2":"value2"},{"item3":"value3"}]}

六，动态载入JS脚本文件- getScript

有时候会有这样的需求，页面的执行可能需要载入某些js文件，但并不是一定的，只有在特定的情况下才需要。这时候如果一开始页面就以link的形式载入会浪费空间和效率，因为该文件非常可能一点用处也没有。getScript则很好的帮我们解决了这个问题：只有在需要的时候才载入就行了。

下面为使用示例：

Javascript：

//使用Ajax方式载入新脚本
function getScript() {
    $.getScript('Resource/getScript.js', function () {
        alert('脚本已载入，请点击"测试脚本是否已载入"进行测试！');
    });
}
//测试是否已经载入目标脚本Resource/getScript.js
function test() {
    if (window.testGetScript == undefined) { alert('测试失败，testGetScript对象未定义说明目标脚本未载入！'); }
    else { alert('测试成功，目标脚本已载入。testGetScript对象值为：' + window.testGetScript); }
}

HTML：

<input type="button" id="button_trigger" value="点击我开始载入JSON" οnclick="getScript();" />
<input type="button" id="button_test" value="测试脚本是否已载入" οnclick="test();" />

示例说明：Resource/getScript.js文件内容为：window.testGetScript = "这个window全局对象是为了测试Jquery的getScript方法，如果window中没有testGetScript对象，则说明没有成功载入此脚本，否则表明已经成功载入脚本"，点击按钮后，如果没有成功载入，则window.testGetScript就应该为undefined；相反如果载入成功，则window.testGetScript为Resource/getScript.js，则说明载入脚本成功了。

七，使用Jquery-Ajax调用服务器方法

之前的测试请求都是静态文本或者页面数据(虽然是动态生成的，但实质上也是获取文件文本)，而通过将服务器方法设置为Ajax可调用，可以大大提高Ajax的使用场合和效率。

通过Ajax调用服务器方法，就可以实现前台页面与后台的交互，大大提高ASP.NET的构架灵活性。

常见服务器方法有：aspx页面后台方法和Webservice方法。aspx页面后台方法位于页面后台，但这类方法并不属于该页面的一部分（不参与该页面的页面周期），而仅仅是找个有效的URL地址“寄存一下”，因此同样的方法可以放在任意的页面上，而功能是相同的。Webservice是一种跨语言的通信方法，当然，微软也提供了傻瓜式的实现方法，在后缀名为.asmx的文件中实现，如果你没有Webservice的基础，你也可以在网上找到非常多的教程。

Aspx页面后台实现示例：

function CallPageBehindMethod() {
    $.ajax({
        type: "POST",
        url: "6_CallServerMethod.aspx/AjaxGetString",                                                          //这里的方法位于本页面，也可以位于其他页面中，只要该页面是一个有效的可访问的url地址            
        data: "{ 'testNum':" + Math.random().toFixed(4) + ",'testWords':'测试文本CallPageBehindMethod'}",      //传递的服务器方法的参数 
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        error: function (err) { alert('调用静态页面后台方法失败，错误信息：' + err.responseText); },
        success: function (returnval) {
            var returnstr = returnval.d;         //这里的返回值有些意思，以returnval.d的形式返回服务器方法的实际返回值
            alert(returnstr);
        }
    });
}

页面6_CallServerMethod.aspx的后台方法为：

[WebMethod]  //不同于Webservice，这里被Ajax调用的方法必须为静态方法
public static string AjaxGetString(double testNum, string testWords)
{
    return "调用静态页面后台方法成功！传入的参数testNum为" + testNum + "，testWords为'" + testWords + "'。";
}

调用Webservice实现示例：

function CallWebServiceMethod() {
    $.ajax({
        type: "POST",
        url: "Resource/AjaxCallServerMethod.asmx/AjaxGetString",                                               //url设定为服务器方法的路径，具体为"文件路径+方法名称"                 
        data: "{ 'testNum':" + Math.random().toFixed(4) + ",'testWords':'测试文本CallWebServiceMethod'}",      //传递的服务器方法的参数
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        error: function (err) { alert('调用WebService方法失败，错误信息：' + err.responseText); },
        success: function (returnval) {
            var returnstr = returnval.d;         //这里的返回值有些意思，以returnval.d的形式返回服务器方法的实际返回值
            alert(returnstr);
        }
    });
}

Resource/AjaxCallServerMethod.asmx文件内容如下：

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[System.Web.Script.Services.ScriptService]   //ScriptService特性允许从脚本调用方法
public class AjaxCallServerMethod : System.Web.Services.WebService
{
    //该方法用于测试Jquery调用服务器方法
    [WebMethod]
    public string AjaxGetString(double testNum,string testWords)
    {
        return "调用WebService方法成功！传入的参数testNum为" + testNum + "，testWords为'" + testWords + "'。";
    }
}

两种实现方式的HTML：

<input type="button" id="button_webservice" value="点击我调用Webservice方法" οnclick="CallWebServiceMethod();" />
<input type="button" id="button_pagebehind" value="点击我调用本页面后台方法" οnclick="CallPageBehindMethod();" />

这里是我为这篇文章配置的简单测试代码，点击下载

尾言：Juqery-Ajax是非常强大的方法集，几乎所有的Ajax方面的需求都可以通过它来实现。如果说Juqery-Ajax因为其封装性而显得傻瓜的话，那么如果比起微软ASP.NET的AJAX_Extensions控件集的话，可以说得上相当复杂了，因此只能说是“半傻瓜化”。下一篇博客中，我将简单介绍这“完全傻瓜化”的AJAX_Extensions控件集。

NewClass

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX在ASP.NET中的应用（二）——Jquery封装的AJAX

前言：如果你现在还不知道什么是Jquery，那么你必须先对它进行基础的了解和学习，当然对于已经有些html和javascript功底的开发者来说这是件比较容易的事情，网上关于Jquery的教程也非常多。不得不说，Jquery是一个非常优秀的JS框架，它也达到其创始者的目标：write less,do more。当然它还有一个隐藏的功能，这个功能与微软的产品宗旨很相似，那就是：使用
复制链接

扫一扫