1.什么是跨域?
不同域名之間進行訪問
2.同源策略?
協(xié)議,主機地址,端口都一致
3.是誰造成了跨域？
是瀏覽器造成的跨域。
4.為什么會有跨域？
為了數(shù)據(jù)的安全。
在網(wǎng)站中輸入自己的用戶名和密碼,當記住用戶名和密碼時,瀏覽器就記住了你的用戶名和密碼,如果做得不安全的話,別人可以往你的網(wǎng)站中偷偷的注入代碼,然后就可以訪問瀏覽器的數(shù)據(jù),他就可以把你的用戶名和密碼往自己的網(wǎng)站發(fā)送,但是域名不同,而瀏覽器又不允許跨域訪問,所以安全性較高,就有了跨域這一說法
5.你在開發(fā)當中是如何解決跨域問題？
jsonp解決跨域
往瀏覽器當中安裝插件(不建議使用,治標不治本)
5.jsonp與Ajax有關系嘛？
Ajax它是javascipt提供的方法，進行數(shù)據(jù)的請求。使用它請求數(shù)據(jù)時，跨域時拿到不數(shù)據(jù)。
jsonp解決跨域的一種方案。
6.jsonp原理是怎么做的？
借助標簽的src屬性進行數(shù)據(jù)請求。
1.使用src，請求數(shù)據(jù)
<script src="http://datainfo.duapp.com/shopdata/getGoods.php?callback=callback">
2.在本地聲明一個方法
function callback(args) {
console.log(args);
}
3。要在服務端要處理跨域
$res = $_GET['callback'];
echo $res."('我是服務的數(shù)據(jù)')";
demo1:
<!--如果服務器返回的是js代碼，那么瀏覽器就會直接執(zhí)行js代碼-->
<!--借助瀏覽器的這個特性來實現(xiàn)跨域-->
<script src='jsonp.php'></script>
jsonp.php中
echo 'alert("hello")';
運行結(jié)果:直接返回js代碼的運行結(jié)果
image.png
demo2:
既然是服務器返回的是js代碼時,瀏覽區(qū)可以直接運行js代碼
那么我可以在服務器端直接輸出一個函數(shù)
echo "fn()";
function fn(){
alert("執(zhí)行了前端的alert");
}
彈出"執(zhí)行了前端的alert"
demo3:
<script src=angular.js></script>
<script>
function fn(){
alert("執(zhí)行了前端的alert");
}
/*瀏覽器從上往下走,先聲明一個函數(shù),
向jsonp發(fā)送一個請求 我告訴你傳遞了一個callback 然后用GET方式來接受callback,
接受的值是fn,所以php中res就是fn*/
</script>
<body>
<script src='jsonp.php?callback=fn'></script>
php:
$res=$_GET['callback'];/*res就是fn*/
echo $res."()";
/*給什么名稱執(zhí)行的就是哪個函數(shù)*/
image.png
demo4:
<script src=angular.js></script>
<script>
function fn(args){
alert(args);
}
/*瀏覽器從上往下走,先聲明一個函數(shù),
向jsonp發(fā)送一個請求 我告訴你傳遞了一個callback 然后用GET方式來接受callback,
接受的值是fn,所以php中res就是fn*/
</script>
<body>
<script src='jsonp.php?callback=fn'></script>
php:
/*也可以傳遞參數(shù)*/
echo $res."('我是服務器的數(shù)據(jù)')";
/*傳參數(shù),執(zhí)行這個函數(shù)的時候必須有個參數(shù)*/
demo5:
<script>
function callback(args){
console.log(args);
}
</script>
<body>
<script src="http://datainfo.duapp.com/shopdata/getGoods.php?callback=callback"></script>
<!--為什么寫callback
是因為在此網(wǎng)址中的network下面的preview中的方法名稱是callback 如果不叫這個名字 運行不出來結(jié)果-->
</body>
拿到了數(shù)組,數(shù)組里有數(shù)據(jù)
跨域的步驟
使用src屬性進行數(shù)據(jù)請求的時候出現(xiàn)的幾種方式:
1.使用src，請求數(shù)據(jù)
<script src="http://datainfo.duapp.com/shopdata/getGoods.php? callback=callback">
2.在本地聲明一個方法
function callback(args) {
console.log(args);
}
3.要在服務端要處理跨域
$res = $_GET['callback'];
echo $res."('我是服務的數(shù)據(jù)')";
$http跨域(angularJs跨域)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src=angular.js></script>
<script>
/*1.創(chuàng)建模塊*/
var app = angular.module('app',[]);
/*2.創(chuàng)建控制器*/
app.controller("zmController", ["$scope", "$http", function ($scope, $http) {
//$http就相當于是對原生的Ajax進行封裝,對Ajax進行跨域時拿不到數(shù)據(jù),打印時拿不到,所以不能通過這種方式拿數(shù)據(jù)
$http({ /*http://localhost:63342/mywebstorm/%E5%B0%8F%E7%A0%81%E5%93%A5/%E7%BB%83%E4%B9%A0/angularJs/day03/7.$http.html?_ijt=31parnf386gfjv1vgmituhflrs 當前的路徑*/
url: 'http://127.0.0.1/argular/day03/get.php', /*我現(xiàn)在要訪問phpday03下面的get.post請求 我現(xiàn)在不在這個文件夾下面*/
method: 'get',
params: {
flag: 'zm'
}
}).success(function (regs) {
console.log(regs);
}).error(function (error) {
console.log(error);
})
/*看響應的結(jié)果 get.php status==200 響應成功*/
/*看respond里服務器的數(shù)據(jù)有沒有給我們 就是要給我們 在打印臺沒有數(shù)據(jù) 并且還會報錯*/
}]);
/*3.綁定模板*/
/*4.綁定控制器*/
</script>
<body ng-app='app' ng-controller='zmController'>
</body>
</html>
php
$res = $_GET['flag'];
if($res == "zm"){
echo "服務器數(shù)據(jù)";
}
else{
echo "非法數(shù)據(jù)";
}
打印時會報錯,但是我已經(jīng)拿到了響應結(jié)果.在network中可以看到"服務器數(shù)據(jù)"拿到了只是不給我,所以我不能使用這種方式,應該使用跨域的方式.
下面使用原生的jsonp的方案:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src=angular.js></script>
<script>
/*1.創(chuàng)建模塊*/
var app = angular.module('app',[]);
/*2.創(chuàng)建控制器*/
app.controller("zmController", ["$scope", "$http", function ($scope, $http) {
}]);
//我們使用jsonp方式
/*2.聲明一個方法*/
function callback(args){
console.log(args);
}
</script>
<!--1,請求一個路徑地址-->
<script src="http://127.0.0.1/argular/day03/get.php?callback=callback"></script>
<!--3.在服務器段進行接收處理 在get.php中進行處理-->
<body ng-app='app' ng-controller='zmController'>
</body>
</html>
php
$callback = $_GET['callback'];
echo $callback."('我是服務器的數(shù)據(jù)')";
一下代碼中使用angularJs幫我們在內(nèi)部偷偷做了,第一步的標簽就不需要了,第二步的聲明函數(shù)也不需要我做了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src=angular.js></script>
<script>
/*1.創(chuàng)建模塊*/
var app = angular.module('app',[]);
/*2.創(chuàng)建控制器*/
app.controller("zmController", ["$scope", "$http", function ($scope, $http) {
$http({
/*http://localhost:63342/mywebstorm/%E5%B0%8F%E7%A0%81%E5%93%A5/%E7%BB%83%E4%B9%A0/angularJs/day03/7.$http.html?_ijt=31parnf386gfjv1vgmituhflrs 當前的路徑*/
url: 'http://127.0.0.1/argular/day03/get.php', /*我現(xiàn)在要訪問phpday03下面的get.post請求*/
method: 'jsonp',
params: {
callback:'JSON_CALLBACK'/*內(nèi)部自動幫我做跨域處理*/
/*
1.幫我創(chuàng)建了一個script標簽src=url
2.創(chuàng)建聲明了一個function angular.callbacks._0(){
args傳入的數(shù)據(jù)
}
*/
}
}).success(function (regs) {
console.log(regs);
}).error(function (error) {
console.log(error);
})
}]);
</script>
<body ng-app='app' ng-controller='zmController'>
</body>
</html>
php
$callback = $_GET['callback']; //$callback他的值就是angular_0
echo $callback."('我是服務器的數(shù)據(jù)')";
