认识前后端交互_js如何与后端交互

前后端交互

一、认识js中的异步任务

1.js是单线程的语言：
	特点：所有的任务按顺序执行，如果出现一个任务比较耗时，会出现代码的阻塞
    
2.js执行代码的顺序：先执行同步任务，执行完毕之后去异步队列中执行异步代码
	因为js是单线程的语言，处理不了异步任务(耗时任务)，但是js的宿主环境浏览器是多线程的，就会把异步任务交给浏览器处理
    
    console.log(1); // 同步任务
    setTimeout(function () {  // 异步任务
        console.log(2);
    }, 100)
    console.log(3); // 同步任务
结果：依次为1，3，2
1
2
3
4
5
6
7
8
9
10
11
12

问题：函数内部异步代码内的局部变量，在外如何取出

function getNum(cb) { // 代码执行顺序，先同步，后异步
        // 1. 同步位置
        setTimeout(function () { // 3. 异步任务的位置
            var num = 1;
            cb(num)
        }, 0)
        // 2. 同步位置
        // return undefined; //默认的
    }
 getNum(function (x) { 
     console.log(x); 
 })
总结：回调函数可以在函数外部取出函数内部异步代码中的局部变量的值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

二、认识前后端交互

1.语言：
	前端：html、css、js
	后端：[nodejs]、Java、php、python、c++等等
    js  当js运行在浏览器软件上时，js就是前端语言  ECMAScript + DOM + BOM
    nodejs  当js运行在node软件上时，js就是后端语言   ECMAScript + 模块
2.交互场景：
	(1)地址栏输入ip地址，服务器端给我们会响应一个结果；
	(2)点击注册，将所有的信息保存到了服务器中的数据库中；
	(3)滚动滚动条时，向服务器索取少量数据等。。。。。
3.服务器
	(1)是用来提供服务的，当我们自己的电脑跑一些特殊的程序或者安装开启特殊软件(apache服务器)，此时我们的电	   脑也属于服务器
	  server（自己使用nodejs写的程序），让它跑起来，开了一个服务，这个服务器给我们提供了很多的接口
	(2)为什么要有服务器：
            ①. 别人想看比较麻烦
            ②. 写的项目过大，内存占用也大，我们电脑内存一般不足以存放很多的项目
         我们可以通过特殊软件把我们的代码上传到服务器，后期想查看可以实现ip地址+端口号来查看
       如：ip地址（不好记）：  把ip转为    域名
           http://10.254.89.101     http://www.baidu.com
           http://192.168.1.1
4.端口号：
       每一个服务器上都有很多的文件，提供的就是不同的服务，每一个都有的编号   0- 65535   
       一般习惯四位数端口号像 8080
            https://www.baidu.com:443      https默认端口号都是443
            http://www.baidu.com:80        http默认端口号都80
5.接口：是由后端提供的，前端连接不同的接口、获取不同的数据，从而实现不同的效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

三、同步和异步请求

1.同步交互：客户端向服务器端发送交互，必须要等服务器返回结果后，才能进行其他的操作；
2.异步交互：客户端向服务器端发送请求，不必等到服务器返回结果，就可以进行其他业务操作
3.在发生交互时浏览器的作用：
	前期：浏览器的作用是需要进行发送请求 + 显示到页面上
	后期：浏览器的主要作用是显示到页面上，发送请求则由ajax的核心对象XMLHttpRequest来完成
1
2
3
4
5

四、Ajax

1.作用：在不刷新页面的前提下，向后端发送请求，请求返回少量的数据
2.ajax的核心对象：XMLHttpRequest对象
	1）创建XMLHttpRequest对象
    	语法：let 对象名 = new XMLHttpRequest()
	2）对象的方法：
    	①发送请求的相关配置：对象名.open('请求方式','请求服务器url地址',true(异)/false(同)) 默认异步交互
        ②发送请求：对象名.send()
    3）对象的属性：
    	①请求状态码：对象名.readyState         ---------    (有0、1、2、3、4五个状态)
			0代表对象还未创建；
             1代表已创建对象但还未发送；
             2代表发送请求已完成；
             3代表服务器已接收请求并读取；
             4代表服务器读取请求已完成.
        ②响应状态码：对象名.status        
			200表示响应成功；
             404表示我们url地址出错了；
             500表示服务器出错了
        ③服务器给我们响应回来的数据：对象名.responseText
			该数据是一个字符串形式的数据，如'{ }'、'[{ },{ },{ }]'
	4）对象的事件：
    	对象名.onreadystatechange=function(){ }   
			触发条件：当请求状态码发生变化时就触发
3.发送请求的步骤和方式
	1）发送请求的步骤：
    	①创建XMLHttpRequest对象（let xhr = new XMLHttpRequest()）;
	    ②配置相关请求信息：xhr.open('请求方式','请求服务器url地址',true(异)/false(同));
	    ③发送请求：xhr.send();
	    ④接收响应：
		      xhr.onreadystatechange = function(){
                   if(xhr.readyState == 4&&xhr.state == 200){
                      console.log(xhr.responseText) // 拿到服务器响应给我们的数据
                   }
               } 
		服务器响应给我们的数据：JSON.parse(xhr.responseText)
	2）请求的方式（get和post请求）
    	get请求：携带参数和不携带参数2种
        	当携带参数时，在请求的url地址拼接一个请求的参数，
             注意："current=2&pagesize=24" 参数中间不能出现任何的空格
                如：http://localhost:8888/test/second?current=2&pagesize=24
			
		post请求：当携带参数时：
             ①请求参数需要放在send中；
             ②请求发送之前需要告诉服务器请求的参数的格式，即需要设置请求头
                 xhr.setRequestHeader("Content-type","参数的格式")
				如： 
                	//设置发送请求头
                    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
    			   //发送请求
    			   xhr.send("name=2&age=2")         
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

   //需求：在函数外部取函数内部异步代码中响应的结果：使用回调函数即可解决
    function ajaxtool(callback) {
        //创建对象
        var xhr = new XMLHttpRequest();
        xhr.open("get", "http://localhost:8888/goods/list?current=2&pagesize=24")
        xhr.send();
        xhr.onreadystatechange = function () { // 异步代码
            if (xhr.readyState == 4 && xhr.status == 200) {
                callback(JSON.parse(xhr.responseText));
            }
        }
    }
    // 在函数外部拿到响应回来的数据
    ajaxtool(function (x) {
        console.log(x);
    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

五、正则表达式（补充）

1.概念：又称规则表达式，用于匹配一个字符串满足某种规则(即正则表达式)RegExp
2.创建语法：
	1）字面量法：var reg = /字符串或规则（正则表达式）/修饰符
       修饰符：g(全局) 、 i(忽略大小写)
    2）构造函数：
    	var reg = new RegExp('字母串或者规则（正则表达式）','修饰符')
3.方法：
	 reg.test(字符串) ：查看字符串是否满足reg规则，满足为结果为true，不满足结果为false
4.基本元字符：
	  \d      一位数字
      \D      一位非数字
      \w      一位字母下划线数字中的任何一种
      \W      一位非字母下划线数字中的任何一种
      \s      一位空格
      \S      一位非空格
      .       一位任意字符
      \.     一位.
5.边界符号：
	^ : 以..开始；$ ：以..结束
6.量词符号：
	{m,n}  最少m个，最多n个
    {m,}   最少m个，没有上限
    {m}    正好m个
    ?      0个或者1个
    +      一个或者多个
    *      0个或者多个
7.特殊符号：
    []: 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] 任意一个中文字符
    (): ()内的内容当成一个整体
8.字符串中和正则相关的方法
	 1. str.replace('旧字符','新字符')
        str.replace('正则','新字符')   把符合正则负责的替换新的字母
     2. str.match(reg);   // 在字符串中查找到符合正则规则的内容 放入到一个数组中
     3. str.search(reg): 和indexOf的作用一模一样，但是indexOf(参数)参数不支持正则
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41