12月13日学习内容整理：HTTP协议补充，基于form表单和Ajax的上传文件

一、HTTP协议

1、http协议是基于TCP/IP来传递数据的

2、基于请求与响应，意思是必须是一发一收，只要发出请求就必须要接受到响应

特点：

》》》1、简单快速：客户向服务器请求服务时，只需传送请求方法和路径。请求方法常用的有GET、HEAD、POST。每种方法规定了客户与服务器联系的类型不同。

由于HTTP协议简单，使得HTTP服务器的程序规模小，因而通信速度很快。

》》》2、灵活：HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记。

》》》3.无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。

》》》4.无状态：HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。

缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。另一方面，在服务器不需要先前信息时它的应答就较快。

3、请求协议

（1）格式

请求首行；        // 请求方式 请求路径 协议和版本，例如：GET /index.html HTTP/1.1
请求头信息；      // 请求头名称:请求头内容，即为key:value格式，例如：Host:localhost，就是一个个的键值对
空行；           // 用来与请求体分隔开
请求体        

》》》》注意：：：：

HTTP默认的请求方法就是GET
     * 没有请求体
     * 数据量有限制！
     * GET请求数据会暴露在浏览器的地址栏中

GET请求常用的操作：
       1. 在浏览器的地址栏中直接给出URL，那么就一定是GET请求
       2. 点击页面上的超链接也一定是GET请求
       3. 提交表单时，表单默认使用GET请求，但可以设置为POST

 

（2）请求头的字段

1、Host

请求的web服务器域名地址

2、User-Agent

HTTP客户端运行的浏览器类型的详细信息。通过该头部信息，web服务器可以判断出http请求的客户端的浏览器的类型。

3、Accept

指定客户端能够接收的内容类型，内容类型的先后次序表示客户都接收的先后次序

4、Accept-Lanuage

指定HTTP客户端浏览器用来展示返回信息优先选择的语言

5、Accept-Encoding

指定客户端浏览器可以支持的web服务器返回内容压缩编码类型。表示允许服务器在将输出内容发送到客户端以前进行压缩，以节约带宽。而这里设置的就
是客户端浏览器所能够支持的返回压缩格式。

6、Accept-Charset

HTTP客户端浏览器可以接受的字符编码集

7、Content-Type

显示此HTTP请求提交的内容类型。一般只有post提交时才需要设置该属性

有关Content-Type属性值有如下两种编码类型：

（1）“application/x-www-form-urlencoded”： 表单数据向服务器提交时所采用的编码类型，默认的缺省值就是“application/x-www-form-urlencoded”。 
    然而，在向服务器发送大量的文本、包含非ASCII字符的文本或二进制数据时这种编码方式效率很低。

（2）“multipart/form-data”： 在文件上载时，所使用的编码类型应当是“multipart/form-data”，它既可以发送文本数据，也支持二进制数据上载。

当提交为表单数据时，可以使用“application/x-www-form-urlencoded”；当提交的是文件时，就需要使用“multipart/form-data”编码类型。

 

（3）get和post请求的区别

1、get请求没有请求体，数据放在url，用？分割

2、get请求数据有限制，理论上是8K，但是post请求数据因为放在请求体中，无大小限制、

3、get请求数据暴露在url，所以post请求相对更安全

 

 

 

4、响应协议

（1）格式

响应首行：由HTTP协议版本号， 状态码， 状态消息 三部分组成。

》》》第一行为状态行，（HTTP/1.1）表明HTTP版本为1.1版本，状态码为200，状态消息为（ok）

响应头，用来说明客户端要使用的一些附加信息

》》》第二行和第三行为消息报头，
》》》Date:生成响应的日期和时间；Content-Type:指定了MIME类型的HTML(text/html),编码类型是UTF-8

空行，消息报头后面的空行是必须的

响应正文，服务器返回给客户端的文本信息。

》》》》空行后面的html部分为响应正文。

（2）状态响应码

状态代码有三位数字组成，第一个数字定义了响应的类别，共分五种类别:
1xx：指示信息--表示请求已接收，继续处理
2xx：成功--表示请求已被成功接收、理解、接受
3xx：重定向--要完成请求必须进行更进一步的操作
4xx：客户端错误--请求有语法错误或请求无法实现
5xx：服务器端错误--服务器未能实现合法的请求

常见状态码：
OK                        //客户端请求成功
Bad Request               //客户端请求有语法错误，不能被服务器所理解
Unauthorized              //请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用 
Forbidden                 //服务器收到请求，但是拒绝提供服务
Not Found                 //请求资源不存在，eg：输入了错误的URL
Internal Server Error     //服务器发生不可预期的错误
Server Unavailable        //服务器当前不能处理客户端的请求，一段时间后可能恢复正常

 

 

 

 

二、基于form表单的上传文件

1、标签：

<form  action="//"  enctype="multipart/form-data">

<input  type="file"  name="cfile"></input>

</form>

2、

》》》form的enctype属性是指定请求的数据提交格式，默认是urlencoded，设置为multipart/form-data既可以发送文本数据，也可以发送二进制数据，加上这个属性后后端request.POST中已经没有file类型的input标签对应的键值对了

》》》后端request.POST中没有文件数据，只有其它type类型标签的数据，真正的文件数据在request.FILES，request.FILES是一个MultiValueDict类型，里面也是一个个键值对，key就是标签的name属性值，value就是对应的文件对象

》》》后端obj=request.FILES.get("cfile")  得到的就是文件对象（也就是文件句柄）

obj.name就拿到了文件名

注意：我们拿到文件对象以后要进行文件操作把它写到某个文件中，还是要用到os的路径拼接join，把根目录和文件目录和文件名拼接在一起

 

 

三、基于Ajax的上传文件

Ajax默认以get请求发数据

1、怎么拿文件数据对象

$("#cFile")[0].files[0]    先转换为DOM对象，在用files方法得到一个列表，里面是上传的所有文件对象，在用索引取出我们想要传给后端的文件对象

2、构造数据

》》》》FormData是什么呢？

》》》》XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可用

》》》》XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.

》》》》所有主流浏览器的较新版本都已经支持这个对象了，比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+

（1）将FormData类实例化一个对

var $formData=new FormData()

（2）构造键值对

$formData.append("键"，"value值或者是文件对象");

（3）Ajax的data参数：

data：$formData   就把这个对象传给赋值给data参数

（4）Ajax参数：设置数据的提交格式，并且不用对数据进行编码，原封不动的发就行

contentType:false,

processData:false, // 不对数据做预处理，不进行任何编发

注意：上面这三个参数的作用其实就是ajax就按照FormData对象的方式去发送，其实跟用form表单提交数据时加上enctype="multipart/form-data"的效果是一样的，只不过js没有multipart/form-data的数据格式

补充：上面两个参数的含义

processData：声明当前的data数据是否进行转码或预处理，默认为true，即预处理；if为false，

　　　　　　  那么对data：{a:1,b:2}会调用json对象的toString()方法，即{a:1,b:2}.toString()

　　　　　　  ,最后得到一个［object，Object］形式的结果。

contentType：默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。

　　　　　　用来指明当前请求的数据编码格式；urlencoded:?a=1&b=2；如果想以其他方式提交数据，

　　　　　　比如contentType:"application/json"，即向服务器发送一个json字符串：

（5）设置csrf跨域请求，因为我们不是采用默认urlencoded的数据格式提交，django的中间件检测时无法检测会forbidden，所以我们采用把浏览器cookie中保存的csrf值提取出来在请求头中设置，

headers:{"X-CSRFToken":$('[name="csrfmiddlewaretoken"]').val()},

也可以引入jquery.cookie.js文件之间取cookie值$.cookie("csrftoken")

 

举例：：：：

<form action="">
    {% csrf_token %}
    <p>姓名： <input type="text" id="user"></p>
    <p>文件： <input type="file" id="cFile"></p>
    <input type="button" value="submit">
</form>
<script>
    $(":button").click(function () {
        var $formData=new FormData() ;
        $formData.append("user",$("#user").val());
        $formData.append("cFile",$("#cFile")[0].files[0]);
        $.ajax({
            url:"/indexAjax/",
            type:"post",
            data:$formData,
            contentType:false,
            processData:false,    // 不对数据做预处理，不进行任何编发
            headers:{"X-CSRFToken":$('[name="csrfmiddlewaretoken"]').val()},
            success:function (data) {
                console.log(data)
            }
        })
    })
</script>