一：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是：

View
Code

<%@ 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的异步使用场景基本满足我们的需求，自己试试看吧。

文章来自：http://www.cnblogs.com/WikStone/archive/2012/03/20/2407540.html

作者：WikStone

出处：http://wikstone.cnblogs.com/

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

jQuery的ajax使用的更多相关文章

  1. jQuery之ajax实现篇

    jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...

  2. 【原创经验分享】JQuery（Ajax）调用WCF服务

    最近在学习这个WCF,由于刚开始学 不久,发现网上的一些WCF教程都比较简单,感觉功能跟WebService没什么特别大的区别,但是看网上的介绍,就说WCF比WebService牛逼多少多少,反正我刚 ...

  3. jQuery版AJAX简易封装

    开发过程中,AJAX的应用应该说非常频繁,当然,jQuery的AJAX函数已经非常好用,但是小编还是稍微整理下,方便不同需求下,可以简化输入参数,下面是实例代码: $(function(){ /** ...

  4. JS原生ajax与Jquery插件ajax深入学习

    序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...

  5. 重写jquery的ajax方法

    //首先备份下jquery的ajax方法 var _ajax=$.ajax; //重写jquery的ajax方法 $.ajax=function(opt){ //备份opt中error和success ...

  6. Jquery通过Ajax方式来提交Form表单

    今天刚好看到Jquery的ajax提交数据到服务器的方法,原文是: 保存数据到服务器,成功时显示信息. jQuery 代码: $.ajax({ type: "POST", url: ...

  7. 对jquery的ajax进行二次封装以及ajax缓存代理组件：AjaxCache

    虽然jquery的较新的api已经很好用了, 但是在实际工作还是有做二次封装的必要,好处有:1,二次封装后的API更加简洁,更符合个人的使用习惯:2,可以对ajax操作做一些统一处理,比如追加随机数或 ...

  8. jquery管理ajax异步－deferred对象

    今天跟大家分享一个jquery中的对象-deferred.其实早在jquery1.5.0版本中就已经引入这个对象了.不过可能在实际开发过程中用到的并不多,所以没有太在意. 这里先不说deferred的 ...

  9. Struts2 使用jQuery实现Ajax

    在jQuery中将Ajax相关的操作进行封装,使用时只需在合适的地方调用Ajax相关的方法即可,相比而言,使用jQuery实现Ajax更加简洁,方便 1.$.Ajax()可以通过发送Http请求加载远 ...

  10. JQuery中Ajax的操作

    JQuery   Ajax异步操作的方式: $.ajax,$.post, $.get, $.getJSON. 一, $.ajax,这个是JQuery对ajax封装的最基础步,通过使用这个函数可以完成异 ...

随机推荐

  1. iOS注册远程推送消息证书后提示此证书签发者无效的解决办法

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 我们在编写关于远程推送消息的App时需要注册一个相关的证书,我 ...

  2. 菜鸟学习物联网---辨析基于Andriod 5.1,Linux，Windows10开发Dragon Board 410c板

    点击打开链接 诸位亲最近怎么样?刚过完年上班是不是很不情愿?自古做事者,不唯有坚韧不拔之志,亦或有超世之才.所以,诸位好好加油.今天小编想给大家系统性总结一下Dragon Board 410c板基于A ...

  3. iOS7 CookBook精彩瞬间（一）property、selector细节、__unused

    1.我们常常使用nonatomic,很多人只知道它的效率较高,却不知道其含义,其含义是非线程安全的,也就是说多线程修改时不加锁,可能出现多个线程先后修改而成为脏数据的情况. 2.unsafe_unre ...

  4. Centos7安装Tair及配置测试

    系统环境 Centos7 64位 外网ip 182.254.145.66 内网ip 10.105.23.114 安装位置 /usr/local/tair Tair介绍 参见官网 安装 想了半天,我还是 ...

  5. Linux系统编程----孤儿进程

    什么是孤儿进程? 孤儿进程,  指在父进程退出后,而子进程还在运行,这个子进程就成了孤儿进程,这时由init进程(pid=1)接管 来看看例子: #include <stdio.h> #i ...

  6. Android 实现图片加水印

    加水印代码 public Bitmap addWaterMark(Bitmap src, String water, Context context){ Bitmap tarBitmap = src. ...

  7. CSDN专访：大数据时代下的商业存储

    原文地址:http://www.csdn.net/article/2014-06-03/2820044-cloud-emc-hadoop 摘要:EMC公司作为全球信息存储及管理产品方面的领先公司,不久 ...

  8. MANIFEST.MF Error: No available bundle exports package

    Issue: When you imported some 3rd jars and compiled MANIFEST.MF, you may got following compling erro ...

  9. Android的资源类型和存储方式简介-android学习之旅（五十二）

    android资源的类型 android资源的存储方式

  10. sed在行首或者行尾添加内容

    原文地址:http://www.cnblogs.com/ITEagle/archive/2013/06/20/3145546.html 用sed命令在行首或行尾添加字符的命令有以下几种: 假设处理的文 ...