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 传参
<?php
header('Content-Type:text/html;charset=utf-8');
$res = $_GET['flag'];
if($res == 'xmg'){
echo file_get_contents('student.json');
}else{
echo '非法访问';
}
<body ng-app="app" ng-controller='skController'>
<ul>
<li ng-repeat= stu in stus>{{stu.name}}--{{stu.address}}--{{stu.age}}</li>
</ul>
</body>
<script src='angular.js'></script>
<script>
var app = angular.module('app',[]);
app.controller('skController',['$scope','$http',function($scope,$http){
$http({
url:'stu.php',
method:'get',
params{
flag:'xmg'
}
}).success(function(res){
console.log(res);
$scope.stus=res;
}).error(function(error){
console.log(error);
})
}])
</script>
跨域介绍
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 的名称作为参数传送给服务器
<script src="http://datainfo.duapp.com/shopdata/getGoods.php?callback=callback">
- 2.在前端定义一个方法
function callback(args){console.log(args);} - 3.服务器接收 callback 值，在返回时，接收参数后面拼接括号。如果想要传递数据，酒吧数据放到括号中
$res = $_GET['callback'];
echo $res."('我是服务的数据')"
- 4.浏览器就会解析执行服务器返回的 js 代码
callback('我是服务的数据')
//定义jsonp.php
<?php
echo "fn()";
echo "alert('hello')"
//html 导入 jsonp.php 定义函数
<script src="jsonp.php"></script>
<script>
function fn(){
alert('执行了前端alert');
}
</script>
<script src="jsonp.php?callback=fn"></script>
//php接收参数
<$php
$res=$_GET['callback'];
echo $res.'()';
//php 返回参数
$res=$_GET['callback'];
echo $res."('我是服务器数据sk666')";
//script 加载网址
<script src="http://datainfo.duapp.com/shopdata/getGoods.php?callback=callback"></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
<?php
header('Content-Type:text/html;charset=utf-8');
$res=$_GET['flag'];
if($res == 'xmg'){
echo "服务器数据"
}else{
echo "非法访问"
}
- 请求
<script src="angular.js"></script>
<script>
var app = angular.module('app',[]);
app.controller('skController',['$scope','$http',function($scope,$http){
$http({
url:"http://localhost/day3-code/http_jsonp.php",
method:'get',
params:{
flag:'xmg'
}
}).success(function(res){
console.log(res);
}).error(function(error){
console.log(error);
})
}])
</script>
- 5.使用 jsonp 方式 获取数据
06-myApp index.html
//跨域步骤一使用 src 向服务器请求数据
<script src="http://localhost/day3-code/get.php"></script>
06-myApp index.html
//跨域步骤二：定义发那个发
function callback(args){
console.log(args);
}
- 6.服务器1接收 callback 值，查看打印
http_jsonp.php
<?php
header('Content-Type:text/html;charset=utf-8');
$callback = $_GET['callback'];
echo $callback."('我是服务器数据')";
- 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整体写法
<script src="angular.js"></script>
<script>
//
var app = angular.module('app', []);
//
app.controller('skController', ['$scope', '$http',function ($scope, $http) {
//桌面html, 跨域请求服务器文件http_jsonp.php
//跨域浏览器拦截数据, 不给你
$http({
//Origin 'http://localhost:63342' is therefore not allowed access
// 当前路径:
// http://localhost:63342/06-desktop/06-$http%E8%B7%A8%E5%9F%9F.html
url:'http://localhost/day03/06get.php',
method:'get',
params:{
flag:'xmg'
}
}).success(function (res) {
console.log(res);
}).error(function (error) {
console.log(error);
});
$http({
// 当前路径:
// http://localhost:63342/06-desktop/06-$http%E8%B7%A8%E5%9F%9F.html
url:'http://localhost/day03/06get.php',
//method:'get',//返回字符串
method:'jsonp',//返回json
params:{
//flag:'xmg',
//注意:JSON_CALLBACK 全为大写
//注意2:skcallback 为变量名, 对应 $fn = $_GET['skcallBack']; 中的skcallBack
//skcallback 注意大小写也要一致
skcallBack:'JSON_CALLBACK'
}
}).success(function (res) {
console.log(res);
}).error(function (error) {
console.log(error);
})
$http({
// 当前路径:
// http://localhost:63342/06-desktop/06-$http%E8%B7%A8%E5%9F%9F.html
url:'http://datainfo.duapp.com/shopdata/getGoods.php?callback=callback',
method:'jsonp',//返回json数据
params:{
callback:'JSON_CALLBACK'
}
}).success(function (res) {
console.log(res);
//console.log(typeof(res));
}).error(function (error) {
console.log(error);
})
}]);
//跨域步骤二:自定义方法(http帮你做了)
/* function callback(args) {
console.log(args);
}*/
//跨域步骤三:服务器处理跨域(后端)
/**
总结:$http 跨域 帮你做了2件事情
1.帮你创建了一个script标签 src = url
2.帮你创建声明了一个 function
function = angular.callbacks._0(args){
args
}
3.服务器接收数据
*/
</script>
<!--跨域步骤一 :通过src发送请求(http帮你做了)-->
<!--<script src="http://localhost/day03/get.php"></script>-->
桥接跨域
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 当中发送请求使用域名
网友评论