闭包与ajax

一、匿名函数
之前学习的函数：

//1.普通
function sum(){
    console.log("Fd");
}

//2.表达式函数
var s = function () {
    console.log("fd");
}

//3.事件处理函数
document.onclick = function () {
    console.log(this);
}

//4.构造函数
function Student() {
    this.name = "web";
}
匿名函数：（没有名字）
//5.匿名函数
function (){
    console.log("匿名函数");
}

二、IIFE函数(立即执行函数)
IIFE:Imdiately Invoked Function Expression 立即执行函数
优点：避免全局污染,减少不必要的内存浪费
作用： 避免全局污染，减少内存浪费,方便嵌入
放在js最上面，所有的js代码，都放入到自执行函数中， 避免全局污染，减少内存浪费
如果刚接手一个新的项目，添加新的功能，写一个自执行函数，把代码让里面，他是一个独立的模块，不会影响到其他的代码

(function () {
    console.log("立即执行");
}());

//自执行
(function () {
    console.log("立即执行2");
})();

//2. 自执行函数有参数
(function (a,b) {
   console.log(a+b);
})(10,20);


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

三、闭包
闭包就是能够读取其他函数内部变量的函数（函数里面套函数，内部函数访问外部函数变量），在本质上，闭包是将函数内部和函数外部连接起来的桥梁。
闭包的特点：闭包中使用的变量会一直存储在内存中，类似全局变量 ，避免全局污染

//1.闭包
function fun(){
    var c = 10;
    return function(){
        console.log(c++);
    }
}
var f = fun(); //f = function(){ console.log(c++); }
f();//10
f();//11
f();//12
f=null;
闭包解决的问题：
for(var i = 0;i<oBut.length;i++){
    (function (i) { //参数i
        oBut[i].onclick = function () {
            for(var j = 0;j<oDiv.length;j++){
                oDiv[j].className = "";
            }
            oDiv[i].className = "active";
        }
    })(i)//实参i  for循环的i
}
解决全局变量i，带来的影响

面试题

var arr = [];
for(var i = 0;i<10;i++){ //i = 10
    arr.push(function(){
        console.log(i);
    });
}
//[function(){console.log(i)},function(){console.log(i)},function(){console.log(i)},function(){console.log(i)}]
console.log(arr[5]);
arr[5](); //10
//执行以后的结果，怎么解决
var arr1 = [];
for(var i = 0;i<10;i++){ //i = 10
    (function (i) {
        arr1.push(function(){
            console.log(i);
        });
    })(i)
}
arr1[5]();

for(var j = 0;j<5;j++){
    setTimeout(function () {
        console.log(new Date(),j); //1秒以后的时间  5
    },1000);
}
console.log(Date(),j); //当前时间  5

   function fun(n,o){//n = 0,o=undefined
            console.log(o); //闭包中使用的变量会一直存储在内存中  undefined

            return {
                fun:function(m){
                    return fun(m,n);
                }
            }
        }
        
        /* 
        a = {
                fun:function(m){ //m = 3 n = 0
                    return fun(m,n);
                }
            }
        */
        var a = fun(0); //undefined
        a.fun(1); //0
        a.fun(2); //0
        a.fun(3); //0

模拟私有变量

function MyObject(v) {
    var value = v;
    return {
        setValue:function (n) {
            value = n;
        },
        getValue:function () {
            return value;
        }
    }
}
var obj = new MyObject(10);
console.log(obj.getValue());
obj.setValue(20);
console.log(obj.getValue());
console.log(value);

   /*   var User = function(){};
        User.prototype = {
            id:"",
            getId:function(){ return this.id},
            setId:function(id){ this.id = id}
        }
       var s = new User();
       console.log(s); */
 var User = function(){

            var id = "";
            this.__proto__ = {
                getId:function(){ return id},
                setId:function(i){ id = i}
            }
       };
       var s = new User();
       console.log(s);
       s.setId("007");

       console.log(s.getId())

四、ajax
AJAX即“Asynchronous Javascript And XML”（异步javaScript和XML），是指一种创建交互式网页应用的网页开发技术,可以用于创建快速动态网页的技术，通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
异步：客户端与服务器请求数据的过程中，可以做其他的事情
同步：客户端与服务器请求数据的过程中，不能做其他的事情

1.get请求
 //1.创建请求对象
var ajax = new XMLHttpRequest(); //http：超文本传输协议   Request：请求
//new ActiveXObject("Microsoft.XMLHTTP");  ie6创建

//2.建立连接   ajax.open(method,url,async);   method:GET POST
 ajax.open("get","wenben.txt?count=2",true);

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

 //4.监听处理情况
  ajax.onreadystatechange = function () {
     if(ajax.readyState == 4){ //有结果了
         if(ajax.status == 200){
             console.log(ajax.response);
         }
     }
 }

readyState状态
0:创建了对象
1：建立连接
2：发送了请求
3：接收到了这个请求，并且已经开始处理，没有处理完成
4：已经处理完成，并且返回了响应包

Status：网络状态码
200----请求成功
404----没有找到
1XX系列：指定客户端应相应的某些动作，代表请求已被接受，需要继续处理。由于HTTP/1.0 协议中没有定义任何 1xx状态码，所以除非在某些试验条件下，服务器禁止向此类客户端发送 1xx 响应。
2XX系列：代表请求已成功被服务器接收、理解、并接受。这系列中最常见的有200、201状态码。
3XX系列：代表需要客户端采取进一步的操作才能完成请求，这些状态码用来重定向，后续的请求地址（重定向目标）在本次响应的Location 域中指明。这系列中最常见的有301、302状态码。
4XX系列：表示请求错误。代表了客户端看起来可能发生了错误，妨碍了服务器的处理。常见有：401、404状态码。
5XX系列：代表了服务器在处理请求的过程中有错误或者异常状态发生，也有可能是服务器意识到以当前的软硬件资源无法完成对请求的处理。常见有500、503状态码。

2.post请求
//1.创建ajax请求对象
var ajax = new XMLHttpRequest();
//var ajax = new ActiveXObject("Microsoft.XMLHTTP")

//2.建立连接
ajax.open("POST","wenben.txt"); //userName=123&passWord

//3.设置请求头,编码方式，告诉服务器提交数据的类型
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=uft-8");

//4.发送请求
ajax.send("userName=ujiuye&passWord=123");//data

//5.监听
ajax.onreadystatechange = function () {
    if(ajax.readyState == 4){
        if(ajax.status == 200){
            console.log(eval(ajax.response));
        }
    }
}

Content-type
multipart/form-data:上传有文件时
application/x-www-form-urlencoded:表单 默认
text/plain:文本

3.封装ajax

   function ajax(method,url,data){ //method,url,data(请求参数)
            //1.创建对象
            var request = new XMLHttpRequest();

            //2.建立连接
            if(method.toUpperCase() == "GET"){ //
                url = data ? url+"?"+data : url; //如果有请求参数，拼接在url后面，没有就直接使用url
                request.open(method,url,true);
                request.send();
            }else{
                request.open("post",url,true);
                request.setRequestHeader("Content-type","application/x-www-form-urlencoded")
                request.send(data);  
            }
            //4.监听结果
            request.onreadystatechange = function(){
                if(request.readyState == 4){
                    if(request.status == 200){
                      return request.responseText;
                    }
                }
            }
        }    

        ajax("get","bendi.txt");
        // ajax("post","bendi.txt");

封装Ajax 回调函数

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    


    <script>
        
        function ajax(method,url,success,data){ //method,url,data(请求参数)
            //1.创建对象
            var request = new XMLHttpRequest();

            //2.建立连接
            if(method.toUpperCase() == "GET"){ //
                url = data ? url+"?"+data : url; //如果有请求参数，拼接在url后面，没有就直接使用url
                request.open(method,url,true);
                request.send();
            }else{
                request.open("post",url,true);
                request.setRequestHeader("Content-type","application/x-www-form-urlencoded")
                request.send(data);  
            }

            //4.监听结果
            request.onreadystatechange = function(){
                if(request.readyState == 4){
                    if(request.status == 200){
                        //请求成功调用success
                        success(request.responseText);
                    }
                }
            }
        }    

        ajax("get","bendi.txt",function(data){
            console.log(data);
        });
     
        console.log("Fd");



       
    </script>
</body>
</html>

ajax的使用

  ujiuye.ajax("get","arr.txt",function(data){
            console.log(data); //‘[1,2,3,4,5,6]’  所有本地请求的数据都是字符串
         
            console.log(data[0]); //"["

            //eval(): 计算一个字符串，并且执行里面的js代码
            console.log(eval("1")) //1
            console.log(eval("1+2")) //3
            //console.log(eval("alert(1)")) //3


            var arr = eval(data);
            console.log(arr); //(6) [1, 2, 3, 4, 5, 6]
            console.log(arr[0]); //(6) [1, 2, 3, 4, 5, 6]


        })

解析json

  ujiuye.ajax("get","bendi.json",function(data){
            console.log(data); //eval("({})") {}

            //将json对象转化为字符串格式
            console.log(JSON.stringify(data)); //{"news":["今天要考试","明天要自习","明天要有作业"]}
            var st = JSON.stringify(data);

            //将json形式的字符串，转化为真正的json对象
            console.log(JSON.parse(st)); //{news: Array(3)}
        });

实例

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        #box{
            width: 300px;
        }
        #box div{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            display: none;
        }
    </style>
</head>
<body>
    <div id="box">
        <button>首页</button>
        <button>推荐</button>
        <button>关于我们</button>
        <!-- <div style='display: block;'>首页</div>
        <div>推荐</div>
        <div>关于我们</div> -->
    </div>


    <script src="ujiuye.js"></script>
    <script>


        var oBox = document.getElementById("box");
        var oBtn = document.getElementsByTagName("button");
        var oDiv = oBox.getElementsByTagName("div");


        //通过后台获取数据
        ujiuye.ajax("get","bendi.json",function(data){
            var arr = data.news; //获取到新闻

            //根据新闻的个数，生成对应的div
            for(var i = 0;i<arr.length;i++){
                oBox.innerHTML += "<div>"+arr[i]+"</div>";
            }
            //初始化
            oDiv[0].style.display = "block";



            for(var i = 0;i<oBtn.length;i++){
            oBtn[i].index = i;
            oBtn[i].onclick = function(){
                for(var j = 0;j<oDiv.length;j++){
                    oDiv[j].style.display = "none";
                }
                oDiv[this.index].style.display = "block";
            }
        }

        })

       

        

      
    
    </script>
</body>
</html>