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则没有限制





【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/litao666/p/6070402.html