search

博客列表 >数组函数、JSON、get,post发起ajx请求、cors,jsonp跨域原理

数组函数、JSON、get,post发起ajx请求、cors,jsonp跨域原理

吳
吳 原创
2021年01月12日 03:10:47768浏览

1. 自选10个数组函数练习

  1. <script>
  2.   // 1.栈方法
  3.   // 栈：后进先出
  4.   // 队:先进先出
  5.   let arr = [];
  6.   let res;
  7.   // 1. push();pop():在数组的尾部增删
  8.   res = arr.push(1, 2, 3);
  9.   console.log(arr.pop());
  10.   console.log(arr.pop());
  11.   console.log(arr.pop());
  12.   console.log("%c----", "color:red");
  13.   // 2. unshift(),shift()：在数组的头部进行增删
  14.   // console.log(arr.unshift(4, 5, 6));
  15.   res = arr.unshift(4, 5, 6);
  16.   console.log(arr.shift());
  17.   console.log(arr.shift());
  18.   console.log(arr.shift());
  19.   console.log("%c----", "color:red");
  20.   // 3. push()+shift()：模拟队列，尾部进入，头部出去
  21.   res = arr.push(1, 2, 3);
  22.   console.log(arr.shift());
  23.   console.log(arr.shift());
  24.   console.log(arr.shift());
  25.   console.log("%c----", "color:red");
  26.   // 4. pop()+unshift()：模拟队列，头部进入，尾部出去
  27.   res = arr.unshift(1, 2, 3);
  28.   console.log(arr.pop());
  29.   console.log(arr.pop());
  30.   console.log(arr.pop());
  31.   console.log("%c----", "color:red");
  32.   // 5. join()：将数组转为字符串返回
  33.   arr = ["电脑", "手机", "相机"];
  34.   res = arr.join("---");
  35.   console.log(res);
  36.   console.log("%c----", "color:red");
  37.   // 6. concat()数组合并
  38.   console.log([1, 2, 3].concat([4, 5, 6], [7, 8, 9]));
  39.   console.log("%c----", "color:red");
  40.   // 7.slice()：返回数组中的部分成员
  41.   arr = [1, 2, 3, 4, 5];
  42.   // 取最后二个数字
  43.   console.log(arr.slice(3));
  44.   console.log("%c----", "color:red");
  45.   // 8. splice （开始索引，删除数据，插入数据...） ：数组的增删改
  46.   arr = [1, 2, 3, 4, 5, 6];
  47.   // 删除
  48.   res = arr.splice(2);
  49.   console.log(arr);
  50.   // 更新
  51.   arr = [1, 2, 3, 4, 5, 6];
  52.   res = arr.splice(1, 2, ...[88, 99]);
  53.   console.log(arr);
  54.   // 新增：将第二个参数设置为0
  55.   arr = [1, 2, 3, 4, 5];
  56.   res = arr.splice(1, 0, ...[88, 99]);
  57.   console.log(arr);
  58.   console.log("%c----", "color:red");
  59.   // 9. sort()排序：默认是字母表顺序
  60.   arr = ["p", "b", "a"];
  61.   console.log(arr);
  62.   arr.sort();
  63.   console.log(arr);
  64.   console.log("%c----", "color:red");
  65.   // 10. map遍历:有返回值
  66.   arr = [1, 2, 3, 4, 5, 6];
  67.   res = arr.map((item) => item);
  68.   console.log(res);
  69.   console.log("%c----", "color:red");
  70.   // 11. filter() 过滤
  71.   arr = [1, 2, 3, 4, 5];
  72.   res = arr.filter((item) => !(item % 2));
  73.   console.log(res);
  74.   console.log("%c----", "color:red");
  75.   // 12. redice(callback(prev,curr)):归并
  76.   arr = [1, 2, 3, 4, 5];
  77.   res = arr.reduce((prev, curr) => {
  78.     return prev + curr;
  79.   });
  80.   console.log(res);
  81. </script>

2.JSON 二个函数及参数功能

  • JSON.stringify()：将 js 数据序列化为 json 字符串

  1. <script>
  2.   // Array,objecy
  3.   console.log(JSON.stringify([1, 2, 3]));
  4.   console.log(JSON.stringify({ a: 3, b: 2, c: 3 }));
  5.   // 函数
  6.   console.log(
  7.     JSON.stringify({ a: 1, b: 2, c: 3 }, (k, v) => {
  8.       // 将需要过滤掉的数据直接返回undefined
  9.       if (v < 2) return undefined;
  10.       return v;
  11.     })
  12.   );
  13.   // 格式化输出json字符串
  14.   console.log(JSON.stringify({ a: 1, b: 2, c: 3 }, null, "---"));
  15.   console.log(obj);
  16. </script>
  • JSON.parse(): 解析 json 字符串为 js 对象

  1.     <script>
  2.         let obj = JSON.parse(`{"a":1,"b":2,"c":3}`);
  3.         console.log(obj.a, obj.b, obj.c);
  5.         // 第二个参数可以对json的数据进行处理后再返回
  6.         obj = JSON.parse(`{"a":1,"b":2,"c":3}`, (k, v) => {
  7.             if (k === "") return v;
  8.             return v * 2;
  9.         });
  10.         console.log(obj);
  11.     </script>

3. get、post 发起 ajax 请求

  • ajax-get 请求

  1.     <button>ajax-get请求</button>
  2.     <p></p>
  3.     <script>
  4.       const btn = document.querySelector("button");
  6.       btn.onclick = () => {
  7.         const xhr = new XMLHttpRequest();
  8.         xhr.responseType = "json";
  9.         xhr.open("get", "test1.php?id=2");
  10.         xhr.onload = () => {
  11.           console.log(xhr.response);
  12.           let user = `姓名：${xhr.response.name}，邮箱：${xhr.response.email}`;
  13.           document.querySelector("p").innerHTML = user;
  14.         };
  15.         xhr.onerror = () => console.log("error");
  16.         xhr.send(null);
  17.       };
  18.     </script>

ajax-get 请求 PHP 代码

  1. <?php
  3. // 以二维数组模拟数据表信息
  4. $users = [
  5.       ['id'=>1, 'name'=>'天蓬','email'=>'tp@php.cn','password' =>  md5('123456')],
  6.       ['id'=>2, 'name'=>'灭绝','email'=>'mj@php.cn','password' =>  md5('abc123')],
  7.       ['id'=>3, 'name'=>'西门','email'=>'xm@php.cn','password' => md5('abc888')],
  8. ];
  10. // 查询条件
  11. $id = $_GET['id'];
  13. // 在id组成的数组中查询是否存在指定的id,并返回对应的键名
  14. $key = array_search($id,array_column($users,'id'));
  16. // 根据键名返回指定的用户信息
  17. echo json_encode($users[$key]);
  • ajax-post 请求

  1. <html lang="en">
  2.   <head>
  3.     <meta charset="UTF-8" />
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  5.     <title>ajax-post请求</title>
  6.   </head>
  7.   <style>
  8.     .login {
  9.       width: 20em;
  10.       border: 1px solid;
  11.       padding: 0 1em 1em;
  12.       background-color: lightcyan;
  13.       margin: 2em auto;
  14.       display: grid;
  15.       place-items: center;
  16.     }
  18.     .login form {
  19.       display: grid;
  20.       grid-template-columns: 3em 1fr;
  21.       gap: 1em 0;
  22.     }
  24.     /* 按钮与提示信息显示在第二列 */
  25.     .login form button,
  26.     .tips {
  27.       grid-area: auto / 2;
  28.     }
  29.   </style>
  31.   <body>
  32.     <div class="login">
  33.       <form action="" method="POST">
  34.         <label for="email">邮箱：</label>
  35.         <input type="email" name="email" id="email" />
  36.         <label for="password">密码：</label>
  37.         <input type="password" name="password" id="password" />
  38.         <button>提交</button>
  39.         <span class="tips"></span>
  40.       </form>
  41.     </div>
  42.     <script>
  43.       const form = document.querySelector(".login form");
  44.       const btn = document.querySelector(".login button");
  45.       const tips = document.querySelector(".tips");
  47.       btn.onclick = (ev) => {
  48.         ev.preventDefault();
  49.         const xhr = new XMLHttpRequest();
  50.         xhr.open("post", "test2.php");
  51.         xhr.onload = () => (tips.innerHTML = xhr.response);
  52.         xhr.send(new FormData(form));
  53.       };
  54.     </script>
  55.   </body>
  56. </html>

ajax-post 请求 PHP 代码：

  1. <?php
  3. // print_r($_POST);
  6. // 使用二维数组模拟用户数据表信息
  7. $users = [
  8.     ['id'=>1, 'name'=>'天蓬','email'=>'tp@php.cn','password' =>  md5('123456')],
  9.     ['id'=>2, 'name'=>'灭绝','email'=>'mj@php.cn','password' =>  md5('abc123')],
  10.     ['id'=>3, 'name'=>'西门','email'=>'xm@php.cn','password' => md5('abc888')],
  11. ];
  13. // 将通过post获取的数据保存到临时变量中
  14. $email = $_POST['email'];
  15. $password = md5($_POST['password']);
  18. // 使用数组过滤器查询是否存在指定的用户并返回结果
  19. $res = array_filter($users,function($user) use ($email,$password){
  20.     return $user['email'] === $email && $user['password'] === $password;
  21. });
  23. // 将结果做为请求响应返回到前端
  24. echo count($res) === 1 ? '验证成功' : '验证失败';

4. 理解并写出 cors、jsonp 跨域的源码

cors 跨域：不同源的请求，跨协议|域名|端口的请求，需服务器端请求的文件开启跨域许可。

jsonp 跨域：跨域标签实现，link 的 href，img 的 src，script 的 src，a 标签的 href 等来实现
jsonp 跨域：可以不需要服务器端请求的文件开启跨域许可
jsonp 跨域：前端一个调用函数，把函数名告诉服务器端，服务器端把 json 格式数据填充前端告诉它的函数名，进行动态输出

  • 4.1 cors 跨域
cors-get 跨域

  1. <button>ajax-get-cors</button>
  2. <p></p>
  3. <script>
  4.   const btn = document.querySelector("button");
  5.   btn.onclick = (ev) => {
  6.     const xhr = new XMLHttpRequest();
  7.     xhr.open("get", "http://world.io/cors1.php");
  8.     xhr.onload = () => (document.querySelector("p").innerHTML = xhr.response);
  9.     xhr.send(null);
  10.   };
  11. </script>
cors-get 跨域 PHP 代码
  1. <?php
  2. // 在服务器端开启跨域许可
  3. // header ('Access-Control-Allow-Origin: http://hello.io');
  4. header ('Access-Control-Allow-Origin: *');
  5. // *:任何来源
  6. echo 'CORS：跨域请求成功';
cors-post 跨域

  1. <button>ajax-post-cors</button>
  2. <p class="tips"></p>
  3. <script>
  4.   const btn = document.querySelector("button");
  5.   const tips = document.querySelector(".tips");
  7.   btn.onclick = (ev) => {
  8.     const xhr = new XMLHttpRequest();
  9.     xhr.open("post", "http://world.io/cors2.php");
  10.     xhr.onload = () => (tips.innerHTML = xhr.response);
  11.     let formData = new FormData();
  12.     formData.append("email", "admin@php.cn");
  13.     formData.append("password", "123456");
  14.     xhr.send(formData);
  15.   };
  16. </script>
cors-get 跨域 PHP 代码
  1. <?php
  2. header ('Access-Control-Allow-Origin: *');
  4. // 返回前端post提交的数据
  5. print_r($_POST);
4.2 jsonp 跨域

  1. <button>jsonpadding-cors</button>
  2. <p></p>
  3. <script>
  4.   function getUser(data) {
  5.     console.log(data);
  6.     let user = data.name + ":" + data.email;
  7.     document.querySelector("p").innerHTML = user;
  8.   }
  10.   const btn = document.querySelector("button");
  11.   btn.onclick = () => {
  12.     let script = document.createElement("script");
  13.     script.src = "http://world.io/cors3.php?callback=getUser";
  14.     document.body.insertBefore(script, document.body.firstElementChild);
  15.   };
  16. </script>
  • jsonp 跨域 PHP 代码：
  1. <?php
  3. // jsonp 不需要授权给前端
  4. // 只要返回一个使用json做为参数的函数调用语句就可以了
  5. // 将前端需要的数据以json格式放到这个函数的参数中就行了
  7. // 必须要知道前端js要调用的函数名称
  9. $callback = $_GET['callback'];
  11. // 服务器中需要返回的数量
  12. $data = '{ "name": "天蓬", "email": "tp@php.cn" }';
  13. $data = '{ "name": "灭绝", "email": "mj@php.cn" }';
  15. // 在后端生成一条js函数调用语句：getuser({ name: "天蓬老师", email: "tp@php.cn" });
  16. echo $callback . '(' .$data. ')';
上一条：Linux 安装 PHP 扩展（Redis、Solr等扩展通用）下一条：JS数组函数|JSON函数|get,post发起ajax请求|跨域原理
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多