如何使用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('username').onblur=function(){
    var name=document.getElementById('username').value;
    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
  }
}
</script>

用戶名：  <input type="text" name="" id="username">

xx.php

<?php
print_r($_GET);
?>　

1、   IE不支持中文

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

POST提交

xx.html

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

用戶名： <input type="text" name="" id="username">

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兩種提交方式的區別！

以上是“如何使用AJAX”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！