AJAX封裝

AJAX

是異步向服務器請求數(shù)據(jù),實現(xiàn)不刷新瀏覽器更新數(shù)據(jù)

組成

異步的JS
xhr對象
其他JS
服務器的數(shù)據(jù)

AJAX特點

提高了頁面渲染速度
提高了用戶體驗
不需要插件支持

缺點

1.破壞了瀏覽器前進和后退機制（因為ajax自動更新機制
2.一個Ajax請求多了，也會出現(xiàn)頁面加載慢的情況。
3.搜索引擎的支持程度比較低。
4.ajax的安全性問題不太好（可以用數(shù)據(jù)加密解決）。

AJAX的基本過程

使用ajax一共有4個步驟：1.創(chuàng)建ajax、2.連接服務器、3.發(fā)送請求、4.接受返回值。

HTTP請求

HTTP請求有兩種方式

GET：用于獲取數(shù)據(jù)，GET是在URL上傳遞數(shù)據(jù)（網(wǎng)址后面的東西），存儲量較少，安全系數(shù)比較低。
POST：用于上傳數(shù)據(jù)，POST安全性一般比（GET好一些），容量幾乎是無限（多用于表單）。

AJAX GET請求 過程的簡單封裝

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="text" id="name">
    <input type="text" id="age">
    <input type="button" id="btn" value="提交">
    <script>
        var oa=document.getElementById('name')
        var ob=document.getElementById('age')
        var obtn=document.getElementById('btn')

        
        
        obtn.onclick=function(){
            ajaxGet("http://localhost/php/php-get.php",function(res){
                alert(res)
            },{
                user:oa.value,
                age:ob.value
            })            
        }


        function ajaxGet(url,fn,date){                                //url 為 接口   fn 為執(zhí)行方法  date 是發(fā)送的數(shù)據(jù)
            date=date||{}
            var str=""
            for(var i in date){
                str+=`${i}=${date[i]}&`            
            }
            var d = new Date()                                        //在url上拼接一個時間戳 避免瀏覽器緩存問題
            url=url+"?"+str+"sjc"+d.getTime()
            var xhr=new XMLHttpRequest();
                xhr.open('get',url);
                xhr.onreadystatechange=function(){
                    if(xhr.status==200&&xhr.readyState==4){
                        fn(xhr.responseText)
                    }else if(xhr.status!=200&&xhr.readyState==4){
                        fn(xhr.status)
                }
                xhr.send()
        }

    </script>
</body>
</html>

<?php
    $u = @$_GET["user"];
    $p = @$_GET["age"];
    // $u = @$_POST["user"];
    // $p = @$_POST["age"];

    echo "收到的數(shù)據(jù)是：".$u."-----".$p

?>

AJAX POST請求 過程的簡單封裝

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="text" id="name">
    <input type="text" id="age">
    <input type="button" id="btn" value="提交">
    <script>
        var oa=document.getElementById('name')
        var ob=document.getElementById('age')
        var obtn=document.getElementById('btn')

        

        obtn.onclick=function(){

            ajaxPost("http://localhost/php/php-post.php",function(res){
                alert(res)
            },{
                user:oa.value,
                age:ob.value
            })            
        }


        function ajaxPost(url,fn,date){
            date=date||{}
            var str=""
            for(var i in date){
                str+=`${i}=${date[i]}&`            
            }
            var d = new Date()
            url=url+"?"+"sjc="+d.getTime()
            console.log(url)
            var xhr=new XMLHttpRequest();
                xhr.open('post',url);
                xhr.onreadystatechange=function(){
                    if(xhr.status==200 && xhr.readyState==4){
                        fn(xhr.responseText)
                    }else if(xhr.status!=200&&xhr.readyState==4){
                        fn(xhr.status)
                }
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                xhr.send(str)
        }

    </script>
</body>
</html>

<?php

    // $u = @$_GET["user"];
    // $p = @$_GET["age"];
    $u = @$_POST["user"];
    $p = @$_POST["age"];

    echo "收到的數(shù)據(jù)是：".$u."-----".$p

?>

AJAX GET 和 POST 二合一的封裝

// 1.預設函數(shù)的執(zhí)行方式，和要傳入的參數(shù)，及要實現(xiàn)的功能
// ajax({
//     type:"get",             //可選，默認get
//     url:"",                 //必選
//     success:function(){},   //必選
//     error:function(){},     //可選，默認不處理
//     data:{}                 //可選，默認不發(fā)
// })

function ajax(options){
    // 2.解析參數(shù)，處理默認參數(shù)
    let {type,url,success,error,data} = options;
    type = type || "get";
    data = data || {};
    // 3.解析要發(fā)送的數(shù)據(jù)
    var str = "";
    for(var i in data){
        str += `${i}=${data[i]}&`;
    }
    // 4.根據(jù)發(fā)送方式處理url
    if(type == "get"){
        var d = new Date();
        url = url + "?" + str + "sjc=" + d.getTime();
    }
    // 5.開啟ajax
    var xhr = new XMLHttpRequest();
    xhr.open(type,url,true);
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            success(xhr.responseText);
        }else if(xhr.readyState == 4 && xhr.status != 200){
            // 6.首先保證ajax的過程結(jié)束了，如果http給失敗，才是真正的失敗
            error && error(xhr.status);
            // if(error) error(xhr.status);
        }
    }
    // 7.根據(jù)發(fā)送方式，決定發(fā)送的信息
    if(type == "get"){
        xhr.send()
    }else if(type == "post"){
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send(str.slice(0,str.length-1));
    }
}

AJAX GET/POST 和Jsonp三合一封裝

// 1.預設函數(shù)的執(zhí)行方式，和要傳入的參數(shù)，及要實現(xiàn)的功能
// ajax({
//     type:"get",             //可選，默認get
//     url:"",                 //必選
//     success:function(){},   //必選
//     error:function(){},     //可選，默認不處理
//     data:{}                 //可選，默認不發(fā)
//     timeout:毫秒數(shù)           //可選，默認500，延遲時間，超出時間就出錯誤，用在jsonp身上
// })

function ajax(options){
    // 2.解析參數(shù)，處理默認參數(shù)
    let {type,url,success,error,data,timeout} = options;
    type = type || "get";
    data = data || {};
    timeout = timeout || 500;
    // 3.解析要發(fā)送的數(shù)據(jù)
    var str = "";
    for(var i in data){
        str += `${i}=${data[i]}&`;
    }
    // 4.根據(jù)發(fā)送方式處理url
    // Jsonp1.處理url和數(shù)據(jù)
    if(type == "get" || type == "jsonp"){
        var d = new Date();
        url = url + "?" + str + "sjc=" + d.getTime();
    }
    
    // Jsonp2.區(qū)分jsonp和ajax的功能
    if(type === "jsonp"){
        var script = document.createElement("script");
        script.src = url;
        document.body.appendChild(script);

        window[data[data.columnName]] = function(res){
            success && success(res);
            error = null;
        }
        
        // Jsonp3.jsonp的失敗(超時)
        setTimeout(() => {
            error && error("timeout");
            success = null;
        }, timeout);
    }else{
        // 5.開啟ajax
        var xhr = new XMLHttpRequest();
        xhr.open(type,url,true);
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
                success(xhr.responseText);
            }else if(xhr.readyState == 4 && xhr.status != 200){
                // 6.ajax執(zhí)行成功 但網(wǎng)絡出錯 才報錯
                error && error(xhr.status);
                // if(error) error(xhr.status);
            }
        }
        // 7.根據(jù)發(fā)送方式，決定發(fā)送的信息
        if(type == "get"){
            xhr.send()
        }else if(type == "post"){
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xhr.send(str.slice(0,str.length-1));//去掉多余的&
        }
    }
}

AJAX GET/POST 和Jsonp三合一封裝的調(diào)用

ajax({
    type:"get",             //可選，默認get
    url:"",                 //必選
    success:function(){},   //必選
    error:function(){},     //可選，默認不處理
    data:{}                 //可選，默認不發(fā)
    timeout:毫秒數(shù)           //可選，默認500，延遲時間，超出時間，出錯誤，用在jsonp身上
})
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • 原生js的ajax請求 傳統(tǒng)方法的缺點: 傳統(tǒng)的web交互是用戶觸發(fā)一個http請求服務器,然后服務器收到之后,在...
    暮雨默默閱讀 1,006評論 0贊 2
  • 一、Ajax封裝 function request(){ ajax({ type:'POST',//請求類型 ur...
    晚溪呀閱讀 370評論 0贊 0
  • 用ajax的局部刷新來給網(wǎng)站提升用戶體驗我們已經(jīng)用過很多了，ajax已然成為了前端開發(fā)最重要的“工具”之一。 但是...
    酒暖花深Q閱讀 310評論 0贊 2
  • AJAX 原生js操作ajax 1.創(chuàng)建XMLHttpRequest對象 var xhr = new XMLHtt...
    碧玉含香閱讀 3,563評論 0贊 7
  • 今天是新年開工的日子，盡管19年已經(jīng)過去一個多月了，但今天才大家真正準備奮斗起來的日子。 而我從畢業(yè)到如今7年半已...
    陳宋song閱讀 242評論 0贊 7

友情鏈接更多精彩內(nèi)容