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>

使用者名稱：  421386b101eb8d5ec278372a19030bc4

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結構取得傳回的資料###

以上是ajax 使用方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！