JS进阶知识：数组、JSON、Ajax请求和跨域请求 - JS学习

首页 > 博客列表 > JS进阶知识：数组、JSON、Ajax请求和跨域请求

博主信息

博文 145

粉丝 7

访问量 202197

专题推荐

更多>

数组操作函数

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.字符串和数组常见函数演练

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>字符串和数组操作方法</title>
</head>
<body>
</body>
<script type="text/javascript">
    // 字符串操作函数
    let str="you are wold!";
    let chinastr="你好！";
    const lg=console.log;
    // 字符串长度
    lg(str);
    lg(str.length);
    lg(chinastr.length);
    // 拼接字符串等同于“+”
    lg(str.concat('hello'));
    // 把字母转换成大写
    lg(str.toUpperCase());
    //把字母转换成小写
    lg(str.toUpperCase().toLowerCase());
    // str.slice(start,end)
    let str1=str.slice(1,6);
    lg(str1);
    let str2=chinastr.slice(1,2);
    lg(str2);
    //str.substr(start,num)
    str1=str.substr(1,6);
    lg(str1);
    str2=chinastr.substr(1,2);
    lg(str2);
    //trim(),去除字符串两端空格，制表符tab 换行符；不支持自定义
    str="  you are word!  ";
    lg(str.length);
    lg(str.trim().length);
    // lg(str);
    //返回匹配到的索引位置
    lg(str.indexOf("o"));
    lg(str.lastIndexOf("o"));
    //分割字符串，返回成数组形式
    lg(str.split(" "));
    //替换字符串replace(old,new);
    lg(str.replace("you","你"));
    // 数组字符串操作函数
    let arr=[];
    arr.push(1,2,3);//从尾部推入
    lg(arr);
    arr.unshift(4,5,6);//从头部推入
    // arr.unshift(4);
    // arr.unshift(5);
    // arr.unshift(6);
    lg(arr);
    lg(arr.pop());//从尾部删除
    lg(arr.shift());//从头不删除
    lg(arr.join("+"));//把数组拉平成一个字符串
    lg(arr);
    lg(arr.slice(1,3));//截取数组
    lg(arr);
    lg(arr.sort((a,b)=>a-b));//数组排序
    lg(arr.splice(1,1));//splice(start,del-num,new);
    lg(arr.splice(1,2,"10","20"));
    lg(arr);
    let arrs=[1,2,3,4,5,6,7,8];
    lg(arrs);
    arrs.forEach(item=>lg(item));
    lg(arrs.map(item=>{return item*2}));//遍历数组并且返回值
    lg(arrs);
    lg(arrs.filter(item=>{ return item%2}));//过滤数组
    lg(arrs);    
    lg(arrs.reduce((prev,current)=>prev+current));
</script>
</html>

代码运行结果

2.Ajax请求

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ajax请求</title>
    <style>
        body{
            height: 800px;
            background-color: deeppink;
        }
    </style>
</head>
<body>
    <button type="button" id="btn">Ajax请求</button>
    <form action="login.php" id="form">
        <label for="username">账户</label>
        <input type="text" name="username" id="username">
        <label for="pwd">密码</label>
        <input type="password" name="pwd" id="pwd"/>
        <button type="submit">登陆</button>
    </form>
</body>
<script>
    let btn=document.querySelector("#btn");
    // console.log(btn.innerText);
    btn.addEventListener("click",(ev)=>{
        let xhr=new XMLHttpRequest();
        xhr.open("GET","test.php");
        xhr.onload=()=>{
            // console.log(xhr.response);
            // console.log(ev.target)
            let bn=document.createElement("button");
            bn.innerText=xhr.response;
            document.body.appendChild(bn);
        };
        xhr.send();
    })
    let form=document.querySelector("#form");
    console.log(form);
    let bt=document.querySelector("#form>button");
    bt.addEventListener("click",ev=>{
        // console.log(ev);
        ev.preventDefault();
        let xhr=new XMLHttpRequest();
        xhr.open("POST","login.php");
        xhr.onload=()=>{
            console.log(xhr.response);
            // console.log(ev.target)
            let bn=document.createElement("h3");
            bn.innerText=xhr.response;
            form.appendChild(bn);
        };
        xhr.send(new FormData(form));
    })
</script>
</html>

批改老师：

天蓬老师

批改状态：合格

老师批语：颜色晃眼

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

12月29日练习：php中文网footer案例（组件footer）

2019-12-29 13:35:19