原生Ajax之GET、POST請求
ajax可以接收什麼資訊?
答:瀏覽器可以接收的資訊ajax都可以接收,例如字串、html標籤、css樣式內容、xml內容、json內容等等。
http請求方式:post 、get 、put 、heade、delete、trace Connect 、options….ajax 物件成員:
屬性成員:
1.responseText
: 以字串形式接受服務端返回的資訊
2.readyState
: ajax物件的狀態
0:ajax物件建立完畢
1:已經呼叫open方法
2:已經呼叫send方法
3:資料已經返回一部分
4:資料返回完畢
onreadystatechange
: 事件屬性(對講機)
readyState屬性值發生變化的時候該事件被觸發執行,為了獲得較多的狀態細資訊,在物件建立完畢後設置該事件最多隻能感知readyState的1/2/3/4狀態值方法成員:
open()
建立一個新的http請求
send()
把http請求傳送給服務端
responseText
先接受資料
readyState
是: AJAX物件的維持狀態 xhr.readyState == 4;表示資料接受完畢
Onreadystatechange
:事件監聽 屬於事件on 用來判斷readyState的狀態值,判斷資料是否已經接受完畢。
ajax物件.open(get/post, 請求地址);
GET請求
<script type="text/javascript">
function f1(){
var nm = document.getElementById('username).value;
//對特殊字元進行處理
nm = encodeURLComponent(nm);
//①建立物件
var xhr = new XMLHttpRequest();
//④設定事件,感知readyState狀態變化,進而獲得伺服器的返回資訊
xhr.onreadystatechange = function (){
if(xhr.readyState == 4){
alert(xhr.responseText); //返回資料
}
//② 建立新的http請求
xhr.open('get','./03.php?id='+nm);
//③ 傳送請求
xhr.send(null);
}
}
</script>
post請求
<script type="text/javascript">
function checkname(){
var nm = document.getElementById('username).value;
//對特殊字元進行處理
nm = encodeURLComponent(nm);
//①建立物件
var xhr = new XMLHttpRequest();
//把需要傳遞的資訊轉化為字串格式
var info = "name"+nm+"&ag=20";
//④設定事件,感知readyState狀態變化,進而獲得伺服器的返回資訊
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
alert(xhr.responseText); //返回資料
}
//② 建立新的http請求
//post方式傳遞資料是模擬form表單方式傳遞的資料
xhr.open('get','./04.php?color=red');
//設定http頭協議,把傳遞的post資料轉化為xml格式
//setRequestHeader方法必須放在open方法的後邊呼叫
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
//③ 傳送請求
xhr.send(info);
}
}
</script>
ajax對快取的處理
動態程式檔案避免快取效果:
① 保證每次請求都是不同的請求 [推薦使用]
② 設定header頭禁止瀏覽器快取當前的動態頁面方法一、請求地址後面新增隨機數
+Math.random();
方法二、 在服務氣端(php)設定響應頭
//設定header頭,禁止瀏覽器快取當前頁面
header('Cache-Control:no-cache');
header('Pragma:no-cache');
header('Expires:-1');