ajax 学习记录
发布时间:2020-12-16 00:53:23 所属栏目:百科 来源:网络整理
导读:htmlheadmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /script type="text/javascript"// 定义全局的变量var xmlhttp;function loadXMLDoc(url,cfunc) {//var xmlhttp;if(window.XMLHttpRequest){xmlhttp = new XMLHttpRequest();}el
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> // 定义全局的变量 var xmlhttp; function loadXMLDoc(url,cfunc) { //var xmlhttp; if(window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); }else{ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } /* 普通请求方式 xmlhttp.onreadystatechange = function() { //if(xmlhttp.status==404){alert('404 error,file not found');return false;} //if(xmlhttp.readyState==0){alert('request did not connect!');} //if(xmlhttp.readyState==1){alert('request has been connected!');} //if(xmlhttp.readyState==2){alert('request has been received!');} //if(xmlhttp.readyState==3){alert('request is dealing...');} if(xmlhttp.readyState==4 && xmlhttp.status==200){ //document.getElementById('myDiv').innerHTML=xmlhttp.responseXML; var docxml = xmlhttp.responseXML; var text=""; var x = docxml.getElementsByTagName('title'); for (var i = 0; i < x.length; i++) { text = text + x[i].childNodes[0].nodeValue + '</br>'; } document.getElementById('myDiv').innerHTML=text; } } xmlhttp.open("get","books.xml",true); //xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//just using in post menthod! //xmlhttp.send("name=jackshally&age=27"); xmlhttp.send(); */ // 将onReadyStateChange行数的回调函数封装起来 xmlhttp.onreadystatechange=cfunc; xmlhttp.open("GET",url,true); xmlhttp.send(); } function dodo(url) { loadXMLDoc(url,function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById('myDiv').innerHTML=xmlhttp.responseText; } }); } //动态获取建议数据 function showHint(str){ var url = "names.php?names="+str; //alert(url); loadXMLDoc(url,function(){ if (str.length==0){ document.getElementById('txtHint').innerHTML=""; return; } if (xmlhttp.readyState==4 && xmlhttp.status==200){ //alert(xmlhttp.responseText); document.getElementById('txtHint').innerHTML = xmlhttp.responseText; } }); } function fillme(str){ document.getElementById('txt1').value=str; } function showCustomer(str){ url='data.php?q='+str; //alert(url); loadXMLDoc(url,function(){ //alert(url); if(xmlhttp.readyState==4 && xmlhttp.status==200){ //alert(url); var text = "<table border='1' width='720px'><tr><th width=20%>NAME</th><th>PASS</th><th>ADDTIME</th></tr>"; var xmldoc = xmlhttp.responseXML; var x = xmldoc.getElementsByTagName('user'); for (var i = 0; i < x.length; i++) { text=text + "<tr><td>"; text=text + x[i].getElementsByTagName('name')[0].childNodes[0].nodeValue+'</td>'; text=text + "<td>"; text=text + x[i].getElementsByTagName('pass')[0].childNodes[0].nodeValue+'</td>'; text=text + "<td>"; text = text + x[i].getElementsByTagName('addtime')[0].childNodes[0].nodeValue+'</td>'; //alert(text); }; document.getElementById('show1').innerHTML=text+'</tr></table>'; } }); } </script> </head> <body> <div id="myDiv"><h3>Let AJAX change this text</h3></div> <button type="button" onclick='dodo("ajax.php?name2=desmonde&age2=36")'>Change Content</button> <button type="button" onclick='dodo("ajax.php?name2=jackshally&age2=38")'>Change another</button> <h3>请在下面的输入框中键入字母(A - Z):</h3> <form action="names.php"> 姓氏:<input type="text" id="txt1" onkeyup="showHint(this.value)" value=""/> </form> <p>建议[点击自动填写]:<span id="txtHint"></span></p> <form action="data.php" style="margin-top:15px;"> <label>请选择一位客户: <select name="customers" onchange="showCustomer(this.value)" style="font-family:Verdana,Arial,Helvetica,sans-serif;"> <option value="10">选择10条数据</option> <option value="100">选择100条数据</option> <option value="1000">选择1000条数据</option> </select> </label> </form> <br /> <div id="show1">客户信息将在此处列出 ...</div> </body> </html> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |