jsonp使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="result"></div>
</body>
</html>
<script src="http.js"></script>
<script>
    (function () {
        $jsonp(
        'http://api.douban.com/v2/movie/in_theaters',
            {
                count:1,
                start:5
            },
            function (data) {
              document.getElementById('result').innerHTML = JSON.stringify(data);
            }
        );
    })();

</script>

/*
*为什么出现jsonp?
* XMLHttpRequest不支持跨域请求
* 1、处理url中的回调参数
* 2.创建一个script标签
* 3.挂载回调函数
* 4.将script标签放到页面
* */

(function(window, document){
	// 'use strict';
	var jsonp = function (url, data, callback) {
        //挂载回调函数
		var fnSuffix = Math.random().toString().replace('.','');
		var cbFuncName='my_jsonp_cb_' + fnSuffix;
		window[cbFuncName] = callback;

		//2data转换成url字符串的形式
		var querystring = '?';
		for (var key in data){
			querystring += key+ '=' + data[key] + '&';
		}

		//3.处理url中的回调函数
		//url+=callback=my_jsonp_cb_08154486800686033
		querystring += 'callback=' + cbFuncName;
		// alert(querystring);
		// ?count=1&start=5&callback=my_jsonp_cb_08154486800686033

		//4.创建一个script标签
		var scriptElement = document.createElement('script');
		scriptElement.src = url+querystring;
        // alert(scriptElement.src);
		//将script标签放在页面中
		document.body.appendChild(scriptElement);

		//append过后页面会自动对这个地址发送请求,请求完成后自动执行回调函数 my_jsonp_cb_08154486800686033
    };

    window.$jsonp = jsonp;

})(window, document);


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值