Ajax基礎

時間 2019-11-15

標籤 ajax 基礎欄目 Ajax 简体版

原文原文鏈接

什麼是 ajax

ajax技術可以向服務器請求額外的數據而無須加載頁面，會帶來更好的用戶體驗。javascript

ajax 即「Asynchronous JavaScript and XML」（異步 JavaScript 和 XML），也就是無刷新數據讀取。html

http 請求

首先須要瞭解 http 請求的方法（GET 和 POST）。java

GET 用於獲取數據。GET 是在 URL 中傳遞數據，它的安全性低，容量低。ajax

POST 用於上傳數據。POST 安全性通常，容量幾乎無限。安全

ajax 請求

ajax 請求通常分紅 4 個步驟。服務器

一、建立 ajax 對象

在建立對象時，有兼容問題：異步

var oAjax = new XMLHttpRequest();   //for ie6 以上
var oAjax = new ActiveXObject('Microsoft.XMLHTTP'); //for ie6

合併上面的代碼：url

var oAjax = null;
if(window.XMLHttpRequest){
    oAjax = new XMLHttpRequest();
}else{
    oAjax = new ActiveXObject('Microsoft.XMLHTTP');
}

二、鏈接服務器

在這裏會用到 open() 方法。open() 方法有三個參數，第一個參數是鏈接方法即 GET 和 POST，第二個參數是 URL 即所要讀取數據的地址，第三個參數是否異步，它是個布爾值，true 爲異步，false 爲同步。spa

oAjax.open('GET', url, true);

三、發送請求

send() 方法。code

oAjax.send();

四、接收返回值

onreadystatechange 事件。當請求被髮送到服務器時，咱們須要執行一些基於響應的任務。每當 readyState 改變時，就會觸發 onreadystatechange 事件。

readyState：請求狀態，返回的是整數（0-4）。

0（未初始化）：尚未調用 open() 方法。

1（載入）：已調用 send() 方法，正在發送請求。

2（載入完成）：send() 方法完成，已收到所有響應內容。

3（解析）：正在解析響應內容。

4（完成）：響應內容解析完成，能夠在客戶端調用。

status：請求結果，返回 200 或者 404。

200 => 成功。

404 => 失敗。

responseText：返回內容，即咱們所須要讀取的數據。須要注意的是：responseText 返回的是字符串。

oAjax.onreadystatechange=function(){
    if(oAjax.readyState==4){
        if(oAjax.status==200){
            fnSucc(oAjax.responseText);
        }else{
            if(fnFaild){
                fnFaild();
            }
        }
    }
};

將以上代碼進行封裝：

function ajax(url, fnSucc, fnFaild){
    //1.建立對象
    var oAjax = null;
    if(window.XMLHttpRequest){
        oAjax = new XMLHttpRequest();
    }else{
        oAjax = new ActiveXObject("Microsoft.XMLHTTP");
    }
      
    //2.鏈接服務器  
    oAjax.open('GET', url, true);   //open(方法, url, 是否異步)
      
    //3.發送請求  
    oAjax.send();
      
    //4.接收返回
    oAjax.onreadystatechange = function(){  //OnReadyStateChange事件
        if(oAjax.readyState == 4){  //4爲完成
            if(oAjax.status == 200){    //200爲成功
                fnSucc(oAjax.responseText) 
            }else{
                if(fnFaild){
                    fnFaild();
                }
            }
        }
    };
}

最後附上實例：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>ajax基礎</title>
</head>
<body>
    點擊按鈕的時候，讀取abc.txt<input id="btn" type="button" value="讀取"/><br/>
    <div id="con"></div>
</body>
</html>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
window.onload = function(){
    var oBtn = document.getElementById('btn');
    var oCon = document.getElementById('con');
    oBtn.onclick = function(){
        ajax('abc.txt',function(str){
            oCon.innerHTML = str;
        });
    }
}
</script>

abc.txt 內容：

這是ajax調用的內容1。
這是ajax調用的內容2。
這是ajax調用的內容3。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。