jQuery 简化指南:探索 jQuery 和 Ajax

2023-12-01 0 926

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&amp;tagmode=all&amp;format=json&amp;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 />\’).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的详细内容,更多请关注悠久资源其它相关文章!

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悠久资源 Wordpress教程 jQuery 简化指南:探索 jQuery 和 Ajax https://www.u-9.cn/jiaocheng/wordpress-jiaocheng/16753.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务