網頁的非同步請求(Ajax)
JS原生Ajax操作(XMLHttpRequest)
GET請求
1 var xmld=new XMLHttpRequest(); 2 xmld.open("GET","wan.php"+"?dd1=dong11&dd2=dong22"); //開啟頁面 3 xmld.setRequestHeader("dh","donghhhh");//設定請求頭 4 xmld.send(null); //傳送資料需要手動在url新增 5 xmld.onreadystatechange=function(){ 6 if(xmld.readyState == 4){ 7//獲取返回資料 8alert(xmld.getResponseHeader("Server"));//獲取響應頭 9alert(xmld.status+"--"+xmld.statusText);//得到如200:ok、404:Not Found 等等 10alert(xmld.responseText); //得到字串 11//var xx=xmld.responseXML //得到HTML物件 12} 13 };
POST請求
1 var xmld=new XMLHttpRequest(); 2 xmld.open("POST","wan.php"); //開啟頁面 3 xmld.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//設定請求頭 4 xmld.send("dd1=dong11&dd2=dfikij"); //傳送資料 5 xmld.onreadystatechange=function(){ 6if(xmld.readyState == 4){ 7//獲取返回資料 8alert(xmld.getResponseHeader("Server"));//獲取響應頭 9alert(xmld.status+"--"+xmld.statusText);//得到如200:ok、404:Not Found 等等 10alert(xmld.responseText); //得到字串 11//var xx=xmld.responseXML //得到HTML物件 12} 13 };
相容性問題
if(XMLHttpRequest){ //系列操作 }else{ alert("瀏覽器不支援"); }
利用iframe模擬ajax
實現表單提交的返回結果在iframe中進行顯示,實現主頁面不重新整理效果,也可以模擬上傳檔案,推薦使用,相容性最好
1 <iframe id="ifd" name="dongff"></iframe> 2 <form action="wan.php" method="post" target="dongff"> 3 <input type="text" name="dd1"> 4 <input type="text" name="dd2"> 5 <input type="submit" onClick="subd()"> 6 </form> 7 //獲取返回內容 8 <script src="jquery-3.3.1.min.js"></script> 9 <script> 10 //在點選提交按鈕時給iframe新增載入完畢事件 11 function subd(){ 12//等待iframe內容載入完畢時進入 13$("#ifd").on('load',function(){ 14//得到iframe的內容 15var ifdtext=$("#ifd").contents().find("body").text(); 16alert(ifdtext); 17}); 18 } 19 </script>
基於jquery的ajax
Get請求,引數(URL,資料,回撥函式)
$.get("wan.php",{namex:"myname",passwd:"123"},function(datax){ $("p").text(datax);//datax為返回的資料 });
Post請求,引數與get一致
$.post("wan.php",{namex:"myname",passwd:"123"},function(datax){ $("p").text(datax);//datax為返回的資料 });
載入HTML碎片,返回結果會覆蓋掉id為div1id標籤的內容
$("#div1id").load("uu.html",function(a,b,c){ if(b=="error"){ $("#div1id").text("載入失敗"); } });
結合版:
1 $.ajax({ 2url:"wan.php", 3type:"POST", 4 //headers:{"dongh":"dongssssss"}, //設定請求頭,涉及跨域時不要進行設定 5data:{"xx":123456,"user":"dddd"}, 6success:function (data) { 7alert(data); 8}, 9error: function (XMLHttpRequest, textStatus, errorThrown) { 10// 狀態碼 11alert(XMLHttpRequest.status); 12// 狀態 13alert(XMLHttpRequest.readyState); 14// 錯誤資訊 15alert(textStatus); 16} 17 18 });
Ajax的跨域請求
如果在瀏覽器控制檯看到類似如下的錯誤,表示存在跨域請求資料,即兩個網頁不是在同一個伺服器上
Access to XMLHttpRequest at 'http://193.112.87.66/add.php?namex=myname&passwd=123' from origin 'http://192.168.43.21:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
解決方法如下,在訪問的頁面中新增響應頭內容
1 <?php 2 // 指定允許其他域名訪問 3 header('Access-Control-Allow-Origin:*'); 4 // 響應型別 5 header('Access-Control-Allow-Methods:POST'); 6 // 響應頭設定 7 header('Access-Control-Allow-Headers:x-requested-with,content-type');
非同步檔案上傳
自定義檔案上傳按鈕(點選試試效果):
東檔案
利用頁內標籤定位浮動,實現等大的input標籤浮於div標籤之上,並將自身透明度設定為零,span的標籤為顯示的文字
1 <div style="height: 50px;width: 80px;background-color:aqua;text-align: center;line-height: 50px;position: relative"> 2 <span>東檔案</span> 3 <input type="file" id="infileid" style="height: 50px;width: 80px;position: absolute;opacity: 0; bottom: 0px;left: 0px;top: 0px;right: 0px"> 4 </div>
原生ajax檔案上傳
1 function subd(){ 2 3var fileobjx=document.getElementById("infileid").files[0];//得到檔案物件 4//建立form表單物件 5var formobjx=new FormData(); 6formobjx.append("namexx","dong111"); 7formobjx.append("dongfile",fileobjx); 8 9var xmld=new XMLHttpRequest(); 10xmld.open("POST","wan.php"); //開啟頁面 11xmld.send(formobjx); //傳送form資料 12xmld.onreadystatechange=function(){ 13if(xmld.readyState == 4){ 14alert(xmld.responseText); //得到字串 15} 16 };
Jquery的ajax檔案上傳
1 function subd(){ 2var fileobjx=document.getElementById("infileid").files[0];//得到檔案物件 3//建立form表單物件 4var formobjx=new FormData(); 5formobjx.append("namexx","dong111"); 6formobjx.append("dongfile",fileobjx); 7$.ajax({ 8url:"wan.php", 9type:"POST", 10data:formobjx, 11processData: false, 12contentType: false, 13success:function (data) { 14alert(data); 15}, 16error: function (XMLHttpRequest, textStatus, errorThrown) { 17// 錯誤資訊 18alert(textStatus); 19} 20 21}); 22 23 };