jQuery 연구에서 Ajax 사용 사례에 대한 자세한 설명 Notes

이 기사의 예에서는 jQuery 연구 노트의 Ajax 사용법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

1. Ajax 요청

1.jQuery.ajax(옵션)

HTTP 요청을 통해 원격 데이터를 로드합니다. jQuery 기본 AJAX 구현. 간단하고 사용하기 쉬운 상위 수준 구현을 보려면 .get, .post 등을 참조하세요.

.ajax()는 생성된 XMLHttpRequest 객체를 반환합니다. 대부분의 경우 이 개체를 직접 조작할 필요는 없지만 특별한 경우에는 요청을 수동으로 종료하는 데 사용할 수 있습니다. .ajax()에는 각 구성 및 콜백 함수 정보를 포함하는 매개변수 키/값 객체라는 하나의 매개변수만 있습니다. 아래의 자세한 매개변수 옵션을 참조하세요.

참고: dataType 옵션을 지정하는 경우 서버가 올바른 MIME 정보를 반환하는지 확인하세요(예: xml이 "text/xml"을 반환함). 잘못된 MIME 유형은 예측할 수 없는 오류를 일으킬 수 있습니다.

참고: dataType이 "script"로 설정된 경우 원격 요청 중에(동일한 도메인에 속하지 않음) 모든 POST 요청이 GET 요청으로 변환됩니다. (DOM 스크립트 태그를 사용하여 로드하기 때문입니다)

jQuery 1.2에서는 도메인 간에 JSON 데이터를 로드할 수 있으며, 사용 시 데이터 유형을 JSONP로 설정해야 합니다. "myurl?callback=?"과 같은 JSONP 형식을 사용하여 함수를 호출하면 jQuery는 콜백 함수를 실행하기 위해 자동으로 ?를 올바른 함수 이름으로 바꿉니다. 데이터 유형이 "jsonp"로 설정되면 jQuery는 자동으로 콜백 함수를 호출합니다.

반환값 XMLHttpRequest

매개변수

옵션(선택 사항): AJAX 요청 설정. 모든 옵션은 선택 사항입니다.
옵션

(1), async(부울): (기본값: true)
기본적으로 모든 요청은 비동기식입니다. 동기 요청을 보내야 하는 경우 이 옵션을 false로 설정하세요. 동기 요청은 브라우저를 잠그며 사용자는 다른 작업을 수행하기 전에 요청이 완료될 때까지 기다려야 합니다.

(2) beforeSend(함수): 요청을 보내기 전에 사용자 정의 HTTP 헤더를 추가하는 등 XMLHttpRequest 객체를 수정할 수 있는 함수입니다.
XMLHttpRequest 객체가 유일한 매개변수입니다. 아약스 이벤트입니다. false가 반환되면 이 ajax 요청을 취소할 수 있습니다.

function (XMLHttpRequest) {
  this; // 调用本次AJAX请求时传递的options参数
}

로그인 후 복사

(3), 캐시(Boolean): (기본값: true, dataType이 script인 경우 기본값은 false)
jQuery 1.2의 새로운 기능으로 false로 설정하면 브라우저 캐시에서 요청 정보를 로드하지 않습니다.

(4), 완료(함수): 요청 완료 후 콜백 함수(요청 성공 또는 실패 시 호출됨).
매개변수: XMLHttpRequest 객체와 성공적인 요청 유형을 설명하는 문자열. 아약스 이벤트입니다

function (XMLHttpRequest, textStatus) {
  this; // 调用本次AJAX请求时传递的options参数
}

로그인 후 복사

(5), contentType(String): (기본값: "application/x-www-form-urlencoded") 서버에 정보를 보낼 때 콘텐츠 인코딩 유형입니다. 기본값은 대부분의 애플리케이션에 적합합니다.

(6), 데이터(Object,String): 서버로 보내는 데이터입니다. 요청 문자열 형식으로 자동 변환됩니다. GET 요청의 URL에 추가됩니다. 이 자동 변환을 비활성화하려면 processData 옵션 설명을 참조하세요.
키/값 형식이어야 합니다. 배열인 경우 jQuery는 자동으로 동일한 이름을 다른 값에 할당합니다. 예를 들어, {foo:["bar1", "bar2"]}는 '&foo=bar1&foo=bar2'로 변환됩니다.

(7), dataFilter(함수): Ajax에서 반환한 원본 데이터를 전처리하는 함수입니다. data와 type이라는 두 개의 매개변수를 제공합니다. data는 Ajax가 반환한 원본 데이터이고 type은 jQuery.ajax를 호출할 때 제공되는 dataType 매개변수입니다. 함수에서 반환된 값은 jQuery에 의해 추가로 처리됩니다.

function (data, type) {
  // 对Ajax返回的原始数据进行预处理
  return data // 返回处理后的数据
}

로그인 후 복사

(8), dataType(String): (기본값: xml 또는 html의 지능적 판단)
서버에서 반환할 것으로 예상되는 데이터 형식입니다. 지정하지 않으면 jQuery는 HTTP 패킷 MIME 정보를 기반으로 responseXML 또는 responseText를 자동으로 반환하고 이를 콜백 함수 매개 변수로 전달합니다. 사용 가능한 값:

"xml": jQuery로 처리할 수 있는 XML 문서를 반환합니다.
"html": 일반 텍스트 HTML 정보를 반환합니다. 포함된 스크립트 태그는 dom에 삽입될 때 실행됩니다.
"script": 일반 텍스트 JavaScript 코드를 반환합니다. 결과는 자동으로 캐시되지 않습니다. "cache" 매개변수가 설정되지 않은 경우. 참고: 원격 요청(동일한 도메인이 아닌)을 수행하는 경우 모든 POST 요청은 GET 요청으로 변환됩니다. (DOM 스크립트 태그를 사용하여 로드하기 때문입니다)
"json": JSON 데이터를 반환합니다.
"jsonp": JSONP 형식입니다. "myurl?callback=?"과 같은 JSONP 형식을 사용하여 함수를 호출하면 jQuery는 콜백 함수를 실행하기 위해 자동으로 ?를 올바른 함수 이름으로 바꿉니다.
"text": 일반 텍스트 문자열을 반환합니다

(9), 오류(기능): (기본값: 자동 판단(xml 또는 html)) 요청 실패 시 호출할 시간입니다. 세 가지 매개변수가 있습니다: XMLHttpRequest 객체, 오류 메시지 및 (선택 사항) 캡처된 오류 객체. 오류가 발생하면 오류 메시지(두 번째 매개변수)에는 null 외에 "timeout", "error", "notmodified" 및 "parsererror"가 포함될 수 있습니다. 아약스 이벤트.

function (XMLHttpRequest, textStatus, errorThrown) {
  // 通常 textStatus 和 errorThrown 之中
  // 只有一个会包含信息
  this; // 调用本次AJAX请求时传递的options参数
}

로그인 후 복사

（10）、global (Boolean) : (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。

（11）、ifModified (Boolean) : (默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。

（12）、jsonp (String) : 在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，比如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。

（13）、password (String) : 用于响应HTTP访问认证请求的密码

（14）、processData (Boolean) : (默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。

（15）、scriptCharset (String) : 只有当请求时dataType为"jsonp"或"script"，并且type是"GET"才会用于强制修改charset。通常在本地和远程的内容编码不同时使用。

（16）、success (Function) : 请求成功后的回调函数。参数：由服务器返回，并根据dataType参数进行处理后的数据；描述状态的字符串。 Ajax 事件。

function (data, textStatus) {
  // data 可能是 xmlDoc, jsonObj, html, text, 等等
  this; // 调用本次AJAX请求时传递的options参数
}

로그인 후 복사

（17）、timeout (Number) : 设置请求超时时间（毫秒）。此设置将覆盖全局设置。

（18）、type (String) : (默认: "GET") 请求方式 ("POST" 或 "GET")，默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

（19）、url (String) : (默认: 当前页地址) 发送请求的地址。

（20）、username (String) : 用于响应HTTP访问认证请求的用户名

（21）、xhr (Function) : 需要返回一个XMLHttpRequest 对象。默认在IE下是ActiveXObject 而其他情况下是XMLHttpRequest 。用于重写或者提供一个增强的XMLHttpRequest 对象。这个参数在jQuery 1.3以前不可用。

ps:上述红色标出的部分是大多数ajax调用常用的参数设置，利用这几个参数就可以成功实现ajax调用了.

示例

//jQTest.js
function jqAjaxTest() {
  var jqRequestUrl = "AjaxHandler.ashx";
  //1、 加载并执行一个 JS 文件
  $.ajax({
    type: "GET",
    url: "js/jqLoadJs.js",
    dataType: "script"
  });
  //2、装载一个 HTML 网页最新版本 
  $.ajax({
    url: "test.htm",
    cache: false, //没有缓存的说
    success: function(html) {
      //alert(html);
      $("#spanGetHtml").css("display", "block");
      $("#spanGetHtml").css("color", "red");
      $("#spanGetHtml").append(html);
    }
  });
  //3、获取并解析一个xml文件(从服务端获取xml)
  $.ajax({
    type: 'GET',
    dataType: 'xml', //这里可以不写，但千万别写text或者html
    url: jqRequestUrl + "&#63;action=jquerGetXmlRequest",
    success: function(xml) {
      //正确解析服务端的xml文件
      $(xml).find("profile").each(function(i) {
        var name = $(this).children("userName").text(); //取对象文本
        var location = $(this).children("location").text();
        alert("Xml at SERVER is gotten by CLIENT:" + name + " is living in " + location);
      });
    },
    error: function(xml) {
      alert('An error happend while loading XML document ');
    }
  });
  //4、发送 XML 数据至服务器(客户端发送xml到服务端)
  var xmlDocument = "<profile>" +
  " <userName>jeff wong</userName>" +
  " <location>beijing</location>" +
  "</profile>";
  $.ajax({
    url: jqRequestUrl + "&#63;action=jqueryXmlRequest",
    processData: false, //设置 processData 选项为 false，防止自动转换数据格式。
    //type: "xml",
    cache: false,
    type: "xml",
    data: xmlDocument,
    success: function(html) {
      alert(html); //弹出提示
      $("#spanResult").css("display", "block");
      $("#spanResult").css("color", "red");
      $("#spanResult").html(html); //给当前dom的一个span元素赋值
    },
    error: function(oXmlHttpReq, textStatus, errorThrown) {
      alert("jquery ajax xml request failed");
      $("#spanResult").css("display", "block");
      $("#spanResult").css("color", "red");
      $("#spanResult").html("jquery ajax xml request failed"); //提示出错
    }
  });
  //5、同步加载数据。发送请求时锁住浏览器。需要锁定用户交互操作时使用同步方式。
  var html = $.ajax({
    //没有type 默认为GET方式
    url: jqRequestUrl + "&#63;action=syncRequest",
    async: false
  }).responseText;
  alert(html);
  //6、显式get测试
  $.ajax({
    type: "GET",
    url: jqRequestUrl + "&#63;action=jquery&userName=" + $("#txtUserName").val(),
    cache: false,
    success: function(html) {
      // alert(html); //弹出提示
      $("#spanResult").css("display", "block");
      $("#spanResult").css("color", "red");
      $("#spanResult").html(html); //给当前dom的一个span元素赋值
    },
    error: function(oXmlHttpReq, textStatus, errorThrown) {
      alert("jquery ajax request failed");
      $("#spanResult").css("display", "block");
      $("#spanResult").css("color", "red");
      $("#spanResult").html("jquery ajax request failed"); //提示出错
    }
  });
  //7、显式POST测试 
  $.ajax({
    type: "POST",
    url: jqRequestUrl,
    data: "action=jquerySaveData&userName=jeffwong&location=beijing",
    success: function(html) {
      alert(html);
    }
  });
}

로그인 후 복사

几个相关文件：

a、处理ajax请求的服务端文件：AjaxHandler.ashx，对应的cs文件：

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;
          case "jquerySaveData":
            ProcessJQuerySaveData(context);
            break;
          case "syncRequest":
            ProcessJQuerySyncRequest(context);
            break;
          case "jqueryXmlRequest":
            ProcessJQueryXMLRequest(context);
            break;
          case "jquerGetXmlRequest":
            ProcessJQueryGetXMLRequest(context);
            break;
        }
      }
    }
    private void ProcessJQueryRequest(HttpContext context)
    {
      context.Response.ClearContent();
      context.Response.ContentType = "text/plain"; //设置输出流类型
      context.Response.Cache.SetCacheability(HttpCacheability.NoCache); //没有缓存
      string result = context.Request["userName"].Trim();
      context.Response.Write("You have entered a name:" + result);
    }
    private void ProcessJQuerySaveData(HttpContext context)
    {
      context.Response.ClearContent();
      context.Response.ContentType = "text/plain"; //设置输出流类型
      context.Response.Cache.SetCacheability(HttpCacheability.NoCache); //没有缓存
      string name = context.Request["userName"].Trim();
      string location = context.Request["location"].Trim();
      context.Response.Write("Your data have been saved:your name is " + name + ",living in " + location);
    }
    private void ProcessJQuerySyncRequest(HttpContext context)
    {
      context.Response.ClearContent();
      context.Response.ContentType = "text/plain"; //设置输出流类型
      context.Response.Cache.SetCacheability(HttpCacheability.NoCache); //没有缓存
      context.Response.Write("Your sync ajax request has been processed.");
    }
    /// <summary>
    /// 简单的xml请求处理(服务端从客户端获取xml)
    /// </summary>
    /// <param name="context"></param>
    private void ProcessJQueryXMLRequest(HttpContext context)
    {
      context.Response.ClearContent();
      context.Response.Cache.SetCacheability(HttpCacheability.NoCache); //没有缓存
      XmlDocument doc = new XmlDocument();
      try
      {
        doc.Load(context.Request.InputStream); //获取xml (这里需要注意接受xml数据的方法)
        context.Response.ContentType = "text/plain"; //设置输出流类型
        string name = doc.SelectSingleNode("profile/userName").InnerText;
        string location = doc.SelectSingleNode("profile/location").InnerText;
        context.Response.Write("Your XML data have received,and your name is " + name + ",living in " + location);
      }
      catch (Exception ex)
      {
        context.Response.Write("Get xml data failed.");
        throw ex;
      }
    }
    /// <summary>
    /// 返回简单的xml(服务端返回客户端xml)
    /// </summary>
    /// <param name="context"></param>
    private void ProcessJQueryGetXMLRequest(HttpContext context)
    {
      context.Response.ClearContent();
      context.Response.Cache.SetCacheability(HttpCacheability.NoCache); //没有缓存
      XmlDocument doc = new XmlDocument();
      try
      {
        doc.Load(context.Server.MapPath("/jeffWong.xml"));
        context.Response.ContentType = "text/xml;charset=UTF-8"; //设置输出流类型
        context.Response.Write(doc.OuterXml);
      }
      catch (Exception ex)
      {
        context.Response.Write("Load xml data failed.");
        throw ex;
      }
    }
  }
}

로그인 후 복사

b、aspx，html和xml文件（直接放在根目录下）

aspx文件是ajax请求页面：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JQuery.aspx.cs" Inherits="MyJqTest.JQuery" %>
<!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 runat="server">
  <title></title>
  <script src="js/jquery-1.3.1.js" type="text/javascript"></script>
</head>
<body>
  <form id="form1" runat="server">
  <div>
      <span style="display: none" id="spanGetHtml"></span>
    <br />
    Please input a name:<input id="txtUserName" type="text" /><input id="btnJQAjax" type="button"
      value="jQuery ajax 请求" onclick="jqAjaxTest()" />
      <span style="display: none" id="spanResult"></span>
  </div>
  <script src="js/jQTest.js" type="text/javascript"></script>
  </form>
</body>
</html>

로그인 후 복사

html很简单：

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>
<div>it is a simple ajax test</div>
</body>
</html>

로그인 후 복사

xml文件：

jeffWong.xml：

<&#63;xml version="1.0" encoding="utf-8" &#63;>
<profile>
 <userName>jeff wong</userName>
 <location>beijing</location>
</profile>

로그인 후 복사

c、js文件（放在根目录js文件夹下）

jqLoadJs.js 测试ajax加载js文件用

复制代码代码如下:

alert("this is a ajax request script test");

2、load(url,[data],[callback])

载入远程 HTML 文件代码并插入至 DOM 中。

默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。jQuery 1.2 中，可以指定选择符，来筛选载入的 HTML 文档，DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。请查看示例。

返回值 jQuery

参数

url (String) : 待装入 HTML 网页网址。
data (Map,String) : (可选) 发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。
callback (Callback) : (可选) 载入成功时回调函数。

示例：

function jqAjaxTest() {
  $("#spanResult").load("test.htm");
  $("#spanResult").css("display", "block");
  $("#spanResult").css("color", "red");
}

로그인 후 복사

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。

示例

function jqAjaxTest() {
  var jqRequestUrl = "AjaxHandler.ashx";
  $.get(jqRequestUrl + "&#63;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代码：

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) : (可选) 载入成功时回调函数。

示例

function jqAjaxTest() {
  var jqRequestUrl = "AjaxHandler.ashx";
  //getJSON方法调用
  $.getJSON(jqRequestUrl + "&#63;action=jquery", { userName: "jeff wong", location: "beijing" }, jqGetJsonCallBack); //返回json数据类型
}
//对json数据进行处理 (oData是json类型的数据)
function jqGetJsonCallBack(oData) {
  var oJsonStr = "";
  //取json中的数据,并呈现
  oJsonStr += "userName:" + oData.userName + "  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) : (可选) 成功载入后回调函数。

示例

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。

示例

function jqAjaxTest() {
  var jqRequestUrl = "AjaxHandler.ashx";
  $.post(jqRequestUrl + "&#63;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) : 待执行函数

示例

function jqAjaxTest() {
  var jqRequestUrl = "AjaxHandler.ashx";
  $.post(jqRequestUrl + "&#63;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 元素
}

로그인 후 복사

示例

function jqAjaxTest() {
  var jqRequestUrl = "AjaxHandlers.ashx"; //正确的文件名 AjaxHandler.ashx 这里故意写错 引发ajaxError事件
  $.post(jqRequestUrl + "&#63;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) : 待执行函数

示例

function jqAjaxTest() {
  var jqRequestUrl = "AjaxHandler.ashx"; 
  $.post(jqRequestUrl + "&#63;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) : 待执行函数

示例

function jqAjaxTest() {
  var jqRequestUrl = "AjaxHandler.ashx"; 
  $.post(jqRequestUrl + "&#63;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) : 待执行函数

示例

function jqAjaxTest() {
  var jqRequestUrl = "AjaxHandler.ashx"; 
  $.post(jqRequestUrl + "&#63;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) : 待执行函数

示例

function jqAjaxTest() {
  var jqRequestUrl = "AjaxHandler.ashx"; 
  $.post(jqRequestUrl + "&#63;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>");
});

로그인 후 복사

文档片段：

<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 请求。

示例

$(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 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.