zoukankan      html  css  js  c++  java

  • 02第1章网络传输协议

    一、模拟登陆

    思路：
     
    1. <!DOCTYPE html>
    2. <htmllang="en">
    3. <head>
    4. <metacharset="UTF-8">
    5. <title>Document</title>
    6. </head>
    7. <body>
    8. <!--步骤
    9. 1.设置提交地址
    10. 2.设置提交方式
    11. 3.设置name属性
    12. -->
    13. <formaction="login.php"method="post">
    14. <inputtype="text"name="username"id="name"placeholder="请输入用户名">
    15. <inputtype="password"name="password"id="pass"placeholder="请输入密码">
    16. <inputtype="submit"value="提交">
    17. </form>
    18. </body>
    19. </html>
    1. <?php
    2. // 步骤
    3. // 1.准备一个假设从数据库中拿来的数据
    4. $users=array('laoduan'=>'pink','congcong'=>'saofeng');
    5. // 2.接受用户从前端提交过来的数据
    6. $username=$_POST['username'];
    7. $password=$_POST['password'];
    8. // 3.判断用户名是否正确
    9. if(array_key_exists($username,$users)){
    10. // 测试代码
    11. // echo '欢迎回来';
    12. if($users[$username]==$password){
    13. echo '欢迎回来，主人：'.$username;
    14. }else{
    15. echo '密码或用户名错误';
    16. }
    17. }else{
    18. // 测试代码
    19. echo '去注册吧';
    21. }
    22. // 4.判断密码是否对应用户名
    23. // 5.返回结果
    24. ?>
     

    二、上传文件的案例

              1.前端
                1.设置提交地址action=“地址”
                2.设置提交方式method="post"
                3.给input标签设置name属性
                注意的:1.上传文件必须用post方式
                              2.要设置enctype="multipart/form-data"
             2.后端
                1.要使用$_FILES数组
                2.把临时文件夹中的临时文件移动到网站图片文件夹move_uploaded_file(临时文件的路径,目标文 件夹的路径和自定义图片)
     
    1. <!DOCTYPE html>
    2. <htmllang="en">
    3. <head>
    4. <metacharset="UTF-8">
    5. <title></title>
    6. </head>
    7. <body>
    8. <formaction="file1.php"method="post"enctype="multipart/form-data">
    9. //必要 enctype="multipart/form-data"
    10. <inputtype="file"name="file"id="file">
    11. <inputtype="submit"value="点我上传">
    12. </form>
    13. </body>
    14. </html>
    1. <?php
    2. echo ($_FILES['file']['name']);
    3. move_uploaded_file($_FILES['file']['tmp_name'],"../../image/".($_FILES['file']['name'])."");
    4. ?>
     

    三、网络传输协议

    指服务器和客户端间进行通信时的约束和规范，客户端与服务端的数据交互并不是杂乱无章的，需要遵照（基于）一定的规范进行。

             1.常见协议

       1、HTTP、HTTPS 超文本传输协议

        2、FTP 文件传输协议

        3、SMTP 简单邮件传输协议

          2.HTTP协议

    即超文本传输协议，网站是基于HTTP协议的，例如网站的图片、CSS、JS等都是基于HTTP协议进行传输的。

    HTTP协议是由从客户机到服务器的请求(Request)和从服务器到客户机的响应(Response)进行了约束和规范。

    即HTTP协议主要由请求和响应构成。

     

     

    常用请求方法 POST、GET、PUT、DELETE

               2.1 请求/请求报文

    请求行：提交方式 提交地址 协议版本 
    POST http://www.study.com/day02-HTTP&Ajax/4-code/04-http/login.php HTTP/1.1   
    请求头
    //主机名:域名 服务器名称  代表我们将要请求那个服务器(一个或者一组)
    Host: www.study.com
    //链接   代表:服务器和浏览器建立了链接
    Connection: keep-alive
    //内容长度: username=wanlum&password=123456  请求正文的内容长度
    Content-Length: 31
    //缓存控制
    Cache-Control: max-age=0
    //页面的源头
    Origin: http://www.study.com
    //安全
    Upgrade-Insecure-Requests: 1
    //重点:浏览器的信息
    User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36
    //内容类型(MIME类型) 告诉了服务器如何解析我的请求
    Content-Type: application/x-www-form-urlencoded
    //浏览器可接受的数据类型
    Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
    //请求来自于那个页面
    Referer: http://www.study.com/day02-HTTP&Ajax/4-code/04-http/login.html
    //浏览器可接受的压缩格式  
    Accept-Encoding: gzip, deflate
    //浏览器可接受的语言
    Accept-Language: zh-CN,zh;q=0.8
    请求正文
    //格式key=value&key1=value1;
    username=wanlum&password=123456
     
     
    响应行  http协议及其版本  200:请求成功并完成响应 状态码  OK  状态码的描述
    HTTP/1.1 200 OK
    响应头
    //日期
    Date: Wed, 09 Nov 2016 06:43:25 GMT
    //使用哪种服务器 并且后台语言写成
    Server: Apache/2.2.21 (Win32) PHP/5.3.10
    //哪种语言的后台程序
    X-Powered-By: PHP/5.3.10
    //响应正文的内容长度
    Content-Length: 34
    //持续链接  超时5s之后断开连接 max=100 超时后，接着去尝试连接，如果超过100就断开不再链接
    Keep-Alive: timeout=5, max=100
    //链接 长连接
    Connection: Keep-Alive
    //文档类型
    Content-Type: text/html;
    响应体 服务器返回的信息
    你好

     

     

     

     常见的有200代表成功、304文档未修改、403没有权限、404未找到、500服务器错误

             2.2  调试工具

       利用HTTP抓包工具在开发中可以帮我们进行调试，常用抓包工具HttpWatch、Fiddler、Charles、FireBug等

    浏览器插件

    Firebug、HttpWatch、chrome dev tools

    代理软件

    Charles、Fiddler

    四、AJAX编程

    即 Asynchronous Javascript And XML，AJAX 不是一门的新的语言，而是对现有持术的综合利用。

    本质是在HTTP协议的基础上以异步的方式与服务器进行通信。

     

     

        1. 在http协议的基础上
            答:ajax遵循http协议
    2.1 异步
          2.什么是异步：互相关不影响的两个过程，可以一起执行
        3.什么是同步：两个过程有依赖关系，有一个执行的顺序，没有前一个步骤，不会有后一个步骤；
                口诀：独立是异步的前提，耗时是异步的理由。
        4. get方式和post方式的特点
             GET方式:
                1.内容会出现在地址栏中
                2.长度有限制
                3.数据格式key=value&key1=value1
                4.提交方式不安全(搜索 数据显示)
                5.在ajax异步请求中，数据跟在地址栏后边 格式：域名？key=value&key=value
                6.在ajax异步请求中，请求头不需要设置
             post方式:
                1.内容不会出现在地址栏
                2.长度理论上没有限制
                3.数据格式key=value&key1=value1
                4.提交方式相对安全(提交表单 修改表单)
                5.在ajax异步请求中,如果要发送请求正文给服务器 就写在send方法中 
                6.在ajax异步请求中,必须设置xhr.setRequestHeader('Content- Type','application/x-www-form-urlencoded');。

    5. XMLHttpRequest

    浏览器内建对象，用于在后台与服务器通信(交换数据) ，由此我们便可实现对网页的部分更新，而不是刷新整个页面。

    下面是一个简单的例子

     

    由于XMLHttpRequest本质基于HTTP协议实现通信，所以结合HTTP协议和上面的例子我们分析得出如下结果：

       5.1 请求

    HTTP请求3个组成部分与XMLHttpRequest方法的对应关系

    1、请求行

     

    2、请求头

     

    get请求可以不设置

    3、请求主体

     

    注意书写顺序

       5.2 响应

    HTTP响应是由服务端发出的，作为客户端更应关心的是响应的结果。

    HTTP响应3个组成部分与XMLHttpRequest方法或属性的对应关系。

    由于服务器做出响应需要时间（比如网速慢等原因），所以我们需要监听服务器响应的状态，然后才能进行处理。

     

    onreadystatechange是Javascript的事件的一种，其意义在于监听XMLHttpRequest的状态

    1、获取状态行（包括状态码&状态信息）

     

    2、获取响应头

     

    3、响应主体

     

    我们需要检测并判断响应头的MIME类型后确定使用request.responseText或者request.responseXML

     

    1. <!DOCTYPE html>
    2. <htmllang="en">
    3. <head>
    4. <metacharset="UTF-8">
    5. <title>Document</title>
    6. </head>
    7. <body>
    8. <p></p>
    9. //把一个数据提交到后台name=itcast&age=10
    10. <script>
    11. //请求
    12. // var date=new Date();//创建对象的过程
    13. var xhr=newXMLHttpRequest();
    14. // 请求行 请求方式 请求地址 xhr.open(请求方式,请求地址)
    16. xhr.open("post",'01.php');
    17. // console.log(xhr);
    18. // 请求头 在post提交方式下必须写，get则不写
    19. xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    20. // 请求正文
    21. xhr.send('name=itcast&age=10');
    22. // 监听状态变化
    23. xhr.onreadystatechange=function(){
    24. //如果接受到4，就代表完成了
    25. if(xhr.readyState==4){
    26. // console.log(xhr.responseText);
    27. document.querySelector('p').innerText=xhr.responseText;
    28. }
    29. }
    30. </script>
    31. </body>
    32. </html>
    1. <?php
    2. // var_dump($_POST);
    3. echo $_POST['name'];
    4. echo $_POST['age'];
    6. // array_key_exists('name',$_POST)
    7. ?>
     

      5.3API详解

    xhr.open() 发起请求，可以是get、post方式

    xhr.setRequestHeader() 设置请求头

    xhr.send() 发送请求主体get方式使用xhr.send(null)

    xhr.onreadystatechange = function () {} 监听响应状态

    xhr.readyState = 0时，UNSENT open尚未调用

    xhr.readyState = 1时，OPENED open已调用

    xhr.readyState = 2时，HEADERS_RECEIVED 接收到头信息

    xhr.readyState = 3时，LOADING 接收到响应主体

    xhr.readyState = 4时，DONE 响应完成

    不用记忆状态，只需要了解有状态变化这个概念

    xhr.status表示响应码，如200

    xhr.statusText表示响应信息，如OK

    xhr.getAllResponseHeaders() 获取全部响应头信息

    xhr.getResponseHeader('key') 获取指定头信息

    xhr.responseText、xhr.responseXML都表示响应主体

    注：GET和POST请求方式的差异（面试题）

    1、GET没有请求主体，使用xhr.send(null)

    2、GET可以通过在请求URL上添加请求参数

    3、POST可以通过xhr.send('name=itcast&age=10')

    4、POST需要设置

     

    5、GET效率更好（应用多）

    6、GET大小限制约4K，POST则没有限制
  • 相关阅读:
    论二级域名收集的各种姿势
    我喜欢你是寂静的-聂鲁达
    早晨充满-聂鲁达
    KALI Linux更新源
    lodash throttle和debounce
    lodash capitalize 首字母大写
    C# 格式化百分比
    c# PadLeft,PadRight用法
    对象名 XXX 无效。
    lambda 分组后的count
  • 原文地址：https://www.cnblogs.com/litao666/p/6070402.html
Copyright © 2011-2022 走看看