亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 145
粉絲 7
評(píng)論 7
訪問(wèn)量 198685
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
JS進(jìn)階知識(shí)：數(shù)組、JSON、Ajax請(qǐng)求和跨域請(qǐng)求
李東亞1??3????12?
原創(chuàng)
919人瀏覽過(guò)

數(shù)組操作函數(shù)

1.從尾部push()和pop()進(jìn)出數(shù)據(jù)
2.unshift()和shift從頭部進(jìn)出數(shù)據(jù)
3.join(): 與字符串的split()相反,將數(shù)組轉(zhuǎn)通過(guò)指定連接組成字符串返回
4.concat()數(shù)組合并
5.slice(start,end): 返回?cái)?shù)組中的部分成員(創(chuàng)建副本)
6.splice(開始索引,刪除的數(shù)量,插入的數(shù)據(jù)…): 數(shù)組的增刪改,它的本職工作是刪除元素
7.sort()數(shù)組排數(shù)默認(rèn)（按字母排序),數(shù)值排序arr.sort((a,b)=>a-b);
8.map(callback)數(shù)組遍歷并且有返回值
9.filter(callback)過(guò)濾數(shù)組
10.reduce((prev, curr) => prev + curr,prev初始值)數(shù)組累加操作

JSON語(yǔ)法

1.JSON數(shù)組類型：對(duì)象,數(shù)組,數(shù)值,字符串,布爾值,null
2.JSON語(yǔ)法相關(guān)函數(shù)：

  • JSON.stringify(data,filter,format)
  • JSON.parse(str,filter);

Ajax請(qǐng)求和跨域請(qǐng)求

1.請(qǐng)求分為兩種：

  • 同步: 前端發(fā)請(qǐng)求, 必須等到后端響應(yīng)完成,才允許發(fā)送另一個(gè)請(qǐng)求
  • 異步: 前端發(fā)請(qǐng)求后不等待后端響應(yīng)結(jié)果繼續(xù)執(zhí)行,后端響應(yīng)完成通過(guò)事件通知前端處理
    2.Ajax屬于異步請(qǐng)求；請(qǐng)求類型有
  • get:把參數(shù)包含在URL中
  • post:通過(guò)request body傳遞參數(shù)

3.Ajax請(qǐng)求的步驟：

  • 1.創(chuàng)建XHR對(duì)象：
    const xhr=new XMLHtppRequest();
  • 2.配置參數(shù)
    xhr.open("type",url);
  • 3.處理請(qǐng)求響應(yīng)
    xhr.onload=callback();
  • 4.發(fā)送請(qǐng)求：
    xhr.send();

4.跨域請(qǐng)求：

1.同源策略:同源指: 協(xié)議相同,域名/主機(jī)名相同,端口相同

  • 為請(qǐng)求的安全,瀏覽器禁止通過(guò)腳本發(fā)起一個(gè)跨域的請(qǐng)求
  • 只允許通過(guò)腳本發(fā)起基于同源的請(qǐng)求

2.CORS腳本跨域請(qǐng)求的目標(biāo)允許訪問(wèn)設(shè)置:header('Access-Control-Allow-Origin:$url');$url有三種:網(wǎng)站名(協(xié)議域名端口)|*(允許任何跨域請(qǐng)求)|true(帶cookie的跨域請(qǐng)求)

3.JSONP跨域請(qǐng)求:通過(guò)腳本生成一個(gè)帶有src的script標(biāo)簽來(lái)訪問(wèn)跨域目標(biāo)文件,目標(biāo)文件返回信息,處理生成新的腳本(script)代碼并執(zhí)行生成新的頁(yè)面內(nèi)容;(一般是提前寫一個(gè)函數(shù),目標(biāo)文件返回函數(shù)名調(diào)用函數(shù),執(zhí)行生成新的內(nèi)容);

代碼演練

1.字符串和數(shù)組常見(jiàn)函數(shù)演練

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>字符串和數(shù)組操作方法</title>
  8. </head>
  9. <body>
  11. </body>
  12. <script type="text/javascript">
  13.     // 字符串操作函數(shù)
  14.     let str="you are wold!";
  16.     let chinastr="你好！";
  17.     const lg=console.log;
  19.     // 字符串長(zhǎng)度
  20.     lg(str);
  21.     lg(str.length);
  22.     lg(chinastr.length);
  23.     // 拼接字符串等同于“+”
  24.     lg(str.concat('hello'));
  25.     // 把字母轉(zhuǎn)換成大寫
  26.     lg(str.toUpperCase());
  27.     //把字母轉(zhuǎn)換成小寫
  28.     lg(str.toUpperCase().toLowerCase());
  29.     // str.slice(start,end)
  30.     let str1=str.slice(1,6);
  31.     lg(str1);
  32.     let str2=chinastr.slice(1,2);
  33.     lg(str2);
  34.     //str.substr(start,num)
  35.     str1=str.substr(1,6);
  36.     lg(str1);
  37.     str2=chinastr.substr(1,2);
  38.     lg(str2);
  39.     //trim(),去除字符串兩端空格，制表符tab 換行符；不支持自定義
  40.     str="  you are word!  ";
  41.     lg(str.length);
  42.     lg(str.trim().length);
  43.     // lg(str);
  44.     //返回匹配到的索引位置
  45.     lg(str.indexOf("o"));
  46.     lg(str.lastIndexOf("o"));
  47.     //分割字符串，返回成數(shù)組形式
  48.     lg(str.split(" "));
  49.     //替換字符串replace(old,new);
  50.     lg(str.replace("you","你"));
  51.     // 數(shù)組字符串操作函數(shù)
  52.     let arr=[];
  53.     arr.push(1,2,3);//從尾部推入
  54.     lg(arr);
  55.     arr.unshift(4,5,6);//從頭部推入
  56.     // arr.unshift(4);
  57.     // arr.unshift(5);
  58.     // arr.unshift(6);
  59.     lg(arr);
  60.     lg(arr.pop());//從尾部刪除
  61.     lg(arr.shift());//從頭不刪除
  62.     lg(arr.join("+"));//把數(shù)組拉平成一個(gè)字符串
  63.     lg(arr);
  64.     lg(arr.slice(1,3));//截取數(shù)組
  65.     lg(arr);
  66.     lg(arr.sort((a,b)=>a-b));//數(shù)組排序
  67.     lg(arr.splice(1,1));//splice(start,del-num,new);
  68.     lg(arr.splice(1,2,"10","20"));
  69.     lg(arr);
  70.     let arrs=[1,2,3,4,5,6,7,8];
  71.     lg(arrs);
  72.     arrs.forEach(item=>lg(item));
  73.     lg(arrs.map(item=>{return item*2}));//遍歷數(shù)組并且返回值
  74.     lg(arrs);
  75.     lg(arrs.filter(item=>{ return item%2}));//過(guò)濾數(shù)組
  76.     lg(arrs);    
  77.     lg(arrs.reduce((prev,current)=>prev+current));
  78. </script>
  79. </html>

代碼運(yùn)行結(jié)果

2.Ajax請(qǐng)求

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Ajax請(qǐng)求</title>
  8.     <style>
  9.         body{
  10.             height: 800px;
  11.             background-color: deeppink;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <button type="button" id="btn">Ajax請(qǐng)求</button>
  18.     <form action="login.php" id="form">
  19.         <label for="username">賬戶</label>
  20.         <input type="text" name="username" id="username">
  21.         <label for="pwd">密碼</label>
  22.         <input type="password" name="pwd" id="pwd"/>
  23.         <button type="submit">登陸</button>
  24.     </form>
  26. </body>
  27. <script>
  28.     let btn=document.querySelector("#btn");
  29.     // console.log(btn.innerText);
  30.     btn.addEventListener("click",(ev)=>{
  31.         let xhr=new XMLHttpRequest();
  32.         xhr.open("GET","test.php");
  33.         xhr.onload=()=>{
  34.             // console.log(xhr.response);
  35.             // console.log(ev.target)
  36.             let bn=document.createElement("button");
  37.             bn.innerText=xhr.response;
  38.             document.body.appendChild(bn);
  39.         };
  40.         xhr.send();
  41.     })
  45.     let form=document.querySelector("#form");
  46.     console.log(form);
  47.     let bt=document.querySelector("#form>button");
  49.     bt.addEventListener("click",ev=>{
  50.         // console.log(ev);
  51.         ev.preventDefault();
  52.         let xhr=new XMLHttpRequest();
  53.         xhr.open("POST","login.php");
  54.         xhr.onload=()=>{
  55.             console.log(xhr.response);
  56.             // console.log(ev.target)
  57.             let bn=document.createElement("h3");
  58.             bn.innerText=xhr.response;
  59.             form.appendChild(bn);
  60.         };
  61.         xhr.send(new FormData(form));
  62.     })
  64. </script>
  65. </html>

批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語(yǔ)：顏色晃眼
本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！
全部評(píng)論 文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議
0條評(píng)論
關(guān)于我們 免責(zé)申明 意見(jiàn)反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長(zhǎng)！
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)