jQuery 简化指南：探索 jQuery 和 Ajax

redmaomail 2024-07-24 21:54 阅读数 61 #wordpress

jquery 简化指南：探索 jquery 和 ajax

jQuery ajax() 函数是最低级别的抽象

jQuery ajax() 函数是可用于 XMLHttpRequest（又名 AJAX）的最低抽象级别。所有其他 jQuery AJAX 函数（例如 load()）都利用 ajax() 函数。使用 ajax() 函数为 XMLHttpRequests 提供了最强大的功能。 jQuery 还提供了其他更高级别的抽象来执行非常特定类型的 XMLHttpRequests。这些函数本质上是 ajax() 方法的快捷方式。

这些快捷方法是：

加载()
get()
getJSON()
getScript()
post()

需要注意的是，虽然快捷方式有时很好，但它们都在幕后使用 ajax() 。而且，当您需要 jQuery 在 AJAX 方面提供的所有功能和自定义功能时，您应该使用 ajax() 方法。

注意：默认情况下，ajax() 和 load() AJAX 函数均使用 GET HTTP 协议。

jQuery 支持跨域 JSONP

带有填充的 JSON (JSONP) 是一种技术，允许 HTTP 请求（返回 JSON）的发送者为使用 JSON 对象作为函数参数进行调用的函数提供名称。该技术不使用 XHR。它使用脚本元素，因此可以将数据从任何站点拉入任何站点。目的是为了规避XMLHttpRequest的同源策略限制。

使用 getJSON() jQuery 函数，当 URL 中添加 JSONP 回调函数时，您可以从另一个域加载 JSON 数据。作为示例，以下是使用 Flickr API 的 URL 请求的样子。

http://api.flickr.com/services/feeds/photos_public.gne?tags=resig&tagmode=all&format=json&jsoncallback=?

? 值用作快捷方式，告诉 jQuery 调用作为 getJSON() 函数的参数传递的函数。如果您不想使用此快捷方式，可以将 ? 替换为另一个函数的名称。

下面，我使用 Flickr JSONP API 拉入一个网页，其中包含带有“resig”标签的最新照片。请注意，我使用的是 ? 快捷方式，因此 jQuery 将简单地调用我提供的 getJSON() 函数的回调函数。传递给回调函数的参数是请求的JSON数据。

<!DOCTYPE html>
<html lang="en">
<body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function($){      
      $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=resig&tagmode=all&format=json&jsoncallback=?",
          // Using ? just means call the callback function provided
          function (data) { // Data is the JSON object from Flickr    
              $.each(data.items, function (i, item) { $('<img  / alt="jQuery 简化指南：探索 jQuery 和 Ajax" >').attr("src", item.media.m).appendTo('body'); if (i == 30) return false; });
          });
  })(jQuery); </script>
</body>
</html>

登录后复制

注意：请确保检查您所使用的服务的 API 以便正确使用回调。例如，Flickr 使用名称 jsoncallback=?，而 Yahoo!和 Digg 使用名称 callback=?。

停止浏览器缓存 XHR 请求

执行 XHR 请求时，Internet Explorer 将缓存响应。如果响应包含具有较长保质期的静态内容，则缓存可能是一件好事。但是，如果请求的内容是动态的并且可能随时发生变化，您将需要确保浏览器不会缓存该请求。一种可能的解决方案是将唯一的查询字符串值附加到 URL 的末尾。这将确保浏览器对于每个请求请求唯一的 URL。

// Add unique query string at end of the URL
url: 'some?nocache='+(newDate()).getTime()

登录后复制

另一个解决方案（更多的是全局解决方案）是默认设置所有 AJAX 请求以包含我们刚才讨论的无缓存逻辑。为此，请使用 ajaxSetup 函数全局关闭缓存。

$.ajaxSetup({
            cache: false // True by default. False means caching is off.
});

登录后复制

现在，为了用单独的 XHR 请求覆盖此全局设置，您只需在使用 ajax() 函数时更改缓存选项即可。下面是使用 ajax() 函数执行 XHR 请求的代码示例，该函数将覆盖全局设置并缓存请求。

$.ajaxSetup ({   
    cache: false // True by default. False means caching is off.   
});       
jQuery.ajax({ cache: true, url: 'some', type: 'POST' } );

登录后复制

jQuery 简化指南：探索 jQuery 和 Ajax的详细内容，更多请关注红帽云邮其它相关文章！

分享到：

上一篇：拥抱余烬：第 4 部分下一篇：拥抱 Ember.js 的世界