week6

XML

XML其实就是创建一个后缀.xml的文件
如何使用：
    必须写上声明标间：<?xml version="1.0" encoding="utf-8"?>//version版本号 -- 目前只有1.0版本在使用
    必须写上一个根标签，而且只能写一个根标签，而且必须是双标签，只有双标签里面才可以放其他标签
    里面随便放
使用ajax去获取XML
    路由：写为"xx.xml"
    xhr.responseText换成xhr.responseXML

JSON:JavaScript Object Notation

作用和XML类似，都是用于当一个配置文件|数据格式
好处：比XML更简洁，更快，更容易解析 - 一个优秀的数据格式可以极大的提升程序员的开发效率
后端把数据库的数据取出来整理为一个JSON字符串：res.end(JSON.stringfy(rs))
前端依然使用Ajax去获取响应到的数据，真正重要的：xhr.reponseText

JQueryUI:

基于jQuery(基于JavaScript的一框架，是三大框架出现之前全球最火的一个，但是现在已经被淘汰了)的开源网页用户界面代码库，提供了HTML CSS JS的一个插件库
组件库：
    组成网页一部分的部件，代码重用，一般不具备JS功能的
插件库：
    跟组件库差不多，但是带有JS功能
如何使用：
    百度搜索jQueryUI下载
    必须在页面上进行引入-模板
    挑选出需要的插件，复制到项目之中
    根据设计图去修改样式 - 修改不成功只有一个可能:权重不够
    使用ajax去获取数据库中的数据，来进行页面渲染
    一定要等页面渲染完后再去删掉插件的API

jQuery

使用jquery之前必须先引入：jQuery.js
jquery之中最有魅力的一个方法叫做$或者jQuery：工厂函数
作用：
    查找元素：
        直接查找：$("JQ选择器")
        通过关系网：前提至少先找到一个人才可以使用关系网：
            父元素：parent();
            子元素：children();
            前一个兄弟：prev();
            后一个兄弟：next();
            其他兄弟：siblings();
JQ自带隐式迭代：不需要遍历，可以直接对着集合做操作===>js不能直接对集合做操作，要么下标拿到某一个，要么遍历拿到每一个才可以操作
    操作元素：
        内容：
            获取：$("xx").html/text/val
            设置：$("xx").html/text/val("新内容")
        属性：
            获取：$("xx").attr("属性名")
            设置：$("xx").attr("属性名","属性值")
            删除：$("xx").removeAttr("属性名")
        样式：
            可以操作class：
                添加class：$("xx").addClass("新class")
                删除class：
                    $("xx").removeClass();//删全部
                    $("xx").removeClass("xx");//只删除这个class
                切换class：
                    $("xx").toggleClass("xx");//在有xx和没有xx之间切换
            直接操作css：设置时依然设置的是内联，因为优先级最高，获取时，不在乎你是哪里的样式，他只会获取你生效的样式
                获取：$("xx").css("属性名")
                设置：
                    $("xx").css({
                        属性名:"值",
                        属性名:"值",
                        属性名:"值",
                        ...
                    })
       创建元素&上树：
           $("父").append($("<elem 属性名="${变量}">$变量</elem>"))
       删除：
           $("xx").remove();
       JQ动画：
           显示：$("xx").show();
           隐藏：$("xx").hide();
           切换：$("xx").toggle();
           注意：如果不传参数，是瞬间显示和瞬间隐藏
                 如果传入参数：$("xx").toggle("动画名称",时常) - - 一定要搭配jQueryUI，jQueryUI对这三个方法进行了增强
       JQ不可以使用以前DOM的语法，DOM也不可以使用JQ的语法，但是其实两者可以互换：
           DOM->JQ：$(DOM)
           JQ->DOM:jq对象[下标];//jq的东西千万不要去循环遍历加下标就会变得更加麻烦，本来jq就会自动隐式迭代
       绑定事件：
           $("xx").事件名(callback)
       获取下标：
           $("xx").index();

Node.js的第三方框架

express需要使用npm下载安装它:express简化Node.js的，里面有两个核心概念(路由和中间件)
    下载：在项目路径下打开cmd：npm i express
    引入后发现express是一个函数对象，用于创建服务器应用的，所以还要设置监听端口
        var express=require("express")
        var app=express()
        app.listen(80)
    路由：客服端发来的请求中的一部分，也称呼叫做文件的相对路劲，通过判断路由的不同，响应不同的内容
        GET方式：
            app.get("路由名",(req,res)=>{
                req->依然是请求对象，保存着前端传来的请求消息：req.query.键名;(不光可以得到GET表单提交的，还可以得到GET的AJAX提交的消息)
                res->依然是响应对象，可以向前端发送数据，也可以向前端发送文件
                    发送数据：res.send(json 字符串);
                    发送文件：res.sendFile("文件路径");
            })
        特殊：POST方式请求要麻烦一些，尤其是在获取前端传到后端的请求消息，因为post是隐式提交，所以需要某些操作才能看到它
            app.post("路由名",(req,res)=>{
                req->依然是请求消息，保存着前端传来的请求消息：3步
                    下载引入一个第三方模块：var bp=require("body-pavser")
                    使用【中间件】的语法：app.use(bp.urlencoded({extended:false}))
                    req.body.键名
                res->依然是响应对象，可以向前端发送数据，也可以发送文件
                    发送数据：res.send(json 字符串)
                    发送文件：res.sendFile("文件路径")
            })
    现在不管是form表单还是ajax，都可以自习选择使用get还是post了
    如果全栈开发，一个人随便搞，但是如果是前后端分离开发，那么两个人一定要沟通：路由是什么？请求是get(拿东西，安全性不挂钩)还是post(注重安全性)
    中间件：其实就是一个函数，但是它也可以访问到req和res两个对象，必须处于【路由之前】
        中间件的功能包括：
            可以执行任何代码
            可以修改请求和响应对象
            可以终止请求
            可以放行到下一个中间件/路由 - - 中间件可以写多个
            语法：
                qpp.use((req,res,resolve)=>{
                    一切想要执行的代码，都可以放
                    resolve();//放行函数
                })
            除了可以修改请求消息外，还可以完成两个固定套路：
                获取post的隐藏的请求消息：app.use(bp.urlencoded({extended:false}))
                内置中间件加载一切静态资源：app.use(express.static("静态资源的文件夹名"))

如何简化Ajax:

jQuery提供了一个新的ajax方法：
    $.ajax({
        url:"路由", - - 必写
        date:"请求消息", - - 可选
        dateType:"HTML/XML/JSON", - - 可选，默认值为HTML(普通字符串)，如果写了JSON，衣服就不需要自己再脱了
        type:"GET/POST", - - 可选，默认值GET
        success:date=>{ - - 必写
            date -> 后端响应的，拿到数据要干什么，必须放在回调函数里面
            
        }
    })