接上篇“jQuery学习笔记：Ajax(一)”。
3、jQuery.get(url,[data],[callback],[type])
通过远程 HTTP GET 请求载入信息。
这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。
返回值  XMLHttpRequest
参数
url (String) : 待载入页面的URL地址
data (Map) : (可选) 待发送 Key/value 参数。
callback (Function) : (可选) 载入成功时回调函数。
type (String) : (可选) 返回内容格式，xml, html, script, json, text, _default。
示例

Code
function jqAjaxTest() {
    var jqRequestUrl = "AjaxHandler.ashx";
    $.get(jqRequestUrl + "?action=jquery", { userName: "jeff wong", location: "beijing" }, jqGetNormalCallBack, 'text'); //返回数据类型
}

function jqGetNormalCallBack(oData) {
    $("#spanResult").html(oData);//这里直接json数据绑定了，下一个jquery方法会有处理
    $("#spanResult").css("display", "block");
    $("#spanResult").css("color", "red");
}

AjaxHandler.ashx代码：

Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.SessionState;
using System.Xml;

namespace MyJQTest
{
    public class AjaxHandler : IHttpHandler, IRequiresSessionState
    {
        /// <summary>
        /// 可复用
        /// </summary>
        public bool IsReusable
        {
            get
            {
                return true;
            }
        }

public void ProcessRequest(HttpContext context)
        {
            AjaxOperations(context);
        }

private void AjaxOperations(HttpContext context)
        {
            string action = context.Request["action"];
            if (!string.IsNullOrEmpty(action))
            {
                switch (action)
                {
                    default:
                        break;
                    case "jquery":
                        ProcessJQueryRequest(context);
                        break;
                }
            }
        }

private void ProcessJQueryRequest(HttpContext context)
        {
            context.Response.ClearContent();
            context.Response.ContentType = "text/plain"; //设置输出流类型
              context.Response.Cache.SetCacheability(HttpCacheability.NoCache); //没有缓存
              string userName = context.Request["userName"].Trim();
            string location = context.Request["location"].Trim();
            string jsonObject = "{\"userName\":\"" + userName + "\",\"location\":\"" + location + "\"}";
            context.Response.Write(jsonObject);
        }
    }
}

ps：本例中，我们返回的是一段json类型的数据，在客户端没有对json类型数据进行处理，在下一个方法（jQuery.getJSON）中会改进处理的。
4、jQuery.getJSON(url,[data],[callback])
通过 HTTP GET 请求载入 JSON 数据。
在 jQuery 1.2 中，您可以通过使用JSONP 形式的回调函数来加载其他网域的JSON数据，如 "myurl?callback=?"。jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
注意：此行以后的代码将在这个回调函数执行前执行。
返回值  XMLHttpRequest
参数
url (String) : 发送请求地址。
data (Map) : (可选) 待发送 Key/value 参数。
callback (Function) : (可选) 载入成功时回调函数。
示例

Code
function jqAjaxTest() {
    var jqRequestUrl = "AjaxHandler.ashx";
    //getJSON方法调用
    $.getJSON(jqRequestUrl + "?action=jquery", { userName: "jeff wong", location: "beijing" }, jqGetJsonCallBack); //返回json数据类型
}

//对json数据进行处理 (oData是json类型的数据)
function jqGetJsonCallBack(oData) {
    var oJsonStr = "";
    //取json中的数据,并呈现
    oJsonStr += "userName:" + oData.userName + "&nbsp;&nbsp;location:" + oData.location + "<br/>";

//在div中显示所有数据
    $("#divResult").html(oJsonStr);
    $("#divResult").css("display", "block");
    $("#divResult").css("color", "red");
}

5、jQuery.getScript(url,[callback])
通过 HTTP GET 请求载入并执行一个 JavaScript 文件。
jQuery 1.2 版本之前，getScript 只能调用同域 JS 文件。 1.2中，您可以跨域调用 JavaScript 文件。注意：Safari 2 或更早的版本不能在全局作用域中同步执行脚本。如果通过 getScript 加入脚本，请加入延时函数。
返回值  XMLHttpRequest
参数
url (String) : 待载入 JS 文件地址。
callback (Function) : (可选) 成功载入后回调函数。
示例

Code
function jqAjaxTest() {
    var jsUrl = "js/jqLoadJs.js";
    //getScript方法调用
    $.getScript(jsUrl, jqGetJsCallBack);
}

//oData返回的是整个js路径下js文件内容
function jqGetJsCallBack(oData) {
    alert(oData);
}

6、jQuery.post(url,[data],[callback],[type])
通过远程 HTTP POST 请求载入信息。
这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。
返回值  XMLHttpRequest
参数
url (String) : 发送请求地址。
data (Map) : (可选) 待发送 Key/value 参数。
callback (Function) : (可选) 发送成功时回调函数。
type (String) : (可选) 返回内容格式，xml, html, script, json, text, _default。
示例

Code
function jqAjaxTest() {
    var jqRequestUrl = "AjaxHandler.ashx";
    $.post(jqRequestUrl + "?action=jquery", { userName: "jeff wong", location: "beijing" }, jqPostCallBack, "text"); //返回text数据类型
}

function jqPostCallBack(oData) {
    //在div中显示所有数据
    $("#divResult").html(oData);
    $("#divResult").css("display", "block");
    $("#divResult").css("color", "red");
}

二、Ajax事件
1、ajaxComplete(callback)
AJAX 请求完成时执行函数。Ajax 事件。
XMLHttpRequest 对象和设置作为参数传递给回调函数。
返回值  jQuery
参数
callback (Function) : 待执行函数
示例

Code
function jqAjaxTest() {
    var jqRequestUrl = "AjaxHandler.ashx";
    $.post(jqRequestUrl + "?action=jquery", { userName: "jeff wong", location: "beijing" }, jqPostCallBack, "text"); //返回text数据类型

//AJAX 请求完成时执行函数
    $("#divResult").ajaxComplete(function(event, request, settings) {
        $(this).append("<br/>请求完成.");
    });
}

function jqPostCallBack(oData) {
    //在div中显示所有数据
    $("#divResult").html(oData);
    $("#divResult").css("display", "block");
    $("#divResult").css("color", "red");
}

2、ajaxError(callback)
AJAX 请求发生错误时执行函数。Ajax 事件。
XMLHttpRequest 对象和设置作为参数传递给回调函数。捕捉到的错误可作为最后一个参数传递。
返回值  jQuery
参数
callback (Function) : 待执行函数
function (event, XMLHttpRequest, ajaxOptions, thrownError) {
      // thrownError 只有当异常发生时才会被传递
      this; // 监听的 dom 元素
}

示例

Code
function jqAjaxTest() {
    var jqRequestUrl = "AjaxHandlers.ashx"; //正确的文件名  AjaxHandler.ashx  这里故意写错  引发ajaxError事件
    $.post(jqRequestUrl + "?action=jquery", { userName: "jeff wong", location: "beijing" }, jqPostCallBack, "text");

}

//AJAX 请求发生错误时执行函数 (这一段放在jqAjaxTest函数内也可以)
$("#divResult").ajaxError(function(event, request, settings) {
    $("#divResult").css("display", "block");
    $("#divResult").css("color", "red");
    $(this).append("<br/>出错页面:" + settings.url);
});

function jqPostCallBack(oData) {
    //在div中显示所有数据
    $("#divResult").html(oData);
    $("#divResult").css("display", "block");
    $("#divResult").css("color", "red");
}

3、ajaxSend(callback)
AJAX 请求发送前执行函数。Ajax 事件。
XMLHttpRequest 对象和设置作为参数传递给回调函数。
返回值  jQuery
参数
callback (Function) : 待执行函数
示例

Code
function jqAjaxTest() {
    var jqRequestUrl = "AjaxHandler.ashx"; 
    $.post(jqRequestUrl + "?action=jquery", { userName: "jeff wong", location: "beijing" }, jqPostCallBack, "text");

}

//AJAX 请求发送前执行函数
$("#divResult").ajaxSend(function(evt, request, settings) {
    $("#divResult").css("display", "block");
    $("#divResult").css("color", "red");
    $(this).append("<br/>开始请求: " + settings.url + "<br/>");
});

function jqPostCallBack(oData) {
    //在div中显示所有数据
    $("#divResult").append(oData);
    $("#divResult").css("display", "block");
    $("#divResult").css("color", "red");
}

4、ajaxStart(callback)
AJAX 请求开始时执行函数。Ajax 事件。
返回值  jQuery
参数
callback (Function) : 待执行函数
示例

Code
function jqAjaxTest() {
    var jqRequestUrl = "AjaxHandler.ashx"; 
    $.post(jqRequestUrl + "?action=jquery", { userName: "jeff wong", location: "beijing" }, jqPostCallBack, "text");

}

//AJAX 请求开始时执行函数
$("#divResult").ajaxStart(function() {
    $("#divResult").css("display", "block");
    $("#divResult").css("color", "red");
    $(this).append("<br/>请求开始了<br/>");
});

function jqPostCallBack(oData) {
    //在div中显示所有数据
    $("#divResult").append(oData);
    $("#divResult").css("display", "block");
    $("#divResult").css("color", "red");
}

5、ajaxStop(callback)
AJAX 请求结束时执行函数。Ajax 事件。
返回值  jQuery
参数
callback (Function) : 待执行函数
示例

Code
function jqAjaxTest() {
    var jqRequestUrl = "AjaxHandler.ashx"; 
    $.post(jqRequestUrl + "?action=jquery", { userName: "jeff wong", location: "beijing" }, jqPostCallBack, "text");

}

//AJAX 请求开始时执行函数
$("#divResult").ajaxStop(function() {
    $(this).append("<br/>请求已经结束了<br/>");
});

function jqPostCallBack(oData) {
    //在div中显示所有数据
    $("#divResult").append(oData);
    $("#divResult").css("display", "block");
    $("#divResult").css("color", "red");
}

6、ajaxSuccess(callback)
AJAX 请求成功时执行函数。Ajax 事件。
XMLHttpRequest 对象和设置作为参数传递给回调函数。
返回值  jQuery
参数
callback (Function) : 待执行函数
示例

Code
function jqAjaxTest() {
    var jqRequestUrl = "AjaxHandler.ashx"; 
    $.post(jqRequestUrl + "?action=jquery", { userName: "jeff wong", location: "beijing" }, jqPostCallBack, "text");

}

//AJAX 请求成功时执行函数
$("#divResult").ajaxSuccess(function(evt, request, settings) {
    $(this).append("<br/>请求成功<br/>");
    $(this).append(settings.url);
});

function jqPostCallBack(oData) {
    //在div中显示所有数据
    $("#divResult").append(oData);
    $("#divResult").css("display", "block");
    $("#divResult").css("color", "red");
}

三、其他
1、jQuery.ajaxSetup(options)
设置全局 AJAX 默认选项。
参数见 '$.ajax' 说明。
返回值  jQuery
参数
options (可选) : 选项设置。所有设置项均为可选设置。
示例

//设置 AJAX 请求默认地址为 "AjaxHandler.ashx"，禁止触发全局 AJAX 事件，用 POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数。 
$.ajaxSetup({
    url: "AjaxHandler.ashx",
    global: false,
    type: "POST"
});

2、serialize()
序列化表单内容为字符串。
返回值  jQuery
参数
序列化表单内容为字符串，用于 Ajax 请求。
示例

$(document).ready(function() {
    var oSerializedStr = $("form").serialize(); //序列化表单内容为字符串
    $("#results").append("<tt>" + oSerializedStr + "</tt>");
});

文档片段：

Code
<body>
    <p id="results">
        <b>Results: </b>
    </p>
    <form>
    <select name="single">
        <option>Single</option>
        <option>Single2</option>
    </select>
    <select name="multiple" multiple="multiple">
        <option selected="selected">Multiple</option>
        <option>Multiple2</option>
        <option selected="selected">Multiple3</option>
    </select><br />
    <input type="checkbox" name="check" value="check1" />
    check1
    <input type="checkbox" name="check" value="check2" checked="checked" />
    check2
    <input type="radio" name="radio" value="radio1" checked="checked" />
    radio1
    <input type="radio" name="radio" value="radio2" />
    radio2
    </form>

<script src="js/jQTest.js" type="text/javascript"></script>

</body>

3、serializeArray()
序列化表单内容，返回 JSON 数据结构数据。
返回值  jQuery
参数
序列化表单内容为JSON ，用于 Ajax 请求。
示例

Code
$(document).ready(function() {
    var fields = $("select, :radio").serializeArray(); //序列化表单select和raido为json
    jQuery.each(fields, function(i, field) {
        $("#results").append(field.value + " ");
    }); 
});

好了，关于jQuery的ajax就介绍到这里，笔者的每个示例都测试通过了。jQuery封装好的ajax函数用起来确实方便，有了这样的“神兵利器”，以后写ajax的应用程序肯定会更加得心应手。

jQuery学习笔记：Ajax(二)相关推荐

  1. jQuery学习笔记（二）

    jQuery学习笔记(二) 二.管理jQuery包装集 1.创建新的元素 使用HTML DOM 创建元素 var select=document.createElement("select& ...

  2. JavaScript程序库jQuery学习笔记分享(二)jQuery对象和DOM操作，和其他js库冲突处理

    今天我继续更新jQuery学习笔记,最近考试比较忙,也就更新的比较慢了,这里向大家说一声抱歉,嘻嘻. 让那不愉快的情绪过去吧,继续进行我们的jQuery之旅吧. 一:jQuery对象和DOM对象 1. ...

  3. jQuery 学习笔记之二 (jQuery代码风格)

    jquery 学习之代码风格 对于同一个对象的较多操作,建议每行写一个操作,代码如下: $(this).removeClass() .addClass() .stop() .fadeTo(" ...

  4. jQuery 学习笔记之二 (jQuery代码风格)

    jquery 学习之代码风格对于同一个对象的较多操作,建议每行写一个操作,代码如下: $(this).removeClass() .addClass() .stop() .fadeTo("f ...

  5. jQuery学习笔记（二）使用选择器一

    jQuery选择器是jQuery框架的基础,jQuery对事件的处理.DOM操作.CSS动态控制.Ajax通信.动画设计都是在选择器基础上进行的 注意,在jQuery中通过各种选择器和方法获取的结果集 ...

  6. JQuery学习笔记 [Ajax] (6-2)

    1). $.get发送请求 $(function() { $("#Button1").click(function() { //按钮单击事件 //打开文件,并通过回调函数返回服务器 ...

  7. JQuery学习笔记 [Ajax] (6-1)

    1). 传统的JavaScript方法实现Ajax功能 var objXmlHttp = null; //声明一个空的XMLHTTP变量 function CreateXMLHTTP() { //根据 ...

  8. jQuery学习笔记（二）—— 操作DOM元素

    使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,attr(属性名,属性值)格式则是设置元素属性名的值. 例如,使用a ...

  9. extjs 提交表单给php,JavaScript_Extjs学习笔记之二 初识Extjs之Form，Extjs中的表单组件是Ext.form.Basic - phpStudy...

    Extjs学习笔记之二 初识Extjs之Form Extjs中的表单组件是Ext.form.BasicForm,不过最简单最常用的是Ext.form.FormPanel控件,它继承自Panel,具有一 ...

最新文章

  1. symbol lookup error
  2. 5G NGC — UDM 统一数据管理
  3. Spring Boot开始
  4. css: transform导致文字显示模糊
  5. python函数定义与使用
  6. 2014年世界互联网大会---马云篇
  7. 【C语言】控制台窗口图形界面编程（二）窗口信息和填充缓冲区
  8. IBM服务器显示系统恢复,苏州数据恢复_IBM X3850服务器数据恢复中处理SAS硬盘故障的恢复案例...
  9. eclipse mysql生成实体类_Eclipse实现数据库反向生成实体类（pojo）-------（插件安装和实现步骤的说明）...
  10. 完全二叉树的结点数计算
  11. python进阶（一）关联sql的算法操作
  12. 大数据Hadoop之——任务调度器Oozie（Oozie环境部署）
  13. 差分约束——vijos1589
  14. ABB机器人RobotStudio编程指令大全
  15. ANC降噪耳机声学参数合成与校准的2种方式
  16. php guzzle 上传文件,Guzzle 使用文档
  17. 自动化测试工具 Java等
  18. 柔宇科技掀起的柔性电子潮流，正在加速改变我们的生活
  19. Mysql连接命令join
  20. 天润融通java面试_【天润融通怎么样？】-看准网

热门文章

  1. Sherman-Morrison公式及其应用
  2. 二十四种设计模式：代理模式(Proxy Pattern)
  3. ios动画效果集锦（持续更新）
  4. ubuntu下svn使用指南
  5. SCCM 2012 R2 从入门到精通 Part2 部署准备
  6. 解密NTFS下经EFS加密的文件
  7. superset出现A valid API access token is required to use Mapbox data
  8. py4j.protocol.Py4JJavaError: An error occurred while calling o90.save
  9. 不要再次进行阅读的计算机论文与理由(持续更新中)
  10. Flask Web中的db.relationship()