html代码

  1. <html> 
  2.     <head> 
  3.         <meta http-equiv="content-type" content="text/html;charset=utf-8"> 
  4.         <title>jsonp跨域技术</title> 
  5.         <style type="text/css"> 
  6.             #h1{ 
  7.                 text-align:center; 
  8.             } 
  9.             #div{ 
  10.                 margin:0 auto; 
  11.                 width:300px; 
  12.                 height:200px; 
  13.                 background:#ccc;     
  14.             } 
  15.             button{ 
  16.                 display:block; 
  17.                 margin:0 auto; 
  18.             } 
  19.         </style> 
  20.     </head> 
  21.     <body> 
  22.         <h1 id='h1'>jsonp跨域技术</h1> 
  23.         <div id='div'> 
  24.          
  25.         </div> 
  26.         <h1 id='h1'><script>document.write(new Date())</script></h1> 
  27.          
  28.         <button id="bid" name="button" onclick="fun()">jsonp请求数据</button> 
  29.     </body> 
  30.     <script> 
  31.         //实现js与php发生数据交互的一种技术，js通过请求php脚本，然后得到响应数据,最核心的作用是实现js跨域,跨域就是跨主机或者跨服务器 
  32.  
  33.         //为什么要用jsonp技术，是因为ajax技术无法跨域 
  34.         function fasong3(data){ 
  35.                 //alert(data.name);//弹出 
  36.                 //alert(data.age); 
  37.                 var str=""; 
  38.                 str+="name:"+data.name+"<br>"; 
  39.                 str+="age:"+data.age+"<br>"; 
  40.                 document.getElementById('div').innerHTML=str; 
  41.         } 
  42.         function fun(){ 
  43.             var obj=document.createElement("script");//创建标签 
  44.             obj.src="http://192.168.11.188/index111.php?cb=fasong3";//请求地址 
  45.             document.body.appendChild(obj);//绑定子类 
  46.         } 
  47.          
  48.     </script> 
  49.  
  50. </html> 


http://192.168.11.188/服务器地址代码


 


  1. <?php 
  2. $fasong3 = $_GET["cb"]; 
  3. //echo "<script>$fasong3('1111111')</script>"; 
  4. $str='{"name":"nihao","age":"30"}'; 
  5. echo $fasong3.'('.$str.')';