angularJS1笔记-(18)-$http及用angular实现JSONP跨域访问过程

官网上的解释为:

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