js第5周——服务器+Ajax

一、server

1、学习原因:

       1、前端招聘要求 - 熟悉 或 了解一门服务器端者优先

       2、对于我们前端来说,了解服务器端的机制,更好更快的进行前端开发

 

        可能成为全栈的语言:

              1、java语言 - 不包含移动端(安卓)

              2、javascript语言:

            客户端 - 开发根本

            服务器端 - node.js 历史上第一次一门语言可以通吃前后端

            数据库 - MySQL+mongoDB

            移动端 - 网页/app/小程序/公众号(跨所有平台的IOS/Andriod)

            混合开发框架:uniapp/h5+plus/jqueryMobile - 只需要一个前端,学习一点点ios和andriod的语法就可以一个人搞定了

 

       对服务器端的掌握 - 入门

       最终目的:登录 + 注册 + 搭配上3天的ajax完成【全栈】一条龙:增删改查

       完成小项目:图书管理系统  

2、基本内容:

1.服务器端概念:

       简单来说就是一个电脑

              对于开发人员来说:

              硬件服务器 - 电脑

              软件服务器 - 中间件(软件可以将你的电脑变成一台服务器,其他人都可以来访问)

2.XAMPP软件 - 中间件

             安装成功后运行apache——服务器已经开启了(私网/局域网)  

              如何访问apache服务,其实apache服务器控制着一个文件夹:d:/xampp/htdocs

                     打开浏览器:

                            127.0.0.1:端口号

                            localhost:端口号

                            主机号:只有自己可用

              其他人也可以来访问:

                            ip地址:端口号  

二、MySQL - 数据库产品

1.数据库类型

       (1).关系型数据库 - 以表格为主

              Oracle - Oracle(甲骨文)

              主要应用于【企业级】开发市场:企业级:大公司、国企(银行、警察局),不差钱的公司,安全性非常高

              MySQL  - Oracle(甲骨文)

              主要应用于【互联网】开发市场 - 中小型公司的首选

       (2).非关系型数据库 - 没有固定的格式

              是一种运动 - 反关系型数据库

              主流产品 - mongoDB:以JSON格式为主

 

2.MySQL简介

        免费 简单 开源

          开源的好处:

                     公司:免费聘请民间大佬为你做测试、开发、优化

                     个人:查看、修改、添加源代码 - 开挂

         爆火的网站架构:LAMP - Linux + Apache + MySQL + PHP - 这四个都是免费的,让中小型公司老板非常的舒服

         企业网站机构:  Linux(aix) + javaEE + oracle + weblogic - 一套架构起码上百万 - 安全性

3.MySQL基本内容:

       访问:2种

         1、图形化界面(更简单更方便) - 傻瓜式操作

              要求:同时打开mysql和apache

              访问:127.0.0.1:端口号/phpmyadmin

                    localhost:端口号/phpmyadmin  

         2、*****命令行方式:复杂很多,但是这样才能学到真正的SQL语句

              如何进入数据库

               1、打开cmd

               2、输入cmd的命令,进入到d:/ cd xampp/mysql/bin

               3、登录:mysql -uroot -p 回车 不要加分号

               4、退出:exit

               5、学习SQL语句:关系型数据的SQL语句是公用的

                   1.数据库:

                     创建:CREATE DATABASE IF NOT EXISTS 数据库名称 CHARACTER SET utf8;  

                     查看:SHOW DATABASES;  

                     切换:USE 数据库名称;                                          

                     删除:DROP DATABASE IF EXISTS 数据库名称;  

            2.数据表:

                      数据库的数据类型:

                            数值:Int - 整型

                                  Float/Double - 浮点型

                                  Decimal - 精确值

                            字符串:

                                   CHAR - 长度固定的

                                   VARCHAR - 长度可变的

                            日期:

                                    DATE - YYYY/MM/DD

                                    DATETIME - YYYY/MM/DD hh:mm:ss

                                    TIMESTAMP - 时间戳(标识:唯一不重复 - id也可以)                                   

                         创建数据表:

                                 CREATE TABLE 表名(

                                                 字段名 数据类型,

                                                 ...

                                          );

                   3、*****数据:4句以后最常用的操作,在PHP中

                   增:INSERT INTO 表名 VALUES(字段值,...)

                   举例:INSERT INTO user VALUES(0,"梁以龙","321321","lyl@qq.com","0");

 

                   删:DELETE FROM 表名 WHERE id=几; - 一旦删除就回不来了

                   举例:DELETE FROM user WHERE id=3;

 

                   改:UPDATE 表名 SET 字段名=字段值,... WHERE id=几;

                   举例:UPDATE user SET name="邓如宇",vip="1" WHERE id=5;

 

                   查:3种语法:

                   1、SELECT * FROM 表名; - 得到此表里面所有数据

                   2、SELECT * FROM 表名 WHERE id=几; - 得到此表里面id=几的这个人的所有数据

                   3、SELECT 字段名,... FROM 表名 WHERE id=几; - - 得到此表里面id=几的这个人的想要的字段

 

三、PHP——后端

1、PHP:最简单的一门语言

   火爆架构:LAMP

   php文件后缀名.php

   1、*****如何运行php文件:

              打开apache,将你的项目/文件放到htdocs文件夹中,打开浏览器输入:127.0.0.1,打开你需要的文件  

   2、php语法基础:

       1、输出方式:

              1、echo(想要输出的内容); 或 echo 想要输出的内容; - 类似document.write输出在页面上

                     echo只能输出4种标准类型,不能输出别的类型

              2、var_dump(想要输出的内容); - 类似document.write输出在页面上,但是输出的非常详细,查看到数据类型和值

                     var_dump可以输出一切数据类型,但是以后不会用到太多,太过详细了  

       2、变量和常量

              *1、变量:值可以改变

                 语法:$变量名=值;

                 注意:使用时$也不能省略

 

              2、常量:一旦创建后,值不能修改了

                 语法:const 常量名=值;

 

       3、*数据类型:

              四种标准/基本/原始类型:

                     整型:Int

                     浮点型:Float/Double

                     布尔:Boolean

                     字符串:string - 有区别

                            单引号 - 只能放入纯文本

                            双引号 - 支持变量,类似js中模板字符串

                                   echo "我的名字叫{name}今年{age}岁喜欢{$hobby}";

 

              两种复合类型:

                     1、Array - 数组

                            创建:

                              1、直接量:$arr=[值1,...]; - 索引数组

                              2、内置函数:$arr=array( - hash数组

                                                 key=>value,

                                                 ...

                                          );

                                 访问:$数组名[下标];

 

                                 遍历:循环

 

                     2、Object - 面向对象,不需要用到面向对象开发

 

              两种特殊类型:

                     1、Resource - 资源类型,连接上数据库才会看到

                     2、null - 空,释放内存

                                   "" - 有,值为空

                                   null - 不存在

      

       4、运算符:几乎和js一致,唯独字符串拼接.,意味着php想要调用方法绝对不可能用.  

       5、分支、循环、函数:完全一样

       7、API:理论上完全一样的,但是操作却不同,不需要做任何学习和记忆,面向百度开发

 

2、全栈开发:

       1、前端->后端:

              前端需要发起请求:

                     1、表单请求、提交

                            注意:

                              1、input必须添加name属性,甚至有的人(radio、checkbox)可能还要添加value

                              2、form表单必须添加action="服务器端的文件的路径";

                              3、method到底用get还是post,和后端进行沟通

                            只负责发送,不负责保存

                            还可以用ajax发起请求

                           

                     2、后端 需要接收住 前端传来的 请求消息(查询字符串)

                            语法:$_GET/POST/REQUEST["input的name的值"]  

                            REQUEST -> 请求,能接住一切请求不管是get还是post

 

       2、后端<->数据库:php自带操作mysql的API,只需要学习4.5句话

              1、创建出连接数据库的对象               $conn=mysqli_connect("hostname","username","userpwd","dbname");

             立马为创建的数据库连接设置中文编码:

                     mysqli_query($conn,"SET NAMES utf8");  

              2、创建SQL语句:

                     $sql="INSERT/DELETE/UPDATE/SELECT";  

              3、某个数据要执行某个SQL语句 - 执行

                     rs=mysqliquery(rs=mysqli_query(conn,$sql);

                     //增、删、改:结果是一个布尔值,true代表执行成功,false执行失败

                     //查:问题:得到了一个我们谁都不认识的结果集对象

                           解决:

                       *mysqli_fetch_row(不认识的结果集);//一次只会拿到一行数据,是一个数组

                        ***mysqli_fetch_assoc(不认识的结果集);//一次只会拿到一行数据,是一个对象

                        mysqli_fetch_array(不认识的结果集);//一次只会拿到一行数据,既可以用索引下标也可能有hash下标

                                  

                 固定套路:

                     while((row=mysqlifetchxxx(row=mysqli_fetch_xxx(rs))!=null){

                                                 var_dump($row);

                                                 echo "
";

                                          }

 

              4、断开和数据库的连接

                     mysqli_close($conn);  

 

扩展:多个表单想要提交到同一个php,但是又想区分开功能:需要用到一标签       

<input type="hidden" name="自定义" value="自定义">

 

 

四、Ajax

1、概念

   同步交互:用户向服务器端发起请求的时候直到服务器端进行响应的全过程,用户是不可以做其他事情的(等)

            典型:表单提交请求、网址请求 - 都属于同步交互

 

   异步交互:用户向服务器端发起请求的时候直到服务器端进行响应的全过程,用户是可以做其他事情的(不等)

            典型:ajax请求

 

2、ajax:asynchronous javascript and xml:直译:异步的javascript和xml - 前端技术

   不严格的定义:页面不会完整刷新,只会导致局部页面发生改变

   我们早就见过异步技术/异步代码了:

       1、定时器:定时器里面的内容在耗时也不会卡主后续代码 - 做效果

       2、ajax:目的:在不刷新页面的情况下和服务器端进行交互 - 可以将服务器端的数据放到前端

 

3、如何使用:4步骤

       1、创建ajax的核心对象XMLHttpRequest;

              var xhr=new XMLHttpRequest();  

       2、建立和服务器端的连接

              xhr.open("GET/POST","xx.php");  

       3、向服务器端发送请求消息

              xhr.send();  

              特殊:2个

                     1、GET请求:xhr.send()会失效,但是还不能省略,必须写为xhr.send(null);请求消息需要放到url后面添加?key=value&key=value...

                           xhr.open("GET","url?key=value&...");

                            xhr.send(null);

 

                     2、POST请求:xhr.send可用,但是必须在之前加上一句话设置请求头部

                            xhr.open("POST","url");

                            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

                            xhr.send("key=value&...");

 

       4、绑定状态监听事件:

              xhr.onreadystatechange=()=>{

                     if(xhr.readyState==4&&xhr.status==200){

                            xhr.responseText;//难在你拿到了数据要干什么?

                     }

              }      

五、JSON-数据格式

1、XML 不用,已经淘汰了

   1、面试题:HTML、XHTML、DHTML、XML分别是什么?

       HTML - 网页

       XHTML - 更严格的网页

       DHTML - 动态特效的网页:并不是新技术、新概念,现有技术的整合统称:HTML+CSS+JS(DOM) - 离线网页也就有动态特效

       XML - 配置文件 | 数据格式

 

   2、如何使用xml,其实就是一个后缀.xml的文件

       1、创建.xml文件

       2、必须写上声明标签:

                     version - 版本:目前的版本只有1.0 和 1.1 但1.1升级并不理想,没有人使用,以后都不必在学了,已经淘汰了

                     encoding - 编码格式

       3、必写写上一个根标签,而且只能写一个根标签(双标签),没有任何的预定义标签,所有的标签全都自定义

                    

       4、里面你随意。想放什么标签就放什么标签

 

       前端:依然使用ajax去获取xml:

              1、url 写 "xx.xml";

              2、xhr.responseXML 获取响应的xml文件,跟DOM差不多

              3、可以使用【核心DOM】去找到自己需要的部分

 

2、*****JSON:javascript Object Notation:js对象表示法,本身就是js的一部分

       作用:数据格式 类似于 XML

       好处:比XML 更简洁、更快、更容易解析 - 一个优秀的数据格式能极大的提升程序员的开发效率

 

       1、哪些属于JSON字符串:后端把数据库的数据取出来整理为一个JSON字符串:

              1、'[1,2,3,4]'

              2、'{"key":value,...}'

              3、'[{},{},{},{}]'

              4、'{"names":[],"ages":[],...}'

 

       2、PHP如何将数据变为JSON字符串:

              echo JSON_encode($arr);

              var jsonTxt=JSON.stringify(jsonObj);//node.js以后你想要穿衣服就靠它

 

       3、前端依然使用ajax获取响应数据:

              xhr.responseText;//json字符串

 

          把json字符串变为json对象 - 脱衣服:2种

              eval("("+xhr.responseText+")");

              *JSON.parse(xhr.responseText);