ajax.js

//If one page contains a script tag and the other page also has the script tag then it will be cached; 
//Ajax, Microsoft did this for the web;
//Asynchronous Javascript and XML; 
//XHR is how AJAX works behind the scenes;

//Lets us cut down on the amount of data that goes to and from the server; 
//Lets webpages become realtime, an example of this is gmail, you dont need to hit refresh for new emails to come through; 
//Javacript drives the interaction between the user and the server; 
//Chat on facebook is also dont via Ajax, the small window is talking to the server; 

//The same origin policy; Has to talk to the same site that it originiated from; 
OMBD //In the headers, allows multiple access; multiple access thing is in the http header; 
jsonP is an evil hack that allows you to get around same origin policy, the server needs to support jsonp; 

//No one does it this way cause its difference for every browser; 
XMLHttpRequest()

request.open(Method())
//Aysynchronous == true; You never want to pause and wait for the Javascript, this will run in the background; 

http://eloquentjavascript.net/ //Go to here due to single origin policy; 

var request = new XMLHttpRequest();

request.open('GET', '/files/fruit.txt', false)

request.send(null)

request.status
200
request.readyState
4
request.responseText
"apples, oranges, bananas"

ctrl + click in console to enable LogXMLHttprequests;

//Have to do a callback saying when this is done do this thing for me; 
$.fn.jQuery //To get the version number; 
var request = $.ajax({
  type: 'GET',
  url: '/'
}) //Everything we have done in jQuery so far we have passed in a seelctor; This is a method attached to the dollar sign; 

request.status
request.responseText //This is giving the whole of the index page, we dont want this this whole point in AJAX is to only load a small part of the page; 

//The Ajax request is happening in the background, you need a callback funtion to wait until the AJAX is done before you do anything; 

//We only want this to happen once its done; 

var request = $.ajax({
  type: 'GET',
  url: '/random',
  success: function(){ //The success function will automaticlly be passed whatever is inside request.response//The problem with this is that you can only run one function on success; 
    console.log('The request is finished'); //This is the old way of doing it; 
  }
})

var request = $.ajax({
  type: 'GET',
  url: '/random',
}).done(function(){
  //When you are done do this for me; Ajax makes these promises; Done only runs on success; 
  
}).done(function(){
  //When you are done also do this; 
}).fail(function(){
  console.log('OMG something bad happened') //Allows us to fun code to test for errors; 
})

var request =$.ajax({
  type: 'GET',
  url: '/jdsfds'
}).fail(function(){
  console.log('OMG something bad happened');
})

//XML the xml tags explain what the data is doing; XML a way od transferring data between machines, saying this is the date, this is the month; 

//JSON has replaced XML

//jQuery lets you work with JSON data 

var number = '<em>97</em>'
$(number)
[<em>97</em>]

get '/random.json' do //Going to give us json data; 
  content_type :json //If we dont set the content type in the header it will return a string of json data; Set the header and send the correct data; 
  //To format this as json, require json and then you can turn a ruby hash to_json
  {word1: 'Hello', number: 10}
end

jQuery got a string of json data that it converted into an object;//jQuerys sees that the contenttype is application.json in the header - it knows that it needs to convert the json string into an object; 

Content-Type in OMDB is text/html
Access-Control-Allow-Origin: * //This means js anywhere in the world can access this site; 
www.omdbapi.com/?i=&s=alien

We can tell jQuery to interprit the data we get from the html as json in the ajaz request; 

$.ajax({
  data:json //Tell jQuery to inteprit this as json data; 
})

<form id="contect" method="post" action="/greeter">
   
</form>

$('#contact').on('sumbit', functino(event){
  
})

surname: $('[name="surname]') //You can select an element by its attribute; 

.always(function(){
  console.log('This always happends');
})

//CoffeeScript is the default version that ships with rails;
//Resource (try coffeeScript);

//Ajax attached to jQuery directly

$.get({ //Makes an ajax request that is a get request
  
})

$.post({ //Makes a post request
  
})

$.delete({ //Makes a delete request; 
  
})

$.getJSON('/someurl.json').done(function(order){})

learn.jquery.com //This is a good resoure for jQuery; 

$.fn.greenify = function(){
  this.css('color', 'green');
  return this; //Then you can add classes whatever to the object; 
}

$('a').greenify();
//This is a basic jQuery plugin and it works; 
//If you have a new ides for jQuery you can add a new function to $.fn;