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

搜索
博主信息
博文 145
粉絲 7
評論 7
訪問量 198593
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
03月02日作業(yè)：json和AJAX基本知識
李東亞1??3????12?
原創(chuàng)
1141人瀏覽過

作業(yè)一

一、Json相關知識
1、json是借用了JS對象字面量法來表示數(shù)據(jù)，是一種輕量級，用于數(shù)據(jù)交換與存儲的格式化的字符串（本質上仍是一個字符串）；
2、json數(shù)據(jù)類型：

  • 簡單值：100，”hello”,true,null,沒有undefined
  • 對象：{……}
  • 數(shù)組：[……]
  • 簡單值字符串：必須且只能用雙引號作為定界符；

3、json的兩個方法：

  • 序列化：JS對象序列化為JSON格式的字符串JSON.stringify();
  • 解析：將JSON格式的字符串解析/還原為JS對象JSON.parse();

4、JSON與JS對象的區(qū)別：

  • 沒有變量聲明：JSON中沒有變量的概念
  • 沒有分號：以為JSON不是語句
  • JSON屬性名必須加上雙引號：任何時候任何地方都必須加雙引號，且必須加雙引號

5、JSON對象：這個對象不是JS預定義的，它是宿主環(huán)境定義的（瀏覽器）JSON.stringify(js);把JS對象序列化成JSON，JS對象序列化之后，會將以下三種成員刪除：
（1）、方法（函數(shù)）
（2）、值為undefined的屬性
（3）、繼承的原型對象成員
6、JSON.stringify();有三個參數(shù)：第一個是被序列化的JS對象；第二個數(shù)組（限制序列化的屬性成員）或者（回調函數(shù)可以對JSON的結果中的屬性進一步處理，函數(shù)必須有return value；否則為空，不希望那個值出現(xiàn)可以讓某個屬性返回undefined);第三個參數(shù)設置json字符縮進（數(shù)字或者字符）
7、為了規(guī)范/自定義序列化的返回結果，允許在JS對象中創(chuàng)建一個方法：toJSON;toJSON在調用JSON.stringify()時自動調用，像魔術方法一樣；
8、JSON.parse():有連個參數(shù)；第一個參數(shù)json字符串，第二個參數(shù)為回調函數(shù)（回調函數(shù)必須加上return value）;
二、AJAX基礎知識
1、同步和異步的概念：
同步：發(fā)出請求得到響應放回數(shù)據(jù)，才可以發(fā)送另一個
異步：發(fā)出請求，不需要得到響應回復就可以發(fā)出另一個請求，（回調函數(shù)）;
2、XMLHttpRequest基本流程（兩種形式）：
（1）、請求的進本流程（GET）

  • a.創(chuàng)建請求對象：new XMLHttpRequest;
  • b.監(jiān)聽請求回調：readystatechange
  • c.設置請求參數(shù)：open(請求類型，請求url,是否異步)（默認true,異步）
  • d.發(fā)送請求：send(null)

(2)、請求的基本流程（POST）

  • a.創(chuàng)建請求對象：new XMLHttpRequest
  • b.監(jiān)聽請求回調：readystatechange
  • c.設置請求頭：open(請求類型，請求url,是否異步)：默認true,異步
  • d.設置請求頭：setRequestHeader()
  • e.準備請求的數(shù)據(jù)：var data={……}
  • f.發(fā)送請求：send(‘user=’+data);可以添加鍵值對形式返回
    3、監(jiān)聽事件：readystatechange
    4、reponseText:返回ajax請求文本
    5、reponseXML：返回的html/xml;
    6、readyState===4:標識Ajax請求狀態(tài)（4代表成功）
    7、status:返回數(shù)據(jù)（200代表OK）
    8、setRequestHeader('content-type','applicaton/x-www-form-urlencoded')表單數(shù)據(jù)形式
    setRequestHeader('content-type','applicaton/json;charset=utf-8')json數(shù)據(jù)形式
    9、setTimeout(函數(shù)、time) 方法用于在指定的毫秒數(shù)后調用函數(shù)或計算表達式。
    10、onsubmit="return false"禁用表單提交事件；

作業(yè)二

一、JSON和js對象之間轉化練習
1、代碼：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <script>
  9.          var person = {
  10.             name: 'peter zhu',
  11.             age: 29,
  12.             isMarried: true,
  13.             course: {
  14.                 name: 'JavaScript',
  15.                 grade: 99
  16.             },
  17.             getName: function () {
  18.                 return this.name;
  19.             },
  20.             hoppy: undefined,
  21.             // 繼承的方法
  22.             toString: function () {
  23.                 return '繼承屬性';
  24.             }
  25.         };
  26.         console.log(person);
  27.         personj=JSON.stringify(person,['name','age'],4);
  28.         console.log(personj);
  29.         person1=JSON.stringify(person,function(key,value){
  30.             if(key==="age"){
  31.                 return "年齡是個秘密"
  32.             }
  34.             return value;
  35.         },4);
  36.         console.log(person1);
  38.         var detail={
  39.             name:"ldy",
  40.             age:10,
  41.             course:"php課程",
  42.             toJSON:function(){
  43.                 return this.name+this.age+this.course;
  44.             }
  45.         };
  46.         console.log(detail);
  47.         console.log(JSON.stringify(detail));
  49.         var jsonStr = '{"name":"peter zhu",\
  50.         "age":29,\
  51.         "isMarried":true,\
  52.         "course":{"name":"JavaScript","grade":99}}';
  54.         var job=JSON.parse(jsonStr);
  55.         console.log(job);
  57.         joba=JSON.parse(jsonStr,function(key,value){
  58.             if(key==="isMarried"){
  59.                 return "這是什么？";
  60.             }
  61.              return value;   
  62.             });
  63.         console.log(joba);
  64.     </script>
  65. </body>
  66. </html>

2、演示結果：

二、請求基本流程（以GET為例）：
1、代碼部分：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>ajax</title>
  6. </head>
  7. <body>
  8.     <script>
  9.         var xhr=new XMLHttpRequest;
  10.         xhr.onreadystatechange = function () {
  11.             if (this.readyState === 4) {
  12.                 console.log(this.responseText)
  13.                 document.write(this.responseText)
  14.             }
  15.         };
  16.         xhr.open('GET','../0228/demo3.html',true);
  17.         xhr.send(null);
  18.     </script>
  19. </body>
  20. </html>

2、運行結果圖：

三、登陸表單驗證實
1、代碼（只有登陸頁代碼）：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         .error {
  8.             color: red;
  9.         }
  11.         .success {
  12.             color: green;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <!-- onsubmit="return false" 禁用表單調的默認功能 -->
  18.     <form method="POST" onsubmit="return false" name="login">
  19.         <fieldset>
  20.             <legend>用戶登錄</legend>
  21.             <p><label>郵箱: <input type="email" name="email" required></label></p>
  22.             <p><label>密碼: <input type="password" name="password" required></label></p>
  23.             <p><button name="submit">提交</button><span id="tips"></span></p>
  24.         </fieldset>
  25.     </form>
  26.     <script>
  27.         var form=document.forms.namedItem('login');
  28.         // console.log(form.submit);
  29.         form.submit.addEventListener('click',check,false);
  30.         function check(){
  31.             var xhr=new XMLHttpRequest;
  33.             xhr.addEventListener('readystatechange',response,false);
  35.             xhr.open('POST','check.php',true);
  37.             xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
  39.             var user='email='+login.email.value+'&password='+login.password.value;
  41.             // var data = JSON.stringify(user);
  42.             xhr.send(user);
  43.             // console.log(user);
  44.         }
  46.         function response(ev){
  47.             if(ev.target.readyState===4){
  48.                 // console.log(ev.target.responseText);
  49.                 // console.log(user);
  50.                 var user = JSON.parse(ev.target.responseText);
  51.                 var tips = document.querySelector('#tips');
  52.                 switch (user.status) {
  53.                     // 驗證失敗
  54.                     case 0:
  55.                         tips.classList.add('error');
  56.                         tips.innerHTML = user.message + ',重新輸入';
  57.                         login.email.focus();
  58.                         login.email.addEventListener('input', function () {
  59.                             tips.innerHTML = null;
  60.                         }, false);
  61.                         break;
  63.                     // 驗證成功
  64.                     case 1:
  65.                         tips.classList.add('success');
  66.                         // 將用戶的登錄信息寫入cookie
  67.                         document.cookie = 'email=' + login.email.value;
  68.                         tips.innerHTML = user.message + ',正在跳轉中...';
  69.                         setTimeout('location.href="admin.php"', 2000);
  70.                         break;
  72.                     // 默認
  73.                     default:
  74.                         tips.innerHTML = '未定義錯誤';
  76.                 }
  77.             }
  78.         }
  80.     </script>
  81. </body>
  82. </html>

2、運行效果圖

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

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

老師批語：完成的不錯... JSON.stringify()有三個參數(shù), 其實后二個, 極少被人提及, 但一旦掌握會很有用的
本博文版權歸博主所有，轉載請注明地址！如有侵權、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務協(xié)議
0條評論
關于我們 免責申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓，幫助PHP學習者快速成長！
關注服務號 技術交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學習
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

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

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