jQuery Simplified Guide: Exploring jQuery and Ajax-WordPress-php.cn

jQuery Simplified Guide: Exploring jQuery and Ajax

PHPz

Release： 2023-09-02 21:05:02

Original

1480 people have browsed it

jQuery 简化指南：探索 jQuery 和 Ajax

jQuery ajax() function is the lowest level of abstraction

The

jQuery ajax() function is the lowest level of abstraction available for XMLHttpRequest (aka AJAX). All other jQuery AJAX functions (such as load()) leverage the ajax() function. Using the ajax() function provides the most powerful functionality for XMLHttpRequests. jQuery also provides other higher-level abstractions to perform very specific types of XMLHttpRequests. These functions are essentially shortcuts to the ajax() method.

These shortcuts are:

load()
<code>get()
<code>getJSON()
<code>getScript()
<code>post()

It's important to note that while shortcuts are sometimes nice, they all use ajax() behind the scenes. And, when you need all the features and customizations that jQuery offers in terms of AJAX, you should use the ajax() method.

Note: By default, both the ajax() and load() AJAX functions use the GET HTTP protocol.

jQuery supports cross-domain JSONP

JSON with padding (JSONP) is a technology that allows the sender of an HTTP request (which returns JSON) to provide a name for a function that is called with a JSON object as a function argument. This technology does not use XHR. It uses script elements so data can be pulled from any site into any site. The purpose is to circumvent the same-origin policy restrictions of XMLHttpRequest.

Using the <code>getJSON() jQuery function, you can load JSON data from another domain when adding a JSONP callback function to the URL. As an example, here's what a URL request looks like using the Flickr API.

<span class="sgc-100">http://api.flickr.com/services/feeds/photos_public.gne?tags=resig&tagmode=all&format=json&jsoncallback</span>=? The

? value is used as a shortcut to tell jQuery to call the function passed as an argument to the <code>getJSON() function. If you don't want to use this shortcut, you can replace ? with the name of another function.

Below, I use the Flickr JSONP API to pull in a web page that contains the latest photos tagged with "resig". Note that I'm using the ? shortcut, so jQuery will simply call the callback function of the <code>getJSON() function I provided. The parameter passed to the callback function is the requested JSON data.

<!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>

Copy after login

Note: Please make sure to check the API of the service you are using to use callbacks correctly. For example, Flickr uses the name jsoncallback=?, while Yahoo! and Digg use the name callback=?.

Stop browser caching XHR requests

When performing an XHR request, Internet Explorer will cache the response. Caching can be a good thing if the response contains static content with a long shelf life. However, if the content of the request is dynamic and may change at any time, you will need to ensure that the browser does not cache the request. One possible solution is to append a unique query string value to the end of the URL. This will ensure that the browser requests a unique URL for each request.

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

Copy after login

Another solution (more of a global solution) is to default all AJAX requests to include the no-cache logic we just discussed. To do this, turn off caching globally using the ajaxSetup function.

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

Copy after login

Now, in order to override this global setting with a separate XHR request, you just need to change the cache options when using the ajax() function. Below is a code example that performs an XHR request using the ajax() function, which overrides global settings and caches the request.

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

Copy after login

The above is the detailed content of jQuery Simplified Guide: Exploring jQuery and Ajax. For more information, please follow other related articles on the PHP Chinese website!