一：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. python将nan, inf转为特定的数字

    最近,处理两个矩阵的点除,得到结果后,再作其他的计算,发现有些内置的函数不work:查看得到的数据,发现有很多nan和inf,导致python的基本函数运行不了,这是因为在除的过程中分母出现0的缘故. ...

  2. Android安全升级的7.0： Nougat

    Tamic http://www.jianshu.com/users/3bbb1ddf4fd5/latest_articles 今年夏天以来,Google做了多种增强的安全性在Android的7.0N ...

  3. Web自动化框架LazyUI使用手册（6）--8种控件对应的class，及可对其进行的操作

    概述: 本文详述8种控件对应的class,及可对其进行的操作 回顾: 回顾一下,下文中的工具设计思路部分: http://blog.csdn.net/kaka1121/article/details/ ...

  4. Java: How to resolve Access Restriction error

    Issue: Access restriction: The constructor 'BASE64Decoder()' is not API (restriction on required lib ...

  5. 剑指Offer——分治算法

    剑指Offer--分治算法 基本概念 在计算机科学中,分治法是一种很重要的算法.字面上的解释是"分而治之",就是把一个复杂的问题分成两个或更多的相同或相似的子问题,再把子问题分成更 ...

  6. 多线程之Java线程阻塞与唤醒

    线程的阻塞和唤醒在多线程并发过程中是一个关键点,当线程数量达到很大的数量级时,并发可能带来很多隐蔽的问题.如何正确暂停一个线程,暂停后又如何在一个要求的时间点恢复,这些都需要仔细考虑的细节.在Java ...

  7. 06 Activity的启动模式 Intent的七大属性的总结

    1.Task以及back stack     >Task(任务)  为了完成一个功能  多个Activity的集合,     当你的应用程序启动时 系统会自动创建Task用于管理Activity ...

  8. JDK8帮助文档生成-笔记

    JDK8 出来了,以前习惯了使用.CHM文件来查看API,现在想也这样,这里自己制作了一下,记录一下. 1.需要的工具: ①JD2CHM;②API文档③HTMLlHelper 遇到的问题主要是不知道去 ...

  9. Android的ViewAnimator及其子类ViewSwitcher-android学习之旅（三十三）

    ViewAnimator继承了FrameLayout,多个组件重合在一起,可以加入多个组件,然后切换的时候会有动画. ViewAnimator及其子类的继承关系 ViewAnimator常用属性 Vi ...

  10. LCD 常用的客观效果指标和测试方法

    1.DPI--精密度: 评分标准 DPI 评分 DPI<200 50 200≤DPI<250 60 250≤DPI<300 70 300≤DPI<350 80 350≤DPI& ...