探讨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 相关文章推荐
jquery学习笔记二 实现可编辑的表格
Apr 09 Javascript
JQuery动态创建DOM、表单元素的实现代码
Aug 09 Javascript
jquery miniui 教程 表格控件 合并单元格应用
Nov 25 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
Nov 06 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 Javascript
Jquery获取当前城市的天气信息
Aug 05 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
Dec 01 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
Dec 08 Javascript
Angular实现购物车计算示例代码
Feb 21 Javascript
web前端vue实现插值文本和输出原始html
Jan 19 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
Dec 23 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
Dec 20 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
编写漂亮的代码 - 将后台程序与前端程序分开
2008/04/23 PHP
php IP及IP段进行访问限制的代码
2008/12/17 PHP
JS 修改URL参数(实现代码)
2013/07/08 Javascript
浅析return false的正确使用
2013/11/04 Javascript
Javascript中的return作用及javascript return关键字用法详解
2015/11/05 Javascript
很酷的星级评分系统原生JS实现
2016/08/25 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
2017/02/14 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
2017/02/18 Javascript
AngularJS实现表格的增删改查(仅限前端)
2017/07/04 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
2017/07/26 Javascript
Vue.js用法详解
2017/11/13 Javascript
php 解压zip压缩包内容到指定目录的实例
2018/01/23 Javascript
js html实现计算器功能
2018/11/13 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
2020/08/21 Javascript
Angular6 Filter实现页面搜索的示例代码
2018/12/02 Javascript
vue实现微信获取用户信息的方法
2019/03/21 Javascript
通过JS深度判断两个对象字段相同
2019/06/14 Javascript
layUI实现列表查询功能
2019/07/27 Javascript
JavaScript实现拖拽效果
2020/03/16 Javascript
JavaScript创建表格的方法
2020/04/13 Javascript
vue中echarts引入中国地图的案例
2020/07/28 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
2020/08/03 Javascript
python采集博客中上传的QQ截图文件
2014/07/18 Python
python实现八大排序算法(2)
2017/09/14 Python
nginx黑名单和django限速,最简单的防恶意请求方法分享
2019/08/09 Python
英国在线药房和在线医生:LloydsPharmacy
2019/10/21 全球购物
如何进行Linux分区优化
2013/02/12 面试题
护理专业毕业生自我鉴定
2013/10/08 职场文书
机电一体化毕业生求职信
2013/11/02 职场文书
土木工程专业个人求职信
2013/12/05 职场文书
《傅雷家书》教学反思
2014/04/20 职场文书
2014财务人员自我评价范文
2014/09/21 职场文书
县委班子四风对照检查材料思想汇报
2014/09/29 职场文书
营业员岗位职责范本
2015/04/14 职场文书
如何开发一个渐进式Web应用程序PWA
2021/05/10 Javascript
Python 的演示平台支持 WSGI 接口的应用
2022/04/20 Python