原生Ajax
<script type="text/javascript"> //1 创建xhr对象 var xhr = createXHR(); function createXHR() { var request; if (typeof (XMLHttpRequest) == "undefined") { //ie老版本中创建的方式 request = new ActiveXObject("Microsoft.XMLHTTP"); } else { //支持标准的浏览器创建的方式 request = new XMLHttpRequest(); } return request; } window.onload = function () { document.getElementById("txt").onkeyup = function () { var txt = this; //判断是否有mydiv var mydiv = document.getElementById("mydiv"); if (mydiv) { document.getElementById("container").removeChild(mydiv); } if (this.value.length <= 0) { return; } //2 xhr.open("get", "defalut.ashx?wd=" + this.value, true); //3 xhr.onreadystatechange = function () { if (xhr.readyState == 4) { if (xhr.status == 200) { var r = xhr.responseText; //把字符串转换成数组对象 var array = eval(r); //动态生成div var div = document.createElement("div"); div.id = "mydiv"; document.getElementById("container").appendChild(div); // var ul = document.createElement("ul"); div.appendChild(ul); for (var i = 0; i < array.length; i++) { var li = document.createElement("li"); li.innerHTML = array[i]; ul.appendChild(li); li.onmouseover = function () { this.style.backgroundColor = "red"; txt.value = this.innerHTML; } li.onmouseout = function () { this.style.backgroundColor = ""; } } } } } //4 xhr.send(); } } </script>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。