一：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. ROS机器人程序设计（原书第2版）补充资料 （壹） 第一章 ROS系统入门

    ROS机器人程序设计(原书第2版)补充资料 (壹) 第一章 ROS系统入门 书中,大部分出现hydro的地方,直接替换为indigo或jade或kinetic,即可在对应版本中使用. 第一章主要包括R ...

  2. main函数之后的调用

    main函数代表进程的主线程.程序开始执行时,系统为程序创建一个进程,main函数其实并不是首先被调用的函数,而是操作系统调用了C/C++运行期启动函数,该函数负责对C/C++ 运行期库进行初始化.它 ...

  3. Effective C++ ——实现

    条款26:尽可能延后变量定义式的出现时间 当你定义一个变量的时候就要保证这个变量能够在程序中使用到,不要定义无意义的变量,这样就要求我们最好是在变量使用到的时候才做定义,因为如果一个变量定义了却不使用 ...

  4. UNIX网络编程——原始套接字（dos攻击）

    原始套接字(SOCK_RAW).应用原始套接字,我们可以编写出由TCP和UDP套接字不能够实现的功能. 注意原始套接字只能够由有 root权限的人创建. 可以参考前面的博客<<UNIX网络 ...

  5. 指令汇B新闻客户端开发（五） ShareSdk的使用

    ShareSdk是一个分享按钮的开源框架,我们首先可以去mob的官网下载这个控件.mob官网,然后找到sdk下载那一栏, 下载下来之后点击这个.jar文件就会有一个弹窗,填写自己的应用包名和要哪些分享 ...

  6. Android 字体设置-Typeface讲解

    控件的字体设置的两种方式 常用的字体类型名称还有: Typeface.DEFAULT //常规字体类型 Typeface.DEFAULT_BOLD //黑体字体类型 Typeface.MONOSPAC ...

  7. antlr v4 使用指南连载5——如何编写词法定义

    如何编写词法定义        继上一篇文章,相信大家都明了编写词法规则的两个基本原则.那么接下来就可以开始编写词法文件了.对于计算机科学来说,很多词法规则是一致的.如标识符.数字等,它们都可以重复在 ...

  8. （一〇三）静态库(.a)的调试

    上节介绍的方法,只能创建静态库而不能调试,因为直接创建静态库工程并非可执行文件. 本文介绍的方法创建的静态库断点能够在调试时起作用. 为了能够调试静态库,应该在一个可执行工程(例如Single Vie ...

  9. UNIX网络编程——UDP缺乏流量控制（改进版）

    现在我们查看无任何流量控制的UDP对数据报传输的影响.首先我们把dg_cli函数修改为发送固定数目的数据报,并不再从标准输入读.如下,它写2000个1400字节大小的UDP数据报给服务器. 客户端程序 ...

  10. UNIX网络编程——UDP回射服务器程序（初级版本）以及漏洞分析

    该函数提供的是一个迭代服务器,而不是像TCP服务器那样可以提供一个并发服务器.其中没有对fork的调用,因此单个服务器进程就得处理所有客户.一般来说,大多数TCP服务器是并发的,而大多数UDP服务器是 ...