Ajax前奏（CS/BS架构,http服务搭建,WAMP,PHP基础语法）

2019独角兽企业重金招聘Python工程师标准>>>

在学习Ajax之前，我们先来认识一下CS/BS架构以及及基础的PHP吧。

CS/BS架构

如果对服务器、浏览器之间的简单交互还没有大概了解的，建议先看一下之前的:浏览器和服务器的简单交互。

CS架构

• Client/Server:客户端,服务器。
• 简而言之，就是这类架构的软件必须联网才能使用，为常见的例子就是网络游戏,比如LOL,WOW如果不联网无法使用,你在软件内所做的所有操作通过互联网能够传递到其他的的玩家身上。
• 优点：
  • 性能较高:可以将一部分的计算工作放在客户端上,这样服务器只需要处理数据即可。
  • 界面酷炫:客户端可以使用更多系统提供的效果,做出更为炫目的效果。
• 缺点：
  • 更新软件:如果推出了新版本,不更新客户端无法登陆使用(一部分)。
  • 不同设备访问:如果使用其他的电脑,没有安装客户端的话就无法登陆软件(比如收发邮件)。

BS架构

• Browser/Server:浏览器,服务器。
• 现在所有的网站都是B/S架构,较为常见的例子有百度,知乎,网易云音乐Web等等,所有只需要通过浏览器即可使用。
• 优点：
  • 更新简洁:如果需要更新内容了,对开发人员而言需要更改服务器的内容,但是对用户而言只需要刷新浏览器即可。
  • 多设备同步:所有数据都在网上,只要能够使用浏览器即可登录使用。
• 缺点：
  • 性能较低:相比于客户端应用性能较低,但是随着硬件性能的提升,这个差距在缩小。
  • 浏览器兼容:处理低版本的浏览器显示问题一直是前端开发人员头痛的问题之一,移动设备兼容性较好,ie6已经越来越少人用了。 了解了这些，就可以开始服务搭建了。

服务器分类

• 按类型分: 文件服务器、数据库服务器、邮件服务器、Web 服务器等；
• 按软件分: Apache服务器、Nginx 服务器、IIS服务器、Tomcat服务器、Node服务器等。
• 按操作系统分: Linux服务器、Windows服务器等；
• 常见的服务器软件有 文件服务器：Server-U、FileZilla、VsFTP等； 数据库服务器：Oracle、MySQL、PostgreSQL、MSSQL等； 邮件服务器：Postfix、Sendmail等； HTTP 服务器：Apache、Nginx、IIS、Tomcat、NodeJS等

HTTP服务搭建

AMP

• A:Apache,M:MySQL,P:PHP
• Apache世界排名第一的服务器软件,特点是简单,速度快,性能稳定。
• MySQL 得益于他体积小、速度快、使用成本低，而且是开源哦，所以很多网站都选用MySql作为他们的数据库。
• PHP: Hypertext Preprocessor，中文名：超文本预处理器,直接将代码嵌入HTML文档中执行,简单易学,容易上手。
• AMP集成环境
  • WAMP: 在windows平台下如果想要一步到位安装好这些软件,可以使用wamp,其中w的意思为windows指的是windows操作系统。
  • XAMPP: 不同于wamp针对于windows,XAMPP可以安装在Linux,Windows,MAC OS X,Solaris这些操作系统上面。

WAMP集成环境

• 安装
  • 双击下载好的安装包;
  • 点击Next;
  • 选择安装路径,注意:不要使用中文路径.建议使用跟图片一致的路径;
  • 如果担心安装完成后找不到wamp可以将两个方框全部勾选,点击next继续安装;
  • 点击install开始安装;
  • 安装完毕以后点击finish即可启动wamp;
  • 启动完成能够在任务栏的右下角看到一个蓝色小图标即表示安装成功。
  • WAMP图标橙色解决方案:wamp图标解决方案。
• 测试访问
  • 打开浏览器输入127.0.0.1查看显示的内容。
  • 127.0.0.1含义: 127.0.0.1是回送地址，指本地机，一般用来测试使用,如果想要让其他电脑也能够访问,需要进行一些配置。
• 配置局域网访问 安装好了WAMP之后就能够通过自己的浏览器输入127.0.0.1,如果想要让同一局域网中的其他电脑也能够访问,需要如下设置：
  • 关闭防火墙;
  • 修改httpd.conf文件:因为Apache的配置默认不允许外部访问,我们需要修改配置,找到盘符D:\wamp\bin\apache\Apache2.2.21\conf文件 使用文本编辑工具打开,通过搜索功能找到onlineoffline tag - don't remove这句话,将在234行附近的 Allow from 127.0.0.1 替换为 Allow from all;
  • 保存,然后重启wamp的所有服务即可
• 配置网站根目录
  • 找到WAMP的安装目录:D:\wamp;
  • 找到Apache的配置文件 D:\wamp\bin\apache\Apache2.2.21\conf;
  • 修改http.conf文件:使用文本编辑工具打开httpd.conf文件,搜索documentRoot 如果是初次安装,应该分别在178行,205行,修改完毕以后记得保存ctrl+s;
  • 重启WAMP服务,左键点击wamp图标,选择重新启动所有服务;
  • 建立文件夹,尝试访问,为了保证访问时确实有内容,在E:盘下建立www文件夹,并且在改文件夹下放入文件,再次尝试通过127.0.0.1进行访问
• 动态网站能够根据不同的情景改变页面显示的内容；根据不同的情境生成不同的html css js代码；请求网站的时候获取动态生成的html css js代码;
• 动态网站的开发：在服务端写一些代码，根据不同的情况生成不同的html css js并返回给浏览器;

PHP基础

• PHP代码执行方式: 服务端web编程写好的代码,需要通过浏览器访问服务器,在服务器端执行,然后返回给用户结果,如果直接使用浏览器打开,就会解析为文本。

PHP常见语法

• 文件定义,注释: PHP文件以.php结尾,代码的编写位置在<?php 写在这里?>

<?php
  //这是单行注释
  /*
      这是多行注释
  */
?>

• PHP变量规则:
  • 变量以$符号开头，其后是变量的名称
  • 变量名称必须以字母或下划线开头
  • 变量名称不能以数字开头
  • 变量名称只能包含字母数字字符和下划线（<A> - </A>-z、0-9 以及_）
  • 变量名称对大小写敏感
• 数据类型 PHP支持的数据类型包括:字符串,整数,浮点数,布尔,数组,对象,NULLL
• 定义字符串时需要注意:
  • 单引号:'' 内部的内容只是作为字符串
  • 双引号:"" 如果内部是PHP的变量,那么会将该变量的值解析
  • 字符串连接:使用.进行连接
• 算数运算符: +,-,/,*,%
• 赋值运算符: x = y,x += y,x -= y 如果想知道更多，可以查看W3C PHP。

<?php 
$x=10; 
$y=6;
echo ($x + $y); // 输出 16
echo ($x - $y); // 输出 4
echo ($x * $y); // 输出 60
echo ($x / $y); // 输出 1.6666666666667
echo ($x % $y); // 输出 4
?>

• 函数: PHP虽然系统内建了一些函数,但是这不影响我们定义自己的.,函数的作用就是在代码中可以重复使用的语法块,页面加载的时候不会执行,只有在被调用的时候才会执行
• 对象 PHP中允许使用对象这种自定义数据类型，使用时必须先声明,实例化之后才能够使用。

// 定义最基础的类
class Fox{
    public $name = 'foxClass';
    public $age = 10;
}
$fox = new $Fox;
// 对象属性取值
$name = $fox->name;
// 对象属性赋值
$fox->name = '小狐狸';

// 带构造函数的对象
class fox{
    // 私有属性,外部无法访问
    var $name = '小狐狸';
    // 定义方法 用来获取属性
    function Name(){
    return $this->name;
    }
    // 构造函数,可以传入参数
    function fox($name){
    $this->name = $name
    }
}
    // 定义构造函数 需要使用构造函数初始化对象
    $fox = new fox('小狐狸');
    // 调用对象方法,获取对象名
    $foxName = $fox->Name();

• 关系型数组 取值的时候使用key。

$cartoonPerson = array('name'=>'哈哈','friend'=>'我','skill'=>'思考'); echo $cartoonPerson['friend'];

这里的=>可以想象成js中的分号；关系型数组只能通过key获取，是一种以键值对为参数的数组。

$nameArr = arr(0=>'jack',1=>'rose',2=>'iceMountain');

此时可以通过echo $nameArr[1]来取出第二个参数；但如果是这种方式就直接使用最简单的数组了，基本没有此类应用。 关系型数组中定义的$value如果是boolean类型，输出结果是空或者1。

• 获取数组的长度：count(数组),返回数组的长度：循环数组；

• 内容输出

  • echo:PHP语句直接使用即可;
  • 输出字符串 print_r()函数输出复杂数据类型,比如数组,对象;
  • var_dump():函数输出详细信息。

print_r($arr);
// 结果为 Array ( [0] => 1 [1] => 2 [2] => 123 )

var_dump($arr);
/* 结果为 
    array
  0 => int 1
  1 => int 2
  2 => string '123' (length=3)
*/
循环语句: 这里只列举了foreach,for循环
// for 循环
for ($x=0; $x<=10; $x++) {
  echo "数字是：$x <br>";
} 

// foreach 循环
$colors = array("red","green","blue","yellow"); 
// 参数1为循环的对象,参数2会将对象的值挨个取出,直到最后
// 如果循环的是对象的话,输出的是对象属性的值
foreach ($colors as $value) {
  echo "$value <br>";
}
输出结果为
/*
red 
green 
blue 
yellow 
*/

header()函数

• 用来向客户端(浏览器)发送报头,如果出现中文无法显示,可以尝试在PHP代码顶部添加如下代码：

header("content-type:text/html; charset=utf-8");

• 浏览器访问http服务器,接收到响应时,会根据响应报文头的内容进行一些具体的操作,在php中,我们能够使用header来设置这些内容。

  • 设置文本编码：设置编码格式为:utf-8

  	header('content-type:text/html; charset= utf-8');
  

  • 设置页面跳转,设置跳转到百度首页

  	header('location:http://www.baidu.com');
  

  • 设置页面间隔刷新

  	header('refresh:3; url=http://www.xiaomi.com');
  

PHP表单

PHP_GET数据获取

• 如果想要获取通过get方法提交的数据,可以通过$_GET对象来获取(虽然参数在地址栏中可以查看)
• 将数据提交到01.php,使用get的方式

<form action="01.php" method="get" >
  <label for="">姓名:
      <input type="text" name= "userName"></label>
      <br/>
  <label for="">邮箱:
      <input type="text" name= "userEmail"></label>
      <br/>
      <input type="submit" name="">
</form>

<?php 
    echo "<h1>GET_PAGE</h1>";
    echo 'userName:'.$_GET['userName'];
    echo '<br/>';
    echo 'userEmail:'.$_GET['userEmail'];
 ?>

PHP_POST数据获取

• 如果想要获取通过post方法提交的数据,可以通过$_POST对象来获取
• 将数据提交到02.php,使用post的方式(注意:代码中的method改为post)

<form action="02.php" method="post" >
  <label for="">姓名:
      <input type="text" name= "userName"></label>
      <br/>
  <label for="">邮箱:
      <input type="text" name= "userEmail"></label>
      <br/>
      <input type="submit" name="">
</form>

<?php 
    echo "<h1>POST_PAGE</h1>";
    echo 'userName:'.$_POST['userName'];
    echo '<br/>';
    echo 'userEmail:'.$_POST['userEmail'];
 ?>

POST&GET错误处理

当我们直接访问POST&GET页面时由于并没有传递任何数据,会因为$_GET或$_POST不存在对应的key而报错.

• 处理方式 使用array_key_exists(key, 数组)函数来进行判断
  • 参数1: 要检测的key字符串
  • 参数2: 检验的数组 if(array_key_exists('name', $_GET)){ //如果有数据 再去读取 }else{ // 反之 可以执行一些其他的逻辑 }
• PHP文件上传处理01_$_FILES对象 上传文件时html代码中需要进行设置:在html表单中需要设置enctype="multipart/form-data"，而且只能post方式，PHP接收文件可以通过$_FILES来获取。

<form action="03.fileUpdate.php" method="post" enctype="multipart/form-data">
      <label for="">照片:
          <input type="file" name = "picture" multiple=""></label>
      <br/>
      <input type="submit" name="">
  </form>

<?php  
  sleep(5);// 让服务器休息一会
  print_r($_FILES);
?>

• 现象:点击提交后,服务器没有立即出现反应,而是休息了一会sleep(5);在wamp/tmp目录下面出现了一个.tmp文件;.tmp文件一会就被自动删除了;服务器返回的内容中,有文件的名字[name] => computer.png,以及上传文件保存的位置D:\wamp\tmp\php3D70.tmp。

• 如何将临时目录下面的文件保存起来(move_uploaded_file()这个函数可以处理文件)

<form action="03.fileUpdate.php" method="post" enctype="multipart/form-data">
      <label for="">照片:
          <input type="file" name = "picture" multiple=""></label>
      <br/>
      <input type="submit" name="">
  </form>

Array ( [picture] => Array ( 
        [name] => computer.png 
        [type] => image/png 
        [tmp_name] => D:\wamp\tmp\php8913.tmp 
        [error] => 0 [size] => 5212 ) 
    )

• 其中我们需要通过picture(根据表单标签的name属性决定)获取临时文件名以及上传文件名。

<?php  
    sleep(5);// 让服务器休息一会,方便我们查看上传的临时文件
    // 第一个参数是 规定要移动的文件
    // 第二个参数是 规定文件的新位置
    move_uploaded_file($_FILES['picture']['tmp_name'], './upload/'.$_FILES['picture']['name']);
 ?>

• php设置上传文件大小限制
  • 修改php.ini步骤:左键点击wamp;选择php;在弹出的窗口中选择php.ini;在打开的文件中进行修改(修改内容在下面);修改完毕,保存并重启wamp。
  • 修改内容 使用文本编辑工具的搜索功能找到下列选项进行修改:设置文件最大上传限制(值的大小可以根据需求修改) file_uploads = On; 是否允许上传文件 On/Off 默认是On; upload_max_filesize = 32M; 上传文件的最大限制; post_max_size = 32M; 通过Post提交的最多数据; 考虑网络传输快慢,这里修改一些参数: max_execution_time = 30000; 脚本最长的执行时间 单位为秒; max_input_time = 600; 接收提交的数据的时间限制 单位为秒; memory_limit = 1024M; 最大的内存消耗。

学习了一些简单的PHP后，就可以看我的下一篇博客学习ajax了。 总结的一些细碎的知识，希望各位路过的大神们多指教！

转载于:https://my.oschina.net/yxmBetter/blog/832887