一：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. Android输入控件详解

    输入控件 输入控件是您的应用用户界面中的交互式组件.Android 提供了多种可在 UI 中使用的控件,如按钮.文本字段.定位栏.复选框.缩放按钮.切换按钮等. 向 UI 中添加输入控件与向 XML ...

  2. 在8X8的棋盘上分布着n个骑士，他们想约在某一个格中聚会。骑士每天可以像国际象棋中的马那样移动一次，可以从中间像8个方向移动（当然不能走出棋盘），请计算n个骑士的最早聚会地点和要走多少天。要求尽早聚会

    在8X8的棋盘上分布着n个骑士,他们想约在某一个格中聚会.骑士每天可以像国际象棋中的马那样移动一次,可以从中间像8个方向移动(当然不能走出棋盘),请计算n个骑士的最早聚会地点和要走多少天.要求尽早聚会 ...

  3. Dynamics CRM 权限整理二

    接上篇http://blog.csdn.net/vic0228/article/details/50510605,继续列举CRM相关权限 prvReadBusinessUnit privilege(I ...

  4. 详解EBS接口开发之库存事务处理-物料批次导入

    库存事务处理-物料批次导入 --系统批次表 SELECT * FROM MTL_LOT_NUMBERS T; --API创建批次 inv_lot_api_pub.create_inv_lot(x_re ...

  5. mvn管理项目jar包

    Maven是一个采用纯Java编写的开 源项目管理工具.Maven采用了一种被称之为project object model (POM)概念来管理项目,所有的项目配置信息都被定义在一个叫做POM.xm ...

  6. 全文检索 Lucene(3)

    看完前两篇博客之后,想必大家对于Lucene的使用都有了一个比较清晰的认识了.如果对Lucene的知识点还是有点模糊的话,个人建议还是先看看这两篇文章. 全文检索 Lucene(1) 全文检索 Luc ...

  7. Dialog样式的Activity

    效果图: 设置全屏模式: @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInst ...

  8. Android简易实战教程--第二十话《通过广播接收者，对拨打电话外加ip号》

    没睡着觉,起来更篇文章吧哈哈!首先祝贺李宗伟击败我丹,虽然我是支持我丹的,但是他也不容易哈哈,值得尊敬的人!切入正题:这一篇来介绍个自定义广播接收者. 通常我们在外拨电话的时候,一般为使用网络电话.如 ...

  9. SSH网上商城---商品详情页的制作

    在前面的博文中,小编分别简单的介绍了邮件的发送以及邮件的激活,逛淘宝的小伙伴都有这样的体会,比如在搜索框中输入连衣裙这个商品的时候,会出现多种多样各种款式的连衣裙,连衣裙的信息包括价格,多少人购买,商 ...

  10. JDBC-数据库的编程（一）

    因为我使用的mysql数据库客户端程序是workBench,所以会用workBench来进行讲解. create table tbl_user( id int(11) unsigned not nul ...