前端基础-jsonp(ajax+php)

本文详细介绍了使用Ajax和JSONP实现跨域请求的方法。通过实例演示了如何在服务器端设置允许跨域,以及客户端如何发起跨域请求并处理响应数据。

ajax跨域请求:

1、首先在本地建立一个PHPStudy服务器

2、在根目录下建立一个“php”文件夹

3、文件夹里面建立一个p.php文件

4、p.php内容:

<?php

header("Access-Control-Allow-Origin:*");//使用ajax原生请求需要写这一句话,表示此文件允许跨域请求

$data = '{"name":"xiaoming"}';//声明一个data为字符串类型的数据

echo $data;//输出data的值

?>

5、在本地电脑上新建一个index.html文件和jquery.js文件,并引入到页面

6、index.html内容:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<!-- 引入当前文件夹下的jquery.js -->

<script src="jquery.js"></script>

</head>

<body>

<div>DDDD</div>

<script>

$.getJSON('http://localhost/php/p.php',function(data){//一个json请求,参数第一个为请求的地址,地二个为成功的回调函数

// 此文件的浏览器控制台可以看到通过ajax原生跨域引入的其他服务器及域名下的文件,就是'{"name":"xiaoming"}'

//当然了,那个服务器设置了允许跨域访问的设置才行,就是header("Access-Control-Allow-Origin:*")

console.log(data);

})

</script>

</body>

</html>

ajax虽然可以完成跨域请求,但一般服务器不会设置允许跨域请求的,就是header("Access-Control-Allow-Origin:*");会降低安全性的

所以我们要学习jsonp跨域请求

jsonp跨域请求:

1、跟上面的步骤3一样,建立一个p1.php文件.

2、p1.php内容:

<?php

$callback = $_GET['callback'];//jsonp回调参数,必需

$data = '{"msg":"这是jsonp请求的数据","success":"true"}';

echo $callback."($data)";//返回格式,必需

?>

3、在本地电脑上新建一个index1.html文件和jquery.js文件,并引入到页面

4、index1.html内容:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<!-- 引入当前文件夹下的jquery.js -->

<script src="jquery.js"></script>

</head>

<body>

<div>DDDD</div>

<script>

$.ajax({

url:'http://localhost/php/p1.php',

dataType:'jsonp',

//jsonp:"callback"//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback)

success:function(data){

// 此文件的浏览器控制台可以看到通过jsonp跨域引入的其他服务器及域名下的文件,

//就是{msg: "这是jsonp请求的数据", success: "true"}

//当然了,那个服务器不用设置允许跨域的设置,不用设置header("Access-Control-Allow-Origin:*")

console.log(data);

}

})

</script>

</body>

</html>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值