012 Javascript(126 - 133)

[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]."\n");

                    }

              获取数组长度

                    count($arr)   

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

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

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

 

                  //循环索引

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

                      echo("下标是:{$ke},值是:{$valu} \n");

                  }

 

 

        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);
        }

 

posted @ 2020-06-25 10:10  CarreyB  阅读(149)  评论(0编辑  收藏  举报