Return to Snippet

Revision: 11445
at August 2, 2012 13:17 by chrisaiv


Updated Code
<!-- jQuery Framework -->
<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript" charset="utf-8">
	function getData( url ){
	    $.ajax({
	        url: url,
	        dataType: "json",
	        encoding:"UTF-8",
	        beforeSend: ajaxStart,
	        success: ajaxSuccess,
	        error: ajaxError,
	        complete: ajaxComplete
	    });
	}

	function ajaxStart( xhrInstance ){
	    //A. Clear Any Previously Written HTML
	    //B. Show Preloader
		console.log( "ajaxStart:" )
	}

	function ajaxError( xhrInstance, message, optional ){
	    console.log( "ajaxError:" );
	}

	function ajaxComplete( xhrInstance, status ){
		//A. Remove any preloaders
		console.log( "ajaxComplete:" );
	}

	function ajaxSuccess( data, status ){
		//Write your Parse XML Function
	    parseData( data );
	}

	function parseData( data ){
		console.log( "parseData:", data );
	}
</script>

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
	getData("http://path/to/xml/or/json/feed");
}	
</script>

Revision: 11444
at February 5, 2009 14:44 by chrisaiv


Initial Code
<style type="text/css" media="screen">
	.ajaxLoaderCircle{ background: transparent url("http://www.ajaxload.info") top center no-repeat; margin-top: 1em; height: 3em; }	
</style>

<!-- jQuery 1.3.1 Framework -->
<script type="text/javascript" charset="utf-8" src="http://jqueryjs.googlecode.com/files/jquery-1.3.min.js"></script>

<script type="text/javascript" charset="utf-8">
	function getXML( url ){
	    $.ajax({
	        url: url,
	        dataType: "xml",
	        encoding:"UTF-8",
	        beforeSend: xmlStart,
	        success: xmlSuccess,
	        error: xmlError,
	        complete: xmlComplete
	    });
	}

	function xmlStart( xhrInstance ){
	    //Clear Any Previously Written HTML
	    $( "#primary .content" ).html( "" );
	    //Show Preloader
	    $( "#primary .content" ).addClass( "ajaxLoaderCSS" );
	}

	function xmlError( xhrInstance, message, optional ){
	    $("#primary .content").html("<ul><li>There was an error loading the document.</li></ul>");
	}

	function xmlComplete( xhrInstance, status ){
	    $( "#primary .content" ).removeClass( "ajaxLoaderCSS" );
	}

	function xmlSuccess( data, status ){
		//Write your Parse XML Function
	    parseXML( data );
	}

	function parseXML( xml ){
	    // XML Tag identifying each item
	    var itemTag = "image";
	    // XML Tag giving the title
	    var titleTag = "caption";
	    // XML Tag giving the link
	    var urlTag = "uri";
	    // Var for storing the HTML to be displayed
	    var content = "<ul>";

	    //Parse the XML and build new <li>'s for each NODE
	    $( xml ).find( itemTag ).each(function(){
	        var title = $( this ).find( titleTag ).text();
	        var url   = $( this ).find( urlTag ).text();
	        content  += "<li><a href=\"" + url + "\">" + title + "</a></li>";
	    });

	    content += "</ul>";

	    // Populate the Tertiary div with the content
		trace( content );
	}
</script>

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
	getXML("http://x-y-z");
}	
</script>

Initial URL


Initial Description
Here is a basic example as to how to set up an Ajax request.

Initial Title
jQuery: Simple Ajax Request + Event Handlers

Initial Tags
ajax, jquery

Initial Language
jQuery