探讨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 相关文章推荐
filemanage功能中用到的common.js
Apr 08 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
Sep 02 Javascript
js constructor的实际作用分析
Nov 15 Javascript
JavaScript打字小游戏代码
Dec 26 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
Apr 18 Javascript
Javascript冒泡排序算法详解
Dec 03 Javascript
iScroll中事件点击触发两次解决方案
Mar 11 Javascript
EasyUi combotree 实现动态加载树节点
Apr 01 Javascript
React如何将组件渲染到指定DOM节点详解
Sep 08 Javascript
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
详解基于iview-ui的导航栏路径(面包屑)配置
Feb 22 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
Mar 13 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
通用PHP动态生成静态HTML网页的代码
2010/03/04 PHP
php array_search() 函数使用
2010/04/13 PHP
php实现过滤UBB代码的类
2015/03/12 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
JavaScript中yield实用简洁实现方式
2010/06/12 Javascript
JavaScript的作用域和块级作用域概念理解
2014/09/21 Javascript
jQuery中siblings()方法用法实例
2015/01/08 Javascript
javascript实现仿腾讯游戏选择
2015/05/14 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
2016/09/14 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
2016/11/16 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
2017/03/02 Javascript
基于Vuejs和Element的注册插件的编写方法
2017/07/03 Javascript
解决百度Echarts图表坐标轴越界的方法
2018/10/17 Javascript
关于AOP在JS中的实现与应用详解
2019/05/06 Javascript
ES6学习笔记之let与const用法实例分析
2020/01/22 Javascript
react使用CSS实现react动画功能示例
2020/05/18 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
用python 制作图片转pdf工具
2015/01/30 Python
Python THREADING模块中的JOIN()方法深入理解
2015/02/18 Python
Python实现获取磁盘剩余空间的2种方法
2017/06/07 Python
pandas 实现字典转换成DataFrame的方法
2018/07/04 Python
美国咖啡批发网站:Coffee.org
2017/06/29 全球购物
京东国际站:JOYBUY
2017/11/23 全球购物
Omio葡萄牙:全欧洲低价大巴、火车和航班搜索和比价
2019/02/09 全球购物
如何用SQL语句进行模糊查找
2015/09/25 面试题
当文件系统受到破坏时,如何检查和修复系统?
2012/03/09 面试题
珍珠奶茶店创业计划书
2014/01/11 职场文书
个人简历自我评价范文
2014/02/04 职场文书
外贸员简历中的自我评价
2014/03/04 职场文书
法人代表授权委托书
2014/04/08 职场文书
2015年上半年物业工作总结
2015/03/30 职场文书
团结友爱主题班会
2015/08/13 职场文书
财务人员廉洁自律心得体会
2016/01/13 职场文书
高效课堂教学反思
2016/02/24 职场文书
MySQL系列之四 SQL语法
2021/07/02 MySQL