網頁的非同步請求（Ajax）

摘要： JS原生Ajax操作(XMLHttpRequest) GET請求 1 var xmld=new XMLHttpRequest(); 2 xmld.open("GET","wan.php"+"?dd1=dong11&dd2=don...

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的跨域請求

如果在瀏覽器控制檯看到類似如下的錯誤，表示存在跨域請求資料，即兩個網頁不是在同一個伺服器上

解決方法如下，在訪問的頁面中新增響應頭內容

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 };