http请求相关知识及ajax

最新推荐文章于 2024-02-15 16:12:24 发布

Mars-xq

最新推荐文章于 2024-02-15 16:12:24 发布

阅读量493

点赞数

分类专栏： http协议

本文链接：https://blog.csdn.net/sinat_31057219/article/details/77825730

版权

http协议专栏收录该内容

4 篇文章 0 订阅

订阅专栏

参考:Http Content-Type(Mime-Type)

HTTP 的请求报文分为三个部分请求行、请求头和请求体

这里写图片描述

一个典型的请求消息头域，如下所示：

　　POST/GET http://download.microtool.de:80/somedata.exe 
　　Host: download.microtool.de 
　　Accept:*/* 
　　Pragma: no-cache 
　　Cache-Control: no-cache 
　　Referer: http://download.microtool.de/ 
　　User-Agent:Mozilla/4.04[en](Win95;I;Nav) 
　　Range:bytes=554554-

推荐阅读：HTTP 请求头与请求体

①是请求方法，GET和POST是最常见的HTTP方法，除此以外还包括DELETE、HEAD、OPTIONS、PUT、TRACE。不过，当前的大多数浏览器只支持GET和POST，Spring 3.0提供了一个HiddenHttpMethodFilter，允许你通过“_method”的表单参数指定这些特殊的HTTP方法（实际上还是通过POST提交表单）。服务端配置了HiddenHttpMethodFilter后，Spring会根据_method参数指定的值模拟出相应的HTTP方法，这样，就可以使用这些HTTP方法对处理方法进行映射了。

②为请求对应的URL地址，它和报文头的Host属性组成完整的请求URL，③是协议名称及版本号。

④是HTTP的报文头，报文头包含若干个属性，格式为“属性名:属性值”，服务端据此获取客户端的信息。

⑤是报文体，它将一个页面表单中的组件值通过param1=value1&param2=value2的键值对形式编码成一个格式化串，它承载多个请求参数的数据。不但报文体可以传递请求参数，请求URL也可以通过类似于“/chapter15/user.html? param1=value1&param2=value2”的方式传递请求参数。

参考：HTTP请求行、请求头、请求体详解

请求体的分割

使用表单上传文件时，必须让表单的 enctyped 等于 multipart/form-data。直接来看一个请求示例：

BASHPOST http://www.example.com HTTP/1.1
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA

------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="text"

title
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="file"; filename="chrome.png"
Content-Type: image/png

PNG ... content of chrome.png ...
------WebKitFormBoundaryrGKCBY7qhFd3TrwA--

首先生成了一个 boundary 用于分割不同的字段，为了避免与正文内容重复，boundary 很长很复杂。
然后 Content-Type 里指明了数据是以 multipart/form-data 来编码，本次请求的 boundary 是什么内容。
消息主体里按照字段个数又分为多个结构类似的部分，每部分都是以 –boundary 开始，紧接着是内容描述信息，然后是回车，最后是字段具体内容（文本或二进制）。
如果传输的是文件，还要包含文件名和文件类型信息。消息主体最后以 –boundary– 标示结束。

ajax 的请求配置：

jQuery Ajax 全解析
 最合适的Ajax内容编码类型
 AJAX

JAVA HttpURLConnection Post方式提交传递参数
 Android 使用Post方式提交数据
 Android Http请求头与响应头的学习

参考:Ajax 请求的http头信息特点 x-requested-with

X-Requested-With: XMLHttpRequest

x-requested-with 请求头区分ajax请求还是普通请求
若为XMLHttpRequest则为Ajax请求,默认传统同步请求

if (request.getHeader("x-requested-with") != null  
    && request.getHeader("x-requested-with").equalsIgnoreCase("XMLHttpRequest")) {  
    out.print("该请求是 AJAX 异步HTTP请求。");  
}else{   
    out.print("该请求是传统的 同步HTTP请求。");  
}

Http协议之Referer

Http协议头中的Referer主要用来让服务器判断来源页面, 即用户是从哪个页面来的,通常被网站用来统计用户来源,是从搜索页面来的,还是从其他网站链接过来,或是从书签等访问,以便网站合理定位.

Referer有时也被用作防盗链, 即下载时判断来源地址是不是在网站域名之内, 否则就不能下载或显示,很多网站,如天涯就是通过Referer页面来判断用户是否能够下载图片.

当然,对于某些恶意用户,也可能伪造Referer来获得某些权限,在设计网站时要考虑到这个问题.

对浏览器来说,一般以下几种情况是不会发送Referer,因为可能有潜在的安全问题:
1.用户手动输入网址或是从收藏夹/书签中访问.
2.对https等加密协议是不带Referer的.
安全问题在于有可能把地址中含有的一些关于用户的敏感信息发送到其他恶意网站上.

x-www-form-urlencoded

这是Jquery/Zepto Ajax默认的提交类型。最简例子为：

let userInfo = {
 name: 'CntChen',
 info: 'Front-End',
}

$.ajax({
  url: 'https://github.com',
  type: 'POST',
  data: userInfo,
  success: (data) => {},
});

此时默认的提交的contentType为application/x-www-form-urlencoded,此时提交的数据将会格式化成：

name=CntChen&info=Front-End

如果请求类型type是GET,格式化的字符串将直接拼接在url后发送到服务端；
如果请求类型是POST，格式化的字符串将放在http body的Form Data中发送。

x-www-form-urlencoded是先将对象铺平，然后使用key=value的方式，用&作为间隔。对于嵌套对象的每个字段，都要传输其前缀.
如果对象是多重嵌套的，或者嵌套对象的字段较多，x-www-form-urlencoded会产生更多冗余信息。
同时，x-www-form-urlencoded可读性不如json字符串。使用json字符串的形式，可以减少冗余字段的传输，减少请求的数据量。

json

使用json内容编码发送数据，最简例子为：

let userInfo = {
 name: 'CntChen',
 Info: 'Front-End',
}

$.ajax({
  url: 'https://github.com',
  contentType: 'application/json',
  type: 'POST',
  data: JSON.stringify(userInfo),
  success: (data) => {},
});

最主要的不同有3点：
1.需要显式指定contentType为application/json，覆盖默认的contentType
2.需要使用JSON.stringify序列化需要提交的数据对象，序列化的结果为：
{“name”:”CntChen”,”info”:”Front-End”}
3.提交的类型不能为GET,使用GET的话，数据会在url中发送，此时就无法以json字符串的编码发送

form的enctype属性为编码方式，常用有两种：application/x-www-form-urlencoded和multipart/form-data，默认为application/x-www-form-urlencoded。
1.x-www-form-urlencoded
当action为get时候，浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串（name1=value1&name2=value2…），
然后把这个字串append到url后面，用?分割，加载这个新的url。

这里写图片描述

2.multipart/form-data
当action为post时候，浏览器把form数据封装到http body中，然后发送到server。如果没有type=file的控件，
用默认的application/x-www-form-urlencoded就可以了。但是如果有type=file的话，就要用到multipart/form-data了。浏览器会把整个表单以控件为单位分割，
并为每个部分加上Content-Disposition(form-data或者file),Content-Type(默认为text/plain),name(控件name)等信息，并加上分割符(boundary)。

这里写图片描述

示例：

<html>
<head>
    <title>测试JUQERY</title>
    <script src="../js/jquery.min.js"></script>
</head>
<body>
<input type="file" name="myfile">
<script>
    $().ready(function () {
        $("button").click(function () {
            var formData = new FormData();
            formData.append('myfile', $('input[name=myfile]')[0].files[0]);

            $.ajax({
                /*------------------------请求----------------------------*/
                /*url
                发送请求的地址，默认当前页*/
                url: '/upload',

                /*type
                请求方式：get 或 post，默认get*/
                type: 'post',

                /*timeout
                设置请求超时时间（毫秒）。此设置将覆盖全局设置*/
                timeout: 5000,

                /*async
                是否异步：默认为true*/
                async: true,

                /*==================================================================*/
                /*cache
                缓存请求信息到浏览器缓存中，上传文件不需要缓存, 默认为true*/
                cache: false,

                /*processData
                默认值: true。默认情况下，通过data选项传递进来的数据， 
                如果是一个对象(技术上讲只要不是字符串)，
                都会处理转化成一个查询字符串，
                以配合默认内容类型 "application/x-www-form-urlencoded"。
                如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
                因为data值是FormData对象，不需要对数据做处理。*/
                processData: false,

                /*contentType
                默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。
                因为是由<form>表单构造的FormData对象， 
                且已经声明了属性enctype="multipart/form-data"，所以这里设置为false。*/
                contentType: false,

                /*data
                发送到服务器的数据。将自动转换为请求字符串格式。
                GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。 
                必须为 Key/Value 格式。
                如果为数组，jQuery 将自动为不同值对应同一个名称。
                如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。*/
                data: formData,

                /*===================================================================*/
                /*global
                是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件， 
                如 ajaxStart 或 ajaxStop 。
                可用于控制不同的Ajax事件,默认为true*/
                global: true,

                /*beforeSend
                发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。
                XMLHttpRequest 对象是唯一的参数。*/
                beforeSend: function (xmr) {
                    /*设置请求头*/
                    xmr.setRequestHeader("client_type", "DESKTOP_WEB");
                    //ShowLoading();
                },

                /*---------------------------------响应-------------------------------*/
                /*dataType
                预期服务器返回的数据类型：xml、html、script、json、jsonp*/
                dataType: 'json',

                /*success
                请求成功后的回调函数。*/
                success: function (xmr, textStatus) {

                },

                /*error
                请求失败时调用此函数*/
                error: function (xmr, textStatus, errorThrown) {

                },

                complete: function (xhr, textStatus) {
                    //HideLoading();
                }
            })
            ;
        });
    })
</script>
</body>
</html>

Mars-xq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
http请求相关知识及ajax

参考:Http Content-Type(Mime-Type) HTTP 的请求报文分为三个部分请求行、请求头和请求体一个典型的请求消息头域，如下所示：　　POST/GET http://download.microtool.de:80/somedata.exe 　　Host: download.microtool.de 　　Accept:*/* 　　Pragma: n...
复制链接

扫一扫