jsonp知识点(jsonp严格来说,不属于ajax技术)

jsonp严格来说,不属于ajax技术,为什么这么说呢？

从最本质的一点来说，jsonp中根本就没有用到XMLHttpRequest对象，所以说，jsonp不属于ajax技术！

	//
	function search_for() {
		var keywords = document.getElementById('input1').value;
//借助360搜索的url地址，该url地址会返回一段js代码(准确的说是一段调用js函数的代码，js的函数名就是url中的callback参数的值searchResult)
		var url = 'https://sug.so.360.cn/suggest?callback=searchResult&encodein=utf-8&encodeout=utf-8&format=json&word=' + keywords;
		var scriptTag = document.createElement('script');
		scriptTag.src = url;
		var headTag = document.getElementsByTagName('head')[0];
		headTag.appendChild(scriptTag);
	}

//定义一个函数，函数名叫searchResult
	function searchResult(content) {
// 		alert(content);
		console.log(content);
		console.log(content.result, '------');
		console.log(content['result'], '======');
		console.log(content["result"], '******');
		console.log('*****************************************');
		var search_Result = content.result;
		var elementCount = search_Result.length;
// 		var str = '';
		for (var index = 0, str = ''; index < elementCount; index++) {
			str += '<li>' + search_Result[index].word + '</li>';
		}
		var ulTag = document.getElementById('myUl');
		ulTag.innerHTML = str;
	}

完整代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jsonp知识点(jsonp严格来说,不属于ajax技术)</title>
<link rel="stylesheet" type="text/css" href="../css/body.css" />
<link rel="stylesheet" type="text/css" href="../css/mark.css" />
<link rel="stylesheet" type="text/css" href="../css/input2.css" />
<link rel="stylesheet" type="text/css" href="../css/console.css" />
</head>
<body>
<h1>jsonp知识点(jsonp严格来说,不属于ajax技术)</h1>
<h2>
jsonp严格来说,不属于ajax技术,为什么这么说呢？从最本质的一点来说，jsonp中根
本就没有用到XMLHttpRequest对象，所以说，jsonp不属于ajax技术！
</h2>
<h2>推荐搜索/搜索自动补全</h2>
<input type="text" id="input1" oninput="search_for();" />
<input type="button" id="button1" value="搜索" />
<ul id="myUl"></ul>
<br />
</body>
<script type="text/javascript">

//定义一个函数，函数名叫searchResult
	function searchResult(content) {
// 		alert(content);
		console.log(content);
		console.log(content.result, '------');
		console.log(content['result'], '======');
		console.log(content["result"], '******');
		console.log('*****************************************');
		var search_Result = content.result;
		var elementCount = search_Result.length;
// 		var str = '';
		for (var index = 0, str = ''; index < elementCount; index++) {
			str += '<li>' + search_Result[index].word + '</li>';
		}
		var ulTag = document.getElementById('myUl');
		ulTag.innerHTML = str;
	}


	//
	function search_for() {
		var keywords = document.getElementById('input1').value;
//借助360搜索的url地址，该url地址会返回一段js代码(准确的说是一段调用js函数的代码，js的函数名就是url中的callback参数的值searchResult)
		var url = 'https://sug.so.360.cn/suggest?callback=searchResult&encodein=utf-8&encodeout=utf-8&format=json&word=' + keywords;
		var scriptTag = document.createElement('script');
		scriptTag.src = url;
		var headTag = document.getElementsByTagName('head')[0];
		headTag.appendChild(scriptTag);
	}
</script>
</html>

jsonp知识点(jsonp严格来说,不属于ajax技术)

猜你喜欢