一：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版）补充资料 （陆） 第六章 点云 PCL

    ROS机器人程序设计(原书第2版)补充资料 (陆) 第六章 点云 PCL 书中,大部分出现hydro的地方,直接替换为indigo或jade或kinetic,即可在对应版本中使用. RGBD深度摄像头 ...

  2. Web自动化框架LazyUI使用手册（4）--控件抓取工具Elements Extractor详解（批量抓取）

    概述 前面的一篇博文详细介绍了单个控件抓取的设计思路&逻辑以及使用方法,本文将详述批量控件抓取功能. 批量抓取:打开一个web页面,遍历页面上所有能被抓取的元素,获得每个元素的iframe.和 ...

  3. 并发计算模型BSP与SEDA

    1    BSP批量同步并行计算 BSP(Bulk Synchronous Parallel)批量同步并行计算用来解决并发编程难的问题.名字听起来有点矛盾,又是同步又是并行的.因为计算被分组成一个个超 ...

  4. windows 7、8分区

    如果你的机器一开始安装的是windows7或者8, 一般分配的分区都是主分区.如果你想再搭配个linux操作系统,搞个双系统啥的,可能总是失败.我有血的教训啊. 从源头上可以解决分区问题,就是可以在安 ...

  5. iOS中NSTimer的invalidate调用之后

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 免责申明:本博客提供的所有翻译文章原稿均来自互联网,仅供学习交 ...

  6. 06 获取Activity的栈管理器

    代码 <span style="font-size:18px;">package com.fmy.day8_29task.util; import java.util. ...

  7. Java-IO之InputStreamReader和OutputStreamWriter

    InputStreamReader和OutputStreamWriter是字节流通向字符流的桥梁.它使用指定的差染色体读写字节并将其解码为字符.InputStreamReader的作用是将字节输入流转 ...

  8. 【VSTS 日志】TFS 2015 Update 1 发布 – Git和TFVC代码库可以混合使用了

    Visual Studio Team Foundation Server 2015 Update 1已经发布了. 这是 Team Foundation Server (TFS) 的最新版本,是 Mic ...

  9. python类：magic魔术方法

    http://blog.csdn.net/pipisorry/article/details/50708812 魔术方法是面向对象Python语言中的一切.它们是你可以自定义并添加"魔法&q ...

  10. 【leetcode75】Intersection of Two Arrays（数组的交集）

    题目描述: 给定两个数组求他们的公共部分,输出形式是数组,相同的元素只是输出一次 例如: nums1 = [1, 2, 2, 1], nums2 = [2, 2], return [2]. 原文描述: ...