ajax - day01

一、概念

1.1 同步交互

用户向服务器端发起请求，直到服务器端进行响应的全过程，用户是不可以做其他事情的（等）典型：表单提交、网址请求 - 都属于同步交互

1.2 异步交互

用户向服务器端发起请求，直到服务器端进行响应的全过程，用户是可以做其他事情的（不等）典型：ajax请求

二、Ajax

Asynchronous JavaScript And XML

2.1 如何使用

创建ajax核心对象：

var xhr=new XMLHttpRequest();

建立和服务器端的连接

xhr.open("GET/POST","路由");

向服务器端发送请求消息

xhr.send();

如果你是GET请求:

//获取 - ajax一般都是使用get，去找服务器端那东西的 
xhr.open("GET","路由?key=value&key=value&...");
xhr.send(null);

如果你是POST请求:

//post：发送 - 举例：跟安全性挂钩，登录、注册
xhr.open("POST","路由");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("key=value&key=value&...");

绑定状态监听事件

xhr.onreadystatechange=()=>{
    if(xhr.readyState==4&&xhr.status==200){
            xhr.responseText - 服务器端相应的文本，ajax就难在你拿到东西了要干什么
    }
}

ajax - day02

一、HTML、XHTML、DHTML、XML分别是什么？

HTML - 网页：预定义了很多标签，我们学习后，就可以使用他们写出网页
XHTML - 更严格的网页：HTML5 -> XHTML -> HTML4.01，比如：<input/>、<input disabled="disabled">
DHTML - 动态效果网页：在离线端，我们的网页也具有动态的特效：其实不是新技术也不是新概念，而是现有技术的一个整合统称：HTML+CSS+JS(dom)
XML - 配置文件|数据格式：没有提供过任何预定义标签！全靠自定义

二、如何使用XML，其实就是一个后缀.xml的文件

创建xx.xml文件
必须写上声明标签： - 必须放在第一行第一列，version - 版本号：目前有的版本只有1.0和1.1，但是1.1升级并不理想，没有人使用，所以1.0可以说是唯一版本，encoding - 编码格式
必须写上一个根标签，而且只能写一个根标签，而且必须是双标签

三、JSON

JavaScript Object Notation：JS对象表示法，本身就是JS的一部分

作用：数据格式类似于 XML
好处：比XML 更简洁、更快、更容易解析
哪些属于JSON字符串：
1. '[1,2,3,4,5]';
2. '{"key":value,...}';
3. '[{},{},{},{}]';
4. '{"names":[1,2,3,4],"ages":[1,2,3,4]}'
后端把数据库的数据取出来整理为一个JSON字符串：var jsonTxt=JSON.stringify(jsonObj);
前端依然使用ajax去获取响应数据，真正重要的：xhr.responseText;
将JSON字符串解析为一个JSON对象：那么：2种方法
1. eval("("+xhr.responseText+")");
2. JSON.parse(xhr.responseText);

jquery、express

一、JQueryUI

基于jQuery的开源网页用户界面代码库 - 提供了HTML、CSS、JS的一个插件库。

1.1 如何使用jQueryUI：

下载jQueryUI：
必须在页面上进行引入： - 顺序不能错，一定要先引入jquery.js再引入jquery-ui.js。

<link rel="stylesheet" type="text/css" href="jquery-ui-1.13.2.custom/jquery-ui.css"/>
<script src="jquery-ui-1.13.2.custom/external/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery-ui-1.13.2.custom/jquery-ui.js" type="text/javascript" charset="utf-8"></script>

挑选出你需要的/喜欢的插件，直接梭到你的项目中
根据设计图，来修改样式 - 修改不成功，只有一个可能：权重不够
使用ajax去获取数据库中的数据，来进行页面渲染

二、jQuery

2.1 $的作用：

查找元素：$("css选择器"); 等同 document.querySelectorAll；
1. 父：$("JQ的选择器").parent()
2. 子：$("JQ的选择器").children()
3. 前一个兄弟：$("JQ的选择器").prev();
4. 后一个兄弟：$("JQ的选择器").next();
5. 其他兄弟：$("JQ的选择器").siblings();
创建元素：$("<标签></标签>"); 等同 document.createElement；
可以将DOM转为JQ：$(DOM对象)，底层用到了一个人：重载：arguments - 可以通过判断用户传入的实参的不同执行不同的操作。
代替window.onload -> $(callback);

2.2 JQ的遍历：

$("一堆人").each((i,val)=>{
    elem->选择器找到的每一个元素
})

2.3 JQ的样式的操作：

操作class：
1. 添加：$("JQ的选择器").addClass("新class");
2. 删除：$("JQ的选择器").removeClass();
3. 切换：$("JQ的选择器").toggleClass("d2"); - 在有d2和没有d2之间进行切换
操作内联样式：
1. 获取：$("JQ的选择器").css("css属性名")
2. 设置：$("JQ的选择器").css("css属性名","css属性值");
设置多个样式：

$("xx").css({
        css属性名:"css属性值",
        ...
});

2.4 JQ操作属性：

获取：$("xx").attr("属性名");
设置：$("xx").attr("属性名","属性值");

2.5 操作内容:

获取：$("JQ的选择器").html/text/val()
设置：$("JQ的选择器").html/text/val("新内容")

2.6 JQ上树：

父亲.append(儿子)

2.7 JQ动画：

显示 : $("xx").show();
隐藏 : $("xx").hide();
切换 : $("xx").toggle();如果不传参数，是瞬间显示，瞬间隐藏，可以传入实参：$ ("xx").api("动画名称",时长);

2.8 删除元素：

$("JQ的选择器").remove()

2.9 绑定事件：

$("JQ的选择器").事件名(callback)

JQ不可以用以前DOM的语法，DOM也不可以用JQ的语法，但是两者其实可以互换

三、express

Node.js的第三方框架：express，需要使用npm去下载它，express中有两个核心概念

3.1 下载：在你的项目路径下打开cmd：npm i express

3.2 引入后发现express是一个函数，创建服务器应用，还要设置监听端口！

var express=require("express");
var app=express();
app.listen(端口号);

3.3 路由

客户端发来的请求中的一部分，也称呼叫做相对路径，通过判断路由的不同响应不同的内容。

get方法

app.get("路由",(req,res)=>{
    //req和res不是以前的req和res，用法会与原生Node有所不同
    //req->依然是请求对象，保存着前端传来的请求消息：req.query.键名;
    //res->依然是响应对象，可以为前端发数据，也可以为前端发页面：
    //发数据：res.send("想要发的东西");
    //发文件：res.sendFile("文件的路径");
})

post方法

app.post("路由",(req,res)=>{
//req和res不是以前的req和res，用法会与原生Node有所不同
//req->依然是请求对象，保存着前端传来的请求消息：3步
        //需要引入一个第三方模块（中间件的语法）：var bp=require("body-parser")
        //使用中间件的语法：app.use(bp.urlencoded({extended:false}))
        //req.body.键名;
//res->依然是响应对象，可以为前端发数据，也可以为前端发页面：
        //发数据：res.send("想要发的东西");
        //发文件：res.sendFile("文件的路径");
})

3.4 中间件

express本身就是一个功能极简的框架，完全路由和中间件两部分构成，中间件其实就是一个函数，但是它也可以访问req和res两个对象，处于路由之前。

中间件的功能包括：
1. 可以执行任何代码
2. 可以修改请求和响应对象
3. 可以终止请求
4. 可以放行你到下一个中间件/路由 - 中间件可以写多个
语法：

app.use((req,res,resolve)=>{
        一切你想要执行的代码，中间件代码
        resolve();//放行的函数
})

固定套路：
1. 获取post的请求消息，见上面 - app.use(bp.urlencoded({extended:false}))
2. 内置中间件加载一切静态资源：app.use(express.static("静态资源的文件夹名"));

四、简化ajax

4.1 jQuery提供了一个新的ajax：

$.ajax({
        url:"路由", - 必写
        data:"请求消息", - 可选
        dataType:"HTML/XML/JSON", - 可选，默认值为HTML，如果你写了JSON，则可以省略JSON.parse方法
        type:"GET/POST", - 可选，默认值为GET
        success:(data)=>{ - 必写
                data->后端响应的内容，你不需要再写xhr.responseText
        }
})

4.2 自己封装一个

<script>
    function $() {

    }

    $.ajax = function ({ type = "GET", url, data = "", success, dataType = "JSON" }) {
        var xhr = new XMLHttpRequest();

        if (type == "GET") {
            xhr.open(type, url + "?" + data);
            xhr.send(null);
        } else {
            xhr.open(type, url);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send(data);
        }

        xhr.onreadystatechange = () => {
            if (xhr.readyState == 4 && xhr.status == 200) {
                if (dataType == "HTML") {
                    success(xhr.responseText)
                } else if (dataType == "XML") {
                    success(xhr.responseXML)
                } else if (dataType == "JSON") {
                    success(JSON.parse(xhr.responseText))
                }
            }
        }
    }
</script>

ajax、express、jquery - 第六周