计算机网络 通信:互联网
主体:服务器、客户端浏览器
内容:内容
方式:响应方式
通信协议:通信遵循的规则约定|通信格式
超文本:网页内容
超文本传输协议:网页内容传输协议 HTTP协议客户端与服务器间进行网页内容传输时需遵守的传输格式 提交&响应
HTTP 请求 HTTP协议模型:请求/响应 交互模型
HTTP 请求消息 HTTP 请求报文
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 GET / HTTP/1.1 Host : www.baidu.comConnection : keep-aliveCache-Control : max-age=0sec-ch-ua : " Not A;Brand";v="99", "Chromium";v="98", "Google Chrome";v="98"sec-ch-ua-mobile : ?0sec-ch-ua-platform : "Windows"DNT : 1Upgrade-Insecure-Requests : 1User-Agent : Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.81 Safari/537.36Accept : text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9Sec-Fetch-Site : noneSec-Fetch-Mode : navigateSec-Fetch-User : ?1Sec-Fetch-Dest : documentAccept-Encoding : gzip, deflate, brAccept-Language : zh-CN,zh;q=0.9Cookie : BIDUPSID=028E86627DA4BB24A78F13047AE65439; PSTM=1628179856; BD_UPN=12314753; __yjs_duid=1_0275df3f717d1e5149c8d0bc2305f82d1628213742697; BAIDUID=D5D732CC5CBECD9277FA4AF82CF82B37:FG=1; BDUSS=JzeWVqZmpKdC1kRmFDN2VKRDl4R3d5YUR5WnJzVjV6dWRsdE5tSlotUXdNZGxoRVFBQUFBJCQAAAAAAQAAAAEAAACSPpQhzOy~1bXE1MYxMDAwMDEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADCksWEwpLFhQ3; BDUSS_BFESS=JzeWVqZmpKdC1kRmFDN2VKRDl4R3d5YUR5WnJzVjV6dWRsdE5tSlotUXdNZGxoRVFBQUFBJCQAAAAAAQAAAAEAAACSPpQhzOy~1bXE1MYxMDAwMDEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADCksWEwpLFhQ3; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598; BAIDUID_BFESS=D5D732CC5CBECD9277FA4AF82CF82B37:FG=1; BD_HOME=1; H_PS_PSSID=35834_35106_31253_35765_35489_34584_35491_35871_35246_35905_35796_35316_26350_35884_35724_35879_35746; sug=3; sugstore=0; ORIGIN=0; bdime=0; BA_HECTOR=8004al2520258h0lb41h0s1c90q
HTTP 响应消息:HTTP 响应报文
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 HTTP/1.1 200 OKBdpagetype : 2Bdqid : 0xbde875de000166a1Cache-Control : privateConnection : keep-aliveContent-Encoding : gzipContent-Type : text/html;charset=utf-8Date : Thu, 17 Feb 2022 08:52:39 GMTExpires : Thu, 17 Feb 2022 08:52:39 GMTServer : BWS/1.1Set-Cookie : BDSVRTM=302; path=/Set-Cookie : BD_HOME=1; path=/Set-Cookie : H_PS_PSSID=35834_35106_31253_35765_35489_34584_35491_35871_35246_35905_35796_35316_26350_35884_35724_35879_35746; path=/; domain=.baidu.comStrict-Transport-Security : max-age=172800Traceid : 1645087959064662324213684317064108533409X-Frame-Options : sameoriginX-Ua-Compatible : IE=Edge,chrome=1Transfer-Encoding : chunked
请求方法
请求数据放在数据头内
请求数据放在请求体内
PUT 修改 - 提交新资源并替换
DELETE 删除 - 移除资源
请求删除指定的资源
响应状态码 用于标识响应状态
三十进制:字,first类型,then细分
1** 信息:收到请并需继续操作(少见)
2** 成功:请求成功接收并处理
200 OK 请求成功
201 Created 已创建
3** 重定向:需进一步操作以完成请求
301 Moved Permanently 永久移动 使用新URL
302 Found 临时移动 仍使用原有URL
304 Not Modified 未修改 会直接访问缓存内资源
4** 客户端错误:请求包含语法错误或无法完成请求
400 Bad Request 语义有误or请求参数有误
401 Unauthorized 需用户验证
403 Forbidden 拒绝执行请求
404 Not Found 无法找到资源
408 Request Timeout 请求超时
5** 服务器错误:服务器处理请求出错
500 Internal Server Error 服务器内部错误,无法完成请求
501 Not Implemented 不支持请求方法
503 Service Unavailable 服务器暂时无法处理:超载or系统维护
跨域与 JSONP 同源策略 同源:两页面协议、域名、端口相同
浏览器网页默认端口 80
同源策略:浏览器安全功能-限制来源同一个加载文档脚本与其他源资源的交互
阻止读取非同源网页的 cookie、localstorage 与 indexedDB
阻止接触非同源网页的 DOM
阻止向非同源地址发送 Ajax 请求
跨域:非同源
浏览器会拦截跨域请求回来的数据
JSONP JSON 的一种使用模式,实现跨域数据访问
由于 script 标签允许请求非同源的 js 脚本
利用 script 标签请求,并传递一个回调函数名作为参数;服务器端把数据作为回调函数参数包装后返回;浏览器自动执行回调函数代码,即实现数据渲染
JSONP:兼容性好、只支持 GET 请求
CORS:支持 GET 与 POST,不兼容低版本浏览器
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <div id ="divCustomers" > </div > <script type ="text/javascript" > function callbackFunction (result, methodName ) { var html = "<ul>" ; for (var i = 0 ; i < result.length ; i++) { html += "<li>" + result[i] + "</li>" ; } html += "</ul>" ; document .getElementById ("divCustomers" ).innerHTML = html; } </script > <script type ="text/javascript" src ="https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction" > </script >
jQuery 实现用户端
采用动态创建与移除 script 标签:向 head 内添加 script 标签
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <div id ="divCustomers" > </div > <script > $.getJSON ( "https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?" , function (data ) { var html = "<ul>" ; for (var i = 0 ; i < data.length ; i++) { html += "<li>" + data[i] + "</li>" ; } html += "</ul>" ; $("#divCustomers" ).html (html); } ); </script > <script > $.ajax ({ url : 'https:www.sky.icu' , dataType : 'jsonp' , success : (res ) => { console .log (e); }, jsonp : 'callback' jsonpCallback : 'jQueryxxx' , }) </script >
服务器端
1 2 3 4 5 6 7 8 9 <?php header ('Content-type: application/json' ); $jsoncallback = htmlspecialchars ($_REQUEST ['jsoncallback' ]); $json_data = '["customername1","customername2"]' ; echo $jsoncallback . "(" . $json_data . ")" ; ?>
节流 节流,就是指连续触发事件但是在 n 秒中只执行一次函数
减少事件触发频率
使得鼠标事件仅在单位时间内触发一次
降低监测滚动条位置的频率
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 function throttle (func, delay ) { let prev = 0 ; return function (...args ) { const now = Date .now (); if (now - prev > delay) { last = now; func.apply (this , args); } }; } function throttle (func, delay ) { let timeout = null ; return function (...args ) { if (!timeout) { timeout = setTimeout (() => { timeout = null ; func.apply (this , args); }); } }; }
防抖 防抖,就是指触发事件后 n 秒后才执行函数,如果在 n 秒内又触发了事件,则会重新计算函数执行时间
常用于搜索
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 function debounce (func, delay ) { let timer = null ; return function (...args ) { if (timer) { clearTimeout (timer); } timer = setTimeout (() => { func.apply (this , args); }, delay); }; } function debounce (func, delay ) { let timer = null ; return function (...args ) { if (timer) clearTimeOut (timer); const cal = !timer; timer = setTimeOut (() => { timer = null ; }, delay); if (cal) func.apply (this , args); }; }