Documentation

Release:jQuery 1.2/Ajax

From jQuery JavaScript Library

Jump to: navigation, search

« Back to the full jQuery 1.2 Release Notes.

Contents

[edit]

Partial .load()

Partial .load() allows you to load chunks of HTML documents into your page, filtered by a jQuery selector. This works just like a normal Ajax .load(), but you just specify a selector immediately following the URL that you're retrieving.

Load a piece of the documentation sidebar navigation into a custom unordered list.

$("#links").load("/Main_Page #p-Getting-Started li");


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("#links").load("/Main_Page #p-Getting-Started li");
  });
  </script>
  <style>body{ font-size: 11px; font-family: Arial; }</style>
</head>
<body>
  <b>jQuery Links:</b>
<ul id="links"></ul>
</body>
</html>

[edit]

Cross-Domain getScript

You can now use getScript to dynamically load, and execute, remote scripts. This could be used to load in jQuery plugins or other code modules.

We load the new official jQuery Color Animation plugin dynamically and bind some color animations to occur once the new functionality is loaded.

jQuery.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js", function(){
  $("#go").click(function(){
    $(".block").animate( { backgroundColor: 'pink' }, 1000)
      .animate( { backgroundColor: 'blue' }, 1000);
  });
});


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    jQuery.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js", function(){
  $("#go").click(function(){
    $(".block").animate( { backgroundColor: 'pink' }, 1000)
      .animate( { backgroundColor: 'blue' }, 1000);
  });
});
  });
  </script>
  <style>.block { 
   background-color: blue; 
   width: 150px; 
   height: 70px;
   margin: 10px; 
}</style>
</head>
<body>
  <button id="go">» Run</button>
<div class="block"></div>

</body>
</html>

[edit]

Cross-Domain getJSON (using JSONP)

JSONP is a technique that allows you to transfer JSON data across multiple domains.

jQuery now supports JSONP natively - if you attempt to load JSON (via $.getJSON or $.ajax) from a remote URL then an extra callback will be provided for the server to interpret. Additionally, if the server requires a special field for specifying your own callback name you can provide it by having a "=?" in your query string.

Loads the four most recent cat pictures from the Flickr JSONP API.

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function(data){
  $.each(data.items, function(i,item){
    $("<img/>").attr("src", item.media.m).appendTo("#images")
      .wrap("<a href='" + item.link + "'></a>");
    if ( i == 3 ) return false;
  });
});


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function(data){
  $.each(data.items, function(i,item){
    $("<img/>").attr("src", item.media.m).appendTo("#images")
      .wrap("<a href='" + item.link + "'></a>");
    if ( i == 3 ) return false;
  });
});
  });
  </script>
  <style>img{ height: 100px; float: left; }</style>
</head>
<body>
  <div id="images"></div>
</body>
</html>

[edit]

Serialization Overhaul

The jQuery .serialize() method has seen a significant overhaul, porting the functionality provided by the jQuery Forms plugin back into the jQuery core.

This will mean that the serialization of form data should now closely represent what is normally sent by the browser, to the server.

Serialize a form to a query string, that could be sent to a server in an Ajax request.

$("#results").append( "<tt>" + $("form").serialize() + "</tt>" );


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("#results").append( "<tt>" + $("form").serialize() + "</tt>" );
  });
  </script>
  
</head>
<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>
</body>
</html>

Additionally, a new .serializeArray() method has been introduced which serializes all forms and form elements (like the .serialize() method) but returns a JSON data structure for you to work with. This can be especially useful when working with large forms that you wish to process.

Get the values from a form, iterate through them, and append them to a results display.

var fields = $("select, :radio").serializeArray();
jQuery.each( fields, function(i, field){
  $("#results").append(field.value + " ");
});


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    var fields = $("select, :radio").serializeArray();
jQuery.each( fields, function(i, field){
  $("#results").append(field.value + " ");
});
  });
  </script>
  
</head>
<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>
</body>
</html>

[edit]

Disable Caching

In an $.ajax call you can now prevent requests from being cached by the browser by providing an extra cache: false flag. This will ensure that any GET requests that you might be performing will absolutely be retrieving the latest version of the page. cache: false always sends a new request to server.

Retrieve the latest version of an HTML page.

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

Retrieved from "http://docs.jquery.com/Release:jQuery_1.2/Ajax"