闭包、ajax、get请求、post请求、封装、解析数据 15

最新推荐文章于 2021-12-23 19:12:36 发布
原创 最新推荐文章于 2021-12-23 19:12:36 发布 · 192 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #js #ajax

day15 闭包与ajax

1.回顾

面向对象继承方式

function Student(name,age,sex){ //父类
    this.name = name;
    this.age = age;
    this.sex = sex;
}
Student.prototype.study = function(){
    console.log("天天放假")
}

  • 原型链继承：子类的prototype = 父类的实例

    function MiniStudent(){ //子类
    this.eat = function(){
        console.log("吃饭睡觉长身体");
    }
}
//原型链继承
MiniStudent.prototype = new Student("小螺号",3,"女");

    缺点：不能传参，每次都是创建的同一个对象，继承到引用数据类型一改全改

  • 对象冒充继承

    function MiniStudent(name,age,sex){ //子类   
    //对象冒充继承
    Student.call(this,name,age,sex);
    this.eat = function(){        
        console.log("吃饭睡觉长身体");    
    }
}

    优点：能传参，继承到引用数据类型不会再一改全改

    缺点：不能继承父元素原型中的属性和方法

  • 混合继承

    function MiniStudent(name,age,sex){ //子类   
    //对象冒充继承
    Student.call(this,name,age,sex);
    this.eat = function(){        
        console.log("吃饭睡觉长身体");    
    }
}
//原型链继承
MiniStudent.prototype = new Student("小螺号",3,"女");

    优点：能传参，继承到引用数据类型不会再一改全改，继承原型中属性和方法

    缺点：创建一个多余的父类实例

  • 寄生式组合继承

    function MiniStudent(name,age,sex){ //子类   
    //对象冒充继承
    Student.call(this,name,age,sex);
    this.eat = function(){        
        console.log("吃饭睡觉长身体");    
    }
}
//原型链继承
MiniStudent.prototype = Object.create(Student.prototype);
MiniStudent.prototype.constructor = MiniStudent

  • 前瞻后顾

     //1.(?=) : 前瞻 正向肯定预查  要检测的字符的后面必须是什么
var str = "qew3re4@ewr5rwe";
var reg = /\d(?=@)/;//检测数字，@前面的数字
console.log(reg.exec(str)); //4

//2.(?!)：负前瞻 正向否定预查   要检测的字符的后面不能是什么
var reg = /\d(?![a-z])/;//检测数字，后面不能是字母
console.log(reg.exec(str)); //4

//3.验证用户名，必须是数字和字母的组合 
var user = "rwr12ewrew";
//(?=.*[a-zA-Z].*) :必须有字母  (?=.*[0-9].*)：必须有数字
var reg = /(?=.*[a-zA-Z].*)(?=.*[0-9].*)^[0-9a-zA-Z]+$/;
console.log(reg.exec(user));

var user = "13213e21312";
//(?!^[a-zA-Z]+$):不能纯字母  (?!^[0-9]+$):不能纯数字
var reg = /(?!^[a-zA-Z]+$)(?!^[0-9]+$)^[0-9a-zA-Z]+$/;
console.log(reg.exec(user));

//4. (?<=) 后顾 反向肯定预查   要检测的字符的前面必须是什么
var str = "ujiuyeweb1116web1102";  
var reg = /(?<=\d)web/; //检测web，前面必须是数字
console.log(reg.exec(str)); //["web", index: 13]

//5. (?<!) 负后顾 反向否定预查   要检测的字符的前面不能是什么
var reg = /(?<!\d)web/; //检测web，前面不能是数字
console.log(reg.exec(str)); //["web", index: 6]

2.闭包

2.1 匿名函数自执行(IIFE) : 立即执行函数

//1.匿名函数（没有名字的函数）
/* function (){
     console.log("匿名函数");
} */

//2.匿名函数自执行，立即执行函数(IIFE)    
//语法：(声明函数)(调用)
(function(){
    console.log("匿名函数");
})();

//3.传参
(function(a,b){
    console.log(a+b);
})(10,20); //30

//4.返回值
var s = (function(a,b){
    return a+b;
})(10,20); 
console.log(s);

优点：避免全局污染，节约内存,优美的嵌入代码

使用场景：在封装函数的时候使用，在闭包场景中使用

2.2 闭包

  • 闭包的概念

    闭包：能够获取其他函数内部变量的函数   函数套函数
function outer(){
    var a = 10;
    return function (){
        console.log(a++);
    }
}
闭包的优点：闭包中使用的变量会一直存储在内存中个，类似全局变量，避免全局污染
缺点：可能会造成内存泄漏，不用的时候需要销毁

  • 闭包的使用场景

    • 使用函数内部变量的时候

      //闭包：能够访问其他函数内部变量的函数，函数套函数
function outer(){
    var b = 10;
    return function inner(){
        console.log(b++);   //内部作用域可以使用外部作用域中变量和函数
    }
}
var f = outer();  //f = function inner(){}
console.log(f);

f(); //10
f(); //11
f(); //12
f = null;

    • 解决全局作用域问题

      //怎么修改
//原因：自己作用域没有变量i，使用的是全局变量i
//解决：让自己的作用域中有i
var arr1 = [];
for(var i = 0;i<10;i++){ //i = 10
    (function(i){//局部变量i
        arr1.push(function(){console.log(i);}) //局部变量i
    })(i); //全局变量i
}
arr1[4](); //4
arr1[5](); //5

    • 用于私有属性(外界不可见)

      function Student(){
    var name = "小夏";
    this.getName = function(){
        return name;
    }
    this.setName = function(n){
        name = n
    }
}

  • 闭包面试题

    //1.代码运行完以后的结果是，怎么修改？
var arr = [];
for(var i = 0;i<10;i++){ //i = 10
    arr.push(function(){console.log(i);})
}
arr[4]();


//2.代码执行以后的结果是
function fun(n,o){
    console.log(o);
    return {
        "fun":function(m){
            return fun(m,n)
        }
    }
}
var a = fun(0);
a.fun(1);
a.fun(2);
a.fun(3);


//3.代码执行以后的结果是
//同步：在做某一个操作的时候，其他的只能等待  for alert
//异步：在左某一个操作的时候，可以同时执行其他的操作  定时器
for(var i = 0;i<5;i++){
    setTimeout(function(){
        console.log(i,new Date());
    },1000);
}
console.log(i,new Date());

3.ajax

ajax：Asynchronous JavaScript and XML 异步的JavasScript和XML

async:异步

作用：和后台进行数据交互，可以进行少量的数据交互，实现页面的异步更新

json：json数据

异步：浏览器在向服务器请求数据的时候，浏览器还可以做其他的操作

同步：浏览器在向服务器请求数据的时候，浏览器只能等待

3.1 get请求

//1.创建请求对象
var xhr = new XMLHttpRequest();

//2.建立连接 xhr.open(method,url,async);
//method:请求方式  get  post
//url:请求地址   get请求的参数在地址栏的后面  url?参数&参数
//async：是否异步  默认就是true
xhr.open("GeT","http://edu.xqb.ink/api/courselist?limits=5&classname=web前端",true);

//3.发送请求
xhr.send();

//4.监听结果
/* 
        准备状态码
        * 0: 创建了一个请求对象
        * 1: 和服务器建立了连接
        * 2: 发送了请求
        * 3: 服务器接收到了请求，并且正在处理
        * 4: 服务器处理完成并返回结果 （响应包）
        * 
        网络状态码
        *404  200  500
        */
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){ //有结果了，并且将结果返回
        if(xhr.status == 200){ //请求成功
            document.write( xhr.responseText)
        } 
    }
}

3.2 post请求

//1.创建请求对象
var xhr = new XMLHttpRequest();

//2.建立连接
xhr.open("post","http://edu.xqb.ink/api/registers",true);
//post请求，需要设置请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

//3.发送请求  post请求参数，放在send里面
xhr.send("usr=txf1116&pwd=1234567");

//4.监听结果
xhr.onreadystatechange = function(){

    if(xhr.readyState == 4){
        if(xhr.status == 200){
            console.log(xhr.responseText);
        }
    }
}

3.3 封装

function ajax(requests) { //{url,type,data}
    //1.创建一个请求对象
    var xhr = new XMLHttpRequest();

    //2.建立连接
    if (requests.type.toLowerCase() == "get") {
        //如果有参数，就拼接在url的后面，没有就不拼
        var url = requests.data ? requests.url + "?" + requests.data : requests.url;
        xhr.open("get", url, true);
        //3.发送请求
        xhr.send();
    } else {
        xhr.open("post", requests.url, true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
        //3.发送请求
        xhr.send(requests.data);
    }

    //4.监听结果
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){ //服务器处理结束，并且已经返回响应包
            if(xhr.status == 200){//请求成功
                requests.success(xhr.responseText);
            }
        }
    }

}


   

        ajax({
            "url": "http://edu.xqb.ink/api/banner",
            "type": "get",
            // "data":"",
            "success":function(res){//var res = xhr.responseText
                console.log(res);
            }        
        });

3.4 解析数据

//1.eval() : 接收一个字符串，把字符串转换真正的数据类型，并且执行里面的代码
console.log(eval("3+1")); //4
console.log(eval("[1,2,3,4]")); // [1, 2, 3, 4]
console.log(eval("[1,2,3,4].length")); //4

//console.log(eval("{'name':'蜡笔小新'}")); //js认为直接{}开头，这是代码块
console.log(eval("({'name':'蜡笔小新'})")); 
console.log(eval("("+res+")"));

//2.JSON.parse():将字符串格式的json数据转换为真正的json数据
res = JSON.parse(res);
console.log(res);

//3.JSON.stringify:将json转换转换为字符串
console.log(JSON.stringify(res))

3.5 使用

 //1.获取元素
var oUl = document.getElementsByTagName("ul")[0];
var oLi = oUl.getElementsByTagName("li");

//2.完善静态布局(获取后台数据，根据后台数据生成对应的标签)
ujiuye.ajax({
    "url":"http://edu.xqb.ink/api/banner",
    "type":"get",
    "success":function(res){
        var data = res.data;

        //根据后台数据生成对应的标签
        for(var i = 0;i<data.length;i++){
            oUl.innerHTML += " <li style='background: url("+data[i].coverimg+") center top no-repeat'></li>";
        }

        //1.初始化样式
        oLi[0].style.opacity = 1;


        //自动轮播
    }
})
get post 区别 以及get 为啥比post要快, ajax封装，以及 serialize表单序列化，ASP.net 默认是POST HTML 默认是Get
Kaizen的博客
07-07 1403
请求方式 get、post、delete、options、put等 经常在code中出现的是get post两种 get 请求： 1、传送的数据量较小（相对于post而言）。参数要放在url中，但url长度是有限制的【不同的浏览器长度不一样】，不是无限的，所以get传送的数据量不能超过2KB。 2、安全性非常低，因为参数暴露url中，而且get请求会被浏览器缓存起来。，你懂的 3、执行效率却比post要快。因为tcp协议 4、get请求的是静态资源，则会缓存，如果是数据，则不会缓存【并不是所有浏览器都会缓存
自己实现ajax封装示例分享
09-04
在上面的示例中，我们使用 JavaScript 对象来封装 Ajax 请求，提供了 get 和 post 两个方法，分别对应 GET 和 POST 两种请求方式。我们也使用了闭包来捕获请求的结果，并将其返回。 使用示例 ------------ 下面是...
C# 继承
weixin_43055166的博客
11-18 137
继承是面向对象程序设计中最重要的概念之一。继承允许我们根据一个类来定义另一个类，这使得创建和维护应用程序变得更容易。同时也有利于重用代码和节省开发时间。 当创建一个类时，程序员不需要完全重新编写新的数据成员和成员函数，只需要设计一个新的类，继承了已有的类的成员即可。这个已有的类被称为的基类，这个新的类被称为派生类。 继承的思想实现了 属于（IS-A） 关系。例如，哺乳动物 属于（IS-A） 动物，狗 属于（IS-A） 哺乳动物，因此狗 属于（IS-A） 动物。 基类和派生类 一个类可以派生自多个类或接口，这
闭包封装ajax
blog_zxb的博客
07-27 265
1、参考druid数据源设计：https://blog.youkuaiyun.com/blog_zxb/article/details/97416487 // 定义命名空间方法，自动创建多级变量 var namespace = function(){ var a = arguments, o = null, i, j, d; for (var i = 0; i < a.length; i++) ...
闭包
qq_35209064的博客
12-31 507
闭包 概念：是指有权访问另一个函数作用域中的变量的函数。 1.它的本质是什么 实际上就是一种函数，该函数描述了：函数访问变量时其作用域的问题。 怎么判断他是不是一个闭包呢？ 闭包的表现形式（满足以下形式就是闭包）： 使函数外部能够调用函数内部定义的变量。就形成了一个闭包。说复杂点就是当一个函数的返回值是另外一个函数，而返回的那个函数如果调用了其父函数内部的其它变量，如果返回的这个函数在外部被执行...
闭包与ajax
yeee1128的博客
12-16 273
一、匿名函数 之前学习的函数： //1.普通 function sum(){ console.log(“Fd”); } //2.表达式函数 var s = function () { console.log(“fd”); } //3.事件处理函数 document.onclick = function () { console.log(this); } //4.构造函数 function Stud...
js面向对象编程指南学习笔记--闭包封装HTTP请求
a31017799的博客
04-25 631
js面向对象编程指南学习笔记–闭包封装HTTP请求首先补充一下js 闭包 的概念，闭包是指可以包含自由（未绑定到特定对象）变量的代码块；这些变量不是在这个代码块内或者任何全局上下文中定义的，而是在定义代码块的环境中定义（局部变量）。闭包可以让局部变量升级到全局变量的一种js特有的方法。下面是实例代码。改代码实现了封装http请求:下面是封装request函数和封装创建XMR对象函数： functio
JavaScript封装Ajax实现类似jQuery的请求功能
JavaScript封装Ajax是现代前端开发中一个非常核心且实用的技术知识点，尤其在没有使用大型框架（如Vue、React）或类库（如jQuery）的轻量级项目中，开发者往往需要自行封装一个简洁、高效、可复用的Ajax请求模块。...
Ajax应用实例与完整请求流程源码解析
值得一提的是，虽然Ajax名称中含有XML，但如今绝大多数应用已转向使用JSON作为数据交换格式，因其更轻量、易于解析。因此，该资源中的实例很可能也展示了如何使用`JSON.parse()`处理服务器返回的JSON字符串，并将其...
minAjax.js：轻量级JavaScript库实现AJAX请求
从标题“极简的Javascript库，用于执行AJAX POST和GET请求”可以看出，该项目强调的是简洁性、高效性和易用性，适用于那些希望在项目中避免引入大型框架但又需要处理动态数据加载与提交的开发者。 该库的设计理念...
利用js的闭包原理做对象封装及调用方法
10-20
下面小编就为大家带来一篇利用js的闭包原理做对象封装及调用方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
封装网络请求类来理解闭包
hpuhjl的专栏
06-17 1901
import UIKit import Alamofire enum MethodType { case get case post }class NetworkTools { class func requestData(_ type : MethodType, URLString : String, parameters : [String : Any]? = nil,
ajax闭包问题及反思
qq_36642608的博客
12-23 650
ajax闭包问题及反思 啥话也别说,直接上代码 function subData(){ var pList = []; //设置成功函数 if(!("success" in defaultAjaxParam)){ defaultAjaxParam.success = (data) => { if(data.flag){ if ("dataList" in data){ var dataList = data["dataList"]; for (var
JS闭包产生条件、作用、生命周期
aolyu的博客
06-07 1023
闭包1. 闭包的概念2. 闭包产生条件 1. 闭包的概念 闭包就是能够读取其他函数内部变量的函数，或者子函数在外调用（子函数所在的夫函数的作用域不会被释放）。 2. 闭包产生条件 函数嵌套 例如： function A() { function B() { } } 内部函数引用了外部函数中的数据（属性、函数） 例如： function A() { var a = "a"; function B() { console.log(a); } } 执行外部函数（也可理解
JavaScript（十五） 闭包和表单 Ajax请求
weixin_43933148的博客
09-26 232
闭包和表单 一、闭包 闭包就是能够读取其它函数中变量的函数(并且将这个函数返回)。本质上，闭包就是将函数内和函数外连接起来的一个桥梁。 function fn(){ var a=0; return function(){ var b=a++; console.log(a,b); // console.log(a++);// 0 a=1 }; } var fnx=f
发送HTTP请求，调取第三方接口及返回数据的解析获取
Mou_O的博客
11-22 1万+
发送HTTP请求，调取第三方接口 application/x-www-form-urlencoded 方式 /** * 发送http POST请求 * @param parameter为请求参数 * @return 远程响应结果 */ public static String sendPunlic2GPost(String parameter) { log.info...
》》初识移动端--rem
热门推荐
weixin_34416754的博客
12-05 10万+
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, ma...
ajax请求封装,封装的ajax请求
weixin_33676046的博客
08-06 1707
在做登录注册这类提交表单数据时，我们经常需要局部刷新网页来验证用户输入的信息，这就需要用到ajax请求，我们通常需要获取表单中的数据，发起ajax请求,通过服务程序，与数据库的数据进行比对，判断信息的正确与否。这儿也将ajax请求进行了封装，当我们在项目中需要多次ajax请求时，就可以用封装的函数了，不用每次都写ajax请求，提高了代码的利用率和工作效率。当然封装得不一定很完美，网上也有很多优秀的...
闭包的正确使用方法，你 get 到了么？
weixin_34343000的博客
01-15 165
为什么80%的码农都做不了架构师？>>> ...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值