jQuery.ajax()笔记

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jQuery.ajax()笔记，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含16988字，纯文字阅读大概需要25分钟。

内容图文

Example: 加载并执行一个 JS 文件。

$.ajax({
   type: "GET",
   url: "test.js",
   dataType: "script"
 });

Example: 保存数据到服务器，成功时显示信息。

$.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
 });

Example: 装入一个 HTML 网页最新版本。

$.ajax({
  url: "test.html",
  cache: false,
  success: function(html){
    $("#results").append(html);
  }
});

Example: 同步加载数据。发送请求时锁住浏览器。需要锁定用户交互操作时使用同步方式。

var html = $.ajax({
  url: "some.php",
  async: false
 }).responseText;

Example: 发送 XML 数据至服务器。设置 processData 选项为 false，防止自动转换数据格式。

var xmlDocument = [create xml document];
 $.ajax({
   url: "page.php",
   processData: false,
   data: xmlDocument,
   success: handleResponse
 });

Example: 作为发送数据到服务器的ID，保存一些数据到服务器，并通知用户一旦它的完成。请注意，此用法 - 返回到一个变量的调用的结果 - 需要同步（阻塞）的要求！ （异步：假）

bodyContent = $.ajax({
      url: "script.php",
      global: false,
      type: "POST",
      data: ({id : this.getAttribute('id')}),
      dataType: "html",
      async:false,
      success: function(msg){
         alert(msg);
      }
   }
).responseText;

• version added: 1.5jQuery.ajax( url, [ settings ] )

  url一个用来包含发送请求的URL字符串。

  settings一个以"{键:值}"组成的AJAX 请求设置。所有选项都是可选的。可以使用$.ajaxSetup()设置任何默认参数。看jQuery.ajax( settings )下所有设置的完整列表。

• version added: 1.0jQuery.ajax( settings )

  settings一个以"{键:值}"组成的AJAX 请求设置。所有选项都是可选的。可以使用$.ajaxSetup()设置任何默认参数。

  acceptsMap

  默认： 取决于数据类型

  内容类型发送请求头，告诉服务器什么样的响应会接受返回。如果accepts设置需要修改，推荐在$.ajaxSetup()方法中做一次。

  asyncBoolean

  默认： true

  默认设置下，所有请求均为异步请求（也就是说这是默认设置为true）。如果需要发送同步请求，请将此选项设置为 false。跨域请求和dataType: "jsonp"请求不支持同步操作。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

  beforeSend(jqXHR, settings)Function

  发送请求前可修改 jqXHR（在jQuery 1.4.x的中，XMLHttpRequest） 对象的函数，如添加自定义 HTTP 头等。该jqXHR和设置作为参数传递的。这是一个Ajax事件 。beforeSend行数返回的false将取消该请求。在jQuery 1.5， beforeSend选项将被访问，不管请求的类型。

  cacheBoolean

  默认： true, dataType为"script"和"jsonp"时默认为false

  如果设置为 false ，浏览器将不缓存此页面。

  complete(jqXHR, textStatus)Function, Array

  请求完成后回调函数 (请求成功或失败之后均调用)。这个回调函数得到2个参数： jqXHR (in jQuery 1.4.x, XMLHTTPRequest) 对象和一个描述成功请求类型的字符串("success", "notmodified", "error","timeout", or "parsererror") 。在jQuery 1.5， complete设置可以接受一个函数的数组。每个函数将被依次调用。这是一个Ajax事件 。

  contents(added 1.5)Map

  一个以"{字符串:正则表达式}"配对的对象，用来确定jQuery将如何解析响应，给定其内容类型。

  contentTypeString

  默认: 'application/x-www-form-urlencoded'

  发送信息至服务器时内容编码类型。默认值是"application/x-www-form-urlencoded"，适合大多数情况。如果你明确地传递了一个content-type给 $.ajax() 那么他必定会发送给服务器（即使没有数据要发送）。数据将总是使用UTF-8字符集传递给服务器；你必须译码这适当的在服务器端。

  contextObject

  这个对象用于设置Ajax相关回调函数的上下文。也就是说，让回调函数内this指向这个对象（如果不设定这个参数，那么this就指向调用本次AJAX请求时传递的options参数）。比如指定一个DOM元素作为context参数，这样就设置了success回调函数的上下文为这个DOM元素。就像这样：

  $.ajax({
    url: "test.html",
    context: document.body,
    success: function(){
      $(this).addClass("done");
    }
  });

   

  converters(1.5新增)Map

  默认： {"* text": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": jQuery.parseXML}

  一个数据类型对数据类型转换器的对象。每个转换器的值是一个函数，返回响应的转化值

  crossDomain(1.5新增)

  默认： 同域请求为false， 跨域请求为true

  如果你想强制跨域请求（如JSONP形式）同一域，设置crossDomain为true。这使得例如，服务器端重定向到另一个域

  dataObject, String

  发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为"{键:值}"格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。 如果值是一个数组（ Array ）, jQuery将在 多个连续的值具有相同的键值的基础上建立的传统设置(下述)。

  dataFilter(data, type)Function

  一个函数被用来处理XMLHttpRequest的原始响应数据。这是一个预过滤功能，净化响应。您应该返回安全数据。提供data和type两个参数：data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。

  dataTypeString

  默认: Intelligent Guess (xml, json, script, or html)

  预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如XML MIME类型就被识别为XML。在1.4中，JSON就会生成一个JavaScript对象，而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:

  error(jqXHR, textStatus, errorThrown)Function

  请求失败时调用此函数。有以下三个参数：jqXHR (在 jQuery 1.4.x中, XMLHttpRequest) 对象、描述发生的错误类型的一个字符串和捕获的异常对象。如果发生了错误，错误信息（第二个参数）除了得到null之外，还可能是"timeout", "error", "abort" 和 "parsererror"。这是一个 Ajax Event。 在jQuery 1.5, 在error设置可以接受函数组成的数组。每个函数将被依次调用。 注意：此处理程序不被跨域脚本和JSONP形式的请求调用。

  globalBoolean

  默认: true

  无论怎么样这个请求将触发全局AJAX事件处理程序。默认是true 。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不同的。这可以用来控制各种Ajax Events.

  headers(1.5新增)Map

  Default: {}

  一个额外的"{键:值}"对映射到请求一起发送。此设置被设置之前beforeSend函数被调用;因此，消息头中的值设置可以在覆盖beforeSend函数范围内的任何设置。

  ifModifiedBoolean

  默认: false

  仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。在jQuery 1.4中，他也会检查服务器指定的'etag'来确定数据没有被修改过。

  isLocal(added 1.5.1)Boolean

  默认: 取决于当前的位置协议

  允许当前环境被认定为“本地”，（如文件系统），即使jQuery默认情况下不会承认它。以下协议目前公认为本地：file, *-extension, and widget。如果isLocal设置需要修改，建议在$.ajaxSetup()方法中这样做一次。

  jsonpString

  在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，比如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。在jQuery 1.5，，设置jsonp选项为false阻止了jQuery从加入"?callback"字符串的URL或试图使用"=?"转换。在这种情况下，你也应该明确设置jsonpCallback设置。例如, { jsonp: false, jsonpCallback: "callbackName" }

  jsonpCallbackString, Function

  为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候，指定这个回调函数名。在jQuery 1.5，你也可以使用一个函数值该设置，在这种情况下jsonpCallback的值设置到该函数的返回值。

  mimeType(added 1.5.1)String

  一个mime类型用来覆盖XHR的MIME类型。

  passwordString

  用于响应HTTP访问认证请求的密码

  processDataBoolean

  默认: true

  默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。

  scriptCharsetString

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

  statusCode(1.5新增)Map

  默认: {}

  一组数值的HTTP代码和函数对象，当响应时调用了相应的代码。例如，如果响应状态是404，将触发以下警报：

  $.ajax({
    statusCode: {404: function() {
      alert('page not found');
    }
  });

   

  如果请求成功，状态代码函数作为回调的成功相同的参数;如果在一个错误的结果，他们采取了相同的参数error回调。

  success(data, textStatus, jqXHR)Function, Array

  请求成功后的回调函数。这个函数传递3个参数：从服务器返回的数据，并根据dataType参数进行处理后的数据，一个描述状态的字符串;还有 jqXHR（在jQuery 1.4.x的中，XMLHttpRequest） 对象 。在jQuery 1.5， 成功设置可以接受一个函数数组。每个函数将被依次调用。这是一个 Ajax Event.

  timeoutNumber

  设置请求超时时间（毫秒）。如果一个设置有$.ajaxSetup()，此设置将覆盖全局设置。例如，你可以使用这个属性来提供一个单一的请求比所有你所设置时间在一秒钟内的其他要求更长的超时。见$.ajaxSetup()全局超时。

  traditionalBoolean

  如果你想要用传统的方式来序列化数据，那么就设置为true。请参考工具分类下面的jQuery.param 方法.

  typeString

  默认: 'GET'

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

  urlString

  默认: 当前地址

  发送请求的地址。

  usernameString

  于响应HTTP访问认证请求的用户名

  xhrFunction

  默认 当可用的ActiveXObject（IE）中，否则为XMLHttpRequest

  回调创建XMLHttpRequest对象。当可用时默认为ActiveXObject（IE）中，否则为XMLHttpRequest。提供覆盖你自己的执行的XMLHttpRequest或增强工厂。

  xhrFields(added 1.5.1)Map

  一对“文件名-文件值”在本机设置XHR对象。例如，如果需要的话，你可以用它来设置withCredentials为true的跨域请求。

  • "xml": 返回 XML 文档，可用 jQuery 处理。.
  • "html": 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。
  • "script": 评估为JavaScript并返回纯文本响应。不会自动缓存结果。除非设置了"cache"参数。'''注意：'''在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
  • "json": 评估为JSON响应，并返回一个JavaScript对象。1.4中，JSON就会生成一个JavaScript对象，而script则会执行这个脚本。（见json.org的更多信息，正确的JSON格式。）
  • "jsonp": JSONP 格式。使用JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
  • "text": 返回纯文本字符串。
  • 多个空格分割的值:As of jQuery 1.5， jQuery可以从Content - Type头收到并转换一个您需要的数据类型。例如，如果你想要一个文本响应为XML处理，使用"text xml"数据类型。您也可以将一个JSONP的请求，以文本形式接受，并用jQuery以XML解析: "jsonp text xml"。同样地可以使用"jsonp xml"简写,将首先尝试从JSONP形式转换为XML,做不到这一点，并没有从文本，从JSONP形式转换为文本，然后到XML。

$.ajax()函数所有的基础jQuery的Ajax请求发送。它往往不是必须的，直接调用这个函数，几个高层次的替代品如$.get()和.load()可用，更容易使用，如果不常见的选项是必需的，不过， $.ajax()可以使用更灵活。

在简单地说， $.ajax()函数可以不带参数调用：

$.ajax();

注意: 所有的选项都可以通过$.ajaxSetup() 函数来全局设置

这个例子中，不使用选项，加载当前页面的内容，但其结果没有。若要使用结果，我们可以实现的回调功能之一。

jqXHR 对象

该jQuery的XMLHttpRequest（jqXHR）对象返回$.ajax() 在jQuery 1.5是一个对象的超集浏览器的原生的XMLHttpRequest。例如，它包含responseText和responseXML性能，以及一个getResponseHeader()方法。当传输机制是XMLHttpRequest以外的东西（例如，一个一个JSONP请求脚本标签）的jqXHR对象尽可能的模拟原生的XHR功能。

在jQuery 1.5.1， 在jqXHR对象还包含了overrideMimeType方法。

$.ajax()返回的jqXHR对象 实现约定的接口，给他们的所有属性，方法，和约定的行为（见Deferred object获取更多信息）。为了方便和一致性$.ajax()回调函数名称中使用。jqXHR也提供.error() .success()和.complete()方法。这些方法当$.ajax()请求终止时需要一个函数参数调用，这个函数接收$.ajax()回调函数名相同的参数。在jQuery 1.5这允许你指定一个请求的多个回调，甚至可能分配请求后已完成回调。（如果请求已经完成，回调立即触发。）

// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.ajax({ url: "example.php" })
    .success(function() { alert("success"); })
    .error(function() { alert("error"); })
    .complete(function() { alert("complete"); });

// perform other work here ...

// Set another completion function for the request above
jqxhr.complete(function(){ alert("second complete"); });

为了向后兼容XMLHttpRequest ，一jqXHR对象将公开下列属性和方法：

• readyState
• status
• statusText
• responseXML and/or responseText 当底层的请求分别作出XML和/或文本响应
• setRequestHeader(name, value) 这背离了换上了新一旧的价值，而不是串联的新值与旧标准
• getAllResponseHeaders()
• getResponseHeader()
• abort()

假如没有onreadystatechange机制，不管怎样 由于success ， error ， complete和statusCode覆盖所有可能的要求。

回调函数

如果要处理$.ajax()得到的数据，则需要使用回调函数。beforeSend、error、dataFilter、success、complete。

在jQuery 1.5， error ， success ，和complete回调钩子先入先出队列管理。这意味着你可以为每个挂钩分配多个回调。见Deferred object methods ，这是实现内部的$.ajax()回调挂钩。

在this回调是在所有参考对象在context选项传递给$.ajax在设置;如果context没有指定， this是他们自己的Ajax设置参考。

某些类型Ajax的请求，如JSONP形式和跨域的GET请求，请不要使用XHR;在这些情况下XMLHttpRequest和textStatus参数传递给回调是undefined 。

这里有$.ajax()提供的钩子回调 ：

1. beforeSend 在发送请求之前调用，它接收jqXHR对象和settings作为参数对象。
2. error 在请求出错时调用。如果请求失败，在它们的顺序依次登记。他们收到jqXHR ，字符串表示的错误类型，如果适用的异常对象。一些内置的错误，将提供作为例外对象的字符串： "abort", "timeout", "No Transport"。
3. dataFilter 在请求成功之后调用。传入返回的数据以及dataType参数的值。并且必须返回新的数据（可能是处理过的）传递给success回调函数。
4. success 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。他们收到返回的数据，一个包含成功的代码和jqXHR对象。
5. complete 它们的顺序依次登记回调，请求完成时，无论是在失败或成功。他们收到jqXHR对象，以及一个包含成功或错误代码。

For example, 通过使用返回的HTML，我们可以实现一个success事件处理器：

$.ajax({
  url: 'ajax/test.html',
  success: function(data) {
    $('.result').html(data);
    alert('Load was performed.');
  }
});

数据类型

$.ajax()函数依赖服务器提供的信息来处理返回的数据。如果服务器报告说返回的数据是XML，那么返回的结果就可以用普通的XML方法或者jQuery的选择器来遍历。如果见得到其他类型，比如HTML，则数据就以文本形式来对待。

通过dataType选项还可以指定其他不同数据处理方式。除了单纯的XML，还可以指定 html、json、jsonp、script或者text。

其中，text和xml类型返回的数据不会经过处理。这些数据仅仅是传递给处理程序的成功，无论是通过responseText或responseXML所有的jqXHR对象。

注意:我们必须确保网页服务器报告的MIME类型与我们选择的dataType所匹配。比如说，XML的话，服务器端就必须声明 text/xml 或者 application/xml 来获得一致的结果。

如果指定为 html类型，任何内嵌的JavaScript都会在HTML作为一个字符串返回之前执行。类似的，指定script类型的话，也会先执行服务器端生成JavaScript，然后再把脚本作为一个文本数据返回。

如果指定为json类型，则会把获取到的数据作为一个JavaScript对象来解析，并且把构建好的对象作为结果返回。为了实现这个目的，他首先尝试使用jQuery.parseJSON()。如果浏览器不支持，则使用一个Function来构建。JSON数据是一种能很方便通过JavaScript解析的结构化数据。如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用jsonp类型。使用这种类型的话，会创建一个查询字符串参数 callback=? ，这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名，以便完成一个有效的JSONP请求。如果要指定回调函数的参数名来取代默认的callback，可以通过设置$.ajax()的jsonp参数。

注意:JSONP是JSON格式的扩展。他要求一些服务器端的代码来检测并处理查询字符串参数。更多信息可以参阅original post detailing its use.

如果指定了script或者jsonp类型，那么当从服务器接收到数据时，实际上是用了<script>标签而不是XMLHttpRequest对象。这种情况下，$.ajax()不再返回一个XMLHttpRequest对象，并且也不会传递事件处理函数，比如beforeSend。

发送数据到服务器

默认情况下，Ajax请求使用GET方法。如果要使用POST方法，可以设定type参数值。这个选项也会影响data选项中的内容如何发送到服务器。

data选项既可以包含一个查询字符串，比如 key1=value1&key2=value2 ，也可以是一个映射，比如 {key1: 'value1', key2: 'value2'} 。如果使用了后者的形式，则数据再发送器会被转换成查询字符串。这个处理过程也可以通过设置processData选项为false来回避。如果我们希望发送一个XML对象给服务器时，这种处理可能并不合适。并且在这种情况下，我们也应当改变contentType选项的值，用其他合适的MIME类型来取代默认的 application/x-www-form-urlencoded 。

高级选项

global选项用于阻止响应注册的回调函数，比如.ajaxSend，或者ajaxError，以及类似的方法。这在有些时候很有用，比如发送的请求非常频繁且简短的时候，就可以在ajaxSend里禁用这个。更多关于这些方法的详细信息，请参阅下面的内容。

如果服务器需要HTTP认证，可以使用用户名和密码可以通过username和password选项来设置。

Ajax请求是限时的，所以错误警告被捕获并处理后，可以用来提升用户体验。请求超时这个参数通常就保留其默认值，要不就通过jQuery.ajaxSetup来全局设定，很少为特定的请求重新设置timeout选项。

默认情况下，请求总会被发出去，但浏览器有可能从他的缓存中调取数据。要禁止使用缓存的结果，可以设置cache参数为false。如果希望判断数据自从上次请求后没有更改过就报告出错的话，可以设置ifModified为true。

scriptCharset允许给<script>标签的请求设定一个特定的字符集，用于script或者jsonp类似的数据。当脚本和页面字符集不同时，这特别好用。

Ajax的第一个字母是asynchronous的开头字母，这意味着所有的操作都是并行的，完成的顺序没有前后关系。$.ajax()的async参数总是设置成true，这标志着在请求开始后，其他代码依然能够执行。强烈不建议把这个选项设置成false，这意味着所有的请求都不再是异步的了，这也会导致浏览器被锁死。

$.ajax函数返回他创建的XMLHttpRequest对象。通常jQuery只在内部处理并创建这个对象，但用户也可以通过xhr选项来传递一个自己创建的xhr对象。返回的对象通常已经被丢弃了，但依然提供一个底层接口来观察和操控请求。比如说，调用对象上的.abort()可以在请求完成前挂起请求。

扩展的Ajax

在jQuery 1.5，，jQuery的Ajax实现包括预过滤器，转换器和传输，让您扩展了很大的灵活性Ajax。如需有关这些先进功能的信息，请参阅Extending Ajax

其他注意事项：

• 由于浏览器的安全限制，大多数“Ajax”的要求，均采用同一起源的政策 ;该请求不能成功地检索来自不同的域，子域或协议的数据。
• Script和JSONP形式请求不受同源策略的限制。

内容总结

以上是互联网集市为您收集整理的jQuery.ajax()笔记全部内容，希望文章能够帮你解决jQuery.ajax()笔记所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端