4步教你怎麼AJAX

AJAX即「Asynchronous Javascript And XML」（非同步JavaScript和XML），指一種建立互動式網頁應用程式的網頁開發技術。

AJAX = 非同步 JavaScript和XML（標準通用標記語言的子集）。

AJAX 是一種用於建立快速動態網頁的技術。

AJAX 是一種在無需重新載入整個網頁的情況下，能夠更新部分網頁的技術。 [1] 

透過在背景與伺服器進行少量資料交換，AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某個部分進行更新。

傳統的網頁（不使用 AJAX）如果需要更新內容，必須重載整個網頁頁面。

本篇文章主要介紹了AJAX的使用的相關知識。

AJAX作為非同步傳輸，局部刷新非常方便，用途很廣！

首先，對於AJAX的使用有4步驟：

1.建立AJAX物件

var xmlHttp = new XMLHttpRequest();

2.建立連線（'提交方式'，'Url位址'）

xmlHttp.open('get','./ AJAX_XML.xml');

3.判斷ajax準備狀態及狀態碼

xmlHttp.onreadystatechange = function(){

    if (xmlHttp.readyState==4 && xmlHttp.status==200) {
  }
}

##4.傳送請求

xmlHttp.send(null);    //get方式參數為null,post方式，參數為提交的參數

#以下以非同步提交使用者名稱（輸入使用者名稱之後，非同步提交後台判斷，前台立刻提示是否已註冊，不用提交時再判斷！）

GET方式提交

xx.html

#

<script type="text/javascript">
window.onload=function(){
  document.getElementById(&#39;username&#39;).onblur=function(){
    var name=document.getElementById(&#39;username&#39;).value;
    var req=new XMLHttpRequest();
    req.open(&#39;get&#39;,&#39;4-demo.php?name=&#39;+name);
    req.onreadystatechange=function(){
      if(req.readyState==4 && req.status==200){
        alert(req.responseText);
      }
    }
    req.send(null);  //如果send()方法中没有数据，要写null
  }
}
</script>

使用者名稱：  24e6eba869ed92c795f3489ee8e1929f

#xx.php

##

<?php
print_r($_GET);
?>　

1、   IE不支援中文

2、   =、&與請求的字串的關鍵字混淆。

POST提交

#xx.html

<script type="text/javascript">
window.onload=function(){
  document.getElementById(&#39;username&#39;).onblur=function(){
    var name=document.getElementById(&#39;username&#39;).value;
    name=encodeURIComponent(name);
    var req=new XMLHttpRequest();
    req.open(&#39;post&#39;,&#39;5-demo.php?age=&#39;+20);
    req.onreadystatechange=function(){
      if(req.readyState==4 && req.status==200){
        alert(req.responseText);
      }
    }
  req.setRequestHeader(&#39;Content-Type&#39;,&#39;application/x-www-form-urlencoded&#39;);
    req.send(&#39;name=&#39;+name);  
  }
}
</script>

使用者名稱：

306390a7801fb48b5463fcd9f5d4c11f

xx.php

<?php
print_r($_POST);
print_r($_GET);
?>

1、透過send()傳送資料

2、必須設定setRequestHeader()將傳遞的參數轉換成XML格式

3、post提交可以直接提交中文，不需要轉碼4、post請求中的字元也會和URL中的&、=字元相混淆，所以建議也要使用encodeURIComponent()編碼

5、在POST提交的同時，可以進行GET提交######解決###### IE不支援中文   =、&與請求的字串的關鍵字相混淆###### 問題######在js中透過encodeURIComponent()進行編碼即可。 #########

window.onload=function(){
  document.getElementById('username').onblur=function(){
    var name=document.getElementById('username').value;
    name=encodeURIComponent(name);  //编码
    var req=new XMLHttpRequest();
    req.open('get','4-demo.php?name='+name);
    req.onreadystatechange=function(){
      if(req.readyState==4 && req.status==200){
        alert(req.responseText);
      }
    }
    req.send(null);  //如果send()方法中没有数据，要写null
  }
}

#########1、req.responseText：取得傳回的字串######2、req.responseXML：按DOM結構取得傳回的資料# ###########注意post/get兩種提交方式的差異！ ##########

以上是4步教你怎麼AJAX的詳細內容。更多資訊請關注PHP中文網其他相關文章！