JSONP技術 JSONP是解決跨域問題的一種常見方式 跨域問題，因為瀏覽器有同源策略，所以當不同域間進行數據交互的時候就會出現跨域問題 同源策略：只有在同協議、同功能變數名稱、同埠的情況下才能進去數據交互 JSONP的原理：可以利用script標簽（會使用回調函數來接收數據）的src屬性不受同源策略的影 ...
JSONP技術
JSONP是解決跨域問題的一種常見方式
跨域問題，因為瀏覽器有同源策略，所以當不同域間進行數據交互的時候就會出現跨域問題
同源策略：只有在同協議、同功能變數名稱、同埠的情況下才能進去數據交互
JSONP的原理：可以利用script標簽（會使用回調函數來接收數據）的src屬性不受同源策略的影響，可以請求到不同域的數據，通過設置回調函數來接收數據
JSONP是前後端結合的跨域方式：因為前端請求到數據後需要在回調函數中使用，所以後端得將數據放回到回調函數中
JSONP屬於AJAX嗎？
ajax是指通過使用xmlhttprequest對象進行非同步數據交互的技術，JSONP是依靠script標簽的src屬性來獲取的，不屬於ajax
JSONP有什麼缺點，使用的時候需要註意什麼 ？
1.只能get處理，不能post垮與處理問題
2.需要註意的是：每次請求應該動態的創建script標簽和回調函數，數據獲取完成後銷毀。
如果method是jsonp的話，就可以用jsonp去跨域請求，但是註意要在url後寫關於callback的值為JSON_CALLBACK
百度搜索小例子
<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./base/bootstrap.min.css">
</head>
<body>
<div ng-controller="yourController">
<input type="text" ng-change="search()" ng-model="wd">
<ul>
<li ng-repeat="word in dataList"><a href="https://www.baidu.com/s?ie=utf-8&wd={{word}}">{{word}}</a></li>
</ul>
</div>
<script src="./base/angular.min.js"></script>
<script src="./base/angular-sanitize.js"></script>
<script>
var app = angular.module("myapp", ['ngSanitize'])
app.controller("yourController", function($scope, $http) {
$scope.search = function() {
$http({
url: "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
method: "jsonp",
params: {
wd: $scope.wd,
cb: 'JSON_CALLBACK'
}
}).success(function(results) {
$scope.dataList = results.s
})
}
})
</script>
</body>
</html>
