原生ajax實現jsonp

jsonp的原理
主要是利用動態創建 script 標籤請求後端接口地址,然後傳遞 callback 參數,後端接 callback,後端經過數據處理,返回 callback 函數 調用的形式,callback 中的參數就是 json

<!DOCTYPE html>
<html lang="zh">
<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>
</head>
<body>
	<input type="" id="username" oninput="search()" />
</body>
<script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	function search()
	{
		var wd=$("#username").val();
		//console.log(wd);
		getJson("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+wd,'get')
	}
	function getJson(url,callback)
	{
		var script=document.createElement('script');
		script.type="text/javascript";
		script.src=url+'&cb='+callback;
		document.querySelector('head').appendChild(script);
	}
	function get(data)
	{
		console.log(data)
	}
</script>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章