登录  /  注册
博主信息
博文 145
粉丝 7
评论 7
访问量 157932
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
JS进阶知识:数组、JSON、Ajax请求和跨域请求
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
原创
710人浏览过

数组操作函数

1.从尾部push()和pop()进出数据
2.unshift()和shift从头部进出数据
3.join(): 与字符串的split()相反,将数组转通过指定连接组成字符串返回
4.concat()数组合并
5.slice(start,end): 返回数组中的部分成员(创建副本)
6.splice(开始索引,删除的数量,插入的数据…): 数组的增删改,它的本职工作是删除元素
7.sort()数组排数默认(按字母排序),数值排序arr.sort((a,b)=>a-b);
8.map(callback)数组遍历并且有返回值
9.filter(callback)过滤数组
10.reduce((prev, curr) => prev + curr,prev初始值)数组累加操作

JSON语法

1.JSON数组类型:对象,数组,数值,字符串,布尔值,null
2.JSON语法相关函数:

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

Ajax请求和跨域请求

1.请求分为两种:

  • 同步: 前端发请求, 必须等到后端响应完成,才允许发送另一个请求
  • 异步: 前端发请求后不等待后端响应结果继续执行,后端响应完成通过事件通知前端处理
    2.Ajax属于异步请求;请求类型有
  • get:把参数包含在URL中
  • post:通过request body传递参数

3.Ajax请求的步骤:

  • 1.创建XHR对象:
    const xhr=new XMLHtppRequest();
  • 2.配置参数
    xhr.open("type",url);
  • 3.处理请求响应
    xhr.onload=callback();
  • 4.发送请求:
    xhr.send();

4.跨域请求:

1.同源策略:同源指: 协议相同,域名/主机名相同,端口相同

  • 为请求的安全,浏览器禁止通过脚本发起一个跨域的请求
  • 只允许通过脚本发起基于同源的请求

2.CORS脚本跨域请求的目标允许访问设置:header('Access-Control-Allow-Origin:$url');$url有三种:网站名(协议域名端口)|*(允许任何跨域请求)|true(带cookie的跨域请求)

3.JSONP跨域请求:通过脚本生成一个带有src的script标签来访问跨域目标文件,目标文件返回信息,处理生成新的脚本(script)代码并执行生成新的页面内容;(一般是提前写一个函数,目标文件返回函数名调用函数,执行生成新的内容);

代码演练

1.字符串和数组常见函数演练

  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>字符串和数组操作方法</title>
  8. </head>
  9. <body>
  10. </body>
  11. <script type="text/javascript">
  12. // 字符串操作函数
  13. let str="you are wold!";
  14. let chinastr="你好!";
  15. const lg=console.log;
  16. // 字符串长度
  17. lg(str);
  18. lg(str.length);
  19. lg(chinastr.length);
  20. // 拼接字符串等同于“+”
  21. lg(str.concat('hello'));
  22. // 把字母转换成大写
  23. lg(str.toUpperCase());
  24. //把字母转换成小写
  25. lg(str.toUpperCase().toLowerCase());
  26. // str.slice(start,end)
  27. let str1=str.slice(1,6);
  28. lg(str1);
  29. let str2=chinastr.slice(1,2);
  30. lg(str2);
  31. //str.substr(start,num)
  32. str1=str.substr(1,6);
  33. lg(str1);
  34. str2=chinastr.substr(1,2);
  35. lg(str2);
  36. //trim(),去除字符串两端空格,制表符tab 换行符;不支持自定义
  37. str=" you are word! ";
  38. lg(str.length);
  39. lg(str.trim().length);
  40. // lg(str);
  41. //返回匹配到的索引位置
  42. lg(str.indexOf("o"));
  43. lg(str.lastIndexOf("o"));
  44. //分割字符串,返回成数组形式
  45. lg(str.split(" "));
  46. //替换字符串replace(old,new);
  47. lg(str.replace("you","你"));
  48. // 数组字符串操作函数
  49. let arr=[];
  50. arr.push(1,2,3);//从尾部推入
  51. lg(arr);
  52. arr.unshift(4,5,6);//从头部推入
  53. // arr.unshift(4);
  54. // arr.unshift(5);
  55. // arr.unshift(6);
  56. lg(arr);
  57. lg(arr.pop());//从尾部删除
  58. lg(arr.shift());//从头不删除
  59. lg(arr.join("+"));//把数组拉平成一个字符串
  60. lg(arr);
  61. lg(arr.slice(1,3));//截取数组
  62. lg(arr);
  63. lg(arr.sort((a,b)=>a-b));//数组排序
  64. lg(arr.splice(1,1));//splice(start,del-num,new);
  65. lg(arr.splice(1,2,"10","20"));
  66. lg(arr);
  67. let arrs=[1,2,3,4,5,6,7,8];
  68. lg(arrs);
  69. arrs.forEach(item=>lg(item));
  70. lg(arrs.map(item=>{return item*2}));//遍历数组并且返回值
  71. lg(arrs);
  72. lg(arrs.filter(item=>{ return item%2}));//过滤数组
  73. lg(arrs);
  74. lg(arrs.reduce((prev,current)=>prev+current));
  75. </script>
  76. </html>

代码运行结果


2.Ajax请求

  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请求</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请求</button>
  17. <form action="login.php" id="form">
  18. <label for="username">账户</label>
  19. <input type="text" name="username" id="username">
  20. <label for="pwd">密码</label>
  21. <input type="password" name="pwd" id="pwd"/>
  22. <button type="submit">登陆</button>
  23. </form>
  24. </body>
  25. <script>
  26. let btn=document.querySelector("#btn");
  27. // console.log(btn.innerText);
  28. btn.addEventListener("click",(ev)=>{
  29. let xhr=new XMLHttpRequest();
  30. xhr.open("GET","test.php");
  31. xhr.onload=()=>{
  32. // console.log(xhr.response);
  33. // console.log(ev.target)
  34. let bn=document.createElement("button");
  35. bn.innerText=xhr.response;
  36. document.body.appendChild(bn);
  37. };
  38. xhr.send();
  39. })
  40. let form=document.querySelector("#form");
  41. console.log(form);
  42. let bt=document.querySelector("#form>button");
  43. bt.addEventListener("click",ev=>{
  44. // console.log(ev);
  45. ev.preventDefault();
  46. let xhr=new XMLHttpRequest();
  47. xhr.open("POST","login.php");
  48. xhr.onload=()=>{
  49. console.log(xhr.response);
  50. // console.log(ev.target)
  51. let bn=document.createElement("h3");
  52. bn.innerText=xhr.response;
  53. form.appendChild(bn);
  54. };
  55. xhr.send(new FormData(form));
  56. })
  57. </script>
  58. </html>

批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:颜色晃眼
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学