Ajax

GET基本使用

  • 什么是Ajax?

    • AJAX 是與服務器交換數(shù)據(jù)并更新部分網(wǎng)頁的藝術抬驴，在不重新加載整個頁面的情況下。

  • 使用Ajax的五部曲：

    • 1.創(chuàng)建一個異步對象
      • let xmlhttp=new XMLHttpRequest();
    • 2.設置請求方式和請求地址
      • 格式：xmlhttp.open(method,url,async);
      • method：請求的類型缆巧；GET 或 POST
      • url：文件在服務器上的位置
      • async：true（異步）或 false（同步）, Ajax存在的意義就是true
    • 3.發(fā)送請求
      • xmlhttp.send();
    • 4.監(jiān)聽狀態(tài)的變化
      • xmlhttp.onreadystatechange = function (ev){};
      • onreadystatechange的五種狀態(tài)
        • 0: 請求未初始化
        • 1: 服務器連接已建立
        • 2: 請求已接收
        • 3: 請求處理中
        • 4: 請求已完成布持，且響應已就緒
    • 5.處理返回的結果
<button>發(fā)送請求</button>

window.onload = function (ev) {
    var oBtn = document.querySelector("button");
    oBtn.onclick = function (ev1) {
        // 1.創(chuàng)建一個異步對象
        var xmlhttp=new XMLHttpRequest();
        
        // 2.設置請求方式和請求地址
        xmlhttp.open("GET", "04-ajax-get.php", true);
        
        // 3.發(fā)送請求
        xmlhttp.send();
        
        // 4.監(jiān)聽狀態(tài)的變化
        xmlhttp.onreadystatechange = function (ev) {
            if(xmlhttp.readyState === 4){  // 判斷是否請求成功
                if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
                   xmlhttp.status === 304){  // 判斷是否接受到服務器返回的數(shù)據(jù)
                    // 5.處理返回的結果
                    console.log("接收到服務器返回的數(shù)據(jù)");
                }else{
                    console.log("沒有接收到服務器返回的數(shù)據(jù)");
                }
            }
        }
    }
}

GET-IE兼容

  • GET在IE瀏覽器存在的兩個問題
    • 1.兼容問題：創(chuàng)建對象時，XMLHttpRequest大部分瀏覽器都支持盅蝗，只有IE5和IE6不支持（需要用ActiveXObject）
    • 2.返回數(shù)據(jù)不更新問題：如果通過Ajax發(fā)送GET請求,那么IE瀏覽器認為同一個URL只有一個結果鳖链，也就是只會返回最初的結果
  • 問題1的兼容問題處理方法：
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp = new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  • 問題2的返回數(shù)據(jù)不更新問題處理方法：
    • 在設置請求地址的后面添加隨機的數(shù)值，使得每次發(fā)送請求的地址都不相同
      • 隨機數(shù)值方法1——獲取隨機0-1的數(shù)值：Math.random();
      • 隨機數(shù)值方法2——獲取當前時間：new Date().getTime();
xmlhttp.open("GET","05-ajax-get.txt?t="+(new Date().getTime()),true);

Ajax——GET封裝

<script src="myAjax.js"></script>
<script>
    window.onload = function () {
        let btn = document.querySelector('button');
        btn.onclick = function (ev) {
            ajax('try.php', {
                'userName': 'lnj',
                'userPwd': '123456'
            }, 3000, function (xhr) {
                alert(xhr.responseText);
            },function (xhr) {
                alert('請求失敗');
            });
        };
    }
</script>
</head>
<body>
<button>發(fā)送請求</button>

<?php
echo $_GET['userName'];
echo '<br>';
echo $_GET['userPwd'];
?>

  • 在URL中是不可以出現(xiàn)中文的,如果出現(xiàn)了中文需要轉碼,可以調(diào)用encodeURIComponent方法

  • URL中只可以出現(xiàn)字母/數(shù)字/下劃線/ASCII碼

function obj2str(obj) {
    obj = obj || {}; // 如果沒有傳參, 為了添加隨機因子,必須自己創(chuàng)建一個對象
    obj.t = new Date().getTime();
    let res = [];
    for(let key in obj){
        res.push(encodeURIComponent(key)+'='+encodeURIComponent(obj[key]));
    }
    return res.join('&');
}

function ajax(url, obj, timeout, success, error){
    // 0.對象轉換為字符串
    let str = obj2str(obj);
    // 1.創(chuàng)建一個異步
    let xmlhttp, timer;
    if(window.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest();
    }else{
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    // 2.設置請求方式和請求地址
    xmlhttp.open('GET', url+'?'+str,true);
    // 3.發(fā)送請求
    xmlhttp.send();
    // 4.監(jiān)聽狀態(tài)的變化
    xmlhttp.onreadystatechange = function (ev) {
        if(xmlhttp.readyState === 4){
            clearInterval(timer);
            if(xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status === 304){
                // 5.返回處理結果
                success(xmlhttp);
            }else{
                error(xmlhttp);
            }
        }
    }
    if(timeout){
        timer = setInterval(function () {
            console.log('超時');
            xmlhttp.abort();
            clearInterval(timer);
        },timeout);
    }

}

POST基本使用

POST和GET的區(qū)別

  • 1.以下代碼必須放到open和send之間，用setRequestHeader來添加HTTP頭
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  • 2.send()括號里需要寫明格式
xmlhttp.send("userName=zs&userPwd=321");
  • 3.路徑后面不同

POST封裝

<script src="myAjax.js"></script>
<script>
    window.onload = function () {
        let btn = document.querySelector('button');
        btn.onclick = function (ev) {
            ajax('try.php', {
                'userName': 'lnj',
                'userPwd': '123456'
            }, 3000, function (xhr) {
                alert(xhr.responseText);
            },function (xhr) {
                alert('請求失敗');
            });
        };
    }
</script>
</head>
<body>
<button>發(fā)送請求</button>

<?php
echo $_POST['userName'];
echo '<br>';
echo $_POST['userPwd'];
?>

  • 在URL中是不可以出現(xiàn)中文的,如果出現(xiàn)了中文需要轉碼,可以調(diào)用encodeURIComponent方法

  • URL中只可以出現(xiàn)字母/數(shù)字/下劃線/ASCII碼

function obj2str(obj) {
    obj = obj || {}; // 如果沒有傳參, 為了添加隨機因子,必須自己創(chuàng)建一個對象
    obj.t = new Date().getTime();
    let res = [];
    for(let key in obj){
        res.push(encodeURIComponent(key)+'='+encodeURIComponent(obj[key]));
    }
    return res.join('&');
}

function ajax(url, obj, timeout, success, error){
    // 0.對象轉換為字符串
    let str = obj2str(obj);
    // 1.創(chuàng)建一個異步
    let xmlhttp, timer;
    if(window.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest();
    }else{
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    // 2.設置請求方式和請求地址
    xmlhttp.open('POST', url,true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    // 3.發(fā)送請求
    xmlhttp.send(str);
    // 4.監(jiān)聽狀態(tài)的變化
    xmlhttp.onreadystatechange = function (ev) {
        if(xmlhttp.readyState === 4){
            clearInterval(timer);
            if(xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status === 304){
                // 5.返回處理結果
                success(xmlhttp);
            }else{
                error(xmlhttp.status);
            }
        }
    }
    if(timeout){
        timer = setInterval(function () {
            console.log('超時');
            xmlhttp.abort();
            clearInterval(timer);
        },timeout);
    }

}

Ajax-jQuery封裝

<script src="myAjax.js"></script>
<script>
    window.onload = function () {
        let btn = document.querySelector('button');
        btn.onclick = function (ev) {
            ajax({
            url:'try.php',
            data:{
                'userName': 'lnj',
                'userPwd': '123456'
            },
            timeout: 3000,
            type: 'post',
            success: function (xhr) {
                alert(xhr.responseText);
            },
            error: function (xhr) {
                alert('請求失敗');
            }});
        };
    }
</script>
</head>
<body>
<button>發(fā)送請求</button>

function obj2str(data) {
    data = data || {}; // 如果沒有傳參, 為了添加隨機因子,必須自己創(chuàng)建一個對象
    data.t = new Date().getTime();
    let res = [];
    for(let key in data){
        res.push(encodeURIComponent(key)+'='+encodeURIComponent(data[key]));
    }
    return res.join('&');
}

function ajax(option){
    // 0.對象轉換為字符串
    let str = obj2str(option.data);
    // 1.創(chuàng)建一個異步
    let xmlhttp, timer;
    if(window.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest();
    }else{
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    // 2.設置請求方式和請求地址
    if(option.type.toLowerCase() === "get"){
        xmlhttp.open(option.type, option.url+'?'+str,true);
        // 3.發(fā)送請求
        xmlhttp.send();
    }else{
        xmlhttp.open(option.type, option.url,true);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        // 3.發(fā)送請求
        xmlhttp.send(str);
    }

    // 4.監(jiān)聽狀態(tài)的變化
    xmlhttp.onreadystatechange = function (ev) {
        if(xmlhttp.readyState === 4){
            clearInterval(timer);
            if(xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status === 304){
                // 5.返回處理結果
                option.success(xmlhttp);
            }else{
                option.error(xmlhttp.status);
            }
        }
    }
    if(option.timeout){
        timer = setInterval(function () {
            console.log('超時');
            xmlhttp.abort();
            clearInterval(timer);
        }, option.timeout);
    }

}

XML

  • XML文件跟html很相似
    • XML前面必須寫上<?xml version="1.0" encoding="UTF-8" ?>
    • 后面必須有一個根節(jié)點芙委，也就是隨便寫一對自定義標簽
    • 然后在根節(jié)點里添加你想添加的內(nèi)容即可
示例：
<?xml version="1.0" encoding="UTF-8" ?>
<person>
    <name>李南江</name>
    <age>33</age>
</person>

  • PHP文件中執(zhí)行結果中有中文,必須在php文件頂部設置：header("content-type:text/html;charset=utf-8");

  • 如果PHP中需要返回XML數(shù)據(jù),也必須在PHP文件頂部設置：echo file_get_contents("XXX.xml");

示例：
<?php
header("content-type:text/xml; charset=utf-8");
echo file_get_contents("XXX.xml");  //可以把xml數(shù)據(jù)返回給前端

JSON

  • JSON和JS對象互轉
  • JSON字符串轉化為JS對象
    • 高版本瀏覽器使用JSON.parse()方法
    • 在低版本的IE中,不可以使用原生的JSON.parse方法, 但是可以使用json2.js這個框架來兼容
    • ==建議用eval("("+obj+")")來轉化==逞敷，這個方法無論是否是標準的JSON都可以轉化為JS對象
let obj = JSON.parse('{"a": "Hello", "b": "World"}'); //結果是 {a: 'Hello', b: 'World'}

注意點：
JSON文件內(nèi)容：
{error: 0, id: 新添加內(nèi)容的ID, time: 添加時間, acc: 點贊數(shù), ref: 點踩數(shù)}
返回的非標準的JSON字符串: {error: 0, id: 1, time: 1526541587, acc: 0, ref: 0}
標準的JSON字符串應該是: {"error": "0", "id": "1", "time": "1526541587", "acc": "0", "ref": "0"}
非標準JSON字符串，若是用JSON.parse()方法轉化的話灌侣，控制臺會報錯如下
VM179:1 Uncaught SyntaxError: Unexpected token e in JSON at position 1

  • JS對象轉化為JSON字符串推捐，使用JSON.stringify()方法
let json = JSON.stringify({a: 'Hello', b: 'World'}); //結果是 '{"a": "Hello", "b": "World"}'
  • 示例：
<script src="myAjax.js"></script>
<script>
    window.onload = function (ev) {
        var oBtn = document.querySelector("button");
        oBtn.onclick = function (ev) {
            ajax({
                type:"get",
                url:"XXX.php",
                success: function (xhr) {
                    var str = xhr.responseText;  //JSON是個txt文件
                    var obj = JSON.parse(str);
                    console.log(obj.name);
                    console.log(obj.age);
                },
                error: function (xhr) {
                    console.log(xhr.status);
                }
            })
        }
    }
</script>
</head>
<body>
<button>發(fā)送請求</button>

JSON文件：
{
    "name":"lnj",
    "age":"33"
}
  • PHP文件里直接寫file_get_contents，把JSON文件傳入即可
<?php

echo file_get_contents("XXX.txt");

==XML和JSON的選擇==：
在企業(yè)中侧啼，我們選擇JSON牛柒，因為JSON的體積比XML小一些，傳輸快痊乾，用戶體驗好

cookie

  • 會話跟蹤技術有兩種

    • cookie 客戶端
    • session 服務端

  • cookie作用:

    • 將網(wǎng)頁中的數(shù)據(jù)保存到瀏覽器中

  • cookie生命周期:

    • 默認情況下生命周期是一次會話(瀏覽器被關閉)
    • 如果通過expires=設置了過期時間,并且過期時間沒有過期, 那么下次打開瀏覽器還是存在
    • 如果通過expires=設置了過期時間,并且過期時間已經(jīng)過期了,那么會立即刪除保存的數(shù)據(jù)
var date = new Date();
date.setDate(date.getDate() - 1);  // 今天日期減一天
document.cookie = "age=33;expires="+date.toGMTString()+";";
alert(document.cookie);
  • cookie注意點:
    • cookie默認不會保存任何的數(shù)據(jù)
    • cookie不能一次性保存多條數(shù)據(jù),要想保存多條數(shù)據(jù),只能一條一條的設置
    • cookie有大小和個數(shù)的限制（瀏覽器不同皮壁，限制的不同）
      • 個數(shù)限制: 20~50
      • 大小限制: 4KB左右
document.cookie = "name=lnj;";
document.cookie = "age=33;";
alert(document.cookie);
// document.cookie =    "name=lnj;age=33;gender=male;";  //這是錯誤寫法，只能顯示出設置的第一條
  • cookie作用范圍:
    • 同一個瀏覽器的同一個路徑下訪問
      • 同一個文件夾內(nèi)不同文件也是算的
    • 如果在同一個瀏覽器中,默認情況下下一級路徑就可以訪問
    • 如果在同一個瀏覽器中,想讓上一級目錄也能訪問保存的cookie,那么需要添加一個path屬性才可以document.cookie = "path=/;"; /代表根目錄
    • 域名也是有講究的哪审，若二級域名不同蛾魄，也想訪問的話，需要添加domain屬性湿滓，設置domain=根域名
示例1：  
保存到了www.it666.com/jQuery/Ajax/路徑下,我們想在 www.it666.com/jQuery/Ajax/13-weibo/,和 www.it666.com/jQuery/ 路徑下也能訪問

document.cookie = "name=zs;path=/;";

示例2:  
我們在www.it666.com下面保存了一個cookie,那么我們在edu.it666.com中是無法訪問的
如果想在edu.it666.com中也能訪問,那么我們需要再添加一個domain屬性才可以;

document.cookie = "name=zs;path=/;domain=it666.com;";
alert(document.cookie);

cookie添加方法封裝

function addCookie(key, value, day, path, domain) {
    // 1.設置默認路徑
    let index = window.location.pathname.lastIndexOf('/');
    let currentPath = window.location.pathname.slice(0, index);
    path = path || currentPath;
    // 2.設置默認domain
    domain = domain || document.domain;
    // 3.設置過期時間
    if(!day){
        document.cookie = key+"="+value+";path="+path+";domain="+domain+";";
    }else {
        let date = new Date();
        date.setDate(date.getDate() + day);
        document.cookie = key+"="+value+";domain="+domain+";path="+path+";expires="+date.toGMTString()+";";
    }
}

cookie獲取和刪除方法封裝

  • 默認情況下只能刪除默認路徑中保存的cookie,如果想刪除指定路徑保存的cookie,那么必須在刪除的時候指定路徑才可以
function getCookie(key) {
    let res = document.cookie.split(';');
    for (let i = 0; i < res.length; i++){
        let temp = res[i].split('=');
        if(temp[0].trim() === key){
            return temp[1];
        }
    }
}
// console.log(getCookie('dat'));

function delCookie(key,path) {
    addCookie(key,getCookie(key),-1,path);
}
// delCookie('score','/');

hash

  • 設置
    • window.location.hash = 值;
window.location.hash = 3;
  • 獲取
    • window.location.hash.substring(1);
console.log(window.location.hash.substring(1));
//  截取索引為1以后的hash值滴须，其實就是返回#號后面的值
  • 相對于cookie的好處就是，同一個路徑叽奥，不同地方打開時依舊還是當初看的那一頁扔水；分享給別人時，你看的是哪頁朝氓，對方看到的就是哪一頁
最后編輯于 ：
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末魔市，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子膀篮，更是在濱河造成了極大的恐慌嘹狞，老刑警劉巖，帶你破解...
    沈念sama閱讀 210,914評論 6贊 490
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件誓竿，死亡現(xiàn)場離奇詭異磅网，居然都是意外死亡，警方通過查閱死者的電腦和手機筷屡，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,935評論 2贊 383
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門涧偷，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人毙死，你說我怎么就攤上這事燎潮。” “怎么了扼倘？”我有些...
    開封第一講書人閱讀 156,531評論 0贊 345
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵确封，是天一觀的道長除呵。 經(jīng)常有香客問我，道長爪喘，這世上最難降的妖魔是什么颜曾？ 我笑而不...
    開封第一講書人閱讀 56,309評論 1贊 282
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮秉剑，結果婚禮上泛豪，老公的妹妹穿的比我還像新娘。我一直安慰自己侦鹏，他們只是感情好诡曙，可當我...
    茶點故事閱讀 65,381評論 5贊 384
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布讲仰。 她就那樣靜靜地躺著芜抒，像睡著了一般。 火紅的嫁衣襯著肌膚如雪渔呵。 梳的紋絲不亂的頭發(fā)上聚请，一...
    開封第一講書人閱讀 49,730評論 1贊 289
  • 城市分裂傳說
    那天荠雕，我揣著相機與錄音，去河邊找鬼驶赏。 笑死，一個胖子當著我的面吹牛既鞠，可吹牛的內(nèi)容都是我干的煤傍。 我是一名探鬼主播，決...
    沈念sama閱讀 38,882評論 3贊 404
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼嘱蛋，長吁一口氣：“原來是場噩夢啊……” “哼蚯姆！你這毒婦竟也來了？” 一聲冷哼從身側響起洒敏，我...
    開封第一講書人閱讀 37,643評論 0贊 266
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤龄恋，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后凶伙，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體郭毕，經(jīng)...
    沈念sama閱讀 44,095評論 1贊 303
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,448評論 2贊 325
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年函荣，在試婚紗的時候發(fā)現(xiàn)自己被綠了显押。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,566評論 1贊 339
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡傻挂，死狀恐怖乘碑，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情金拒，我是刑警寧澤兽肤，帶...
    沈念sama閱讀 34,253評論 4贊 328
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站，受9級特大地震影響资铡，放射性物質(zhì)發(fā)生泄漏沉迹。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點故事閱讀 39,829評論 3贊 312
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一害驹、第九天 我趴在偏房一處隱蔽的房頂上張望鞭呕。 院中可真熱鬧，春花似錦宛官、人聲如沸葫松。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,715評論 0贊 21
  • 一樁弒父案底洗，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽腋么。三九已至，卻和暖如春亥揖，著一層夾襖步出監(jiān)牢的瞬間珊擂，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,945評論 1贊 264
  • 情欲美人皮
    我被黑心中介騙來泰國打工费变， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留摧扇，地道東北人。 一個月前我還...
    沈念sama閱讀 46,248評論 2贊 360
  • 代替公主和親
    正文 我出身青樓挚歧，卻偏偏與公主長得像扛稽，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子滑负，可洞房花燭夜當晚...
    茶點故事閱讀 43,440評論 2贊 348