012 Javascript(126

[A] 服务器入门与安装

            服务器知识

                1. 软件架构：

                        C/S(客户端->服务端)

                        B/S(浏览器->服务端)

                2. 哪些技术可以开发网站？

                        php, jsp, asp, ruby, python, nodejs, c/c++等

                3.  WAMP架构解读

                        　　windows + apache + mysql + php

                    LAMP架构解读

                        　　Linux + apache + mysql + php

                        　　Linux + nginx + mysql + php

                    PHPnow

                        apache + mysql + php

            服务器： 

                apache软件运行在你的电脑上，那么你电脑上的某个磁盘就对外可见，别人可以通过IP或域名访问到这个位置

            客户端和服务端是一个相对概念：

                　　服务端  资源提供方

                　　客户端  资源受益方

            服务器安装：

                　　(集成安装环境)WAMP, LAMP, PHPnow

            PHPnow/htdocs       服务器根目录

                　　localhost+路径   直接访问本地电脑服务器

               　　IP               访问当前电脑的服务器,即：127.0.0.1

            默认访问到的是文件名以index开头的文件

                　　index.php

               　　 index.html

               　　 index.jsp

 

[B] PHP语法

1. php的输出函数：

            　　1. echo 输出内容

                　　或 echo(输出内容) 

            　　2. print_r(输出内容)

            　　3. var_dump(输出内容)   同时输出所输出内容的数据类型，长度和内容等信息。

            　　【注】PHP代码兼容html和CSS的所有代码，如果输出内容中有标签，则会直接解析掉

        2. 前后端技术分离开发：

            　　前段开发工程师：html + css + javascript 即网站上我们能看到的部分

            　　后端开发工程师：php + mysql

            　　全站开发工程师：前段，后端，网页端，移动端全都会的工程师

        3. PHP变量的定义：

            　　1. 变量$f符号开头，后面跟着变量的名称

           　　 2. 变量名必须以字母或者下划线开头

            　　3. 变量名只能包含字母，数字，字符以及下划线(a-z,A-Z,0-9,_)

            　　4. 变量名是区分大小写的

            　　【注】PHP是弱引用类型，给变量赋值什么数据，就是什么数据类型。

        4. 字符串拼接：

            　　用.进行拼接，而不是+号

        5. 数据类型

            　　String      字符串

            　　Integer     整型

            　　Float       浮点型

            　　Boolean     布尔值

            　　Array       数组

            　　Object      对象

            　　NULL        空值

        6. 分支语句

            　　a. if..else语句

                   　　 if(判断条件){

                   　　     语句块1;

                　　    }else{

                　　        语句块2;

                 　　   }

           　　 b. switch...case语句

                 　　   switch(值){

                      　　  case 值1：

                      　　      语句1;

                       　　     break;

                       　　 case 值2：

                          　　  语句2;

                        　　    break;

                     　　   　　...

                    　　    default:

                       　　     语句n;

                         　　   break;

                  　　  }

           　　 c. for语句

                  　　  for($i = 0; $i < 100; $i++){

                      　　  语句块;

                 　　   }

        6. 数组

               　　 索引数组：下标是数字的叫做索引数组

               　　 关联数组：下标是字符的叫做关联数组

                　　全局数组：系统定义的全局数组

                   　　　　 $_GET   接收通过get提交过来的数据

                   　　 　　$_POST  接收通过post提交过来的数据

                　　多维数组：右索引数组和关联数组相互组合形成的数组

            　　数组定义与索引

                　　　　$arr = array("张三","李四","王五");     //定义数组

                　　　　$a = $arr[0];           //通过下标索引

                　　　　//循环索引

              　　　　  for($i = 0; $i < count($arr); $i++){

              　　　　      echo($arr[$i]." ");

             　　　　   }

            　　获取数组长度

                　　　　count($arr)   

        7. 关联数组，也叫键-值数组

               　　 $arr = array("王五" => "打鱼的","赵四" => "打柴的","王琦" => "打虾的");

               　　 echo($arr["王五"]);     //通过字符索引

               　　 //循环索引

               　　 foreach($arr1 as $ke => $valu){

               　　     echo("下标是：{$ke}，值是：{$valu}  ");

              　　  }

        8. 二维数组，即数组元素为数组的数组叫做二维数组，外层是索引数组，内层是关联数组。

           　　 // 二维数组

           　　 $arr2 = array(

                　　array("name" => "小白", "English" => 60, "math" => 90),

               　　 array("name" => "小红", "English" => 97, "math" => 80),

              　　  array("name" => "小白", "English" => 88, "math" => 89),

         　　   );

         　　   echo($arr2[0]["name"]);     //索引

        9. 数组函数

            　　array_keys()            //返回数组中所有的键名

            　　array_pop()             //删除数组中的最后一个元素，即出栈

           　　 array_push()            //将一个或者多个元素从数组的末尾插入，即入栈

          　　  array_rand()            //从数组中随机选出一个或者多个元素，返回键名

         　　   array_shift()           //删除数组中的第一个元素，并返回所删除的值

           　　 count()                 //返回数组的长度

           　　 in_array()              //检查数组中是否存在指定的元素

 

[C] 认识Ajax

AJAX 是Asynchronous JavaScript and XML(异步JavaScript和XML)，节省用户操作时间，提高用户体验，减少数据请求，传输获取数据

            【注】ajax是前后端数据交互的搬运工，都可以异步进行

            XML数据传输格式(大型的用户网站：新浪，网易，凤凰网)

                　　优点：

                    　　　　1. 种类丰富

                   　　　　 2.传输量非常大

                　　缺点：

                    　　　　1. 解析麻烦

                    　　　　2. 不太适合轻量级数据

            json数据传输格式(字符串)，95%移动端应用

                　　优点：

                  　　　　  1. 适合轻量级数据

                  　　　　  2. 解析比较轻松

               　　 缺点：

                   　　　　 1. 数据种类少

                   　　　　 2. 传输数据量比较少

AJAX语法

　　ajax实现步骤：

                1. 创建ajax对象

                2. 调用open，相当于输入网址

                3. 调用时send，相当于按下enter键

                4. 等待数据响应

            1. 在IE8以下，不兼容XMLHttpRequest

                　　在IE8以下声明AJAX的方法是：

               　　　　 ActiveXObject("Microsoft.XMLHTTP");

                try{

                    尝试代码块;

                    throw new Error("提示信息！！")     主动报错，调试时经常用

                }catch(error){

                    error   错误对象，try括号中执行代码的异常信息;

                    补救代码块;

                }

                执行过程：

                    a. 先去执行try中的代码

                    b. try中的代码执行成功，则不再执行catch中的代码

                    c. try中的代码执行不成功，再执行catch中的代码进行补救

            2. onreadystatechange事件

                    每当 readyState 改变时，就会触发 onreadystatechange 事件

                readyState属性：请求状态

                        0       (初始化)请求未初始化，即还没有调用open

                        1       (载入中)服务器连接已建立，已发送send()方法

                        2       (已载入)请求已接收，即已完成send()方法，收到全部的响应内容

                        3       (解析中)请求处理中，正在解析内容

                        4       (已完成)请求已完成，可以再客户端调用了。

                状态码 state：当前网络的请求状态

                    200: "OK"

                    404: 未找到页面

                【注】当 readyState 等于 4 且状态为 200 时，表示响应已就绪

            3. 调用open，相当于输入网址

            xhr.open("get", "data.txt", true);

                第一个参数：请求方式    get post

                第二个参数：URL

                第三个参数：是否异步

                    true    异步

                    false   同步

 　　　　示例代码：

                // 1.创建ajax对象
                var xhr = new XMLHttpRequest();

                // 2. 调用open，相当于输入网址
                xhr.open("get", "004ajax_get.php?name=jack&age=218&sex=man", true);

                // 3. 调用时send，相当于按下enter键
                xhr.send();

                // 4. 等待数据响应
                xhr.onreadystatechange = function(){
                    if(xhr.readyState == 4){
                        if(xhr.status == 200){
                            // alert(xhr.status);
                            alert(xhr.responseText);
                        }
                    }
                }

 

[E] ajax的get请求和post请求 表单提交

        action: 点击submit后需要提交到的url

        method：请求方式，get和post

            get(默认方式)

                　　　　http://192.168.137.1/054post_php.php?username=xxx&age=18&password=123abc

            　　提交方式：是直接将数据拼接在url后面进行提交，通过?进行拼接，查询字符串

                　　好处：简单

                　　缺点：

                    　　1. 不安全

                　　    2. 最大2KB

                  　　  3. 没法实现上传

            post

         　　   提交方式：post提交通过浏览器内部进行提交

              　　  好处：

                  　　  1. 安全

                 　　   2. 理论上没有上限

                  　　  3. 可以上传

           　　     缺点：比get复杂

 

//请求的html文件
<body>
    <!-- 
        10.36.27.37
        action: 点击submit后需要提交到的url
        method：请求方式
        
        1. 将该html文件保存在服务器路径下，
        2. 运行该html文件，并将浏览器地址修改为：
            localhost/005get_receive.php
            或 192.168.137.1/005get_receive.php
     -->
    <form action="005get_receive.php" method="GET">
        <input type="text" name="username" placeholder="用户名">
        <input type="text" name="age" placeholder="年龄">
        <input type="password" name="password" placeholder="密码">
        <input type="submit">
    </form>
</body>


// 响应的php文件
<?php
    header('content-type:text/html;charset="utf-8"');
    /*
        $_GET:  存放通过get请求提交的所有数据

        1. 将该php文件存放在服务器环境下即可
    */

    $name = $_GET["username"];
    $ag = $_GET["age"];
    $pwd = $_GET["password"];
    echo("你的名字是：{$name}，年龄是：{$ag}，密码是：{$pwd}");
?>

 

• post请求实现

// post请求的html文件
<body>
    <!-- 
        action: 点击submit后需要提交到的url
        method：请求方式，get和post
        
        1. 将该html文件存放在服务器环境下
        2. 运行该html文件，并将浏览器地址修改为：
            localhost/006get_receive.php
            或 192.168.137.1/006get_receive.php
     -->
     <form action="006post_receive.php" method="POST" enctype="application/x-www-form-urlencoded">

        <input type="text" name="username" placeholder="用户名">
        <input type="text" name="age" placeholder="年龄">
        <input type="password" name="password" placeholder="密码">
        <input type="submit">
    </form>
</body>

// post响应的php文件
<?php
    header('content-type:text/html;charset="utf-8"');
    /*
        $_GET:  存放通过get请求提交的所有数据
        $_POST:  存放通过post请求提交的所有数据

        1. 将该php文件放在服务器环境下即可
    */

    $name = $_POST["username"];
    $ag = $_POST["age"];
    $pwd = $_POST["password"];
    echo("你的名字是：{$name}，年龄是：{$ag}，密码是：{$pwd}");
?>

[F] ajax函数封装

        // ajax函数封装
        function $ajax({method = "get", url, data, success, error}){
            // 1.创建ajax对象
            var xhr = null;
            try{
                xhr = new XMLHttpRequest();
            }catch(error){
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            
            // 若对象格式的数据存在，则进行转换
            if(data){
                data = quaryString(data);
            }

            // 2. 调用open，相当于输入网址
            if(method == "get" && data){
                url = url + "?" + data;
            }
            xhr.open(method, url, true);

            // 3. 调用时send，相当于按下enter键
            if(method == "get"){
                xhr.send();
            }else{
                // post请求时，必须在send方法调用前，去设置请求数据的格式
                xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
                xhr.send(data);
            }

            // 4. 等待数据响应
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if(xhr.status == 200){
                        /*
                            在响应成功后继续操作
                            用到回调函数
                        */
                        if(success){
                            success(xhr.responseText);
                        }
                        alert(xhr.responseText);
                    }else{
                        if(error){
                            error("Error:" + xhr.responseText);
                        }
                    }
                }
            }
        }

        function quaryString(obj){
            var res = "";
            for(var arr in obj){
                res = res + arr + "=" + obj[arr] + "&";
            }
            return res.substring(0, res.length-1);
        }