ajax_intro.md

Intro to JQuery and AJAX

Pracitce with promises

Prev. Covered:

• jQuery
  • Selectors
    • show, hide,
    • addClass,
    • document.ready,
    • creating elements,
    • $.html and $.append

Objective
To understand the utility of Ajax approach, and use the JQuery Ajax methods to send different HTTP requests

---

What is Ajax?

Asynchronous Javascript \w XML, is an umbrella term for the use of CSS, HTML, the DOM, XML, and making use of the XMLHttpRequest object.

What is the XMLHttpRequest object?

Is a simple javascript HTTP request api that supports synchronous or asynchronous functionality.

Asynchronous?

mdn event loop

Callbacks

function doSomething(anything, someone){
	alert(anything(someone))
}

function talk(somone){
	return "Want to talk " + somome) 
}

function bike(somone){
	return "Want to bike" + someone
}

Making a simple XMLHttpRequest with JQuery:

js

<script>
	$.ajax({
	  url: "/hello",
	  success: function(data) {
	  	console.log(data.responseTEXT)
	}});
</script>

JSONP

Javascript with padding, it is a parsed javascript response, not a json.

Writing a jQuery function, the $ is just an alias for the jQuery object. To set a function to run on document.ready use $

$(function(){})

Writing our stubs first.

index.html

<form>
	<input type="text">
</form>

script.js

$(function(){
	$('form').on("submit", function(event){
	event.preventDefault()
	
	
	var searchTerm = $('input).val();
	 
	
	}
	)
	
})

Starting our $.ajax request.

script.js

$(function(){
	$('form').on("submit", function(event){
		event.preventDefault()
		
		
		var searchTerm = $('input).val();
		 
		
	 
		
		$.ajax({
			url: "http://www.omdbapi.com/",
			method: "get",
			data: {"s": searchTerm, 
					"callback": "stuff"},
					
			dataType: "jsonp",
			jsonpCallback: "stuff",
			success: function(data){
				console.log(data)
				
			}
	
	});
	
});

Retrieving our result.

		$.ajax({
			url: "http://www.omdbapi.com/",
			method: "get",
			data: {"s": searchTerm, 
					"callback": "stuff"},
					
			dataType: "jsonp",
			jsonpCallback: "stuff",
			success: function(data){
			
			if(data["Search"]){
				var movies = data["Search"];
			} else{
				var movies = [];
			
			}
			
			
			$
			 console.log(movies)
				
			}
	
	});

Appending to the DOM. Writing a function

Change HTMl

index.html

<!-- Form for input-->
<form>
	<input type="text">
</form>

<!-- Div for results-->
<ul class="results">

</ul>

script.js

// Our appending function

function movieLi(moviesObject){
	return $('<li> class="result">'+ moviesObject.Title+'</li>')

}
…

$ajax({
…

	success: function(data){

		if(data["Search"]){
			var movies = data["Search"];
		} else{
			var movies = [];

		}
		

		for (var i=0; i < movies.length; i++) {
			var movieTitle = movieLi(movies[i])
			$('.results').append(movieEl);
		};

	}


})

What is a promise?

Explantion

At it's simplest "a promise represents an unfulfilled activity."

Example Write the following in your browser

function note(something){
	alert(something);
}

var stuffForLater = $.Deferred();
stuffForLater.promise().done(note)

Then resolve it with a message

stuffForLater.resolve("[your own message here]")

Getting to do a bit more.

function doSomething(){

	var todo = $.Deferred();
	
	$.when("")
		.then(function(){
			setTimeout(function(){
			alert("Task 1 done!")
			}, 500)
		})
		
		.then(function(){
		setTimeout(function(){
			todo.resolve("Alll done!")
			
		}, 5000)
		});
		
	return todo.promise();		
}

var aboutTo = doSomething().done(function(msg){alert(msg)})

Let's chan