playing_with_jsonp_and_angular

JSONP（JSON with Padding）是一种跨域数据交互协议，它利用了`<script>`标签不受同源策略限制的特性，让网页能够从其他域名获取数据。在这个“playing_with_jsonp_and_angular”项目中，我们将深入理解JSONP的工作原理以及如何在纯JavaScript和AngularJS框架中实现它。 我们从基本概念开始。由于浏览器的安全策略，JavaScript通常被限制只能与同源（相同协议、主机和端口）的网站进行通信。但是，`<script>`标签可以加载任何来源的资源，因此JSONP利用这一点实现了跨域请求。JSONP的核心是动态创建`<script>`标签，并将一个回调函数名作为参数传递给服务器，服务器返回的数据会包裹在这个回调函数内部，从而执行这段代码。 在纯JavaScript中实现JSONP，一般包括以下步骤： 1. 定义一个全局回调函数，如`handleData`。 2. 创建一个`<script>`标签，设置其`src`属性为服务器的URL，同时将回调函数名作为参数传递，例如：`src="http://example.com/data?callback=handleData"`。 3. 当服务器响应时，它会返回类似`handleData({"key": "value"})`这样的数据，浏览器自动执行这个函数，从而处理返回的数据。 接下来，让我们看看AngularJS中的JSONP。AngularJS内置了对JSONP的支持，使用`$http.jsonp()`服务可以方便地发起JSONP请求。以下是一个简单的示例： ```javascript angular.module('app', []) .controller('Ctrl', ['$http', function($http) { $http.jsonp('http://example.com/data?callback=JSON_CALLBACK') .then(function(response) { console.log(response.data); // 处理返回的数据 }); }]); ``` 在AngularJS中，`JSON_CALLBACK`是一个特殊的占位符，Angular会自动替换为实际的全局回调函数名。当服务器返回数据时，它会被包装在`JSON_CALLBACK({data: 'your data'})`这样的格式中，Angular会自动执行并处理结果。 项目中的`eg1.html`到`eg5.html`可能是逐步演示JSONP在纯JavaScript和Angular中应用的实例。从`eg1.html`开始，逐步学习每个示例，理解JSONP的实现过程和不同应用场景，有助于深入掌握这一技术。 通过这个项目，你可以了解到JSONP在跨域数据获取中的重要作用，以及如何在JavaScript和AngularJS中实现它。同时，你还会学到如何处理返回的数据和管理回调函数，这对于进行Web开发是非常重要的。记得查看每个示例，动手实践，以便更好地理解JSONP的工作机制。