2017-5-24 AngularJS 学习笔记 跨域

http 数据请求方式

• http 定义了与服务器交互的不同方法，最基本的方法有4种，分别是 get,post,put,delete. url 全程是资源描述符，我们可以这样认为：一个 url 地址，它用于描述一个网络上的资源，而 http 中的 get,post,put,delete 就对应着这个资源的 查，改，增，删4个操作
  get 一般用于获取、查询资源信息，而post一般哟凝固更新资源信息

get 请求和 post 请求的区别

• 1.get 请求以明文方式传递，也就是在地址栏中，能看到参数。post 请求在地址栏中看不到参数，参数隐藏在请求体中
• 2.get 请求只能发送少量数据给服务器，理论上，post 请求数据是没有大小限制的，http 协议规范也没有进行大小限制
• 3.post 请求必须设置请求头

http 请求 demo

1.添加 angular.js,student.json
2.stu.php 接口
3.给 url 传参

        

                
{{stu.name}}--{{stu.address}}--{{stu.age}}
        

跨域介绍

1.什么是跨域
不同域名之间进行数据的访问
2.什么是同源策略
协议，主机地址，端口都一致
3.是谁导致了跨域
是浏览器造成跨域
浏览器为了保证数据的安全，不允许直接使用别的域名数据，浏览器坐了一个拦截，其实数据已经响应到了浏览器，浏览器没有把数据给我们
4.为什么会有跨域
为了数据安全
5.开发当中如何解决跨域问题
jsonp解决跨域，使用 script 当中 Src 方式进行数据请求
往浏览器当中安装插件，开发调试使用
6.jsonp 与 Ajax 的关系
jsonp 与 Ajax 没有关系
ajax 是使用 js 内置的对象进行网络请求数据
jsonp 是使用 script 当中的 src 来获取数据的一种方案，并不是接口
ajax 它是 javascript 提供的方法，进行数据的请求。使用它请求数据，跨域时拿不到数据
jsonp 是解决跨域的一种方案
7.jsonp 原理
借助标签的 src 属性进行数据请求

跨域原理

image.png

image.png

跨域步骤
-1.通过 script src= 向服务器发送一个请求。在发送请求过程中，把 function 的名称作为参数传送给服务器
//php接收参数 <$php $res=$_GET['callback']; echo $res.'()'; //php 返回参数 $res=$_GET['callback']; echo $res."('我是服务器数据sk666')"; //script 加载网址 //修改方法名 function callback(args){ console.log(args);}

$http 跨域

总结：$http 跨域 帮你坐了谅解事情

//1.帮你创建了一个 script 标签 src = url
//2.帮你创建声明了一个 function
function = angular.callbacks._0(args){
        args
}
//3.服务器接收

桌面代码，跨域，获取本地服务器 http_jsonp.php 数据

• 1.桌面 myApp,添加 angular.js 创建 index
• 2.绑定模块，绑定控制器
• 3.添加 get.php

• 4. 请求

• 5.使用 jsonp 方式 获取数据

06-myApp index.html
//跨域步骤一使用 src 向服务器请求数据

06-myApp index.html
//跨域步骤二：定义发那个发
function callback(args){
        console.log(args);
}

• 6.服务器1接收 callback 值，查看打印

http_jsonp.php

• 7.使用 $http 实现跨域

$http({
        //端口不一样，跨域
        url:'http//localhost/day3-code/http_jsonp.php',
        method:'jsonp',
        params:{
                callback:'JSON_CALLBACK'
        }
}).success(function(res){
        console.log(res);
}).error(function(error){
        console.log(error);
})

http_jsonp.php
$fn = $_GET['callback'];
echo $fn."('我是服务数据')"

js整体写法

桥接跨域

1.新建php文件
2.将url 写入 php 文件$url = 'https://moment.douban.com/api/stream/date/2016-08-20?alt=json&apikey=0bcf52793711959c236df76ba534c0d4&app_version=1.7.4&douban_udid=d623045db9fcb0d5243174c1bf1a675f887047c0&format=full&udid=9a34d8b038ff38971050199b0c5ee9c60c6d1ca3&version=6'
3.使用 echo file_get_contents('$url')
4.html 当中发送请求使用域名