title: Cross domain request in JavaScript vs. jQuery's JSONP
body: <p>I was trying to write a cross domain request (e.g., <a href="http://finance.google.com/finance/info?client=ig&amp;q=NASDAQ:GOOGL" rel="nofollow noreferrer">Google Finance resource</a>) in JavaScript from client-side (the browser) by following a template like below mentioned <a href="http://www.html5rocks.com/en/tutorials/cors/" rel="nofollow noreferrer">here</a>:</p>
  
  <pre><code>function createCORSRequest(method, url) {
    var xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr) {
      xhr.open(method, url, true);    
    } else if (typeof XDomainRequest != "undefined") {
      xhr = new XDomainRequest();
      xhr.open(method, url);    
    } else {    
      // Otherwise, CORS is not supported by the browser.
      xhr = null;    
    }
    return xhr;
  }
  
  var url = 'http://finance.google.com/finance/info?client=ig&amp;q=NASDAQ:GOOGL';
  var xhr = createCORSRequest('GET', url);
  if (!xhr) {
    throw new Error('CORS not supported');
  }
  
  // Response handlers.
  xhr.onload = function() {
      var text = xhr.responseText;
      var jsonReturend = JSON.parse(text);
      console.log(jsonReturend)
  };
  
  xhr.onerror = function() {
      alert('Woops, there was an error making the request.');
  };
  
  xhr.send();
  </code></pre>
  
  <p>But it doesn't work because (I think) 'finance.google.com' doesn't include <code>Access-Control-Allow-Origin:</code> in its response headers, which is understandable. However, I tried another suggested method on StackOverflow post <a href="https://stackoverflow.com/questions/3199640/cross-domain-get-request-in-js-jquery">here</a> to use JSONP as follows: </p>
  
  <pre><code>$.ajax({
      url: 'http://finance.google.com/finance/info?client=ig&amp;q=NASDAQ:GOOGL', 
      jsonp: "callback",
      dataType: "jsonp", 
      data: {},
      // Work with the response
      success: function( response ) {
          console.log( response ); // server response
      }
  });
  </code></pre>
  
  <p>and it works (that is, I got the expected JSON back)! As a newbie to web development and JS in general, I am not sure why AJAX call via jQuery's JSONP is working whereas it fails in pure JavaScript. My questions are:</p>
  
  <ol>
  <li>What is JSONP doing differently to make things work? Or is it simply
  because 'finance.google.com' is allowing JSONP type requests (but
  not CORS type requests)?</li>
  <li>Is it possible to make it work by strictly using JavaScript? If so,
  how could I achieve that?</li>
  </ol>
  
  <p>Thank you all for your answers!</p>