原生js ajax 實例

如今原生js ajax 如今已經不多用了，jQuery框架等更方便；本人由於喜歡原生js，不喜歡框架，因此才用原生js，各位根據本身狀況使用

什麼是 XMLHttpRequest 對象？

XMLHttpRequest 對象用於在後臺與服務器交換數據。

XMLHttpRequest 對象是開發者的夢想，由於您可以：

• 在不從新加載頁面的狀況下更新網頁
• 在頁面已加載後從服務器請求數據
• 在頁面已加載後從服務器接收數據
• 在後臺向服務器發送數據

全部現代的瀏覽器都支持 XMLHttpRequest 對象。

更多詳情 請參考 w3school

// js 建立XMLHttpRequest 對象
function createXMLHttpRequest()
{
    var XMLHttpReq;
    try 
    {
        XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");//IE高版本建立XMLHTTP  
    }
    catch(E)
    {
        try
        {
            XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");//IE低版本建立XMLHTTP
        }
        catch(E)
        {
            try
            {
                XMLHttpReq = new XMLHttpRequest();//兼容非IE瀏覽器，直接建立XMLHTTP對象
            }
            catch(E)
            {
                alert("你的瀏覽器不支持XMLHTTP對象，請升級到IE6以上版本！");
                XMLHttpReq = false;
            }    
        }
        
    }
    return XMLHttpReq;
}

 

// url 地址
// type 同步或者異步  true|false（true，即爲異步方式，不用等待請求完成，便可執行ajax後面方法。若要將其設置爲false，則全部的請求均爲同步請求，在沒有返回值以前，同步請求將鎖住瀏覽器，用戶其它操做必須等待請求完成 才能夠執行。通常用true）
// parameter 參數格式爲 a=1&b=2&c=3
// callback 回調函數
function ajax(url,method,type,parameter,callback)
{
　　 // 獲取XMLHttpRequest對象 
    XMLHttpReq = createXMLHttpRequest();
    XMLHttpReq.open(method,url,type);
    
    // post 傳參須要添加上這個 不然 post 失敗
    if(method == 'post')
    {
        XMLHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    }

　　// 調用回調函數 
    XMLHttpReq.onreadystatechange = callback;

　　// 發送參數 
    XMLHttpReq.send(parameter);
}

 

// 回調函數
function callback_check_video()  
{
　　 // 0：請求未初始化（尚未調用 open()）。
    // 1：請求已經創建，可是尚未發送（尚未調用 send()）。
    // 2：請求已發送，正在處理中（一般如今能夠從響應中獲取內容頭）。
    // 3：請求在處理中；一般響應中已有部分數據可用了，可是服務器尚未完成響應的生成。
    // 4：響應已完成；您能夠獲取並使用服務器的響應了。
    // readyState 狀態爲4 響應已完成
    if (XMLHttpReq.readyState==4)  
    {  
        // 200表示訪問成功
        if (XMLHttpReq.status==200)  
        {  
            // 獲取相應文本
            var res = XMLHttpReq.responseText;
            // 如下爲處理相應數據邏輯根據本身業務邏輯作相應處理
            // 把json串 轉換爲對象
            var objRes = JSON.parse(res)；
            if(objRes.status != 0)
            {
                alert(objRes.msg)
                return false;
            }
            alert(objRes.msg)；
            window.location.reload();
        }  
        XMLHttpReq = null;
    }  
}

 

// 調用實例 此處爲post 
// 若是爲get方式，則把參數拼接到url中,method爲get,parameter爲null便可
function check_video(obj)
{
    var url = "";
    var method = "post";
    var type = true;

　　// js 獲取html標籤自定義屬性
    var check_type = obj.getAttribute('checkvideo');
    // 參數
    var parameter = "checkvideo="+check_type+"&videoid="+obj.getAttribute('videoid');
    ajax(url,method,type,parameter,callback_check_video);
}