angularjsnotes/Day 1/advanced_ajax/1. CROSS_SITE_AJAX.md

Javascript - Cross Site AJAX

Lesson Objectives

1. Explain Cross Site AJAX
2. Explain CORS
3. Explain Proxy Server
4. Explain JSONP

Explain Cross Site AJAX

By default it's considered insecure to make an AJAX request to a different site

$http({
    method: 'GET',
	url: 'https://status.github.com/api/status.json',
}).then(
    function(response){

    },
    function(response){

    }
);

Explain CORS

• new way of doing this
• in headers of html, server decides who can access this data
• if correct headers are present, browser knows it's secure to view the data
  1. http://www.omdbapi.com/?s=pirates&r=json
  2. Access-Control-Allow-Origin:*

Explain Proxy Server

• have your sever make a request to the foreign API and then return the results
• you can then hit your own API and it will be the same origin

Explain JSONP

• old way of getting around this
• add a script tag to the service
• pass your custom callback function in as a GET param
• inside other site's script tag, it calls your function and passes in its data

<!-- Request sent via a script tag -->
<script src="https://status.github.com/api/status.json?callback=apiStatus"></script>
<!-- Data received during execution of this predefined function. -->
<script> function apiStatus(data) { console.log(data); } </script>