标签：style blog http color io os ar java for
今天突然想看下JavaScript和ajax 跨域问题，然后百度看了一下，写一个demo出来
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <script src="js/jquery-2.0.3.min.js"></script> 7 <style type="text/css"> 8 #wrap { 9 width: 500px; 10 margin: 200px auto; 11 } 12 13 #txtSearch { 14 width: 400px; 15 } 16 17 #mydiv { 18 width: 400px; 19 border: 1px solid gray; 20 } 21 22 #mydiv ul { 23 margin: 0px; 24 padding: 0px; 25 list-style-type: none; 26 } 27 </style> 28 <script type="text/javascript"> 29 var xhr = createXHR(); 30 function createXHR() { 31 var request; 32 if (XMLHttpRequest) 33 request = new XMLHttpRequest(); 34 else 35 request = new ActiveXObject("Microsoft.XMLHTTP"); 36 return request; 37 } 38 // xhr.open("get", "http://suggestion.baidu.com/su?wd=" + wd + "&json=1&p=3&sid=&req=2&cb=jQuery110207007932646665722_1411810869509&_=1411810869512", true); 39 window.onload = function () { 40 my$("txtSearch").onkeyup = function () { 41 var wd = this.value;//文本框的值 42 //判断页面上有没有动态生成的div。如果有删除 43 var div = my$("mydiv"); 44 if (div) { 45 my$("wrap").removeChild(div); 46 } 47 48 if (wd.length == 0) { 49 return; 50 } 51 yandi = function (data) { 52 var array = eval(data.s); 53 if (array && array.length > 0) 54 { 55 //动态生成DIV 56 var div = document.createElement("div"); 57 div.id = "mydiv"; 58 my$("wrap").appendChild(div); 59 //创建UL 60 var ul = document.createElement("ul"); 61 div.appendChild(ul); 62 //创建li 63 for (var i = 0; i < array.length; i++) 64 { 65 var li = document.createElement("li"); 66 li.innerHTML=array[i]; 67 ul.appendChild(li); 68 //光棒效果 69 li.onmouseover = function () { 70 this.style.backgroundColor = "gray"; 71 } 72 li.onmouseout = function () { 73 this.style.backgroundColor = ""; 74 } 75 } 76 } 77 } 78 var url = "http://suggestion.baidu.com/su?wd=" + wd + "&json=1&p=3&sid=&req=2&cb=yandi&_=1411810869512&callback=yandi"; 79 var script = document.createElement("script"); 80 script.setAttribute("src", url); 81 document.getElementsByTagName("head")[0].appendChild(script); 82 //ajax跨域 83 //$.ajax({ 84 // type: "get", 85 // async: true, 86 // url: "http://suggestion.baidu.com/su?wd=" + wd + "&json=1&p=3&sid=&req=2&cb=yandi&_=1411810869512", 87 // dataType: "jsonp", 88 // jsonp: "callback", 89 // jsonpCallback: "yandi", 90 // success: function (data) { 91 // alert(/2/); 92 // document.getElementById("11").innerHTML = data.s; 93 94 // }, 95 // error: function () { 96 // alert(/11/); 97 // document.getElementById("11").innerHTML = "111111"; 98 // } 99 //}); 100 101 } 102 //yandi = function (data) { 103 // var arry = eval(data.s); 104 // //alert(arry.length); 105 // alert(data.s); 106 // document.getElementById("11").innerHTML = data.s; 107 //} 108 }; 109 110 function my$(id) { 111 return document.getElementById(id); 112 }; 113 </script> 114 </head> 115 <body> 116 <div id="wrap"> 117 <input type="text" id="txtSearch" /><input type="button" value="search" /> 118 <div id="11"></div> 119 </div> 120 </body> 121 </html>
标签：style blog http color io os ar java for
原文地址：http://www.cnblogs.com/Mronyd/p/3997535.html
