dtcms怎么做自己网站国外购物平台网页界面设计

当前位置： 首页 > news >正文

dtcms怎么做自己网站,国外购物平台网页界面设计,网络培训学院,会展设计制作目录

1. HTTP协议概述
   
2. HTTP协议的工作过程
3. 使用抓包工具观察HTTP协议格式
   3.1 Fiddler抓包工具
   3.2 HTTP协议格式
4. 解析HTTP请求 4.1 URL
   4.2 请求方法
   4.2.1 GET方法 4.2.2 POST方法
   4.2.3 经典面试题#xff1a;GET与POST的区别#xff1f;
   4.2…目录
5. HTTP协议概述 
6. HTTP协议的工作过程
7. 使用抓包工具观察HTTP协议格式  3.1 Fiddler抓包工具  3.2 HTTP协议格式
8. 解析HTTP请求 4.1 URL  4.2 请求方法  4.2.1 GET方法 4.2.2 POST方法  4.2.3 经典面试题GET与POST的区别  4.2.4 其他方法  4.3 请求报头Header  4.4 Cookie和Session面试常考  4.4.1 Cookie 4.4.2 Session  4.4.3 Cookie和Session是如何一起工作的  4.4.2 Cookie和Session的过期校验
9. 解析HTTP响应  5.1 HTTP响应状态码  5.2 响应报头Header 
10. 构造HTTP请求  6.1 form表单构造HTTP请求 6.1.1 form表单的介绍  6.1.2 form表单构造GET请求 6.1.3 form表单构造POST请求 6.2 Ajax构造HTTP请求  6.2.1 为何使用ajax构造HTTP请求  6.2.2 ajax构造GET请求  6.2.3 ajax构造POST请求   6.2.4 封装Ajax函数 6.2.5 ajax的跨域问题 1. HTTP协议概述  HTTP协议全称为超文本传输协议所谓超文本就是指可以传输文本及其他格式的数据如音乐图片视频等是一种被广泛应用的应用层协议 对于应用层协议的解释将数据从A端传输到B端TCP/IP协议对应的功能是顺丰的功能但是两端还要对数据进行加工处理或使用所以还需要一层协议不必关心通信时的细节只关心应用这层协议就是应用层协议 我们平时打开的网站就是通过HTTP协议来传输数据的HTTP协议是基于传输层TCP协议实现HTTP1.0HTTP1.1HTTP2.0都是基于TCPHTTP3.0基于UDP实现我们此处所讨论的以HTTP1.1为主 对于在浏览器访问一个资源网页图片视频等来说就是基于HTTP数据包的格式从主机A的进程传输到主机B的进程 如在浏览器输入百度的网址URL时浏览器向百度服务器发送了一个HTTP请求百度的服务器给我们浏览器返回了一个HTTP响应响应被浏览器解析后就展示为页面内容 2. HTTP协议的工作过程 HTTP协议的工作过程也就是客户端与服务端交互的过程网络通信这里的客户端指浏览器进程服务端指web服务器进程 如在浏览器输入一个网址浏览器向给对应服务器发送HTTP请求对方收到这个请求后进行处理处理完后返回一个HTTP响应 通常访问一个网站的时候涉及到多次HTTP请求和响应的交互过程可以通过浏览器的开发者工具的网络标签页刷新页面查看详细过程 说明百度搜索的页面是通过HTTPS协议来进行通信的HTTPS是在HTTP及基础上做了一个加密解密的过程在后续文章中介绍 
11. 使用抓包工具观察HTTP协议格式  HTTP协议是一个文本格式的协议可以使用抓包工具Fiddler进行抓包以此来分析HTTP请求和响应的细节  3.1 Fiddler抓包工具  Fiddler抓包工具的使用  附上下载地址Fiddler抓包工具下载地址需要的小伙伴可以去下载哟安装过程一路next即可  左侧窗口显示了所有的HTTP请求/响应可以选中某个查看详情右侧上方显示了HTTP请求报文的内容Raw标签可以查看详细的数据格式右侧下方显示了HTTP响应报文的内容Raw标签可以查看详细的数据格式 抓包工具的原理  Fiddler相当于一个代理当浏览器访问baidu.com时就会把HTTP请求先发给FiddlerFiddler再把请求转发给baidu的服务器baidu的服务器返回响应时也是先把数据发到FiddlerFiddler再将数据转发给浏览器所以Fiddler对浏览器和服务器交互的细节否是非常清楚的 上述原理相当于代理就可以简单理解为一个跑腿小弟你想买罐冰可乐又不想自己下楼去超市那么就可以把钱给你的跑腿小弟跑腿小弟来到超市把钱给超市老板再把冰可乐拿回来交到你手上这个过程中这个跑腿小弟对于 你 和 超市老板 之间的交易细节是非常清楚的  抓包结果  HTTP请求 HTTP响应 3.2 HTTP协议格式 协议格式总结  HTTP请求  首行请求方法url协议版本号Header头请求的属性为多个用冒号分割的键值对每个键值独占一行空行表示Header头的结束Body空行后面的内容都是BodyBody允许空如果Body存在则在Header头中有一个Content-Length的属性来标识Body的长度  HTTP响应 首行协议版本号响应状态码状态码解释Header头请求的属性为多个用冒号分割的键值对每个键值独占一行空行表示Header头的结束Body空行后面的内容都是BodyBody允许空如果Body存在则在Header头中有一个Content-Length的属性来标识Body的长度  为什么HTTP报文中要存在空行  HTTP协议并没有规定Header头有多少个键值对空行就是相当于Header头结束的标记也就是报头和正文的间隔 HTTP在传输层依赖TCP协议TCP是面向字节流的如果没有空行就会出现“粘包问题”  Body是任意格式的数据如何解析  Header头中有两个字段Content-LengthContent-Type Content-Length标识Body的长度字节长度Content-Type标识Body的数据格式目的是告诉对方如何解析body  Content-Type的常用格式 application/x-www-form-urlencode表单提交的格式键值对的形式键值多个键值对用间隔与queryString的格式一样只能是简单类型数值字符boolean等image/jpeg指定具体的一个文件类型客户端发送请求只能上传一个文件服务端返回相应只能返回一个图片 text/javascripttext/csstext/htmlapplication/jsonmultipart/form-data简称form-data格式一般用于请求不用于响应可以发送多个字段每个字段可以是简单类型数值字符boolean等也可是复杂类型图片视频等 请求正文的格式常用表单格式图片视频等文件格式都是用来上传数据到服务端 响应正文的格式常用的是text/javascripttext/csstext/html来返回网页css样式文件js文件客户端使用这些文件将图片渲染出来播放视频下载文件等 application/json格式请求和响应都常用对于请求就是输入内容提交到服务端对于响应就是服务端返回一些数据客户端js代码获取到响应数据后然后填充到html中
12. 解析HTTP请求 4.1 URL  URL标识网络中某个资源的路径俗称网址互联网上每个文件都有一个唯一的URL URL的格式协议名://服务器地址:服务器端口号/带层次的资源路径?查询字符串 协议名常见的有httphttps服务器地址可以使用IP地址或域名IP地址不方便记忆使用域名更方便而且更换服务器后只需要将域名绑定新的IP域名还可以使用服务器端口号当端口号省略时浏览器会根据协议的类型自动决定使用哪个端口http协议默认使用80端口https协议默认使用443端口带层次的资源路径标识某个服务器中的某个资源路径如果没有输入资源路径就默认访问 /称为某个web应用的根路径查询字符串queryString用分割的键值对键值多个键值对用分割它的作用是获取不同条件下的资源如userId10当使用不同的userId时会获取到不同的user信息  ping命令的简单使用 使用ping命令查看域名对应的IP地址 在开始菜单输入cmd打开命令提示符在cmd中输入ping www.baidu.com即看到域名解析的结果 URL中可以省略的部分  协议名可以省略省略后默认为http://IP地址/域名在HTML中可以省略如imglinkscripta标签的src或者href属性省略后表示服务器的IP地址/域名与HTML所属的IP地址/域名一致端口号可以省略http协议默认端口80https默认端口443带层次的资源路径可以省略省略后相当于/有些服务器发现/路径时自动访问/index.html查询字符串可以省略 URL encode  如果URL中包含特殊字符如中文空格等都会转义转义后再放在http数据包中然后在发送http请求浏览器的地址栏中还是显示中文但是真实发送的http数据包是已经转义过的内容 urlencodeurl编码将url里的中文空格等转换为16进制数据urldecodeurl解码将url里的16进制数据转换为原始的空格中文等 获取URL时就得注意因为可能获取的是编码后的内容可能需要解码如在后端获取到URL需要解码在JS中img.srcxxx如果xxx有中文可能达不到预期结果因为img.src保存的是编码后的内容 4.2 请求方法  请求方法标识具体使用什么方式来操作资源如获取资源保存资源修改资源删除资源属于操作资源的类型 说明这里只是规范上的约定具体服务端代码中要怎样实现由程序员自己决定GETPOST方法最常用其他方法了解就行 4.2.1 GET方法 GET方法常用于获取服务器资源在浏览器中输入URL浏览器会向服务器发送一个GET请求浏览器输入URL默认是GET方法使用JavaScript中的ajax也能构造GET请求  GET请求的特点 首行的方法为GETURL的queryString可以为空也可以不为空数据一般存放于queryString中body一般为空 4.2.2 POST方法  POST方法常用于将用户输入的数据提交到服务端如登陆功能通过HTML中的form标签能构造POST请求使用JavaScript中的ajax也能构造POST请求 POST请求的特点 首行的方法为POSTURL的queryString一般为空body一般不为空数据一般保存在body中 4.2.3 经典面试题GET与POST的区别  语义GET一般用于获取服务端资源POST一般用于提交数据到服务端存放数据位置GET一般存放数据在queryString中POST一般存放数据在body中幂等性GET具有幂等性POST不具有幂等性所谓幂等性是指多次发送http相同的数据包得到的结果一样缓存GET可以被缓存POST不能被缓存浏览器为了提高性能把GET获取的资源提前保存在本地下次请求直接从本地获取  4.2.4 其他方法  PUT与POST相似只是具有幂等特性一般用于更新DELETE删除服务器指定资源OPTIONS返回服务器所支持的请求方法HEAD类似于GET只不过响应体不返回只返回响应头TRACE回显服务器端收到的请求测试的时候会用到这个CONNECT预留暂无使用 这些方法的HTTP请求也可以使用JavaScript的ajax来构造  4.3 请求报头Header  Header头标识数据包属性格式为用冒号分割的键值对键值每个键值对独占一行 Host标识服务器主机的地址域名或IP端口 Content-Length标识Body长度对方根据这个属性来解析Content-Type标识Body的数据格式User-Agent简称UA标识浏览器和操作系统的信息常用作判断是哪个浏览器pc手机Referer标识这个页面是从哪个页面跳转过来的Cookie用于请求头浏览器自动携带本网站在本地保存的Cookie信息Set-Cookie用于响应头服务端设置信息  理解登录过程 重点说明 登陆成功后服务端返回的响应中响应头有一个Set-Cookie属性该属性意味着告诉浏览器要将这些信息存起来浏览器将收到响应将Set-Cookie的值存在本地中客户端浏览器后续访问该网站的其他页面时发送的HTTP请求中请求头携带一个Cookie属性该属性就保存了登陆的一些相关信息 4.4 Cookie和Session面试常考  4.4.1 Cookie Cookie是一种客户端保存数据的技术 如何保存 服务端响应的http数据包中设置Set-Cookie头客户端收到响应后将此信息保存在本地Cookie是和网站关联不同的网站有不同的Cookie保存的信息如账号等不同 如何使用 浏览器在每次请求时自动将保存的信息携带在Cookie头中 保存的数据是什么格式 多组键值对键值多个键值对用分号间隔 4.4.2 Session  Session是一种服务端保存会话的技术一次会话指登陆没有注销或者超时 由于HTTP协议是无状态的所谓无状态就是一次请求一次响应服务端无法感知之前登陆的用户所以在服务端使用MapString,Session的数据结构来保存用户信息 4.4.3 Cookie和Session是如何一起工作的  以登陆功能举例  服务端校验账号密码成功后生成一个随机字符串sessionId标识用户身份及一个Session对象标识用户的该次对话把sessionId作为键Session对象作为值存入MapString,Session如果需要保存用户信息就保存在Session对象MapString,Object中相当于登陆时服务端使用Session保存用户信息 登陆响应服务端返回给客户端的HTTP响应数据包中Set-Cookie响应头包含sessionIdxxx客户端收到响应后保存Cookie信息将响应的Set-Cookie中的内容保存在客户端本地和此次服务器地址绑定客户端每次请求时都携带sessionIdxxx在Cookie头中服务端获取客户端请求时先获取Cookie请求头中的内容查找sessionId对应的值然后从保存的Map结构中查找如果存在就是登录用户如果为null就是未登录 4.4.2 Cookie和Session的过期校验 Session的过期校验 服务端保存的Session信息有默认的过期时间可通过程序设置  服务器有Session的过期校验机制通过单独的线程扫描发现当前时间和Session最后一次使用的时间超时就删掉 服务器存放Session的地方web服务器默认是存放在内存中所以重启服务器Session也就没了但是有些服务器把数据保存在服务器硬盘重启就还有 如果用户注销登录相当于服务端删除Map中的Session 所以超时后注销后重启服务器后需要访问页面就需要重新登陆 Cookie的过期校验  Cookie也有过期时间可以通过程序设置  如果Cookie过期浏览器发请求时就不会携带这些信息服务端验证sessionId时就会验证失败也就是没有登陆 如果在客户端手动删除Cookie就相当于服务端还有Session信息但是客户端请求时也不会携带Cookie信息服务端验证sessionId失败也就意味没有登陆
13. 解析HTTP响应  5.1 HTTP响应状态码  状态码由三位数字构成表示访问一个页面的结果HTTP响应报文由服务端返回程序可以设置内容状态码也可以由程序设置 常见状态码 200表示服务端对当次请求处理成功404 Not Found找不到请求路径url对应的资源304 Not Modified表示之前访问过的资源本次请求时没有被修改过也就是客户端直接从缓存中获取403 Forbidden表示访问被拒绝一般是没有访问权限没有登陆时就访问就会出现403405 Method Not Allowed方法不支持检查前端请求方法也要检查后端的请求方法500 Internal Server Error服务器内部错误要检查后端控制台异常堆栈信息504 Gateway Timeout请求在服务端处理超时服务端也有返回响应的时间限制发现处理时间超时就返回504302 Move temporarily临时重定向响应报文的header部分会包含一个Location字段表示要跳转到哪个页面301 Moved Permanently永久重定向301也是通过Location字段来表示要重定向到的新地址 状态码总结  类别原因1xxInformational信息性状态码接收的请求正在处理2xxSuccess成功状态码请求正常处理完毕3xxRedirection重定向状态码需要进行附加操作完成请求4xxClient Error客户端错误状态码服务器无法完成请求5xxServer Error服务器错误状态码服务器处理请求出错 5.2 响应报头Header  响应报头的格式与请求报头的格式基本一致也就是Content-TypeContent-Length等属性含义也和请求中含义相同  响应请求头中可能会有Location属性指重定向跳转的路径  Content-Type  响应中的Content-Type常见取值有以下几种 text/htmlbody数据格式是HTMLtext/cssbody数据格式是CSStext/javascript : body数据格式是JavaScriptapplication/jsonbody数据格式是JSON
14. 构造HTTP请求  6.1 form表单构造HTTP请求 6.1.1 form表单的介绍  form表单是HTML中的一个常用标签可用于给服务端发送GET或者POST请求 form的重要参数  action构造HTTP请求的URLmethod构造HTTP请求的方法GET或POSTform只支持GET或者POST input的重要参数 type表示输入框的类型text表示文本password表示密码submit表示提交name对于GET请求来说表示构造出的HTTP请求的queryString的keyqueryString的value就是输入框输入的内容对于POST请求来说数据从queryString转移到了body中valueinput标签的值对于submit来说value对于按钮上显示的文本  6.1.2 form表单构造GET请求 body!– form表单action为请求的urlmethod为请求的方法 –form actionhttp://abc.com methodGET!– name作为键内容作为值多个键值对用间隔 –input typetext nameusernameInput typepassword namepasswordinput typesubmit value提交/form /body 页面效果 点击提交就会构造出GET请求并发出去 体会form代码和HTTP请求之间的关系 6.1.3 form表单构造POST请求 与构造GET请求不同的是只需将form的method由GET修改为POST body!– form表单action为请求的urlmethod为请求的方法 –form actionhttp://abc.com methodPOST!– name作为键内容作为值多个键值对用间隔 –input typetext nameusernameInput typepassword namepasswordinput typesubmit value提交/form /body 页面效果 点击提交就会构造POST请求并发出去  6.2 Ajax构造HTTP请求  从前端角度除了浏览器地址栏能构造GET请求form表单能构造GET和POST之外还可以在 JavaScript中可以通过ajax的方式构造HTTP请求并且功能更强大 6.2.1 为何使用ajax构造HTTP请求  使用表单提交数据URL会改变相当于跳转到另一个页面假如想实现页面局部内容的改变如发送HTTP请求用响应返回的数据生成一些内容这个过程页面不会刷新就要使用ajax技术  使用ajax的好处 不刷新页面就可以发送HTTP请求用户体验更好相同的一个页面动态的通过响应数据来生成局部的页面内容如果是服务端直接返回变化后的HTML这时数据传输量比较大效率较低但是使用ajax效率较高因为响应的数据量只有变化的数据  ajax产生的原因 JS是单线程运行代码一行一行的运行不能基于多线程的方式一次运行多行代码ajax异步发送ajax请求后后边的JS代码还可以继续执行在ajax事件发生后由系统内核来通知执行ajax的回调函数 6.2.2 ajax构造GET请求  script//XMLHttpRequest对象就是ajax发送请求及处理响应的对象let xhr new XMLHttpRequest();//设置一个异步回调函数到ajax对象的属性中//发送http请求对应事件发生才会调用回调函数xhr.onreadystatechange function(){//xhr.readyState属性//0请求未初始化还没有发生http请求//1客户端和服务器已经建立连接//2服务端已经接收请求//3服务端已经处理请求//4客户端已经收到服务端返回的响应if(xhr.readyState 4){//响应状态码console.log(xhr.status);//响应正文console.log(xhr.responseText);}//open设置请求方法和url此时还没有发生http请求xhr.open(GET, http://42.192.83.143:8089/AjaxMockServer/info);//send正式发送http请求也可以设置请求正文body数据xhr.send();//send(),send(body)两种方式} /script 6.2.3 ajax构造POST请求   对于 POST 请求需要设置 body 的内容 先使用setRequestHeader设置Content-Type再通过send的参数设置body内容 script//XMLHttpRequest对象就是ajax发送请求及处理响应的对象let xhr new XMLHttpRequest();//设置一个异步回调函数到ajax对象的属性中//发送http请求对应事件发生才会调用回调函数xhr.onreadystatechange function(){//xhr.readyState属性//0请求未初始化还没有发生http请求//1客户端和服务器已经建立连接//2服务端已经接收请求//3服务端已经处理请求//4客户端已经收到服务端返回的响应if(xhr.readyState 4){//响应状态码console.log(xhr.status);//响应正文console.log(xhr.responseText);}//open设置请求方法和url此时还没有发生http请求xhr.open(POST, http://42.192.83.143:8089/AjaxMockServer/info);//设置请求头,设置body数据格式xhr.setRequestHeader(Content-Type, application/x-www-formurlencoded)//send正式发送http请求也可以设置请求正文body数据xhr.send(usernameabcpassword123);//send(),send(body)两种方式} /script 6.2.4 封装Ajax函数 原生的XMLHTTPRequest类使用并不方便我们可以在这个基础上进行简单封装  script//封装ajax函数,args为一个js对象//args对象属性如下//method请求方法url请求资源路径contenType请求正文格式//body请求正文callback回调函数客户端接收到响应数据后调用function ajax(args){let xhr new XMLHttpRequest();//设置回调函数xhr.onreadystatechange function(){//4客户端接收到服务端响应if(xhr.readyState 4){//回调函数可能会使用响应的内容,作为传入参数args.callback(xhr.status,xhr.responseText);}}xhr.open(args.method,args.url);//如果args中contentType有内容就设置Content-Type请求头if (args.contentType) {//js中if可以判断是否有值xhr.setRequestHeader(Content-Type, args.contentType);}//如果args中body有内容设置body请求正文if(args.body){xhr.send(args.body);}else {xhr.send();}} /script 使用封装的ajax函数构造GET请求  直接调用封装好的ajax函数传入args对象即可  ajax({method: GET,url: http://42.192.83.143:8089/AjaxMockServer/info,callback: function(status,responseText){console.log(statusresponseText);}}); 使用封装的ajax函数构造POST请求   直接调用封装好的ajax函数传入args对象即可   ajax({method: POST,url: http://42.192.83.143:8089/AjaxMockServer/info,contentType: application/x-www-formurlencoded,body: usernameabcpassword123,callback: function(status,responseText){console.log(statusresponseText);}}); 6.2.5 ajax的跨域问题 请求当前html页面路径中的服务器地址ip/域名端口号和使用ajax请求的服务器地址不同就是跨域跨域问题是ajax中存在的和htmljs服务器无关也就是服务端还能接收到这个请求并返回响应但是ajax为了安全起见如果发现响应头中没有设置允许跨域的信息就会报错 如果想要强行跨域需要服务器进行配合需要在服务器的响应中设置“允许跨域”