探讨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 解析后的xml对象的读取方法细解
Jul 25 Javascript
javascript Object与Function使用
Jan 11 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
Nov 28 Javascript
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
Apr 07 Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
Oct 13 Javascript
appendChild() 或 insertBefore()使用与区别介绍
Oct 11 Javascript
分享20个提升网站界面体验的jQuery插件
Dec 15 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
Jun 09 Javascript
AngularJS指令详解及示例代码
Aug 16 Javascript
vue2.0 资源文件assets和static的区别详解
Apr 08 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
一篇文章带你浅入webpack的DLL优化打包
Feb 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
用PHP制作静态网站的模板框架(一)
2006/10/09 PHP
php的ajax框架xajax入门与试用介绍
2010/12/19 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
ThinkPHP 5.x远程命令执行漏洞复现
2019/09/23 PHP
jquery 学习之二 属性(类)
2010/11/25 Javascript
JavaScript动态添加style节点的方法
2015/06/09 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
2015/12/03 Javascript
javascript自动切换焦点控制效果完整实例
2016/02/02 Javascript
基于javascript实现全屏漂浮广告
2016/03/31 Javascript
Actionscript与javascript交互实例程序(修改)
2016/09/22 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
2016/12/08 Javascript
微信小程序自定义组件
2017/08/16 Javascript
javascript计算渐变颜色的实例
2017/09/22 Javascript
three.js实现3D视野缩放效果
2017/11/16 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
2018/08/09 Javascript
微信小程序页面间值传递的两种方法
2018/11/26 Javascript
微信小程序Echarts图表组件使用方法详解
2019/06/25 Javascript
JS创建自定义对象的六种方法总结
2020/12/15 Javascript
Vue中inheritAttrs的使用实例详解
2020/12/31 Vue.js
vue 页面跳转的实现方式
2021/01/12 Vue.js
[01:00]一分钟回顾2018DOTA2亚洲邀请赛现场活动
2018/04/07 DOTA
Python实现调度算法代码详解
2017/12/01 Python
详解Python最长公共子串和最长公共子序列的实现
2018/07/07 Python
查找python项目依赖并生成requirements.txt的方法
2018/07/10 Python
解决tensorflow读取本地MNITS_data失败的原因
2020/06/22 Python
基于Django集成CAS实现流程详解
2020/11/28 Python
css3的transition效果和transfor效果示例介绍
2013/10/30 HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
2014/05/09 HTML / CSS
Java工程师面试集锦之Spring框架
2013/06/16 面试题
妇产科护士自我鉴定
2013/10/15 职场文书
致1500米运动员广播稿
2014/02/07 职场文书
普通党员群众路线教育实践活动心得体会
2014/11/04 职场文书
供应商食品安全承诺书
2015/04/29 职场文书
行政诉讼答辩状
2015/05/21 职场文书
《祁黄羊》教学反思
2016/02/20 职场文书
PHP正则表达式之RCEService回溯
2022/04/11 PHP