AJAX,即 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)
XMLHttpRequest 用于在后台与服务器交换数据
var xmlhttp; if(window.XMLHttpRequest){ //ie7以上、谷歌、火狐支持 xmlhttp = new XMLHttpRequest(); }else{ //老版本的ie5、6使用ActiveX xmlhttp = new ActiveXObject(); }
xmlhttp.open("get","01.txt",true);
xmlhttp.send();
200: "OK"
404: 未找到页面
xmlhttp.onreadystatechange=function(){
//表示响应已就绪 if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
document.getElementById("box").innerHTML = xmlhttp.responseText; } }
注:JavaScript 会等到服务器响应就绪才继续执行。若服务器繁忙或缓慢,应用程序会挂起或停止。
<input type="button" id="btn" value="获取数据"> <div id="box"></div> <script> window.onload = function(){ var btn = document.getElementById("btn"); btn.onclick = function(){ var xmlhttp; if(window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); }else{
xmlhttp = new ActiveXObject(); } xmlhttp.open("get","01.txt",true); xmlhttp.send(); xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ document.getElementById("box").innerHTML = xmlhttp.responseText; } } } }
</script>
注:get 方式发送的请求会有缓存现象,为避免这种情况,向url添加一个唯一的ID,如下:
//方法一
xmlhttp.open("get","01.txt?t=" + Math.random(),true);
//方法二
xmlhttp.open("get","01.txt?t=" + new Date().getTime(),true);
<input type="button" id="btn" value="获取数据"> <div id="box"></div> <script> window.onload = function(){ var btn = document.getElementById("btn"); btn.onclick = function(){ var xmlhttp; if(window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); }else{ xmlhttp = new ActiveXObject(); } xmlhttp.open("post","02.php",true); xmlhttp.send(); xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ document.getElementById("box").innerHTML = xmlhttp.responseText; } } } }
</script>
注:如需像 HTML 表单那样 POST 数据,用 setRequestHeader(头名称,头的值) 添加 HTTP 头。如下:
xmlhttp.open("post","02.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send();
document.getElementById("box").innerHTML = xmlhttp.responseText;
<input type="button" id="btn" value="获取数据"> <div id="box"></div> <script> window.onload = function () { var btn = document.getElementById("btn"); btn.onclick = function () { var xmlhttp; if(window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); }else{ xmlhttp = new ActiveXObject(); } xmlhttp.open("get","03.xml?t=" + Math.random(),true); xmlhttp.send(); xmlhttp.onreadystatechange = function () { if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ var obj = xmlhttp.responseXML; var arrs = obj.getElementsByTagName("title"); var str = ""; for(var i = 0;i < titles.length;i++){ str += arrs[i].innerHTML; document.getElementById("box").innerHTML = str; } } } } }
</script>
<input type="button" id="btn" value="获取数据"> <ul id="list"></ul> <script> window.onload = function () { var btn = document.getElementById("btn"); btn.onclick = function () { var xmlhttp; if(window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); }else{ xmlhttp = new ActiveXObject(); } xmlhttp.open("get","04.json?t=" + Math.random(),true); xmlhttp.send(); xmlhttp.onreadystatechange = function () { if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ var res = JSON.parse(xmlhttp.responseText); var arr = res.students; for(var i = 0;i < arr.length;i++){ var li = document.createElement("li"); li.innerHTML = arr[i].name; document.getElementById("list").appendChild(li); } } } } } </script>
callback 函数是一种以参数形式传递给另一个函数的函数。
function myFunction(){ loadXMLDoc("ajax_info.txt",function(){ if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ document.getElementById("box").innerHTML = xmlhttp.responseText; } }); }
如对本文有疑问, 点击进行留言回复!!
offset、client、scroll (width,height、left,top、X,Y)
网友评论