jsonp跨域请求
Posted 小飞博客
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jsonp跨域请求相关的知识，希望对你有一定的参考价值。
跨域是什么？为什么我们需要跨域？
跨域是指浏览器访不能问另外一个网站的脚本，这是由于浏览器的同源策略造成的，同时也是浏览器施加给javascript的安全限制。
但是事实上，用户浏览网站是避免不了跨域请求的，所以才需要跨域来解决这个问题。
我最熟悉的是jsonp跨域：因此先贴上jsonp跨域的例子。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jsonp跨域</title> 6 </head> 7 <style> 8 *{margin:0;padding: 0;list-style: none;} 9 #wrap{ 10 width: 400px; 11 margin:100px auto; 12 border: 1px solid orange; 13 } 14 #wrap #txt{ 15 width: 398px; 16 height: 40px; 17 font-size: 20px; 18 border: 1px solid orange; 19 outline: none; 20 } 21 #wrap #ul1{ 22 width: 393px; 23 } 24 #wrap #ul1 li{ 25 width: 393px; 26 height: 40px; 27 line-height: 40px; 28 } 29 #wrap #ul1 li a{ 30 display: block; 31 text-decoration: none; 32 color: #000; 33 } 34 #wrap #ul1 li a:hover{ 35 background: cyan; 36 color: #fff; 37 } 38 </style> 39 <body> 40 <div id="wrap"> 41 <input type="text" id="txt"> 42 <ul id="ul1"> 43 </ul> 44 </div> 45 </body> 46 <script> 47 //data数据格式:{q: "点", p: false, s: Array(10)} 48 function callback(data) { 49 //console.log(data); 50 var oUl = document.getElementById(‘ul1‘); 51 var html = ‘‘; 52 if (data.s.length) { 53 oUl.style.display = ‘block‘; 54 for (var i=0; i<data.s.length; i++) { 55 html += ‘<li><a target="_blank" href="http://www.baidu.com/s?wd=‘+data.s[i]+‘">‘+ data.s[i] +‘</a></li>‘; 56 } 57 oUl.innerHTML = html; 58 } else { 59 oUl.style.display = ‘none‘; 60 } 61 62 } 63 64 // ‘&cb=callback‘ 里的callback是回调函数 65 66 window.onload=function(){ 67 var txt=document.getElementById(‘txt‘); 68 var oUl=document.getElementById(‘ul1‘); 69 txt.onkeyup=function(){ 70 if(this.value!=‘‘){ 71 var Script=document.createElement(‘script‘); 72 Script.src=‘http://suggestion.baidu.com/su?wd=‘+this.value+‘&cb=callback‘; 73 document.body.appendChild(Script); 74 }else{ 75 oUl.style.display=‘none‘; 76 } 77 78 }; 79 }; 80 </script> 81 </html>
jsonp跨域相对而言还是简单点，容易理解吧。后续还会更新跨域方面方法。
以上是关于jsonp跨域请求的主要内容，如果未能解决你的问题，请参考以下文章