原生jsonp實現跨域及封裝

JSONP封裝

function jsonp(url,success,data){
	// 1.處理默認參數
	data = data || {};
	// 2.解析數據
	var str = "";
	for(var i in data){
		str += `${i}=${data[i]}&`;
	}

	// 3.創建script標籤，設置src，準備開啓jsonp
	var script = document.createElement("script");
	script.src = url + "?" + str;
	document.body.appendChild(script);

	// 4.定義全局函數
	window[data[data.columnName]] = function(res){
		success(res);
	}

使用

document.onclick = function(){
	var url = "http://127.0.0.1/jsonp/data/jsonp3.php"
	jsonp(url,function(res){
		alert(res)
	},{
		pass:"root",
		// 5.用來保存，後臺接收的回調函數名所在的字段名
		// 爲了給自己封裝的函數傳參，放置多次修改封裝好的函數
		columnName:"cb",
		// 6.根據後臺要接受的字段名,發送回調函數名,回調函數名，已經無所謂了，隨機都行
		cb:"jsp"
	})
}

後端php

<?php

    $u = @$_REQUEST["pass"];
    $c = @$_REQUEST["cb"];

    $data = "hello ".$u;

    echo $c."('".$data."')";
    

?>