search

博客列表 >03月02日作业：json和AJAX基本知识

03月02日作业：json和AJAX基本知识

李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰原创
2020年03月06日 10:36:00977浏览

作业一

一、Json相关知识
1、json是借用了JS对象字面量法来表示数据，是一种轻量级，用于数据交换与存储的格式化的字符串（本质上仍是一个字符串）；
2、json数据类型：

  • 简单值：100，”hello”,true,null,没有undefined
  • 对象：{……}
  • 数组：[……]
  • 简单值字符串：必须且只能用双引号作为定界符；

3、json的两个方法：

  • 序列化：JS对象序列化为JSON格式的字符串JSON.stringify();
  • 解析：将JSON格式的字符串解析/还原为JS对象JSON.parse();

4、JSON与JS对象的区别：

  • 没有变量声明：JSON中没有变量的概念
  • 没有分号：以为JSON不是语句
  • JSON属性名必须加上双引号：任何时候任何地方都必须加双引号，且必须加双引号

5、JSON对象：这个对象不是JS预定义的，它是宿主环境定义的（浏览器）JSON.stringify(js);把JS对象序列化成JSON，JS对象序列化之后，会将以下三种成员删除：
（1）、方法（函数）
（2）、值为undefined的属性
（3）、继承的原型对象成员
6、JSON.stringify();有三个参数：第一个是被序列化的JS对象；第二个数组（限制序列化的属性成员）或者（回调函数可以对JSON的结果中的属性进一步处理，函数必须有return value；否则为空，不希望那个值出现可以让某个属性返回undefined);第三个参数设置json字符缩进（数字或者字符）
7、为了规范/自定义序列化的返回结果，允许在JS对象中创建一个方法：toJSON;toJSON在调用JSON.stringify()时自动调用，像魔术方法一样；
8、JSON.parse():有连个参数；第一个参数json字符串，第二个参数为回调函数（回调函数必须加上return value）;
二、AJAX基础知识
1、同步和异步的概念：
同步：发出请求得到响应放回数据，才可以发送另一个
异步：发出请求，不需要得到响应回复就可以发出另一个请求，（回调函数）;
2、XMLHttpRequest基本流程（两种形式）：
（1）、请求的进本流程（GET）

  • a.创建请求对象：new XMLHttpRequest;
  • b.监听请求回调：readystatechange
  • c.设置请求参数：open(请求类型，请求url,是否异步)（默认true,异步）
  • d.发送请求：send(null)

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

  • a.创建请求对象：new XMLHttpRequest
  • b.监听请求回调：readystatechange
  • c.设置请求头：open(请求类型，请求url,是否异步)：默认true,异步
  • d.设置请求头：setRequestHeader()
  • e.准备请求的数据：var data={……}
  • f.发送请求：send(‘user=’+data);可以添加键值对形式返回
    3、监听事件：readystatechange
    4、reponseText:返回ajax请求文本
    5、reponseXML：返回的html/xml;
    6、readyState===4:标识Ajax请求状态（4代表成功）
    7、status:返回数据（200代表OK）
    8、setRequestHeader('content-type','applicaton/x-www-form-urlencoded')表单数据形式
    setRequestHeader('content-type','applicaton/json;charset=utf-8')json数据形式
    9、setTimeout(函数、time) 方法用于在指定的毫秒数后调用函数或计算表达式。
    10、onsubmit="return false"禁用表单提交事件；

作业二

一、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、运行效果图

上一条：0218单例模式与工厂模式下一条：数组与函数的调用（0226）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多