首頁 > web前端 > js教程 > Ajax的優缺點是什麼? ajax如何正確的使用

Ajax的優缺點是什麼? ajax如何正確的使用

寻∝梦
發布: 2018-09-10 16:06:38
原創
2466 人瀏覽過

這篇文章主要的敘述關於封裝ajax的介紹,還有關於ajax的異步請求,現在我們一起來看這篇文章吧

    Ajax

##        說道ajax到底什麼是ajax? ajax是一種創建互動網頁應用程式的技術。

        ajax的應用情境有:(地圖)即時更新,表單驗證等....


        ajax的優缺點:

#  實現局部更新(無刷新狀態下),2.減輕了伺服器端的壓力


            缺點:1.破壞了瀏覽器前進與後退機制(因為ajax自動更新)


##                      2.且一個Ajax請求增加了,且也會出現頁面載入慢的狀況。

                      以3.以搜尋引擎的支援比為較低。


                      4.ajax的安全性問題且不太好(可用資料加密解決)。  

        先說明:若要使用ajax必須要有後端環境的支援(伺服器端)。

  HTTP請求

            HTTP請求有兩種方式


           者「使用」網址與擷取資料        儲存量較少,安全係數比較低。


                POST:用於上傳數據,以POST安全性為一般比(GET好一點),容量幾乎是無限(多用於表單)。


    Ajax的使用

        使用ajax總共有4個步驟:1.建立ajax、2.連接伺服器、3.傳送請求、4.接受回傳值。

        創建

相容處理


var xhr = null;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
} else{
    xhr = new ActiveXObject("Mricosoft.XMLHTTP");
}
登入後複製

        連接伺服器

          "請求方式(GET/POST)",url路徑,「非同步/同步」)。

            第三個參數:true===》非同步、false===》同步。 (想看更多就到PHP中文網

AJAX開發手冊

欄位中學習)

            當請求方式為POST的時候,程式碼寫法如上;


#當請求方式為GET的時候,使用xhr.open("請求方式(GET/POST)",url路徑“?”請求資料  ,“非同步/同步”)。

        送上要求

#                使用xhr.send(選擇 .send(null ).

                當請求方式為POST的時候,請發送請求為xhr.send(請求資料)。

                若且使用POST的時候必須在xhr.send(請求資料)上方加上

        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
登入後複製
 

        使用ajax會想用一個事件readystatechange事件:當請求傳送到伺服器時,我們需要執行一些基於回應的操作。

        當readystatechange改變的時候,就會觸發這個事件執行。

        readyState:请求的状态,返回的是状态码(0 - 4):0(未初始化)open还没有调用、1(载入)已经调用了send()正在发送请求、2(载入完成)send方法已经完成  已经收到了全部的响应内容、3(解析)正在解析响应内容、4(完成)响应内容解析完成  可以在客户端用了。

        responseText:返回请求的内容。

        status:返回请求的结果码:返回200(成功)、返回404(未找到)、返回5**(5开头)(服务器错误)

        封装Ajax

        在封装ajax的时候会使用到参数传递,因此必须写个方法作为对象属性转换为ajax请求数据的方法

        下面是ajax封装,并举例:

function ajax(options){
    var xhr = null;
    var params = formsParams(options.data);
    //创建对象
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest()
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    // 连接
    if(options.type == "GET"){
        xhr.open(options.type,options.url + "?"+ params,options.async);
        xhr.send(null)
    } else if(options.type == "POST"){
        xhr.open(options.type,options.url,options.async);
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send(params);
    }
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            options.success(xhr.responseText);
        }
    }
    function formsParams(data){
        var arr = [];
        for(var prop in data){
            arr.push(prop + "=" + data[prop]);
        }
        return arr.join("&");
    }
}

ajax({
    url : "a.php",  // url---->地址
    type : "POST",   // type ---> 请求方式
    async : true,   // async----> 同步:false,异步:true 
    data : {        //传入信息
        name : "张三",
        age : 18
    },
    success : function(data){   //返回接受信息
        console.log(data);
    }
})
登入後複製

本篇文章到这就结束了(想看更多就到PHP中文网AJAX使用手册栏目中学习),有问题的可以在下方留言提问。

以上是Ajax的優缺點是什麼? ajax如何正確的使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板