AJAX的使用方法詳解

更新時(shí)間：2017年04月29日 11:02:44 作者：下頁(yè)、再停留

本篇文章主要介紹了AJAX的使用的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧

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

首先，對(duì)于AJAX的使用有4步：

1.創(chuàng)建AJAX對(duì)象

var xmlHttp = new XMLHttpRequest();

2.建立連接（‘提交方式'，‘Url地址'）

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

3.判斷ajax準(zhǔn)備狀態(tài)及狀態(tài)碼

xmlHttp.onreadystatechange = function(){

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

4.發(fā)送請(qǐng)求

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

以下以異步提交用戶(hù)名（輸入用戶(hù)名之后，異步提交后臺(tái)判斷，前臺(tái)立馬提示是否已注冊(cè)，不用提交時(shí)再判斷?。?/p>

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()方法中沒(méi)有數(shù)據(jù)，要寫(xiě)null
  }
}
</script>

用戶(hù)名： <input type="text" name="" id="username">

xx.php

<?php
print_r($_GET);
?>

1、 IE不支持中文

2、 =、&與請(qǐng)求的字符串的關(guān)鍵字相混淆。

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>

用戶(hù)名： <input type="text" name="" id="username">

xx.php

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

1、通過(guò)send()發(fā)送數(shù)據(jù)

2、必須設(shè)置setRequestHeader()將傳遞的參數(shù)轉(zhuǎn)成XML格式

3、post提交可以直接提交中文，不需要轉(zhuǎn)碼

4、post請(qǐng)求中的字符也會(huì)和URL中的&、=字符相混淆，所以建議也要使用encodeURIComponent()編碼

5、在POST提交的同時(shí)，可以進(jìn)行GET提交

解決 IE不支持中文 =、&與請(qǐng)求的字符串的關(guān)鍵字相混淆 問(wèn)題

在js中通過(guò)encodeURIComponent()進(jìn)行編碼即可。

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()方法中沒(méi)有數(shù)據(jù)，要寫(xiě)null
  }
}

1、req.responseText：獲取返回的字符串

2、req.responseXML：按DOM結(jié)構(gòu)獲取返回的數(shù)據(jù)

注意post/get兩種提交方式的區(qū)別！

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家!

您可能感興趣的文章: