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

客官°小女子只卖身不卖艺 2022-11-29 11:21 133阅读 0赞

> **jsonp严格来说,不属于ajax技术,为什么这么说呢？**
> 
> **从最本质的一点来说，jsonp中根本就没有用到XMLHttpRequest对象，所以说，jsonp不属于ajax技术！ **

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 3][]

//
    	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>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 5][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 6][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70]: /images/20221124/dddc43e535d742f38b7caf42dadc3d68.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1]: /images/20221124/b148cb2bb58f4161ad66d287484c188e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 2]: /images/20221124/9027713e75004b71a370678c71246424.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 3]: /images/20221124/75ee56389fbb4141a6a64f393e4336ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 4]: /images/20221124/cb0198e00c52459dbd1e1a7009d522ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 5]: /images/20221124/2a50c3b95d994d0d8f886747d5468947.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 6]: /images/20221124/90329c10772a4c2dbd02f79d71bfcc6a.png