探讨jQuery的ajax使用场景(c#)


Posted in Javascript onDecember 03, 2013

一:jQuery.ajax语法基础

jQuery.ajax([options])

概述:通过 HTTP 请求加载远程数据。

jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。使用这个方法可以获得更多的灵活性。

数据类型
$.ajax()函数依赖服务器提供的信息来处理返回的数据。通过dataType选项还可以指定其他不同数据处理方式。其中,text和xml类型返回的数据不会经过处理。如果指定为html类型,任何内嵌的JavaScript都会在HTML作为一个字符串返回之前执行。如果指定为json类型,则会把获取到的数据作为一个JavaScript对象来解析,并且把构建好的对象作为结果返回。发送数据到服务器,默认情况下,Ajax请求使用GET方法。如果要使用POST方法,可以设定type参数值。这个选项也会影响data选项中的内容如何发送到服务器。

使用场景一:
描述:保存数据到服务器,成功时显示信息。jQuery 代码:
$.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
});

使用场景二:
描述:装入一个 HTML 网页最新版本。jQuery 代码:
$.ajax({
  url: "test.html",
  cache: false,
  success: function(html){
    $("#results").append(html);
  }
});

load(url, [data], [callback])
概述:载入远程 HTML 文件代码并插入至 DOM 中。
默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。

使用场景一:
描述:加载 feeds.html 文件内容。jQuery 代码:
$("#feeds").load("feeds.html");

jQuery.get(url, [data], [callback], [type])和jQuery.post(url, [data], [callback], [type])

概述:通过远程 HTTP GET或POST  请求载入信息。
这是一个简单的 GET或POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。
描述:显示 test.aspx 返回值(HTML 或 XML,取决于返回值),添加一组请求参数。jQuery 代码:
$.get("test.aspx", { name: "John", time: "2pm" },
  function(data){
    alert("Data Loaded: " + data);
});
$.post("test.aspx", { name: "John", time: "2pm" },
  function(data){
    alert("Data Loaded: " + data);
});

上面是基本的语法,我们只是先做一个了解,要是你已经熟悉,那么我们将开始一步一步对上面的方法和使用场景进行具体讨论。

二:jQuery.ajax伴随ASP.NET的实战练习

首先创建Default.aspx页面,作为请求发起页面,并会获得返回值。页面的代码Default.aspx是:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JqueryAjax2._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script src="js\jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        $('#showinfo').click(function() {
            var data = { key1: "刘明丰", key2: "林望" };
            $.ajax({
                type: "POST",
                url: "response.aspx",
                data: data,
                dataType: "text",
                success: function(msg) {
                    $("#ajax").append(msg);
                }
            });
            $.ajax({
                url: "test.htm",
                cache: false,
                success: function(html) {
                    $("#resulthtml").append(html);
                }
            });
            $("#load").load("test.htm");
            $.get("response.aspx", data, success1, "text");
            $.get("TextJson.txt", success3, "json");
            $.post("response.aspx", data, success2, "text");
            function success1(message) {
                $("#get").append(message);
            }
            function success2(message) {
                $("#post").append(message);
            }
            function success3(siteData) {
                var result = "<li>334一号床:" + siteData.key1 + "</li>";
                result += "<li>334二号床:" + siteData.key2 + "</li>";
                result += "<li>334三号床: " + siteData.key3 + "</li>";
                result += "<li>334四号床: " + siteData.key4 + "</li>";
                $("#result").html(result);
            }
        });
    });
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
</head>
<body>
<input type="button" id="showinfo" value="show info"></input> 
     <ul id="ajax">ajax:</ul>
     <ul id="resulthtml">resulthtml:</ul>
     <ul id="load">load:</ul>     
     <ul id="get">get:</ul>
     <ul id="post">post:</ul>
     <ul id="result"></ul></body>
</html>

Default.aspx.cs里面有没写任何代码,默认即可。
请求的接受者这里面有三种角色:response.aspx页面、test.htm静态页面和TextJson.txt。

response.aspx页面:主要是在服务器端获得客户端提交的数据,并返回数据给客户端。
test.htm静态页面:主要是给客户端局部装入一个HTML网页最新版本。
TextJson.txt:是作为数据储存在文件中,让客户端来异步访问的。

response.aspx页面代码,response.aspx是:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="response.aspx.cs" Inherits="JqueryAjax2.response" %>

没有任何html代码,因为主要是在服务器端获得客户端提交的数据,并返回数据给客户端,不需要显示html内容,所以可以不含html标记。
response.aspx.cs页面代码:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Runtime.Serialization.Json;
using System.Runtime.Serialization;
namespace JqueryAjax2
{
    public partial class response : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string str = Request["key1"];
            Response.Write("success" + str);
        }
    }
}

在代码中可以看到服务器端获得客户端提交的数据,并返回数据给客户端的方式。

test.htm静态页面的代码是:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
</head>
<body>
test.html
</body>
</html>

当静态页面被请求后,会作为html的格式返回客户端,使用 $("#resulthtml").append(html);这样的方法来显示test.htm静态页面的内容。

TextJson.txt里面保存着一段文本,是json格式的:

{   "key1": "刘明丰",   "key2": "林望",   "key3": "陈文杰",   "key4": "耿殿佳" }

在被访问后返回的是json格式的数据,在客户端获得json后会自动转换成对象。

好了,jQuery的异步使用场景基本满足我们的需求,自己试试看吧。

Javascript 相关文章推荐
深入理解JavaScript系列(6) 强大的原型和原型链
Jan 15 Javascript
动态获取复选框checkbox选中个数的jquery代码
Jun 25 Javascript
浅析document.createDocumentFragment()与js效率
Jul 08 Javascript
node.js中的emitter.on方法使用说明
Dec 10 Javascript
JavaScript中的getTime()方法使用详解
Jun 10 Javascript
JS如何设置iOS中微信浏览器的title
Nov 22 Javascript
JS多物体实现缓冲运动效果示例
Dec 20 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
Apr 13 Javascript
js CSS3实现卡牌旋转切换效果
Jul 04 Javascript
javascript  数组排序与对象排序的实例
Jul 17 Javascript
webpack开发跨域问题解决办法
Aug 03 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
Sep 21 Javascript
浅析JavaScript原型继承的陷阱
Dec 03 #Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
Dec 03 #Javascript
探讨JavaScript中声明全局变量三种方式的异同
Dec 03 #Javascript
解析JavaScript中delete操作符不能删除的对象
Dec 03 #Javascript
解析Javascript小括号“()”的多义性
Dec 03 #Javascript
解析Javascript中中括号“[]”的多义性
Dec 03 #Javascript
jquery将一个表单序列化为一个对象的方法
Dec 02 #Javascript
You might like
调频问题解答
2021/03/01 无线电
目录,文件操作详谈―PHP
2006/11/25 PHP
php 禁止页面缓存输出
2009/01/07 PHP
PHP笔记之:日期函数的使用介绍
2013/04/24 PHP
PHP URL参数获取方式的四种例子
2014/02/28 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十一)
2014/06/25 PHP
PHP动态输出JavaScript代码实例
2015/02/12 PHP
php in_array() 检查数组中是否存在某个值详解
2016/11/23 PHP
phpStudy配置多站点多域名和多端口的方法
2017/09/01 PHP
js查错流程归纳
2012/05/04 Javascript
javascript重写alert方法的实例代码
2013/03/29 Javascript
jQuery中triggerHandler()方法用法实例
2015/01/19 Javascript
javascript实现鼠标拖动改变层大小的方法
2015/04/30 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
2016/05/23 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
2016/10/10 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
Angular(5.2-&gt;6.1)升级小结
2018/12/27 Javascript
python基础教程之循环介绍
2014/08/29 Python
Python2.6版本中实现字典推导 PEP 274(Dict Comprehensions)
2015/04/28 Python
Python中使用ElementTree解析XML示例
2015/06/02 Python
Python正则表达式教程之一:基础篇
2017/03/02 Python
解决python中遇到字典里key值为None的情况,取不出来的问题
2018/10/17 Python
python根据list重命名文件夹里的所有文件实例
2018/10/25 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
python Dijkstra算法实现最短路径问题的方法
2019/09/19 Python
python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例
2020/02/27 Python
Python在终端通过pip安装好包以后在Pycharm中依然无法使用的问题(三种解决方案)
2020/03/10 Python
欧舒丹英国官网:购买欧舒丹护手霜等明星产品
2017/01/17 全球购物
ShellScript面试题一则-ShellScript编程
2014/06/24 面试题
EJB与JAVA BEAN的区别
2016/08/29 面试题
婚礼新郎父母答谢词
2014/01/16 职场文书
2014财务年度工作总结
2014/11/11 职场文书
新郎婚礼致辞
2015/07/27 职场文书
和领导吃饭祝酒词
2015/08/11 职场文书