探讨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 相关文章推荐
Mootools 1.2 手风琴(Accordion)教程
Sep 15 Javascript
jQuery 获取URL的GET参数值的小例子
Apr 18 Javascript
jQuery中;function($,undefined) 前面的分号的用处
Dec 17 Javascript
jQuery中ajax的load()方法用法实例
Dec 26 Javascript
浅谈JavaScript中Date(日期对象),Math对象
Feb 05 Javascript
js实现创建删除html元素小结
Sep 30 Javascript
JS字符串的切分用法实例
Feb 22 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
Jun 03 Javascript
Node.JS中事件轮询(Event Loop)的解析
Feb 25 Javascript
详解如何在nuxt中添加proxyTable代理
Aug 10 Javascript
Vue学习笔记之计算属性与侦听器用法
Dec 07 Javascript
vue实现简单加法计算器
Oct 22 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.ini实现Mysql导入数据库文件最大限制的修改方法
2007/12/11 PHP
php 抽象类的简单应用
2011/09/06 PHP
php_screw 1.5:php加密: 安装与使用详解
2013/06/20 PHP
php删除文本文件中重复行的方法
2015/04/28 PHP
PHP生成随机字符串(3种方法)
2015/09/25 PHP
PHP实现原生态图片上传封装类方法
2016/11/08 PHP
基于yaf框架和uploadify插件,做的一个导入excel文件,查看并保存数据的功能
2017/01/24 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
ie 处理 gif动画 的onload 事件的一个 bug
2007/04/12 Javascript
jQuery之日期选择器的深入解析
2013/06/19 Javascript
JavaScript运行时库属性一览表
2014/03/14 Javascript
详解javascript数组去重问题
2015/11/06 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
vue-cli如何快速构建vue项目
2017/04/26 Javascript
ES6新特性:使用export和import实现模块化详解
2017/07/31 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
2017/11/24 Javascript
Promise.all中对于reject的处理方法
2018/08/01 Javascript
Javascript实现html转pdf高清版(提高分辨率)
2020/02/19 Javascript
Python中Class类用法实例分析
2015/11/12 Python
Eclipse中Python开发环境搭建简单教程
2016/03/23 Python
pycharm安装图文教程
2017/05/02 Python
Python中动态检测编码chardet的使用教程
2017/07/06 Python
django的ORM操作 删除和编辑实现详解
2019/07/24 Python
Django实现基于类的分页功能
2019/10/31 Python
关于python tushare Tkinter构建的简单股票可视化查询系统(Beta v0.13)
2020/10/19 Python
详解CSS3 用border写 空心三角箭头 (两种写法)
2017/09/29 HTML / CSS
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
俄罗斯在线手表和珠宝商店:AllTime
2019/09/28 全球购物
区三好学生主要事迹
2014/01/30 职场文书
中学自我评价
2014/01/31 职场文书
畜牧兽医本科生的自我评价
2014/03/03 职场文书
住宿生擅自离校检讨书
2014/09/22 职场文书
务虚会发言材料
2014/12/25 职场文书
老员工辞职信范文
2015/05/12 职场文书
关于车尾的标语大全
2015/08/11 职场文书
党风廉政教育心得体会2016
2016/01/22 职场文书