jsonp原生与jsonp的ajax封装

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body id="body">
	
</body>
	<script type="text/javascript" src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
        //动态创建script标签
		var a = document.createElement("script");
        //使用html的一个漏洞,src不受同源策略的影响,使用src传递值到一个新的页面
			a.src = "原生.json";
        //插入到body之中
			body.appendChild(a);
        //nibi相当于后台传递的一个函数名称，不是随意乱起，回调函数返回后台传递的函数里的数据
		function nibi(da){
			console.log(da);
		}
	</script>
</html>
//json文件
nibi({
	"title":"王雅锐真帅"
})
//jQuery封装
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<input id="btn" type="button" value="跨域获取数据" />
    <textarea id="text" style="width: 400px; height: 100px;"></textarea>
</body>
	<script type="text/javascript" src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		
 
         $(document).ready(function () {
                 $.ajax({
                    //路径(从菜鸟教程中复制的一个支持jsonp请求的文件路径)
                     url: "http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?",    
                     //只能使用get方式
                     type: "GET",
                     dataType: "json",  //指定服务器返回的数据类型
                     //返回jsonp请求中的一个函数名字，callback是默认的回调函数
                     jsonp:"callback",
                     //jsonp重写回调函数的名称(名称要与后台传递的函数名称一致)
                     jsonpCallback:"callbackFunction",
                     //成功后的回调方法
                     success: function (data) {
                        console.log(data);
                    }
                 });
     
 
         });
	</script>
</html>
jsonp原生与jsonp的ajax封装

猜你喜欢
