前端小白day23 异步代码和ajax和XMLHttpRequest简单操作

一.js中的同步代码和异步代码

        1.js单线程语言 

        在js中，js是单线程语言，也就是从上到下依次运行代码，当遇到需要如事件，定时器，等需要一定条件触发的代码时，将会造成代码卡顿，无法向下运行，为了解决这个问题，则提出了异步任务，异步任务就是将js单线程处理遇到的需要一定条件触发的函数放到一个异步队列中，交给浏览器处理。

        2.异步代码和异步队列

        事件，定时器等属于异步代码的方法，由于是在等同步队列代码执行完毕之后才会执行，那么在同步代码中现阶段无法做到获取或者操作异步代码中的变量或者结果如:

 console.log(1)
setInterval(function(){
var a = 10
  console.log(a)
})
 console.log(2)

// 此时的a在外部是无法获取的，
// js已经在封装定时器的时候将函数做为参数调用了，
// 所以可以直接在回调函数中写处理a变量的方法，
// 或者在回调函数中在继续调用函数，将a做为参数传递

         3.如何处理异步代码中的数据

上述代码此时也形成了闭包，所以我们说闭包也是一种可以处理异步代码中变量或者结果的方法.

二.认识前后端交互

        1.交互

        前端做为与用户交互的界面，是需要进行许多数据的调用和处理，当数据量庞大之后，是需要有服务器来进行对数据的保存和调用，这样也是最为方便的

        2.服务器

        服务器就是提供服务的一个程序，将这些程序保存在存储中组成的大型设备。用于提供服务的， 当我们的自己的电脑跑一些特殊的程序，或者安装开启特殊软件（apache服务器）。我们电脑此时也是属于服务器。 server（自己使用nodejs写的程序），让它跑起来，开了一个服务，这个服务器给我们提供了很多的接口。

        3.接口+ip地址

        当我们的数据保存在服务器中时，我们前端如何调用这些服务器中的数据，利用ip地址和接口实现，ip地址就时如:183.0.0.83这样的一个数字串，由于这些ip地址不方便记忆，所以将这些ip地址转为域名 http://www.baidu.com 或者https://这样的。每一个服务器上都有很多的文件，提供的就是不同的服务，每一个都有的编号   0- 65535   一般习惯四位数端口号像 8080

            https://www.baidu.com:443      https默认端口号都是443

            http://www.baidu.com:80        http默认端口号都80

        接口就是后端提供的，前端连接不同的接口 获取不同的数据，从而实现不同的效果

        有了接口和服务器也就可以实现我们调用数据实现前端不同的功能和状态

三.同步请求和异步请求

        1.客户端在处理代码请求时，分为两种，一是同步请求，二是异步请求

        2.同步请求是在渲染页面和数据请求只能同时进行一种，当进行数据请求时就无法进行页面渲染，对用户非常不友好

        3.异步请求时在渲染页面和数据时可以同时进行，核心方法是利用XMLHttpRequest类来进行实现

四.ajax

        ajax: asynchronous(异步)  javascript  and  xml(最早前后端交互用的数据格式，现在用的是json形式的数据格式)

      ajax：在不刷新页面的情况下，向后端发请求，请求少量的数据

      传统网站： 前端发请求，后端给的是完整的页面，并且刷新了页面

      ajax的核心对象： XMLHttpRequest对象  

      以前浏览器负责显示页面和发送请求接收响应(和后端交互)。两件事情同一时刻只能做件，没法同时进行。这样会让用户感觉不好(友好性不好)，比如:当浏览器发送请求时，就没法显示内容，这时浏览器中是空白显示，给用户的感觉不好。

      现代浏览器，使用XMLHttpRequest对象，可以把浏览器解脱出来，可以让浏览器只负责显示，而完成请求的事情由XMLHttpRequest对象负责。这样两者各负其责，效率更高，效果更好，用户体验很好，用户永远不会看到浏览器空白。

五.XMLHttpRequest对象

        1.创建方法

        XMLHttpRequest是一个类,创建方法是new函数调

var xhr = new XTMHttpRequest()

         2.XMLHttpRequest的属性

       

var xhr = new XMLHttpRequest()
xhr.readyState  //请求状态码 0还未创建请求 1发送请求已部署还为发送open了还未send
//2发送请求已发送还未得到回应 send了 3后端已接收到请求,并已返回一些基础数据
// 4后端完成请求并将完整数据返回 五种状态
xhr.status   // 200完美数据传递完毕 404数据传输有问题前端 500数据传输有问题后端 
xhr.resposonText //字符串传回数据

        3.XMLHttpRequest的方法

xhr.open('请求方法get/post','url后端的地址接口','true异步请求false同步请求默认是true')
xhr.send() 发送请求的方法

        4.XMLHttpRequest的事件

        请求状态码改变发生的事件

xhr.onreadystatechange=funcation(){
    if(xhr.readystate==4 && xhr.status==200){
        console.log(xhr.responseText)
        }
}

        5.获取返回的数据

        由于xhr.onreadystatechange事件也是一个异步代码，而我们得到的xhr.responseText必须在这个事件中获取，异步队列中获得的变量无法在同步队列中调用，不符合规则，所以我们需要返回异步队列中对此数据进行处理，如何操作？ 利用回调函数

funation fn (fn1){
    var xhr = new XMLHttpRequest()

    xhr.open('get', `http://localhost:8888/test/first`, true)
    xhr.send()
     xhr.onreadystatechange = function () {
        if(xhr.readystate==4&&xhr.status==200){
                fn1(JSON.parse(xhr.respsoneText))
                }
    }
}


fn(funcation(){
// 在此可以写对获取到的数据处理的代码
})

        6.get和post请求方法注意事项

                (1)get方法如果由参数则将参数写在open方法接口地址的后面用?表示

funation fn (fn1){
    var xhr = new XMLHttpRequest()

    xhr.open('get', `http://localhost:8888/test/first?参数一=参数一的值&参数二=参数二的值`, true)
    xhr.send()
     xhr.onreadystatechange = function () {
        if(xhr.readystate==4&&xhr.status==200){
                fn1(JSON.parse(xhr.respsoneText))
                }
    }
}


fn(funcation(){
// 在此可以写对获取到的数据处理的代码
})

                (2)post方法如果调用需要部署请求头，并带参数接口类型，接口方法

   function post(b,c,d) {
        var xhr = new XMLHttpRequest()
        xhr.open(`post`, `http://localhost:8888${c}`, true)
        xhr.setRequestHeader("Content-type",`application/x-www-form-urlencoded`)
        xhr.send(d)
        // console.log(xhr.responseText)
        xhr.onreadystatechange = function () {
            // console.log(xhr.readyState)
            // console.log(xhr.responseText)
            // console.log(xhr.status, xhr.readyState)
            if (xhr.readyState == 4 && xhr.status == 200) {
                b(JSON.parse(xhr.responseText))
            }
        }
    }
    post(function (e) {
        console.log(e)
    },`/test/fourth`,'name=a&age=18')

// 参数c代表接口地址写在open方法第二个参数地址的后面 
// 参数b代表回调函数，回调函数中的e代表获取到的数据
// 此时代码执行顺序是先调用post函数，向下执行完毕之后开始执行onreadystatechange事件
// 此时在事件中满足条件后执行回调函数,此时会将实参xhr.resposonText传回
// 参数d代表后端数据的参数，写的方法也是字符串'参数一=参数一的值&参数二=参数二的值'

六.正则表达式

        1.概念

        正则表达式是一个类，RegExp 用这个类创建的对象就是正则表达式对象。

        正则表达式(regular expression)又称规则表达式，用于匹配一个字符串满足某种规则（即正则表达式）  RegExp

        2.语法

字面量法     var reg =  /字母串或者规则（正则表达式）/修饰符   
构造函数发   var reg1 = new RegExp("字母串或者规则（正则表达式）","修饰符")    

        3.正则表达式符号

       (1)基本元字符：

         \d      一位数字

         \D      一位非数字

         \w      一位字母下划线数字中的任何一种

         \W      一位非字母下划线数字中的任何一种

         \s      一位空格

         \S      一位非空格

         .       一位任意字符

         \.     一位.

        (2)边界符号

             ^ : 以..开始

             $ ：以..结束

                两个都写就是只能是这里面的内容而不是包含

        (3)量词符号

        {m,n}  最少m个，最多n个

        {m,}   最少m个，没有上限

        {m}    正好m个

         ?      0个或者1个

         +      一个或者多个

          *      0个或者多个

         (4)特殊符号 

        []: 1位任意的[]内的任意内容

      [^abcx]: 1. 占了一位   2. 非abcx中的任何一个

      [abcx]: 1. 占了一位    2. a或者b或者c或者x

      [a-z]: 1. 占了一个     2. 里面的任何一个小写字母

      [a-zA-Z]: 1. 占了一个     2. 里面的任何一个字母

      [A-Z]: 1. 占了一个     2. 里面的任何一个大写字母

      [0-9]: 1. 占了一个     2. 里面的任何一个数字

       (): ()内的内容当成一个整体

        [\u4e00-\u9fa5] 任意一个中文字符

        (5)修饰符：g(全局)   i(忽略大小写)

        4.正则表达式和字符串联合用的方法

        

   /* 
     字符串中和正则相关的方法：
        字符串中的方法，但是和正则相关

      1. str.replace('旧字符','新字符')
      1. str.replace('正则','新字符')   把符合正则负责的替换新的字母


      2. str.match(reg);   // 在字符串中查找到符合正则规则的内容 放入到一个数组中

      3. str.search(reg): 和indexOf的作用一模一样，但是indexOf(参数)参数不支持正则
   */