官網上的解釋為:

The?$http?service is a core AngularJS service that facilitates communication with the remote HTTP servers via the browser's?XMLHttpRequest?object or via?JSONP.($http服務就是通過瀏覽器的XMLHttpRequest對象或者通過JSONP用于和遠程的http服務通信的angularJs的一個核心服務)

JSONP?(JSON?with padding) is used to request data from a server residing in a different domain than the client.（JSONP是JSON的一個使用模式用戶跨域請求），因為?XMLHttpRequest這個對象不支持跨域請求,所以才有了我們需要通過JSONP來實現跨域請求訪問。

支持跨域請求的標簽如下：

<img src="http://www.baidu.com/1.png" alt=""> //雖然支持跨域但是拿不到服務端返回的數據

<iframe src="http://www.baidu.com/2.jpg" frameborder="0"></iframe> //可以收取服務端數據 但是過程較為復雜

<link rel="stylesheet" href="http://bbs.abc.com"> //會在css處理階段報錯

<script src="http://dddd.com/1"></script> //推薦的方式

使用jsonp做跨域請求的時候:

1.在普通的ajax請求中做跨域請求的時候需要在當前地址后面加上一個參數callback=func即可

2.但在angular中將所有JSONP的callback都掛在angular.callbacks這個對象上，所以在angular中使用JSONP的方式做跨域請求就必須給當前地址加上一個參數callback=JSON_CALLBACK,這樣最終的結果是angular把參數換成了angular.callbacks._0或angular.callbacks._1...這樣一些隨機的函數名。

angular中對于數據邏輯的東西需要寫service來處理，而需要scope設置值關聯到view層上的東西需要controller來處理：

?

angular執行跨域的過程:

處理url中的回調函數的時候需要把傳過來的格式不一致的url類型轉換成一個標準的url字符串格式類型

其中處理url中的回調參數就是在url后面加上一個cb="my_json_cb"這樣的串

創建script標簽的格式類似于var scriptElement = document.creatElement('script');然后指定src屬性：scriptElement.src=url+...

掛載回調函數 window[cb]=callback

將script標簽放到頁面中:document.body.appendChild(scriptElement);

這種調用的方式和jquery中的$.get('http://dddd.com/22',function(data))的格式是差不多的

?

轉載于:https://www.cnblogs.com/yk123/p/7049076.html

總結

以上是生活随笔為你收集整理的angularJS1笔记-(18)-$http及用angular实现JSONP跨域访问过程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。