{"id":2720,"date":"2022-01-18T14:25:46","date_gmt":"2022-01-18T06:25:46","guid":{"rendered":"https:\/\/blog.odliken.cn\/?p=2720"},"modified":"2023-02-13T18:18:10","modified_gmt":"2023-02-13T10:18:10","slug":"http-%e5%8d%8f%e8%ae%ae%e3%80%81%e5%ad%98%e5%82%a8%e3%80%81ajax","status":"publish","type":"post","link":"https:\/\/blog.odjbinail.cn\/?p=2720","title":{"rendered":"HTTP \u534f\u8bae\u3001\u5b58\u50a8\u3001Ajax"},"content":{"rendered":"<h1>\u524d\u7aef\u6570\u636e\u4ea4\u4e92\u4e0e HTTP \u534f\u8bae<\/h1>\n<h2>\u521d\u59cb\u524d\u540e\u7aef\u901a\u4fe1<\/h2>\n<ul>\n<li>1.\u524d\u540e\u7aef\u901a\u4fe1\u662f\u4ec0\u4e48<br \/>\n\u524d\u7aef\u548c\u540e\u7aef\u6570\u636e\u4ea4\u4e92\u7684\u8fc7\u7a0b<br \/>\n\u6d4f\u89c8\u5668\u548c\u670d\u52a1\u5668\u4e4b\u95f4\u6570\u636e\u4ea4\u4e92\u7684\u8fc7\u7a0b<\/li>\n<li>2.\u540e\u7aef\u5411\u524d\u7aef\u53d1\u9001\u6570\u636e<br \/>\n\u8bbf\u95ee\u9875\u9762<\/li>\n<li>3.\u524d\u7aef\u5411\u540e\u7aef\u53d1\u9001\u6570\u636e<br \/>\n\u7528\u6237\u6ce8\u518c<\/li>\n<\/ul>\n<h2>\u524d\u540e\u7aef\u901a\u4fe1\u7684\u8fc7\u7a0b\u4e0e\u6982\u5ff5\u89e3\u91ca<\/h2>\n<ul>\n<li>\u5c31\u662f\u5728 '\u8bf7\u6c42-\u54cd\u5e94'\u4e2d\u5b8c\u6210\u7684<\/li>\n<li>\u524d\u7aef:\u6d4f\u89c8\u5668\u7aef<\/li>\n<li>\u5ba2\u6237\u7aef:\u53ea\u8981\u80fd\u548c\u670d\u52a1\u5668\u901a\u4fe1\u7684\u53eb\u5ba2\u6237\u7aef<\/li>\n<li>\u547d\u4ee4\u884c\u5de5\u5177<br \/>\ncurl https:www.imooc.com<\/li>\n<li>\u540e\u7aef:\u670d\u52a1\u5668\u7aef<\/li>\n<\/ul>\n<h2>\u524d\u540e\u7aef\u7684\u901a\u4fe1\u65b9\u5f0f<\/h2>\n<ul>\n<li>1.\u4f7f\u7528\u6d4f\u89c8\u5668\u8bbf\u95ee\u7f51\u9875<br \/>\n\u5728\u6d4f\u89c8\u5668\u4e2d\u8f93\u5165\u7f51\u5740,\u6309\u4e0b\u56de\u8f66<\/li>\n<li>2.html \u7684\u6807\u7b7e\n<ul>\n<li>\u6d4f\u89c8\u5668\u5728\u89e3\u6790 HTML \u6807\u7b7e\u7684\u65f6\u5019\uff0c\u9047\u5230\u4e00\u4e9b\u7279\u6b8a\u7684\u6807\u7b7e\uff0c\u4f1a\u518d\u6b21\u5411\u670d\u52a1\u5668\u53d1\u9001\u8bf7\u6c42 <\/li>\n<li>link\/img\/script\/iframe<\/li>\n<li>\u8fd8\u6709\u4e00\u4e9b\u6807\u7b7e\uff0c\u6d4f\u89c8\u5668\u89e3\u6790\u7684\u65f6\u5019\uff0c\u4e0d\u4f1a\u5411\u670d\u52a1\u5668\u53d1\u9001\u8bf7\u6c42\uff0c\u4f46\u662f\u7528\u6237\u53ef\u4ee5\u4f7f\u7528\u4ed6\u4eec\u5411\u670d\u52a1\u5668\u53d1\u9001\u8bf7\u6c42<br \/>\na\/form<\/li>\n<\/ul>\n<\/li>\n<li>3.Ajax \u548c Fetch<\/li>\n<\/ul>\n<h2>\u521d\u8bc6 HTTP<\/h2>\n<p>HyperText Transfer Protocol<br \/>\n\u8d85\u6587\u672c\u4f20\u8f93\u534f\u8bae<\/p>\n<ul>\n<li>\u8d85\u6587\u672c:\u539f\u5148\u4e00\u4e2a\u4e2a\u5355\u4e00\u7684\u6587\u672c\uff0c\u901a\u8fc7\u8d85\u94fe\u63a5\u5c06\u5176\u8054\u7cfb\u8d77\u6765\u3002\u7531\u539f\u5148\u7684\u5355\u4e00\u7684\u6587\u672c\u53d8\u6210\u4e86\u53ef\u65e0\u9650\u5ef6\u4f38\u3001\u6269\u5c55\u7684\u8d85\u7ea7\u6587\u672c\u3001\u7acb\u4f53\u6587\u672c<\/li>\n<li>HTML\u3001JS\u3001CSS\u3001\u56fe\u7247\u3001\u5b57\u4f53\u3001\u97f3\u9891\u3001\u89c6\u9891\u7b49\u7b49\u6587\u4ef6\uff0c\u90fd\u662f\u901a\u8fc7 HTTP(\u8d85\u6587\u672c\u4f20\u8f93\u534f\u8bae\uff09\u5728\u670d\u52a1\u5668\u548c\u6d4f\u89c8\u5668\u4e4b\u95f4\u4f20\u8f93<\/li>\n<li>\u6bcf\u4e00\u6b21\u524d\u540e\u7aef\u901a\u4fe1\uff0c\u524d\u7aef\u9700\u8981\u4e3b\u52a8\u5411\u540e\u7aef\u53d1\u51fa\u8bf7\u6c42\uff0c\u540e\u7aef\u63a5\u6536\u5230\u524d\u7aef\u7684\u8bf7\u6c42\u540e\uff0c\u53ef\u4ee5\u7ed9\u51fa\u54cd\u5e94<\/li>\n<li>HTTP \u662f\u4e00\u4e2a\u8bf7\u6c42-\u54cd\u5e94\u534f\u8bae<\/li>\n<\/ul>\n<p>2.HTTP \u8bf7\u6c42\u54cd\u5e94\u8fc7\u7a0b\n<\/p>\n<p>![](<a href=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/01\/2022012320470853.png\" rel=\"box\" class=\"fancybox\">http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/01\/2022012320470853.png<\/a>)<\/p>\n<h2>HTTP \u62a5\u6587<\/h2>\n<ul>\n<li>\u6d4f\u89c8\u5668\u5411\u670d\u52a1\u5668\u53d1\u9001\u8bf7\u6c42\u65f6\uff0c\u8bf7\u6c42\u672c\u8eab\u5c31\u662f\u4fe1\u606f\uff0c\u53eb\u8bf7\u6c42\u62a5\u6587<\/li>\n<li>\u670d\u52a1\u5668\u5411\u6d4f\u89c8\u5668\u53d1\u9001\u54cd\u5e94\u65f6\u4f20\u8f93\u7684\u4fe1\u606f\uff0c\u53eb\u54cd\u5e94\u62a5\u6587<\/li>\n<\/ul>\n<p>2.HTTP \u62a5\u6587\u683c\u5f0f<br \/>\n\u8bf7\u6c42\u5934:\u8d77\u59cb\u884c+\u9996\u90e8<br \/>\n\u8bf7\u6c42\u4f53<br \/>\n\u54cd\u5e94\u5934:\u8d77\u59cb\u884c+\u9996\u90e8<br \/>\n\u54cd\u5e94\u4f53<\/p>\n<p>![](<a href=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/01\/2022012320454476.png\" rel=\"box\" class=\"fancybox\">http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/01\/2022012320454476.png<\/a>)<\/p>\n<ul>\n<li>GET \u8bf7\u6c42,\u6ca1\u6709\u8bf7\u6c42\u4f53[\u4e00\u822c\u6765\u53d1\u9001\u6570\u636e\u7684],\u6570\u636e\u901a\u8fc7\u8bf7\u6c42\u5934\u643a\u5e26 <\/li>\n<li>POST \u8bf7\u6c42,\u6709\u8bf7\u6c42\u4f53,\u6570\u636e\u901a\u8fc7\u8bf7\u6c42\u4f53\u643a\u5e26<\/li>\n<\/ul>\n<h2>HTTP \u65b9\u6cd5<\/h2>\n<ul>\n<li>\n<p>1.\u5e38\u7528\u7684 HTTP \u65b9\u6cd5<\/p>\n<ul>\n<li>\u6d4f\u89c8\u5668\u53d1\u9001\u8bf7\u6c42\u65f6\u91c7\u7528\u7684\u65b9\u6cd5,\u548c\u54cd\u5e94\u65e0\u5173<\/li>\n<li>GET,POST,PUT,DELETE<\/li>\n<li>\u7528\u6765\u5b9a\u4e49\u5bf9\u4e8e\u8d44\u6e90\u91c7\u53d6\u4ec0\u4e48\u6837\u7684\u64cd\u4f5c\u7684,\u6709\u5404\u81ea\u7684\u8bed\u4e49<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>2.HTTP \u65b9\u6cd5\u7684\u8bed\u4e49<\/p>\n<\/li>\n<li>\n<p>GET \u83b7\u53d6\u6570\u636e<br \/>\n\u83b7\u53d6\u8d44\u6e90(\u6587\u4ef6)<\/p>\n<\/li>\n<li>\n<p>POST \u521b\u5efa\u6570\u636e<br \/>\n\u6ce8\u518c<\/p>\n<\/li>\n<li>\n<p>PUT \u66f4\u65b0\u6570\u636e<br \/>\n\u4fee\u6539\u4e2a\u4eba\u4fe1\u606f,\u4fee\u6539\u5bc6\u7801<\/p>\n<\/li>\n<li>\n<p>DELETE \u5220\u9664\u6570\u636e<br \/>\n\u5220\u9664\u4e00\u6761\u8bc4\u8bba<\/p>\n<\/li>\n<li>\n<p>\u589e\u5220\u6539\u67e5<\/p>\n<\/li>\n<li>\n<p>\u8fd9\u4e9b\u65b9\u6cd5\u867d\u7136\u6709\u5404\u81ea\u7684\u8bed\u4e49\uff0c\u4f46\u662f\u5e76\u4e0d\u662f\u5f3a\u5236\u6027\u7684<\/p>\n<\/li>\n<\/ul>\n<p>3.RESTFul \u63a5\u53e3\u8bbe\u8ba1<\/p>\n<ul>\n<li>\n<p>\u4e00\u79cd\u63a5\u53e3\u8bbe\u8ba1\u98ce\u683c,\u5145\u5206\u5229\u7528 HTTP \u65b9\u6cd5\u7684\u8bed\u4e49<\/p>\n<\/li>\n<li>\n<p>\u901a\u8fc7\u7528\u6237 ID \u83b7\u53d6\u4e2a\u4eba\u4fe1\u606f,\u4f7f\u7528 GET \u65b9\u6cd5<br \/>\n<a href=\"https:\/\/www.imooc.com\/api\/http\/getUser?id=1\">https:\/\/www.imooc.com\/api\/http\/getUser?id=1<\/a><br \/>\n\/\/GET<br \/>\n<a href=\"https:\/\/www.imooc.com\/api\/http\/user?id=1\">https:\/\/www.imooc.com\/api\/http\/user?id=1<\/a><\/p>\n<\/li>\n<li>\n<p>\u6ce8\u518c\u65b0\u7528\u6237,\u4f7f\u7528 POST \u65b9\u6cd5<br \/>\n<a href=\"https:\/\/www.imooc.com\/api\/http\/addUser\">https:\/\/www.imooc.com\/api\/http\/addUser<\/a><br \/>\n\/\/POST<br \/>\n<a href=\"https:\/\/www.imooc.com\/api\/http\/user\">https:\/\/www.imooc.com\/api\/http\/user<\/a><\/p>\n<\/li>\n<li>\n<p>\u4fee\u6539\u4e00\u4e2a\u7528\u6237,\u4f7f\u7528 POST \u65b9\u6cd5<br \/>\n<a href=\"https:\/\/www.imooc.com\/api\/http\/modifyUser\">https:\/\/www.imooc.com\/api\/http\/modifyUser<\/a><br \/>\n\/\/PUT<br \/>\n<a href=\"https:\/\/www.imooc.com\/api\/http\/user\">https:\/\/www.imooc.com\/api\/http\/user<\/a><\/p>\n<\/li>\n<li>\n<p>\u5220\u9664\u4e00\u4e2a\u7528\u6237,\u4f7f\u7528 POST \u65b9\u6cd5<br \/>\n<a href=\"https:\/\/www.imooc.com\/api\/http\/deleteUser\">https:\/\/www.imooc.com\/api\/http\/deleteUser<\/a><\/p>\n<\/li>\n<\/ul>\n<p>\/\/DELETE<br \/>\n<a href=\"https:\/\/www.imooc.com\/api\/http\/user\">https:\/\/www.imooc.com\/api\/http\/user<\/a><\/p>\n<h2>GET \u548c POST \u65b9\u6cd5\u7684\u5bf9\u6bd4<\/h2>\n<ul>\n<li>\n<p>1.\u8bed\u4e49<br \/>\nGET:\u83b7\u53d6\u6570\u636e<br \/>\nPOST:\u521b\u5efa\u6570\u636e<\/p>\n<\/li>\n<li>\n<p>2.\u53d1\u9001\u6570\u636e<\/p>\n<ul>\n<li>GET \u901a\u8fc7\u5730\u5740\u5728\u8bf7\u6c42\u4f53\u4e2d\u643a\u5e26\u6570\u636e<\/li>\n<li>\u80fd\u643a\u5e26\u7684\u6570\u636e\u91cf\u548c\u5730\u5740\u7684\u957f\u5ea6\u6709\u5173\u7cfb\uff0c\u4e00\u822c\u6700\u591a\u5c31\u51e0 K<\/li>\n<li>POST \u65e2\u53ef\u4ee5\u901a\u8fc7\u5730\u5740\u5728\u8bf7\u6c42\u5934\u4e2d\u643a\u5e26\u6570\u636e\uff0c\u4e5f\u53ef\u4ee5\u901a\u8fc7\u8bf7\u6c42\u4f53\u643a\u5e26\u6570\u636e<\/li>\n<li>\u80fd\u643a\u5e26\u7684\u6570\u636e\u91cf\u7406\u8bba\u4e0a\u662f\u65e0\u9650\u7684<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>\u643a\u5e26\u5c11\u91cf\u6570\u636e\uff0c\u53ef\u4ee5\u4f7f\u7528 GET \u8bf7\u6c42\uff0c\u5927\u91cf\u7684\u6570\u636e\u53ef\u4ee5\u4f7f\u7528 POST \u8bf7\u6c42<\/p>\n<\/li>\n<li>\n<p>3.\u7f13\u5b58<br \/>\nGET \u53ef\u4ee5\u88ab\u7f13\u5b58,POST \u4e0d\u4f1a\u88ab\u7f13\u5b58<\/p>\n<\/li>\n<li>\n<p>4.\u5b89\u5168\u6027<br \/>\nGET \u548c POST \u90fd\u4e0d\u5b89\u5168<\/p>\n<ul>\n<li>\u53d1\u9001\u5bc6\u7801\u6216\u5176\u4ed6\u654f\u611f\u4fe1\u606f\u65f6\u4e0d\u8981\u4f7f\u7528 GET\uff0c\u4e3b\u8981\u662f\u907f\u514d\u76f4\u63a5\u88ab\u4ed6\u4eba\u7aa5\u5c4f\u6216\u901a\u8fc7\u5386\u53f2\u8bb0\u5f55\u627e\u5230\u4f60\u7684\u5bc6\u7801<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2>HTTP \u72b6\u6001\u7801<\/h2>\n<ul>\n<li>\u5b9a\u4e49\u670d\u52a1\u5668\u5bf9\u8bf7\u6c42\u7684\u5904\u7406\u7ed3\u679c,\u662f\u670d\u52a1\u5668\u8fd4\u56de\u7684<\/li>\n<li>\n<p>HTTP \u72b6\u6001\u7801\u7684\u8bed\u4e49<\/p>\n<ul>\n<li>\n<p>100~199 \u6d88\u606f:\u4ee3\u8868\u8bf7\u6c42\u5df2\u88ab\u63a5\u53d7,\u9700\u8981\u7ee7\u7eed\u5904\u7406<br \/>\nwebsocket<\/p>\n<\/li>\n<li>\n<p>200~299 \u6210\u529f<\/p>\n<\/li>\n<li>\n<p>300~399 \u91cd\u5b9a\u5411<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>301 Moved Permanently \u6c38\u4e45\u6027\u91cd\u5b9a\u5411<\/li>\n<li>302 Move Temporarily<\/li>\n<li>304 Not Modified<\/li>\n<li>400~499 \u8bf7\u6c42\u9519\u8bef<\/li>\n<li>404 Not Found<\/li>\n<li>500~599 \u670d\u52a1\u5668\u9519\u8bef<\/li>\n<li>500 Internal Server Error<\/li>\n<\/ul>\n<h1>\u672c\u5730\u5b58\u50a8<\/h1>\n<h2>\u521d\u8bc6 Cookie<\/h2>\n<ul>\n<li>\n<p>Cookie \u5168\u79f0 HTTP Cookie\uff0c\u7b80\u79f0 Cookie<\/p>\n<ul>\n<li>\u662f\u6d4f\u89c8\u5668\u5b58\u50a8\u6570\u636e\u7684\u4e00\u79cd\u65b9\u5f0f<\/li>\n<li>\u56e0\u4e3a\u5b58\u50a8\u5728\u7528\u6237\u672c\u5730\uff0c\u800c\u4e0d\u662f\u5b58\u50a8\u5728\u670d\u52a1\u5668\u4e0a\uff0c\u662f\u672c\u5730\u5b58\u50a8<\/li>\n<li>\u4e00\u822c\u4f1a\u81ea\u52a8\u968f\u7740\u6d4f\u89c8\u5668\u6bcf\u6b21\u8bf7\u6c42\u53d1\u9001\u5230\u670d\u52a1\u5668\u7aef<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>Cookie \u6709\u4ec0\u4e48\u7528<\/p>\n<ul>\n<li>\u5229\u7528 Cookie \u8ddf\u8e2a\u7edf\u8ba1\u7528\u6237\u8bbf\u95ee\u8be5\u7f51\u7ad9\u7684\u4e60\u60ef\uff0c\u6bd4\u5982\u4ec0\u4e48\u65f6\u95f4\u8bbf\u95ee\uff0c\u8bbf\u95ee\u4e86\u54ea\u4e9b\u9875\u9762\uff0c\u5728\u6bcf\u4e2a\u7f51\u9875\u7684\u505c\u7559\u65f6\u95f4\u7b49<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>3.\u5728\u6d4f\u89c8\u5668\u4e2d\u64cd\u4f5c Cookie<br \/>\n\u4e0d\u8981\u5728 Cookie \u4e2d\u4fdd\u5b58\u5bc6\u7801\u7b49\u654f\u611f\u4fe1\u606f<\/p>\n<\/li>\n<\/ul>\n<h2>Cookie \u7684\u57fa\u672c\u7528\u6cd5<\/h2>\n<pre class=\"prettyprint linenums\" ><code>        \/\/1.\u5199\u5165 Cookie\n        \/\/ document.cookie=&#039;username=zs&#039;;\n        \/\/ document.cookie=&#039;age=18&#039;;\n        \/\/\u4e0d\u80fd\u4e00\u8d77\u8bbe\u7f6e,\u53ea\u80fd\u4e00\u4e2a\u4e2a\u8bbe\u7f6e\n        \/\/2.\u8bfb\u53d6 Cookie\n        console.log(document.cookie);\n        \/\/\u8bfb\u53d6\u7684\u662f\u4e00\u4e2a\u7531\u540d\u503c\u5bf9\u6784\u6210\u7684\u5b57\u7b26\u4e32,\n        \/\/ \u6bcf\u4e2a\u540d\u503c\u5bf9\u4e4b\u95f4\u7531&quot;;&quot; (\u4e00\u4e2a\u5206\u53f7\u548c\u4e00\u4e2a\u7a7a\u683c)\u9694\u5f00\n        age=18; username=zs<\/code><\/pre>\n<h2>Cookie \u7684\u5c5e\u6027<\/h2>\n<p>\u4e3b\u8981\u638c\u63e1<br \/>\n1.Cookie \u7684\u540d\u79f0(Name)\u548c\u503c(Value)<br \/>\n2.\u5931\u6548(\u5230\u671f\u65f6\u95f4)<\/p>\n<pre class=\"prettyprint linenums\" ><code>       \/\/1.Cookie \u7684\u540d\u79f0(Name)\u548c\u503c(Value)\n       \/\/\u6700\u91cd\u8981\u7684\u4e24\u4e2a\u5c5e\u6027,\u521b\u5efa Cookie \u65f6\u5fc5\u987b\u586b\u5199,\u5176\u4ed6\u5c5e\u6027\u53ef\u4ee5\u4f7f\u7528\u9ed8\u8ba4\u503c\n       \/\/Cookie \u7684\u540d\u79f0\u6216\u503c\u5982\u679c\u5305\u542b\u975e\u82f1\u6587\u5b57\u6bcd,\n       \/\/\u5219\u5199\u5165\u65f6\u9700\u8981\u4f7f\u7528 encodeURIComponent()\u7f16\u7801\uff0c\n       \/\/\u8bfb\u53d6\u65f6\u4f7f\u7528 decodeURIComponent()\u89e3\u7801\n       \/\/ document.cookie=<code>username=${encodeURIComponent(&#039;\u5f20\u4e09&#039;)}<\/code>;\n       \/\/ document.cookie=<code>${encodeURIComponent(&#039;\u7528\u6237\u540d&#039;)}=${encodeURIComponent(&#039;\u5f20\u4e09&#039;)}<\/code>;\n       \/\/\u4e00\u822c\u540d\u79f0\u4f7f\u7528\u82f1\u6587\u5b57\u6bcd,\u4e0d\u8981\u7528\u4e2d\u6587,\u503c\u53ef\u4ee5\u7528\u4e2d\u6587,\u4f46\u662f\u8981\u7f16\u7801\n       \/\/2.\u5931\u6548(\u5230\u671f\u65f6\u95f4)\n       \/\/\u5bf9\u4e8e\u5931\u6548\u7684 Cookie,\u4f1a\u88ab\u6d4f\u89c8\u5668\u6e05\u9664\n       \/\/\u5982\u679c\u6ca1\u6709\u8bbe\u7f6e\u5931\u6548(\u5230\u671f)\u65f6\u95f4\uff0c\u8fd9\u6837\u7684 Cookie \u79f0\u4e3a\u4f1a\u8bdd Cookie\n       \/\/\u5b83\u5b58\u5728\u5185\u5b58\u4e2d,\u5f53\u4f1a\u8bdd\u7ed3\u675f\uff0c\u4e5f\u5c31\u662f\u6d4f\u89c8\u5668\u5173\u95ed\u65f6\uff0cCookie \u6d88\u5931\n       \/\/\u60f3\u957f\u65f6\u95f4\u5b58\u5728,\u8bbe\u7f6e Expires \u6216 Max-Age\n       \/\/expires\n       \/\/\u503c\u4e3a Date \u7c7b\u578b\n       \/\/ document.cookie=<code>username=alex;expires=${new Date(&#039;2100-1-01 00:00:00&#039;)}<\/code>;\n       \/\/max-age\n       \/\/\u503c\u4e3a\u6570\u5b57,\u8868\u793a\u5f53\u524d\u65f6\u95f4+\u591a\u5c11\u79d2\u540e\u8fc7\u671f,\u5355\u4f4d\u662f\u79d2\n       \/\/ document.cookie=&#039;username=alex;max-age=5&#039;;\n       \/\/ document.cookie=&#039;username=alex;max-age=${24*3600*30}`;\/\/30 \u5929\n       \/\/\u5982\u679c max-age \u7684\u503c\u662f 0 \u6216\u8d1f\u6570,\u5219 Cookie \u4f1a\u88ab\u5220\u9664\n       \/\/ document.cookie=&#039;username=alex;&#039;;\n       \/\/ document.cookie=&#039;username=alex;max-age=0&#039;;\n       \/\/ document.cookie=&#039;username=alex;max-age=-1&#039;;\n       \/\/3.Domain \u57df\n       \/\/Domain \u9650\u5b9a\u4e86\u8bbf\u95ee Cookie \u7684\u8303\u56f4\n       \/\/\u4f7f\u7528 JS \u53ea\u80fd\u8bfb\u5199\u5f53\u524d\u57df\u6216\u7236\u57df\u7684 Cookie,\u65e0\u6cd5\u8bfb\u5199\u5176\u4ed6\u57df\u7684 Cookie\n       document.cookie=&#039;username=alex;domain=www.imooc.com&#039;;\n       \/\/www.imooc.com m.imooc.com \u5f53\u524d\u57df\n       \/\/\u7236\u57df: .imooc.com\n       \/\/4.Path \u8def\u5f84\n       \/\/Path \u9650\u5b9a\u4e86\u8bbf\u95ee Cookie \u7684\u8303\u56f4(\u540c\u4e00\u57df\u540d\u4e0b)\n       \/\/\u4f7f\u7528 JS \u53ea\u80fd\u8bfb\u5199\u5f53\u524d\u8def\u5f84\u548c\u4e0a\u7ea7\u8def\u5f84\u7684 Cookie,\u65e0\u6cd5\u8bfb\u5199\u4e0b\u7ea7\u8def\u5f84\u7684 Cookie\n       \/\/document.cookie=&#039;username=alex;path=\/course\/list&#039;;\n       \/\/\u5f53 Name\u3001Domain\u3001Path \u8fd9 3 \u4e2a\u5b57\u6bb5\u90fd\u76f8\u540c\u7684\u65f6\u5019\uff0c\u624d\u662f\u540c\u4e00\u4e2a Cookie\n       \/\/5.HttpOnly\n       \/\/\u8bbe\u7f6e\u4e86 HttpOnly \u5c5e\u6027\u7684 Cookie \u4e0d\u80fd\u901a\u8fc7 JS \u53bb\u8bbf\u95ee\n       \/\/6.Secure \u5b89\u5168\u6807\u5fd7\n       \/\/Secure \u9650\u5b9a\u4e86\u53ea\u6709\u5728\u4f7f\u7528\u4e86 https \u800c\u4e0d\u662f http \u7684\u60c5\u51b5\u4e0b\u624d\u53ef\u4ee5\u53d1\u9001\u7ed9\u670d\u52a1\u7aef\n       \/\/Domain\u3001Path\u3001Secure \u90fd\u8981\u6ee1\u8db3\u6761\u4ef6\uff0c\u8fd8\u4e0d\u80fd\u8fc7\u671f\u7684 Cookie \u624d\u80fd\u968f\u7740\u8bf7\u6c42\u53d1\u9001\u5230\u670d\u52a1\u5668\u7aef<\/code><\/pre>\n<h2>localStorage<\/h2>\n<ul>\n<li>1.localStorage \u4e5f\u662f\u4e00\u79cd\u6d4f\u89c8\u5668\u5b58\u50a8\u6570\u636e\u7684\u65b9\u5f0f(\u672c\u5730\u5b58\u50a8)\uff0c\u5b83\u53ea\u662f\u5b58\u50a8\u5728\u672c\u5730\uff0c\u4e0d\u4f1a\u53d1\u9001\u5230\u670d\u52a1\u5668\u7aef<\/li>\n<li>\u5355\u4e2a\u57df\u540d\u4e0b\u7684 localStorage \u603b\u5927\u5c0f\u6709\u9650\u5236<\/li>\n<li>2.\u5728\u6d4f\u89c8\u5668\u4e2d\u64cd\u4f5c localStorage<\/li>\n<li>3.localStorage \u7684\u57fa\u672c\u7528\u6cd5<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code> \/\/setItem()\n        localStorage.setItem(&#039;username&#039;,&#039;ale&#039;);\n        localStorage.setItem(&#039;username&#039;,&#039;zs&#039;);\n        localStorage.setItem(&#039;age&#039;,18);\n        localStorage.setItem(&#039;sex&#039;,&#039;male&#039;);\n        \/\/length\n        console.log(localStorage.length);\n        console.log(localStorage);\n        \/\/getItem()\n        console.log(localStorage.getItem(&#039;username&#039;));\n        console.log(localStorage.getItem(&#039;age&#039;));\n        \/\/\u83b7\u53d6\u4e0d\u5b58\u5728\u7684\u8fd4\u56de null\n        console.log(localStorage.getItem(&#039;name&#039;));\n        \/\/removeItem()\n        localStorage.removeItem(&#039;username&#039;);\n        localStorage.removeItem(&#039;age&#039;);\n        \/\/\u5220\u9664\u4e0d\u5b58\u5728\u7684 key,\u4e0d\u62a5\u9519\n        localStorage.removeItem(&#039;name&#039;);\n        \/\/clear\n        localStorage.clear();\n        console.log(localStorage);<\/code><\/pre>\n<ul>\n<li>4.\u4f7f\u7528 localStorage \u5b9e\u73b0\u81ea\u52a8\u586b\u5145<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>const loginForm=document.getElementById(&#039;login&#039;);\n        const btn=document.getElementById(&#039;btn&#039;);\n        const username=localStorage.getItem(&#039;username&#039;);\n        if (username){\n            loginForm.username.value=username;\n        }\n        btn.addEventListener(&#039;click&#039;,e=&gt;{\n            e.preventDefault();\n            \/\/\u6570\u636e\u9a8c\u8bc1\n            \/\/console.log(loginForm.username.value);\n            localStorage.setItem(&#039;username&#039;,loginForm.username.value);\n            loginForm.submit();\n        },false);<\/code><\/pre>\n<h2>localStorage \u7684\u6ce8\u610f\u4e8b\u9879<\/h2>\n<p>![](<a href=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/01\/2022012321145850.png\" rel=\"box\" class=\"fancybox\">http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/01\/2022012321145850.png<\/a>)<\/p>\n<ul>\n<li>1.localStorage \u7684\u5b58\u50a8\u671f\u9650<br \/>\nlocalStorage \u662f\u6301\u4e45\u5316\u7684\u672c\u5730\u5b58\u50a8\uff0c\u9664\u975e\u624b\u52a8\u6e05\u9664\uff08\u6bd4\u5982\u901a\u8fc7 js \u5220\u9664\uff0c\u6216\u8005\u6e05\u9664\u6d4f\u89c8\u5668\u7f13\u5b58)\uff0c\u5426\u5219\u6570\u636e\u662f\u6c38\u8fdc\u4e0d\u4f1a\u8fc7\u671f\u7684<\/li>\n<li>sessionStorage<br \/>\n\u5f53\u4f1a\u8bdd\u7ed3\u675f(\u6bd4\u5982\u5173\u95ed\u6d4f\u89c8\u5668)\u7684\u65f6\u5019,sessionStorage \u4e2d\u7684\u6570\u636e\u4f1a\u88ab\u6e05\u7a7a<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>sessionStorage.setItem(&#039;username&#039;,&#039;sf&#039;);\n        sessionStorage.getItem(&#039;username&#039;);\n        sessionStorage.removeItem(&#039;username&#039;);\n        sessionStorage.clear();<\/code><\/pre>\n<ul>\n<li>2.localStorage \u952e\u548c\u503c\u7684\u7c7b\u578b<br \/>\nlocalStorage \u5b58\u50a8\u7684\u952e\u548c\u503c\u53ea\u80fd\u662f\u5b57\u7b26\u4e32\u7c7b\u578b<br \/>\n\u4e0d\u662f\u5b57\u7b26\u4e32\u7c7b\u578b,\u4e5f\u4f1a\u5148\u8f6c\u5316\u6210\u5b57\u7b26\u4e32\u7c7b\u578b\u518d\u5b58\u8fdb\u53bb<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>localStorage.setItem({},18);\n        console.log(typeof localStorage.getItem(&#039;[object Object]&#039;),\n        localStorage.getItem(&#039;[object Object]&#039;));\/\/string 18\n        console.log({},toString());<\/code><\/pre>\n<ul>\n<li>\n<p>3.\u4e0d\u540c\u57df\u540d\u4e0b\u4e0d\u80fd\u5171\u7528 localStorage \u7684<\/p>\n<\/li>\n<li>\n<p>4.localStorage \u7684\u517c\u5bb9\u6027<br \/>\nIE7 \u53ca\u4ee5\u4e0b\u7248\u672c\u4e0d\u652f\u6301 localStorage,IE8 \u5f00\u59cb\u652f\u6301<br \/>\ncaniuse.com<\/p>\n<\/li>\n<\/ul>\n<h1>Ajax&amp;Fetch \u4e0e\u8de8\u57df\u8bf7\u6c42<\/h1>\n<h2>\u521d\u8bc6 Ajax<\/h2>\n<pre class=\"prettyprint linenums\" ><code>         \/\/1.Ajax \u662f\u4ec0\u4e48\n        \/\/Ajax \u662f Asynchronous JavaScript and XML(\u5f02\u6b65 JavaScript \u548c XML)\u7684\u7b80\u5199\n        \/\/Ajax \u4e2d\u7684\u5f02\u6b65:\u53ef\u4ee5\u5f02\u6b65\u5730\u5411\u670d\u52a1\u5668\u53d1\u9001\u8bf7\u6c42\uff0c\u5728\u7b49\u5f85\u54cd\u5e94\u7684\u8fc7\u7a0b\u4e2d\uff0c\n        \/\/\u4e0d\u4f1a\u963b\u585e\u5f53\u524d\u9875\u9762\uff0c\u6d4f\u89c8\u5668\u53ef\u4ee5\u505a\u81ea\u5df1\u7684\u4e8b\u60c5\u3002\u76f4\u5230\u6210\u529f\u83b7\u53d6\u54cd\u5e94\u540e\uff0c\n        \/\/\u6d4f\u89c8\u5668\u624d\u5f00\u59cb\u5904\u7406\u54cd\u5e94\u6570\u636e\n        \/\/XML (\u53ef\u6269\u5c55\u6807\u8bb0\u8bed\u8a00) \u662f\u524d\u540e\u7aef\u6570\u636e\u901a\u4fe1\u65f6\u4f20\u8f93\u6570\u636e\u7684\u4e00\u79cd\u683c\u5f0f\n        \/\/XML \u5f88\u5c11\u7528\u4e86,\u73b0\u5728\u6bd4\u8f83\u5e38\u7528\u662f JSON\n        \/\/Ajax \u5176\u5b9e\u5c31\u662f\u6d4f\u89c8\u5668\u4e0e\u670d\u52a1\u5668\u4e4b\u95f4\u7684\u4e00\u79cd\u5f02\u6b65\u901a\u4fe1\u65b9\u5f0f\n        \/\/\u4f7f\u7528 Ajax \u53ef\u4ee5\u5728\u4e0d\u91cd\u65b0\u52a0\u8f7d\u6574\u4e2a\u9875\u9762\u7684\u60c5\u51b5\u4e0b\uff0c\u5bf9\u9875\u9762\u7684\u67d0\u90e8\u5206\u8fdb\u884c\u66f4\u65b0\n        \/\/\u6155\u8bfe\u7f51\u6ce8\u518c\u68c0\u6d4b  \u641c\u7d22\u63d0\u793a\n        \/\/2.\u642d\u5efa Ajax \u5f00\u53d1\u73af\u5883\n        \/\/Ajax \u9700\u8981\u670d\u52a1\u5668\u73af\u5883,\u975e\u670d\u52a1\u5668\u73af\u5883\u4e0b,\u5f88\u591a\u6d4f\u89c8\u5668\u65e0\u6cd5\u6b63\u5e38\u4f7f\u7528 Ajax<\/code><\/pre>\n<h2>Ajax \u7684\u57fa\u672c\u7528\u6cd5<\/h2>\n<ul>\n<li>4:\u5b8c\u6210\u3002\u5df2\u7ecf\u63a5\u6536\u5230\u5168\u90e8\u54cd\u5e94\u6570\u636e\uff0c\u800c\u4e14\u5df2\u7ecf\u53ef\u4ee5\u5728\u6d4f\u89c8\u5668\u4e2d\u4f7f\u7528\u4e86<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>  \/\/1.XMLHttpRequest\n       \/\/Ajax \u60f3\u8981\u5b9e\u73b0\u6d4f\u89c8\u5668\u4e0e\u670d\u52a1\u5668\u4e4b\u95f4\u7684\u5f02\u6b65\u901a\u4fe1\uff0c\u9700\u8981\u4f9d\u9760 XMLHttpRequest\uff0c\u5b83\u662f\u4e00\u4e2a\u6784\u9020\u51fd\u6570\n       \/\/\u4e0d\u8bba\u662f XMLHttpRequest\uff0c\u8fd8\u662f Ajax\uff0c\u90fd\u6ca1\u6709\u548c\u5177\u4f53\u7684\u67d0\u79cd\u6570\u636e\u683c\u5f0f\u7ed1\u5b9a\n       \/\/2.Ajax \u7684\u4f7f\u7528\u6b65\u9aa4\n       \/\/2.1 \u521b\u5efa xhr \u5bf9\u8c61\n       const xhr=new XMLHttpRequest();\n       \/\/2.2 \u76d1\u542c\u4e8b\u4ef6,\u5904\u7406\u54cd\u5e94\n       \/\/\u5f53\u83b7\u53d6\u5230\u54cd\u5e94\u540e\uff0c\u4f1a\u89e6\u53d1 xhr \u5bf9\u8c61\u7684 readystatechange \u4e8b\u4ef6\uff0c\u53ef\u4ee5\u5728\u8be5\u4e8b\u4ef6\u4e2d\u5bf9\u54cd\u5e94\u8fdb\u884c\u5904\u7406\n       xhr.onreadystatechange=()=&gt;{\n           if (xhr.readyState!==4)return;\n           \/\/HTTP CODE\n           \/\/\u83b7\u53d6\u5230\u54cd\u5e94\u540e,\u54cd\u5e94\u7684\u5185\u5bb9\u4f1a\u81ea\u52a8\u586b\u5145 xhr \u5bf9\u8c61\u7684\u5c5e\u6027\n           \/\/xhr.statusText:HTTP \u72b6\u6001\u8bf4\u660e OK Not Found\n           if ((xhr.status&gt;=200)&amp;(xhr.status&lt;300)||(xhr.status===304)){\n               \/\/ console.log(&#039;\u6b63\u5e38\u4f7f\u7528\u54cd\u5e94\u6570\u636e&#039;);\n               console.log(xhr.responseText);\n           }\n       };\n       \/\/\u6ce8\u610f:\n       \/\/readystatechange \u4e8b\u4ef6\u4e5f\u53ef\u4ee5\u914d\u5408 addEventListener \u4f7f\u7528\uff0c\n       \/\/ \u4e0d\u8fc7\u8981\u6ce8\u610f\uff0cIE6~8 \u4e0d\u652f\u6301 addEventListener\n       \/\/\u4e3a\u4e86\u517c\u5bb9\u6027\uff0creadystatechange \u4e2d\u4e0d\u4f7f\u7528 this\uff0c\u800c\u662f\u76f4\u63a5\u4f7f\u7528 xhr\n       \/\/\u7531\u4e8e\u517c\u5bb9\u6027\u95ee\u9898,\u6700\u597d\u653e\u5728 open \u4e4b\u524d\n       \/\/readystatechange \u4e8b\u4ef6\u76d1\u542c readyState \u8fd9\u4e2a\u72b6\u6001\u7684\u53d8\u5316\n       \/\/ \u5b83\u7684\u503c\u4ece 0\uff5e4\uff0c\u4e00\u5171 5 \u4e2a\u72b6\u6001\n       \/\/0:\u672a\u521d\u59cb\u5316\u3002\u5c1a\u672a\u8c03\u7528 open()\n       \/\/ 1:\u542f\u52a8\u3002\u5df2\u7ecf\u8c03\u7528 open)\uff0c\u4f46\u5c1a\u672a\u8c03\u7528 send()\n       \/\/ 2:\u53d1\u9001\u3002\u5df2\u7ecf\u8c03\u7528 send()\uff0c\u4f46\u5c1a\u672a\u63a5\u6536\u5230\u54cd\u5e94\n       \/\/ 3:\u63a5\u6536\u3002\u5df2\u7ecf\u63a5\u6536\u5230\u90e8\u5206\u54cd\u5e94\u6570\u636e\n       \/\/\/4:\u5b8c\u6210\u3002\u5df2\u7ecf\u63a5\u6536\u5230\u5168\u90e8\u54cd\u5e94\u6570\u636e\uff0c\u800c\u4e14\u5df2\u7ecf\u53ef\u4ee5\u5728\u6d4f\u89c8\u5668\u4e2d\u4f7f\u7528\u4e86\n       \/\/2.3 \u51c6\u5907\u53d1\u9001\u8bf7\u6c42\n       \/\/ xhr.open(&#039;HTTP \u65b9\u6cd5 GET,POST,PUT,DELETE&#039;,\n       \/\/     &#039;\u5730\u5740 URLhttps:\/\/www.imooc.com\/api\/http\/search\/suggest?&#039; +\n       \/\/     &#039;words=js .\/index.html .\/index.xml .\/index.txt&#039;,true);\/\/\u5f02\u6b65\n       \/\/\u8c03\u7528 open \u5e76\u4e0d\u4f1a\u771f\u6b63\u53d1\u9001\u8bf7\u6c42,\u800c\u53ea\u662f\u505a\u597d\u53d1\u9001\u8bf7\u6c42\u524d\u7684\u51c6\u5907\u5de5\u4f5c\n       \/\/2.4 \u53d1\u9001\u8bf7\u6c42\n       \/\/\u8c03\u7528 send()\u6b63\u5f0f\u53d1\u9001\u8bf7\u6c42\n       \/\/xhr.send(null);\n<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code>\/\/3.\u4f7f\u7528 Ajax \u5b8c\u6210\u524d\u540e\u7aef\u901a\u4fe1\n       const url=&#039;https:\/\/www.imooc.com\/api\/http\/search\/suggest?words=js&#039;;\n       const xhr=new XMLHttpRequest();\n       xhr.onreadystatechange=()=&gt;{\n           if (xhr.readyState!==4)return;\/\/\u8fd8\u6ca1\u51c6\u5907\u597d\n           if ((xhr.status&gt;=200&amp;&amp;xhr.status&lt;300)||xhr.status===304){\/\/\u6210\u529f||\u53ef\u4ee5\u4f7f\u7528\u7f13\u5b58\n               console.log(xhr.responseText);\n               console.log(typeof xhr.responseText);\n           }\n       };\n       xhr.open(&#039;GET&#039;,url,true);\n       xhr.send(null);<\/code><\/pre>\n<h2>GET \u8bf7\u6c42<\/h2>\n<ul>\n<li>\n<p>1.\u643a\u5e26\u6570\u636e<\/p>\n<ul>\n<li>GET \u8bf7\u6c42\u4e0d\u80fd\u901a\u8fc7\u8bf7\u6c42\u4f53\u643a\u5e26\u6570\u636e\uff0c\u4f46\u53ef\u4ee5\u901a\u8fc7\u8bf7\u6c42\u5934\u643a\u5e26<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>2.\u6570\u636e\u7f16\u7801<\/p>\n<ul>\n<li>\u5982\u679c\u643a\u5e26\u7684\u6570\u636e\u662f\u975e\u82f1\u6587\u5b57\u6bcd\u7684\u8bdd\uff0c\u6bd4\u5982\u8bf4\u6c49\u5b57\uff0c\u5c31\u9700\u8981\u7f16\u7801\u4e4b\u540e\u518d\u53d1\u9001\u7ed9\u540e\u7aef\uff0c\u4e0d\u7136\u4f1a\u9020\u6210\u4e71\u7801\u95ee\u9898<\/li>\n<li>\u53ef\u4ee5\u4f7f\u7528 encodeURIComponent() \u7f16\u7801<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>const url = `https:\/\/www.imooc.com\/api\/http\/search\/suggest?words=${encodeURIComponent(\n        &#039;\u524d\u7aef&#039;\n      )}`;\n\u7c7b\u4f3c\u4e0a\u9762<\/code><\/pre>\n<h2>POST \u8bf7\u6c42<\/h2>\n<pre class=\"prettyprint linenums\" ><code>\/\/ 1.\u643a\u5e26\u6570\u636e\n      \/\/ POST \u8bf7\u6c42\u4e3b\u8981\u901a\u8fc7\u8bf7\u6c42\u4f53\u643a\u5e26\u6570\u636e\uff0c\u540c\u65f6\u4e5f\u53ef\u4ee5\u901a\u8fc7\u8bf7\u6c42\u5934\u643a\u5e26\n      const url = &#039;https:\/\/www.imooc.com\/api\/http\/search\/suggest?words=js&#039;;\n \u7c7b\u4f3c get\n      \/\/ \u5982\u679c\u60f3\u53d1\u9001\u6570\u636e\uff0c\u76f4\u63a5\u5199\u5728 send() \u7684\u53c2\u6570\u4f4d\u7f6e\uff0c\u4e00\u822c\u662f\u5b57\u7b26\u4e32\n      \/\/ xhr.send(&#039;username=alex&amp;age=18&#039;);\n      \/\/ \u4e0d\u80fd\u76f4\u63a5\u4f20\u9012\u5bf9\u8c61\uff0c\u9700\u8981\u5148\u5c06\u5bf9\u8c61\u8f6c\u6362\u6210\u5b57\u7b26\u4e32\u7684\u5f62\u5f0f\n      xhr.send({\n        username: &#039;alex&#039;,\n        age: 18\n      });\/\/ \u8bf7\u6c42\u8f7d\u8377: [object Object]\n      \/\/ 2.\u6570\u636e\u7f16\u7801\n      xhr.send(<code>username=${encodeURIComponent(&#039;\u5f20\u4e09&#039;)}&amp;age=18<\/code>);<\/code><\/pre>\n<h2>\u521d\u8bc6 JSON<\/h2>\n<pre class=\"prettyprint linenums\" ><code> \/\/ 1.JSON \u662f\u4ec0\u4e48\n      \/\/ Ajax \u53d1\u9001\u548c\u63a5\u6536\u6570\u636e\u7684\u4e00\u79cd\u683c\u5f0f\n      \/\/ XML\n      \/\/ username=alex&amp;age=18\n      \/\/ JSON\n      \/\/ {&quot;code&quot;:200,&quot;data&quot;:[{&quot;word&quot;:&quot;jsp&quot;},{&quot;word&quot;:&quot;js&quot;},{&quot;word&quot;:&quot;json&quot;},{&quot;word&quot;:&quot;js \\u5165\\u95e8&quot;},{&quot;word&quot;:&quot;jstl&quot;}]}\n      \/\/ HTML\/XML\n      \/\/ JSON \u5168\u79f0\u662f JavaScript Object Notation\n      \/\/ 2.\u4e3a\u4ec0\u4e48\u9700\u8981 JSON\n      \/\/  JSON \u6709 3 \u79cd\u5f62\u5f0f\uff0c\u6bcf\u79cd\u5f62\u5f0f\u7684\u5199\u6cd5\u90fd\u548c JS \u4e2d\u7684\u6570\u636e\u7c7b\u578b\u5f88\u50cf\uff0c\u53ef\u4ee5\u5f88\u8f7b\u677e\u7684\u548c JS \u4e2d\u7684\u6570\u636e\u7c7b\u578b\u4e92\u76f8\u8f6c\u6362\n      \/\/ JS-&gt;JSON-&gt;PHP\/Java\n      \/\/ PHP\/Java-&gt;JSON-&gt;JS<\/code><\/pre>\n<h2>JSON \u7684 3 \u79cd\u5f62\u5f0f<\/h2>\n<ul>\n<li>1.\u7b80\u7b54\u503c\u5f62\u5f0f<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>\u5982\u4e0a\n xhr.open(&#039;GET&#039;, &#039;.\/plain.json&#039;, true);\n xhr.send(null);\n plain.json:\n &quot;str&quot;  5<\/code><\/pre>\n<ul>\n<li>\n<p>2.\u5bf9\u8c61\u5f62\u5f0f<\/p>\n<pre class=\"prettyprint linenums\" ><code>xhr.open(&#039;GET&#039;, &#039;.\/obj.json&#039;, true);\n{\n&quot;name&quot;: &quot;\u5f20\u4e09&quot;,\n&quot;age&quot;: 18,\n&quot;hobby&quot;: [&quot;\u8db3\u7403&quot;,&quot;\u4e52\u4e53\u7403&quot;],\n&quot;family&quot;: &quot;\u5f20\u8001\u5927&quot;,\n&quot;mother&quot;: &quot;\u674e\u56db&quot;\n}<\/code><\/pre>\n<\/li>\n<li>\n<p>3.\u6570\u7ec4\u5f62\u5f0f<\/p>\n<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>xhr.open(&#039;GET&#039;, &#039;.\/arr.json&#039;, true);\n[\n  {\n    &quot;id&quot;: 1,\n    &quot;username&quot;: &quot;\u5f20\u4e09&quot;,\n    &quot;comment&quot;: &quot;666&quot;\n  },\n  {\n    &quot;id&quot;: 2,\n    &quot;username&quot;: &quot;\u674e\u56db&quot;,\n    &quot;comment&quot;: &quot;999&quot;\n  }\n]<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code>\/\/ 1.\u7b80\u5355\u503c\u5f62\u5f0f\n      \/\/ .json\n      \/\/ JSON \u7684\u7b80\u5355\u503c\u5f62\u5f0f\u5c31\u5bf9\u5e94\u7740 JS \u4e2d\u7684\u57fa\u7840\u6570\u636e\u7c7b\u578b\n      \/\/ \u6570\u5b57\u3001\u5b57\u7b26\u4e32\u3001\u5e03\u5c14\u503c\u3001null\n      \/\/ \u6ce8\u610f\u4e8b\u9879\n      \/\/ \u2460 JSON \u4e2d\u6ca1\u6709 undefined \u503c\n      \/\/ \u2461 JSON \u4e2d\u7684\u5b57\u7b26\u4e32\u5fc5\u987b\u4f7f\u7528\u53cc\u5f15\u53f7\n      \/\/ \u2462 JSON \u4e2d\u662f\u4e0d\u80fd\u6ce8\u91ca\u7684\n      \/\/ 2.\u5bf9\u8c61\u5f62\u5f0f\n      \/\/ JSON \u7684\u5bf9\u8c61\u5f62\u5f0f\u5c31\u5bf9\u5e94\u7740 JS \u4e2d\u7684\u5bf9\u8c61\n      \/\/ \u6ce8\u610f\u4e8b\u9879\n      \/\/ JSON \u4e2d\u5bf9\u8c61\u7684\u5c5e\u6027\u540d\u5fc5\u987b\u7528\u53cc\u5f15\u53f7\uff0c\u5c5e\u6027\u503c\u5982\u679c\u662f\u5b57\u7b26\u4e32\u4e5f\u5fc5\u987b\u7528\u53cc\u5f15\u53f7\n      \/\/ JSON \u4e2d\u53ea\u8981\u6d89\u53ca\u5230\u5b57\u7b26\u4e32\uff0c\u5c31\u5fc5\u987b\u4f7f\u7528\u53cc\u5f15\u53f7\n      \/\/ \u4e0d\u652f\u6301 undefined\n      \/\/ 3.\u6570\u7ec4\u5f62\u5f0f\n      \/\/ JSON \u7684\u6570\u7ec4\u5f62\u5f0f\u5c31\u5bf9\u5e94\u7740 JS \u4e2d\u7684\u6570\u7ec4\n      \/\/ [1, &quot;hi&quot;, null]\n      \/\/ \u6ce8\u610f\u4e8b\u9879\n      \/\/ \u6570\u7ec4\u4e2d\u7684\u5b57\u7b26\u4e32\u5fc5\u987b\u7528\u53cc\u5f15\u53f7\n      \/\/ JSON \u4e2d\u53ea\u8981\u6d89\u53ca\u5230\u5b57\u7b26\u4e32\uff0c\u5c31\u5fc5\u987b\u4f7f\u7528\u53cc\u5f15\u53f7\n      \/\/ \u4e0d\u652f\u6301 undefined<\/code><\/pre>\n<h2>JSON \u7684\u5e38\u7528\u65b9\u6cd5<\/h2>\n<pre class=\"prettyprint linenums\" ><code> &lt;script type=&quot;module&quot;&gt;\n        \/\/1.JSON.parse()\u53ef\u4ee5\u5c06 JSON \u683c\u5f0f\u7684\u5b57\u7b26\u4e32\u89e3\u6790\u6210 JS \u4e2d\u7684\u5bf9\u5e94\u503c\n        \/\/\u4e00\u5b9a\u8981\u662f\u5408\u6cd5\u7684 JSON \u5b57\u7b26\u4e32,\u5426\u5219\u4f1a\u62a5\u9519\n        \/\/ const xhr=new XMLHttpRequest();\n        \/\/ xhr.onreadystatechange=()=&gt;{\n        \/\/     if (xhr.readyState!==4)return;\n        \/\/     if ((xhr.status&gt;=200&amp;&amp;xhr.status&lt;300)||xhr.status===304){\n        \/\/         console.log(xhr.responseText);\n        \/\/         console.log(typeof xhr.responseText);\n        \/\/\n        \/\/         console.log(JSON.parse(xhr.responseText));\n        \/\/         console.log(JSON.parse(xhr.responseText).data);\n        \/\/     }\n        \/\/ };\n        \/\/ xhr.open(&#039;GET&#039;, &#039;.\/arr.json&#039;,true);\n        \/\/ xhr.send(null);\n        \/\/2.JSON.stringify()\u53ef\u4ee5\u5c06 JS \u7684\u57fa\u672c\u6570\u636e\u7c7b\u578b,\n        \/\/ \u5bf9\u8c61\u6216\u8005\u6570\u7ec4\u8f6c\u6362\u6210 JSON \u683c\u5f0f\u7684\u5b57\u7b26\u4e32\n        \/\/ const xhr=new XMLHttpRequest();\n        \/\/ xhr.open(&#039;POST&#039;,&#039;https:\/\/www.imooc.com\/api\/http\/search\/suggest?words=js&#039;,true);\n        \/\/ xhr.send(\n        \/\/     JSON.stringify({\n        \/\/         username:&#039;alex&#039;,\n        \/\/         age:18\n        \/\/     })\n        \/\/ );\/\/{&quot;username&quot;:&quot;alex&quot;,&quot;age&quot;:18}\n        \/\/ 3.\u4f7f\u7528 JSON.parse() \u548c JSON.stringify() \u5c01\u88c5 localStorage\n        import {get,set,remove,clear} from &#039;.\/storage.js&#039;;\n        set(&#039;username&#039;,&#039;al&#039;);\n        console.log(get(&#039;username&#039;));\n        set(&#039;zs&#039;, {\n            name: &#039;\u5f20\u4e09&#039;,\n            age: 18\n        });\n        console.log(get(&#039;zs&#039;));\n        \/\/ remove(&#039;username&#039;);\n        \/\/ clear();<\/code><\/pre>\n<h2>\u521d\u8bc6\u8de8\u57df<\/h2>\n<pre class=\"prettyprint linenums\" ><code> \/\/1.\u8de8\u57df\u662f\u4ec0\u4e48\n    \/\/\u540c\u57df,\u4e0d\u662f\u8de8\u57df\n    const url = &#039;.\/index.html&#039;;\n    \/\/\u4e0d\u540c\u57df,\u8de8\u57df,\u88ab\u6d4f\u89c8\u5668\u963b\u6b62\n    const xhr = new XMLHttpRequest();\n    \/\/\u5411\u4e00\u4e2a\u57df\u53d1\u9001\u8bf7\u6c42,\u5982\u679c\u8981\u8bf7\u6c42\u7684\u57df\u548c\u5f53\u524d\u57df\u662f\u4e0d\u540c\u57df,\u5c31\u53eb\u8de8\u57df\n    \/\/\u4e0d\u540c\u57df\u4e4b\u95f4\u7684\u8bf7\u6c42,\u5c31\u662f\u8de8\u57df\u8bf7\u6c42\n    xhr.onreadystatechange = () =&gt; {\n        if (xhr.readyState !== 4) return;\n        if ((xhr.status &gt;= 200 &amp;&amp; xhr.status &lt; 300) || xhr.status === 304) {\n            console.log(xhr.responseText);\n        }\n    };\n    xhr.open(&#039;GET&#039;, url, true);\n    xhr.send(null);\n    \/\/2.\u4ec0\u4e48\u662f\u4e0d\u540c\u57df,\u4ec0\u4e48\u662f\u540c\u57df\n    \/\/https(\u534f\u8bae):\/\/www.imooc.com(\u57df\u540d):443(\u7aef\u53e3\u53f7)\/course\/list(\u8def\u5f84)\n    \/\/\u534f\u8bae,\u57df\u540d,\u7aef\u53e3\u53f7,\u4efb\u4f55\u4e00\u4e2a\u4e0d\u4e00\u6837,\u5c31\u662f\u4e0d\u540c\u57df\n    \/\/\u4e0e\u8def\u5f84\u65e0\u5173,\u8def\u5f84\u4e00\u4e0d\u4e00\u6837\u65e0\u6240\u8c13\n    \/\/ \u4e0d\u540c\u57df\n    \/\/ https:\/\/www.imooc.com:443\/course\/list\n    \/\/ http:\/\/www.imooc.com:80\/course\/list\n    \/\/ http:\/\/www.imooc.com:80\/course\/list\n    \/\/ http:\/\/m.imooc.com:80\/course\/list\n    \/\/ http:\/\/imooc.com:80\/course\/list\n    \/\/ \u540c\u57df\n    \/\/ http:\/\/imooc.com:80\n    \/\/ http:\/\/imooc.com:80\/course\/list\n    \/\/3.\u8de8\u57df\u8bf7\u6c42\u4e3a\u4ec0\u4e48\u4f1a\u88ab\u963b\u6b62\n    \/\/\u963b\u6b62\u8de8\u57df\u8bf7\u6c42,\u5176\u5b9e\u662f\u6d4f\u89c8\u5668\u672c\u8eab\u7684\u4e00\u79cd\u5b89\u5168\u7b56\u7565--\u540c\u6e90\u7b56\u7565\n    \/\/\u5176\u4ed6\u5ba2\u6237\u7aef\u6216\u8005\u670d\u52a1\u5668\u90fd\u4e0d\u5b58\u5728\u8de8\u57df\u88ab\u963b\u6b62\u7684\u95ee\u9898\n    \/\/4.\u8de8\u57df\u89e3\u51b3\u65b9\u6848\n    \/\/\u2460CORS \u8de8\u57df\u8d44\u6e90\u5171\u4eab\n    \/\/\u2461JSONP script\n    \/\/\u4f18\u5148\u4f7f\u7528 CORS \u8de8\u57df\u8d44\u6e90\u5171\u4eab,\u5982\u679c\u6d4f\u89c8\u5668\u4e0d\u652f\u6301 CORS \u7684\u8bdd,\u518d\u4f7f\u7528 JSONP\n<\/code><\/pre>\n<h2>CORS \u8de8\u57df\u8d44\u6e90\u5171\u4eab<\/h2>\n<pre class=\"prettyprint linenums\" ><code> \/\/1.CORS \u662f\u4ec0\u4e48\n    const url = &#039;https:\/\/www.imooc.com\/api\/http\/search\/suggest?words=js&#039;;\n    const xhr = new XMLHttpRequest();\n    xhr.onreadystatechange = () =&gt; {\n        if (xhr.readyState !== 4) return;\n        if ((xhr.status &gt;= 200 &amp;&amp; xhr.status &lt; 300) || xhr.status === 304) {\n            console.log(xhr.responseText);\n        }\n    };\n    xhr.open(&#039;GET&#039;, url, true);\n    xhr.send(null);\n    \/\/Access-Control-Allow-Origin: *\n    \/\/\u8868\u660e\u5141\u8bb8\u6240\u6709\u7684\u57df\u540d\u6765\u8de8\u57df\u8bf7\u6c42\u5b83,*\u662f\u901a\u914d\u7b26,\u6ca1\u6709\u4efb\u4f55\u9650\u5236\n    \/\/\u53ea\u5141\u8bb8\u6307\u5b9a\u57df\u540d\u7684\u8de8\u57df\u8bf7\u6c42\n    \/\/Access-Control-Allow-Origin:http:\/\/127.0.0.1:5500\n    \/\/2.\u4f7f\u7528 CORS \u8de8\u57df\u7684\u8fc7\u7a0b\n    \/\/\u2460\u6d4f\u89c8\u5668\u53d1\u9001\u8de8\u57df\u8bf7\u6c42\n    \/\/\u2461\u540e\u7aef\u5728\u54cd\u5e94\u5934\u4e2d\u6dfb\u52a0 Access-Control-Allow-Origin \u5934\u4fe1\u606f\n    \/\/\u2462\u6d4f\u89c8\u5668\u63a5\u6536\u5230\u54cd\u5e94\n    \/\/\u2463\u5982\u679c\u662f\u540c\u57df\u4e0b\u7684\u8bf7\u6c42,\u6d4f\u89c8\u5668\u4e0d\u4f1a\u989d\u5916\u505a\u4ec0\u4e48,\u8fd9\u6b21\u524d\u540e\u7aef\u901a\u4fe1\u5c31\u5706\u6ee1\u5b8c\u6210\u4e86\n    \/\/\u2464\u5982\u679c\u662f\u8de8\u57df\u8bf7\u6c42,\u6d4f\u89c8\u5668\u4f1a\u4ece\u54cd\u5e94\u5934\u4e2d\u67e5\u627e\u662f\u5426\u5141\u8bb8\u8de8\u57df\u8bbf\u95ee\n    \/\/\u2465\u5982\u679c\u5141\u8bb8\u8de8\u57df,\u901a\u4fe1\u5706\u6ee1\u5b8c\u6210\n    \/\/\u2466\u5982\u679c\u6ca1\u627e\u5230\u6216\u4e0d\u5305\u542b\u60f3\u8981\u8de8\u57df\u7684\u57df\u540d,\u5c31\u4e22\u5f03\u54cd\u5e94\u7ed3\u679c\n    \/\/3.CORS \u7684\u517c\u5bb9\u6027\n    \/\/IE10 \u53ca\u4ee5\u4e0a\u7248\u672c\u7684\u6d4f\u89c8\u5668\u53ef\u4ee5\u6b63\u5e38\u4f7f\u7528 CORS<\/code><\/pre>\n<h2>JSONP<\/h2>\n<pre class=\"prettyprint linenums\" ><code>&lt;script&gt;\n    \/\/1.JSONP \u7684\u539f\u7406\n    \/\/script \u6807\u7b7e\u8de8\u57df\u4e0d\u4f1a\u88ab\u6d4f\u89c8\u5668\u963b\u6b62\n    \/\/JSONP \u4e3b\u8981\u5c31\u662f\u5229\u7528 script \u6807\u7b7e,\u52a0\u8f7d\u8de8\u57df\u6587\u4ef6\n    \/\/2.\u4f7f\u7528 JSONP \u5b9e\u73b0\u8de8\u57df\n    \/\/\u670d\u52a1\u5668\u7aef\u51c6\u5907\u597d JSONP \u7aef\u53e3\n    \/\/https:\/\/www.imooc.com\/api\/http\/jsonp?callback=handleResponse\n    \/\/\u624b\u52a8\u52a0\u8f7d JSONP \u63a5\u53e3\u6216\u52a8\u6001\u52a0\u8f7d JSONP \u63a5\u53e3\n    const script=document.createElement(&#039;script&#039;);\n    script.src=&#039;https:\/\/www.imooc.com\/api\/http\/jsonp?callback=handleResponse&#039;\n    document.body.appendChild(script);\n    \/\/\u58f0\u660e\u51fd\u6570\n    const handleResponse=data=&gt;{\n        console.log(data);\n    };\n&lt;\/script&gt;\n&lt;!--&lt;script src=&quot;https:\/\/www.imooc.com\/api\/http\/jsonp?callback=handleResponse&quot;&gt;--&gt;\n<\/code><\/pre>\n<h2>XHR \u7684\u5c5e\u6027<\/h2>\n<p>\u4e3b\u8981\u638c\u63e1<\/p>\n<ul>\n<li><strong>1.responseType \u548c response \u5c5e\u6027<\/strong><\/li>\n<li><strong>2.timeout \u5c5e\u6027<\/strong><\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>  \/\/ 1.responseType \u548c response \u5c5e\u6027\n    const url = &#039;https:\/\/www.imooc.com\/api\/http\/search\/suggest?words=js&#039;;\n    const xhr = new XMLHttpRequest();\n    \/\/ xhr.onreadystatechange = () =&gt; {\n    \/\/   if (xhr.readyState !== 4) return;\n    \/\/   if ((xhr.status &gt;= 200 &amp;&amp; xhr.status &lt; 300) || xhr.status === 304) {\n    \/\/     \/\/ \u6587\u672c\u5f62\u5f0f\u7684\u54cd\u5e94\u5185\u5bb9\n    \/\/     \/\/ responseText \u53ea\u80fd\u5728\u6ca1\u6709\u8bbe\u7f6e responseType \u6216\u8005 responseType = &#039;&#039; \u6216 &#039;text&#039; \u7684\u65f6\u5019\u624d\u80fd\u4f7f\u7528\n    \/\/     \/\/ console.log(&#039;responseText:&#039;, xhr.responseText);\n    \/\/\n    \/\/     \/\/ \u53ef\u4ee5\u7528\u6765\u66ff\u4ee3 responseText\n    \/\/     console.log(&#039;response:&#039;, xhr.response);\n    \/\/     \/\/ console.log(JSON.parse(xhr.responseText));\n    \/\/   }\n    \/\/ };\n    \/\/ xhr.open(&#039;GET&#039;, url, true);\n    \/\/\n    \/\/ \/\/ xhr.responseType = &#039;&#039;;\n    \/\/ \/\/ xhr.responseType = &#039;text&#039;;\n    \/\/ xhr.responseType = &#039;json&#039;;\n    \/\/ xhr.send(null);\n    \/\/2.timeout \u5c5e\u6027\n    \/\/\u8bbe\u7f6e\u8bf7\u6c42\u7684\u8d85\u65f6\u65f6\u95f4(\u5355\u4f4d ms)\n    \/\/ xhr.onreadystatechange = () =&gt; {\n    \/\/     if (xhr.readyState !== 4) return;\n    \/\/     if ((xhr.status &gt;= 200 &amp;&amp; xhr.status &lt; 300) || xhr.status === 304) {\n    \/\/         console.log(xhr.response);\n    \/\/     }\n    \/\/ };\n    \/\/ xhr.open(&#039;GET&#039;, url, true);\n    \/\/ xhr.timeout = 10000;\n    \/\/ xhr.send(null);\n    \/\/3.withCredentials \u5c5e\u6027\n    \/\/\u6307\u5b9a\u4f7f\u7528 Ajax \u53d1\u9001\u8bf7\u6c42\u65f6\u662f\u5426\u643a\u5e26 Cookie\n    \/\/\u4f7f\u7528 Ajax \u53d1\u9001\u8bf7\u6c42,\u9ed8\u8ba4\u60c5\u51b5\u4e0b,\u540c\u57df\u65f6,\u4f1a\u643a\u5e26 Cookie;\u8de8\u57df\u65f6,\u4e0d\u4f1a\n    \/\/ xhr.withCredentials=true;\n    \/\/\u6700\u7ec8\u80fd\u5426\u6210\u529f\u8de8\u57df\u643a\u5e26 Cookie,\u8fd8\u8981\u770b\u670d\u52a1\u5668\u540c\u610f\u4e0d\u540c\u610f<\/code><\/pre>\n<h2>XHR \u7684\u65b9\u6cd5<\/h2>\n<pre class=\"prettyprint linenums\" ><code> \/\/1.abort()\n    \/\/\u7ec8\u6b62\u5f53\u524d\u8bf7\u6c42\n    \/\/\u4e00\u822c\u914d\u5408 abort \u4e8b\u4ef6\u4e00\u8d77\u4f7f\u7528\n      \u7c7b\u4f3c\u7684\u4ee3\u7801\n    \/\/ xhr.abort();\n    \/\/ 2.setRequestHeader()\n    \/\/\u8bbe\u7f6e\u8bf7\u6c42\u5934\u4fe1\u606f\n    \/\/xhr.setRequestHeader(\u5934\u90e8\u5b57\u6bb5\u7684\u540d\u79f0,\u5934\u90e8\u5b57\u6bb5\u7684\u503c);\n    \/\/ const url = &#039;https:\/\/www.imooc.com\/api\/http\/search\/suggest?words=js&#039;;\n    const url = &#039;https:\/\/www.imooc.com\/api\/http\/json\/search\/suggest?words=js&#039;;\n  \u7c7b\u4f3c\u7684\u4ee3\u7801\n    xhr.open(&#039;POST&#039;, url, true);\n    \/\/\u8bf7\u6c42\u5934\u4e2d\u7684 Content-Type \u5b57\u6bb5\u7528\u6765\u544a\u8bc9\u670d\u52a1\u5668,\u6d4f\u89c8\u5668\u53d1\u9001\u7684\u6570\u636e\u662f\u4ec0\u4e48\u683c\u5f0f\u7684\n    \/\/ xhr.setRequestHeader(&#039;Content-Type&#039;, &#039;application\/x-www-form-urlencoded&#039;);\n    \/\/ xhr.send(&#039;username=alex&amp;age=18&#039;);\n    \/\/ const url = &#039;https:\/\/www.imooc.com\/api\/http\/json\/search\/suggest?words=js&#039;;\n    xhr.setRequestHeader(&#039;Content-Type&#039;, &#039;application\/json&#039;);\n    xhr.send(\n        JSON.stringify({\n            username:&#039;alex&#039;\n        })\n    );<\/code><\/pre>\n<h2>XHR \u7684\u4e8b\u4ef6<\/h2>\n<pre class=\"prettyprint linenums\" ><code> \/\/1.load \u4e8b\u4ef6\n    \/\/\u54cd\u5e94\u6570\u636e\u53ef\u7528\u65f6\u89e6\u53d1\n    const url = &#039;https:\/\/www.imooc.com\/api\/http\/json\/search\/suggest?words=js&#039;;\n    const xhr = new XMLHttpRequest();\n    \/\/ xhr.onload = () =&gt; {\n    \/\/     if ((xhr.status &gt;= 200 &amp;&amp; xhr.status &lt; 300) || xhr.status === 304) {\n    \/\/         console.log(xhr.response);\n    \/\/     }\n    \/\/ };\n    xhr.addEventListener(&#039;load&#039;, () =&gt; {\n        if ((xhr.status &gt;= 200 &amp;&amp; xhr.status &lt; 300) || xhr.status === 304) {\n            console.log(xhr.response);\n        }\n    }, false);\n    xhr.open(&#039;GET&#039;, url, true);\n    xhr.send(null);\n    \/\/IE6~8 \u4e0d\u652f\u6301 load \u4e8b\u4ef6\n    \/\/2.error \u4e8b\u4ef6\n    \/\/\u8bf7\u6c42\u53d1\u751f\u9519\u8bef\u65f6\u89e6\u53d1\n    \/\/\u4e0a\u9762\u4ee3\u7801\u52a0\u4e0b\u9762\u7684\n    \/\/ xhr.addEventListener(&#039;error&#039;,()=&gt;{\n    \/\/     console.log(&#039;error&#039;);\n    \/\/ },false);\n    \/\/IE10 \u5f00\u59cb\u652f\u6301\n    \/\/3.abort \u4e8b\u4ef6\n    \/\/\u8c03\u7528 abort()\u7ec8\u6b62\u8bf7\u6c42\u65f6\u89e6\u53d1\n    \/\/1 \u7684\u4ee3\u7801\u7c7b\u4f3c,\u52a0\u4e0b\u9762\u7684\n    \/\/ xhr.addEventListener(&#039;abort&#039;,()=&gt;{\n    \/\/     console.log(&#039;abort&#039;);\n    \/\/ },false);\n    \/\/ \u6700\u540e\n    \/\/ xhr.abort();\n    \/\/4.timeout \u4e8b\u4ef6\n    \/\/\u8bf7\u6c42\u8d85\u65f6\u540e\u89e6\u53d1\n    \/\/ \u4e0a\u9762 abort-&gt;timeout\n    \/\/ xhr.open(&#039;GET&#039;, url, true);\n    \/\/ xhr.timeout=10;\n    \/\/ xhr.send(null);\n    \/\/ IE8 \u5f00\u59cb\u652f\u6301<\/code><\/pre>\n<h2>FormData<\/h2>\n<pre class=\"prettyprint linenums\" ><code>&lt;form\n        id=&quot;login&quot;\n        action=&quot;https:\/\/www.imooc.com\/api\/http\/search\/suggest?words=js&quot;\n        method=&quot;POST&quot;\n        enctype=&quot;multipart\/form-data&quot;\n>\n    &lt;input type=&quot;text&quot; name=&quot;username&quot; placeholder=&quot;\u7528\u6237\u540d&quot;\/&gt;\n    &lt;input type=&quot;password&quot; name=&quot;password&quot; placeholder=&quot;\u5bc6\u7801&quot;\/&gt;\n    &lt;input id=&quot;submit&quot; type=&quot;submit&quot; value=&quot;\u767b\u5f55&quot;\/&gt;\n&lt;\/form&gt;\n&lt;script&gt;\n    \/\/1.\u4f7f\u7528 Ajax \u63d0\u4ea4\u8868\u5355\n    const login = document.getElementById(&#039;login&#039;);\n    const {username, password} = login;\n    const btn = document.getElementById(&#039;submit&#039;);\n    const url = &#039;https:\/\/www.imooc.com\/api\/http\/search\/suggest?words=js&#039;;\n    btn.addEventListener(&#039;click&#039;, (e) =&gt; {\n        \/\/\u963b\u6b62\u8868\u5355\u81ea\u52a8\u63d0\u4ea4\n        e.preventDefault();\n        \/\/\u8868\u5355\u6570\u636e\u9a8c\u8bc1\n        \/\/\u53d1\u9001 Ajax \u8bf7\u6c42\n        const xhr = new XMLHttpRequest();\n        xhr.addEventListener(&#039;load&#039;, () =&gt; {\n            if ((xhr.status &gt;= 200 &amp;&amp; xhr.status &lt; 300) || xhr.status === 304) {\n                console.log(xhr.response);\n            }\n        }, false);\n        xhr.open(&#039;POST&#039;, url, true);\n        \/\/\u7ec4\u88c5\u6570\u636e\n        \/\/FormData \u53ef\u7528\u4e8e\u53d1\u9001\u8868\u5355\u6570\u636e\n        const data=new FormData(login);\n        \/\/ console.log(data);\n        \/\/ for (const item of data){\n        \/\/     console.log(item);\n        \/\/ }\u67e5\u770b\u6570\u636e,\u6d4b\u8bd5\u7528\n        xhr.send(data);\n    }, false);\n      \/\/2.FormData \u7684\u57fa\u672c\u7528\u6cd5\n    \/\/\u901a\u8fc7 HTML \u8868\u5355\u5143\u7d20\u521b\u5efa FormData \u5bf9\u8c61\n    const fd=new FormData(login);\n    fd.append(&#039;age&#039;,18);\n    fd.append(&#039;sex&#039;,&#039;male&#039;);\n    xhr.send(fd);<\/code><\/pre>\n<h2>\u5c01\u88c5 Ajax<\/h2>\n<ul>\n<li>utils.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>\/\/\u5de5\u5177\u51fd\u6570\n\/\/\u6570\u636e\u5e8f\u5217\u5316\u6210 urlencoded \u683c\u5f0f\u7684\u5b57\u7b26\u4e32\nconst serialize=param=&gt;{\n    const results=[];\n    for (const [key,value] of Object.entries(param)){\n        results.push(<code>${encodeURIComponent(key)}=${encodeURIComponent(value)}<\/code>);\n    }\n    \/\/ [&#039;username=ale&#039;,&#039;age=18&#039;]\n    return results.join(&#039;&amp;&#039;);\n};\n\/\/\u6570\u636e\u5e8f\u5217\u5316\u6210 JSON \u683c\u5f0f\u7684\u5b57\u7b26\u4e32\nconst serializeJSON=param=&gt;{\n    return JSON.stringify(param);\n}\n\/\/\u7ed9 URL \u6dfb\u52a0\u53c2\u6570\nconst addURLData=(url,data)=&gt;{\nif (!data) return &#039;&#039;;\nconst mark=url.includes(&#039;?&#039;)?&#039;&amp;&#039;:&#039;?&#039;;\nreturn <code>${mark}${data}<\/code>;\n};\nexport {serialize,addURLData,serializeJSON};\n<\/code><\/pre>\n<ul>\n<li>defaults.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>\/\/\u5e38\u91cf\nimport {HTTP_GET,CONTENT_TYPE_FORM_URLENCODED} from &#039;.\/constants.js&#039;;\n\/\/\u9ed8\u8ba4\u53c2\u6570\nconst DEFAULTS={\n    method:HTTP_GET,\n   \/\/\u8bf7\u6c42\u5934\u643a\u5e26\u7684\u6570\u636e\n    params:null,\n    \/\/ params: {\n    \/\/     username:&#039;a&#039;,\n    \/\/     age:18\n    \/\/ }\n    \/\/ username=a&amp;age=18\n    \/\/\u8bf7\u6c42\u4f53\u643a\u5e26\u7684\u6570\u636e\n    data:null,\n    \/\/ data:{\n    \/\/     username:&#039;alex&#039;,\n    \/\/     age:18\n    \/\/ }\n    \/\/data:FormData \u6570\u636e\n    contentType:CONTENT_TYPE_FORM_URLENCODED,\n    responseType: &#039;&#039;,\n    timeoutTime: 0,\n    withCredentials: false,\n    \/\/ \u65b9\u6cd5\n    success() {},\n    httpCodeError() {},\n    error() {},\n    abort() {},\n    timeout() {}\n};\nexport default DEFAULTS;<\/code><\/pre>\n<ul>\n<li>constants.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>\/\/\u5e38\u91cf\nexport const HTTP_GET=&#039;GET&#039;;\nexport const CONTENT_TYPE_FORM_URLENCODED = &#039;application\/x-www-form-urlencoded&#039;;\nexport const CONTENT_TYPE_JSON = &#039;application\/json&#039;;<\/code><\/pre>\n<ul>\n<li>ajax.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>\/\/ \u5e38\u91cf\nimport {HTTP_GET,CONTENT_TYPE_FORM_URLENCODED,CONTENT_TYPE_JSON} from &#039;.\/constants.js&#039;;\n\/\/\u5de5\u5177\u51fd\u6570\nimport {serialize,addURLData,serializeJSON} from &quot;.\/utils.js&quot;;\n\/\/\u9ed8\u8ba4\u53c2\u6570\nimport DEFAULTS from &quot;.\/defaults.js&quot;;\n\/\/Ajax \u7c7b\nclass Ajax {\n    constructor(url, options) {\n        this.url = url;\n        this.options = Object.assign({}, DEFAULTS, options);\n        \/\/\u521d\u59cb\u5316\n        this.init();\n    }\n    \/\/\u521d\u59cb\u5316\n    init() {\n        const xhr = new XMLHttpRequest();\n        this.xhr = xhr;\n        \/\/\u7ed1\u5b9a\u54cd\u5e94\u4e8b\u4ef6\u5904\u7406\u7a0b\u5e8f\n        this.bindEvents();\n        xhr.open(this.options.method, this.url+this.addParam(), true);\n        \/\/\u8bbe\u7f6e responseType\n        this.setResponseType();\n        \/\/\u8bbe\u7f6e\u8de8\u57df\u662f\u5426\u643a\u5e26 cookie\n        this.setCookie();\n        \/\/\u8bbe\u7f6e\u8d85\u65f6\n        this.setTimeout();\n        \/\/\u53d1\u9001\u8bf7\u6c42\n        this.sendData();\n    }\n    \/\/\n    \/\/\u7ed1\u5b9a\u54cd\u5e94\u4e8b\u4ef6\u5904\u7406\u7a0b\u5e8f\n    bindEvents() {\n        const xhr = this.xhr;\n        const {success, httpCodeError, error, abort, timeout} = this.options;\n        \/\/load\n        xhr.addEventListener(&#039;load&#039;, () =&gt; {\n            if (this.ok()) {\n                success(xhr.response, xhr);\n            } else {\n                httpCodeError(xhr.status, xhr);\n            }\n        }, false);\n        \/\/error\n        \/\/\u5f53\u8bf7\u6c42\u9047\u5230\u9519\u8bef\u65f6,\u5c06\u89e6\u53d1 error \u4e8b\u4ef6\n        xhr.addEventListener(&#039;error&#039;, () =&gt; {\n            error(xhr);\n        }, false);\n        \/\/abort\n        xhr.addEventListener(&#039;abort&#039;, () =&gt; {\n            abort(xhr);\n        }, false);\n        \/\/timeout\n        xhr.addEventListener(&#039;timeout&#039;, () =&gt; {\n            timeout(xhr);\n        }, false);\n    }\n    \/\/\u68c0\u6d4b\u54cd\u5e94\u7684 HTTP \u72b6\u6001\u7801\u662f\u5426\u6b63\u5e38\n    ok(){\n        const xhr=this.xhr;\n        return (xhr.status &gt;= 200 &amp;&amp; xhr.status &lt; 300) || xhr.status === 304;\n    }\n    \/\/\u5728\u5730\u5740\u4e0a\u6dfb\u52a0\u6570\u636e\n    addParam(){\n        const {params}= this.options;\n        if (!params) return &#039;&#039;;\n        return addURLData(this.url,serialize(params));\n    }\n    \/\/\u8bbe\u7f6e responseType\n    setResponseType(){\n        this.xhr.responseType=this.options.responseType;\n    }\n    \/\/\u8bbe\u7f6e\u8de8\u57df\u662f\u5426\u643a\u5e26 cookie\n    setCookie(){\n        if (this.options.withCredentials){\n            this.xhr.withCredentials=true;\n        }\n    }\n    \/\/\u8bbe\u7f6e\u8d85\u65f6\n    setTimeout(){\n        const {timeoutTime }=this.options;\n        if (timeoutTime&gt;0){\n            this.xhr.timeout=timeoutTime;\n        }\n    }\n    \/\/\u53d1\u9001\u8bf7\u6c42\n    sendData(){\n        const xhr=this.xhr;\n        if (!this.isSendData()){\n            return  xhr.send(null);\n        }\n        let resultData=null;\n        const { data } = this.options;\n        \/\/\u53d1\u9001 FormData \u683c\u5f0f\u7684\u6570\u636e\n        if (this.ifFormData()){\n            resultData=data;\n        }else if (this.isFormURLEncodedData()){\n            \/\/ \u53d1\u9001 application\/x-www-form-urlencoded \u683c\u5f0f\u7684\u6570\u636e\n            this.setContentType(CONTENT_TYPE_FORM_URLENCODED);\n            resultData=serialize(data);\n        }else if (this.isJSONData()){\n            \/\/\u53d1\u9001 application\/json \u683c\u5f0f\u7684\u6570\u636e\n            this.setContentType(CONTENT_TYPE_JSON);\n            resultData=serializeJSON(data);\n        }else{\n            \/\/\u53d1\u9001\u5176\u4ed6\u683c\u5f0f\u7684\u6570\u636e\n            this.setContentType();\n            resultData=data;\n        }\n    }\n    \/\/\u662f\u5426\u9700\u8981\u4f7f\u7528 send \u53d1\u9001\u6570\u636e\n    isSendData(){\n        const {data,method}=this.options;\n        if (!data)return false;\n        if (method.toLowerCase()===HTTP_GET.toLowerCase())return false;\n        return true;\n    }\n    \/\/\u662f\u5426\u53d1\u9001 FormData \u683c\u5f0f\u7684\u6570\u636e\n    ifFormData(){\n        return this.options.data instanceof FormData;\n    }\n    \/\/ \u662f\u5426\u53d1\u9001 application\/x-www-form-urlencoded \u683c\u5f0f\u7684\u6570\u636e\n    isFormURLEncodedData() {\n        return this.options.contentType.toLowerCase()\n            .includes(CONTENT_TYPE_FORM_URLENCODED);\/\/\u8f6c\u6362\u4e3a\u5c0f\u5199\n    }\n    \/\/ \u662f\u5426\u53d1\u9001 application\/json \u683c\u5f0f\u7684\u6570\u636e\n    isJSONData() {\n        return this.options.contentType.toLowerCase()\n            .includes(CONTENT_TYPE_JSON);\n    }\n    \/\/\u8bbe\u7f6e Content-Type\n    setContentType(contentType=this.options.contentType){\n        if (!contentType)return;\n        this.xhr.setRequestHeader(&#039;Content-Type&#039;,contentType);\n    }\n    \/\/\u83b7\u53d6 XHR \u5bf9\u8c61\n    getXHR (){\n        return this.xhr;\n    }\n}\nexport default Ajax;<\/code><\/pre>\n<ul>\n<li>index.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import Ajax from &quot;.\/ajax.js&quot;;\nconst ajax=(url,options)=&gt;{\n    return  new Ajax(url,options).getXHR();\n};\nconst get=(url,options)=&gt;{\n    return ajax(url,{...options,method:&#039;GET&#039;});\n};\nconst getJSON=(url,options)=&gt;{\n    return ajax(url,{...options,method:&#039;GET&#039;,responseType:&#039;json&#039;});\n};\nconst post =(url,options)=&gt;{\n    return ajax(url,{...options,method:&#039;POST&#039;});\n};\nexport {ajax,get,getJSON,post};<\/code><\/pre>\n<ul>\n<li>1.html<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>  &lt;script type=&quot;module&quot;&gt;\n        import {ajax,get,getJSON,post} from &#039;.\/index.js&#039;;\n        const url = &#039;https:\/\/www.imooc.com\/api\/http\/search\/suggest?words=js&#039;;\n        \/\/ const url=&#039;.\/414.html&#039;; http code error 404\n        const xhr=ajax(url,{\n            method:&#039;GET&#039;,\n            params:{username:&#039;ale&#039;},\n            data:{\n                age:18\n            },\n            responseType:&#039;json&#039;,\n            \/\/ timeoutTime: 10,\n            success(response) {\n                console.log(response);\n            },\n            httpCodeError(err) {\n                console.log(&#039;http code error&#039;,err);\n            },\n            error(xhr){\n                console.log(&#039;error&#039;,xhr);\n            },\n            abort(xhr){\n                console.log(&#039;abort&#039;,xhr);\n            },\n            timeout(xhr){\n                console.log(&#039;timeout&#039;,xhr);\n            },\n        });\n        xhr.abort();<\/code><\/pre>\n<h2>\u4f7f\u7528 Promise \u6539\u9020\u5c01\u88c5\u597d\u7684 Ajax<\/h2>\n<pre class=\"prettyprint linenums\" ><code>index.js\nconst ajax = (url, options) =&gt; {\n    \/\/ return  new Ajax(url,options).getXHR();\n    let xhr;\n    const p = new Promise((resolve, reject) =&gt; {\n        xhr = new Ajax(url, {\n            ...options,\n            ...{\n                success(response) {\n                    resolve(response);\n                },\n                httpCodeError(status) {\n                    reject({\n                        type: ERROR_HTTP_CODE,\n                        text: <code>${ERROR_HTTP_CODE_TEXT}:${status}<\/code>\n                    });\n                },\n                error() {\n                    reject({\n                        type: ERROR_REQUEST,\n                        text: ERROR_REQUEST_TEXT\n                    });\n                },\n                abort() {\n                    reject({\n                        type: ERROR_ABORT,\n                        text: ERROR_ABORT_TEXT\n                    });\n                },\n                timeout() {\n                    reject({\n                        type: ERROR_TIMEOUT,\n                        text: ERROR_TIMEOUT_TEXT\n                    });\n                }\n            }\n        }).getXHR();\n    });\n    p.xhr=xhr;\n    p.ERROR_HTTP_CODE=ERROR_HTTP_CODE;\n    p.ERROR_REQUEST=ERROR_REQUEST;\n    p.ERROR_TIMEOUT=ERROR_TIMEOUT;\n    p.ERROR_ABORT=ERROR_ABORT;\n    return p;\n};<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code>constants.js\nexport const ERROR_HTTP_CODE=1;\nexport const ERROR_HTTP_CODE_TEXT=&#039;HTTP \u72b6\u6001\u7801\u5f02\u5e38&#039;;\nexport const ERROR_REQUEST=2;\nexport const ERROR_REQUEST_TEXT=&#039;\u8bf7\u6c42\u88ab\u963b\u6b62&#039;;\nexport const ERROR_TIMEOUT=3;\nexport const ERROR_TIMEOUT_TEXT=&#039;\u8bf7\u6c42\u8d85\u65f6&#039;;\nexport const ERROR_ABORT=4;\nexport const ERROR_ABORT_TEXT=&#039;\u8bf7\u6c42\u7ec8\u6b62&#039;;<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code>2.html\n&lt;script type=&quot;module&quot;&gt;\n    import {ajax, get, getJSON, post} from &quot;.\/index.js&quot;;\n    const url = &#039;https:\/\/www.imooc.com\/api\/http\/search\/suggest?words=js&#039;;\n    const p = getJSON(url, {\n        params: {username: &#039;al&#039;},\n        data: {age: 18},\n        \/\/ timeoutTime: 10\n    });\n    \/\/ p.xhr.abort();\n    const {ERROR_HTTP_CODE, ERROR_REQUEST, ERROR_TIMEOUT, ERROR_ABORT} = p;\n    p.then(repsonse =&gt; {\n        console.log(repsonse);\n    }).catch(err =&gt; {\n        \/\/ console.log(err);\n        switch (err.type) {\n            case ERROR_HTTP_CODE:\n                console.log(err.text);\n                break;\n            case ERROR_REQUEST:\n                console.log(err.text);\n                break;\n            case ERROR_TIMEOUT:\n                console.log(err.text);\n                break;\n            case ERROR_ABORT:\n                console.log(err.text);\n                break;\n        }\n    });<\/code><\/pre>\n<h2>\u641c\u7d22\u63d0\u793a<\/h2>\n<pre class=\"prettyprint linenums\" ><code>&lt;input id=&quot;search&quot; type=&quot;text&quot;\/&gt;\n&lt;ul id=&quot;result&quot;&gt;&lt;\/ul&gt;\n&lt;script type=&quot;module&quot;&gt;\n    import {getJSON} from &quot;..\/2\/index.js&quot;;\n    const searchInput = document.getElementById(&#039;search&#039;);\n    const resultList = document.getElementById(&#039;result&#039;);\n    const url = &#039;https:\/\/www.imooc.com\/api\/http\/search\/suggest?words=&#039;;\n    const handleInputEvent = () =&gt; {\n        if (searchInput.value.trim() !== &#039;&#039;) {\n            getJSON(<code>${url}${searchInput.value}<\/code>)\n                .then(response =&gt; {\n                    console.log(response);\n                    let html = &#039;&#039;;\n                    for (const item of response.data) {\n                        html += <code>&lt;li&gt;${item.word}&lt;\/li&gt;<\/code>;\n                    }\n                    resultList.innerHTML = html;\n                    resultList.display = &#039;&#039;;\n                }).catch(err =&gt; {\n                console.log(err);\n            });\n        } else {\n            resultList.innerHTML = &#039;&#039;;\n            resultList.display = &#039;none&#039;;\n        }\n    };\n    let timer = null;\n    \/\/IE9 \u5f00\u59cb\u652f\u6301\n    searchInput.addEventListener(&#039;input&#039;, () =&gt; {\n        \/\/ handleInputEvent();\n        if (timer) {\n            clearTimeout(timer);\n        }\n        timer = setTimeout(handleInputEvent, 500);\n    }, false);<\/code><\/pre>\n<h2>\u4e8c\u7ea7\u83dc\u5355<\/h2>\n<pre class=\"prettyprint linenums\" ><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n&lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\n    &lt;title&gt;Title&lt;\/title&gt;\n    &lt;style&gt;\n        \/* css reset *\/\n        * {\n            padding: 0;\n            margin: 0;\n        }\n        li {\n            list-style: none;\n        }\n        \/* menu *\/\n        .menu {\n            width: 100px;\n            background-color: rgba(0, 0, 0, 0.1);\n            margin: 10px;\n        }\n        .menu-item {\n            position: relative;\n            padding: 5px;\n            cursor: pointer;\n        }\n        .menu-content {\n            display: none;\n            position: absolute;\n            left: 100%;\n            top: 0;\n            width: 200px;\n            height: 100px;\n            padding: 0 5px;\n            background-color: rgba(0, 0, 0, 0.1);\n        }\n        .menu-item:hover {\n            background-color: rgba(0, 0, 0, 0.4);\n        }\n        .menu-item:hover .menu-content {\n            display: block;\n        }\n        .menu-loading {\n            margin: 45px 0 0 92px;\n        }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;ul id=&quot;menu&quot; class=&quot;menu&quot;&gt;\n    &lt;!--    &lt;li class=&quot;menu-item&quot; data-key=&quot;hot&quot; data-done=&quot;done&quot;&gt;--&gt;\n    &lt;!--      &lt;span&gt;\u70ed\u95e8&lt;\/span&gt;--&gt;\n    &lt;!--      &lt;div class=&quot;menu-content&quot;&gt;--&gt;\n    &lt;!--        &lt;p&gt;&lt;img class=&quot;menu-loading&quot; src=&quot;.\/loading.gif&quot; alt=&quot;\u52a0\u8f7d\u4e2d&quot; \/&gt;&lt;\/p&gt;--&gt;\n    &lt;!--      &lt;\/div&gt;--&gt;\n    &lt;!--    &lt;\/li&gt;--&gt;\n&lt;\/ul&gt;\n&lt;script type=&quot;module&quot;&gt;\n    \/\/ https:\/\/www.imooc.com\/api\/mall-PC\/index\/menu\/hot\n    \/\/ https:\/\/www.imooc.com\/api\/mall-PC\/index\/menu\n    import {getJSON} from &quot;..\/2\/index.js&quot;;\n    const menuURL = &#039;https:\/\/www.imooc.com\/api\/mall-PC\/index\/menu&#039;;\n    const menuEI = document.getElementById(&#039;menu&#039;);\n    getJSON(menuURL)\n        .then(response =&gt; {\n            \/\/ console.log(response);\n            let html = &#039;&#039;;\n            for (const item of response.data) {\n                html += `\n                &lt;li class=&quot;menu-item&quot; data-key=&quot;${item.key}&quot;&gt;\n                    &lt;span&gt;${item.title}&lt;\/span&gt;\n                    &lt;div class=&quot;menu-content&quot;&gt;\n                        &lt;p&gt;&lt;img class=&quot;menu-loading&quot; src=&quot;.\/loading.gif&quot; alt=&quot;\u52a0\u8f7d\u4e2d&quot; \/&gt;&lt;\/p&gt;\n                    &lt;\/div&gt;\n                &lt;\/li&gt;\n                `;\n            }\n            menuEI.innerHTML = html;\n        }).then(() =&gt; {\n        const items = menuEI.querySelectorAll(&#039;.menu-item&#039;);\n        for (const item of items) {\n            item.addEventListener(&#039;mouseenter&#039;, () =&gt; {\n                \/\/ console.log(item.getAttribute(&#039;data-key&#039;));\n                \/\/IE11 \u5f00\u59cb\u652f\u6301\n                \/\/ console.log(item.dataset.key);\n                if (item.dataset.done === &#039;done&#039;) return;\n                getJSON(<code>https:\/\/www.imooc.com\/api\/mall-PC\/index\/menu\/${item.dataset.key}<\/code>)\n                    .then(response =&gt; {\n                        \/\/ console.log(response);\n                        \/\/{key: &#039;hot&#039;, title: &#039;\u70ed\u95e8\u51fa\u53d1\u5730&#039;, subTitles: Array(5)}\n                        item.dataset.done = &#039;done&#039;;\n                        let html = &#039;&#039;;\n                        for (const item of response.data) {\n                            html += <code>&lt;p&gt;${item.title}&lt;\/p&gt;<\/code>;\n                        }\n                        item.querySelector(&#039;.menu-content&#039;).innerHTML = html;\n                    }).catch(err =&gt; {\n                    console.log(err);\n                });\n            }, false);\n        }\n    }).catch(err =&gt; {\n            console.log(err);\n        });\n&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<h2>\u591a\u4e2a Ajax \u8bf7\u6c42\u7684\u5e76\u53d1\u6267\u884c<\/h2>\n<pre class=\"prettyprint linenums\" ><code> \/* loading-page *\/\n        .loading-page {\n            position: absolute;\n            top: 0;\n            right: 0;\n            bottom: 0;\n            left: 0;\n            z-index: 1000;\n            background-color: #eee;\n            text-align: center;\n        }\n        .loading-img {\n            position: absolute;\n            top: 50%;\n        }\n        .ad img {\n            display: inline-block;\n            width: 25%;\n        }\n        .none {\n            display: none;\n        }\n         &lt;\/style&gt;<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code>&lt;div id=&quot;loading-page&quot; class=&quot;loading-page&quot;&gt;\n    &lt;img class=&quot;loading-img&quot; src=&quot;.\/loading.gif&quot; alt=&quot;\u52a0\u8f7d\u4e2d&quot; \/&gt;\n&lt;\/div&gt;\n&lt;div id=&quot;ad&quot; class=&quot;ad&quot;&gt;&lt;\/div&gt;\n&lt;ul id=&quot;menu&quot; class=&quot;menu&quot;&gt;\n&lt;\/ul&gt;\n&lt;script type=&quot;module&quot;&gt;\n    import {getJSON} from &quot;..\/2\/index.js&quot;;\n    const menuURL = &#039;https:\/\/www.imooc.com\/api\/mall-PC\/index\/menu&#039;;\n    const adURL = &#039;https:\/\/www.imooc.com\/api\/mall-PC\/index\/ad&#039;;\n    const loadingPageEl = document.getElementById(&#039;loading-page&#039;);\n    const adEl = document.getElementById(&#039;ad&#039;);\n    const menuEl = document.getElementById(&#039;menu&#039;);\n    const p1 = getJSON(menuURL).then\n    \u4e0a\u9762\u7684\u7c7b\u4f3c\u4ee3\u7801\n const p2= getJSON(adURL)\n        .then(response =&gt; {\n        \/\/ console.log(response);\n        \/\/ [{ url: &#039;http:\/\/alimc.img.imooc.com\/class\/&#039; }];\n        let html=&#039;&#039;;\n        for (const item of response.data){\n            html+=<code>&lt;img src=&quot;${item.url}&quot; alt=&quot;&quot;\/&gt;<\/code>;\n        }\n        adEl.innerHTML=html;\n    })\n        .catch(err =&gt; {\n        console.log(err);\n    });\n    Promise.all([p1,p2]).then(()=&gt;{\n        \/\/ loadingPageEl.style.display=&#039;none&#039;;\n        \/\/IE10 \u5f00\u59cb\u652f\u6301\n        loadingPageEl.classList.add(&#039;none&#039;);\n    });<\/code><\/pre>\n<h2>axios<\/h2>\n<ul>\n<li>axios \u662f\u4e00\u4e2a\u57fa\u4e8e Promise \u7684 HTTP \u5e93,\u53ef\u4ee5\u7528\u5728\u6d4f\u89c8\u5668\u548c node.js \u4e2d<\/li>\n<li>\u7b2c\u4e09\u65b9 Ajax \u5e93<br \/>\nAPI<br \/>\n<a href=\"http:\/\/www.axios-js.com\/zh-cn\/docs\/\">http:\/\/www.axios-js.com\/zh-cn\/docs\/<\/a><\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>\/\/2.axios \u7684\u57fa\u672c\u7528\u6cd5\n    \/\/\u5f15\u5165 axios\n    \/\/ const url = &#039;https:\/\/www.imooc.com\/api\/http\/search\/suggest?words=js&#039;;\n    \/\/ axios(url, {\n    \/\/     method: &#039;post&#039;,\n    \/\/     \/\/\u8bf7\u6c42\u65f6\u7684\u5934\u4fe1\u606f\n    \/\/     headers: {\n    \/\/         &#039;Content-Type&#039;: &#039;application\/x-www-form-urlencoded&#039;\n    \/\/     },\n    \/\/     \/\/\u901a\u8fc7\u8bf7\u6c42\u5934\u643a\u5e26\u7684\u6570\u636e\n    \/\/     params: {\n    \/\/         username: &#039;ale&#039;\n    \/\/     },\n        \/\/\u901a\u8fc7\u8bf7\u6c42\u4f53\u643a\u5e26\u7684\u6570\u636e\n        \/\/&#039;Content-Type&#039;: &#039;application\/json&#039;\n        \/\/ data: {\n        \/\/     age: 18,\n        \/\/     sex: &#039;male&#039;\n        \/\/ }\n        \/\/ &#039;application\/x-www-form-urlencoded&#039;\n        \/\/data:&#039;age=18&amp;sex=male&#039;,\n        \/\/ timeout:10\n        \/\/ withCredentials:true\n    \/\/ }).then(response =&gt; {\n    \/\/     console.log(response.data.data);\/\/\u6570\u636e\u83b7\u53d6\n    \/\/ }).catch(err =&gt; {\n    \/\/     console.log(err);\n    \/\/ });\n    \/\/(2)\n    \/\/ axios.get(url,{\n    \/\/     params:{\n    \/\/         params: {\n    \/\/             username:&#039;ale&#039;\n    \/\/         }\n    \/\/     }\n    \/\/ }).then(response=&gt;{\n    \/\/     console.log(response);\n    \/\/ });\n    \/\/(3)\n    \/\/ axios.post(url,&#039;username=al&amp;age=18&#039;)\n    \/\/     .then(response=&gt;{\n    \/\/     console.log(response);\n    \/\/ }).catch(err=&gt;{\n    \/\/     console.log(err);\n    \/\/ });\n    \/\/(4)\n    axios\n        .post(&#039;https:\/\/www.imooc.com\/api\/http\/json\/search\/suggest?words=js&#039;, {\n            username: &#039;alex&#039;\n        })\n        .then(response =&gt; {\n            console.log(response);\n        })\n        .catch(err =&gt; {\n            console.log(err);\n        });<\/code><\/pre>\n<h2>Fetch<\/h2>\n<pre class=\"prettyprint linenums\" ><code>  \/\/ 1.Fetch \u662f\u4ec0\u4e48\n        \/\/ Fetch \u4e5f\u662f\u524d\u540e\u7aef\u901a\u4fe1\u7684\u4e00\u79cd\u65b9\u5f0f\n        \/\/ Fetch \u662f Ajax\uff08XMLHttpRequest\uff09\u7684\u4e00\u79cd\u66ff\u4ee3\u65b9\u6848\uff0c\u5b83\u662f\u57fa\u4e8e Promise \u7684\n        \/\/ Ajax \u7684\u517c\u5bb9\u6027\u6bd4 Fetch \u597d   \/\/ \u65e0 abort timeout\n        \/\/ 2.Fetch \u7684\u57fa\u672c\u7528\u6cd5\n        \/\/ console.log(fetch);\u6709 fetch \u51fd\u6570\n        \/\/ console.log(ajax);\u65e0\n        \/\/ fetch() \u8c03\u7528\u540e\u8fd4\u56de Promise \u5bf9\u8c61\n        const url = &#039;https:\/\/www.imooc.com\/api\/http\/search\/suggest?words=js&#039;;\n        \/\/ body: \uff08\u2026\uff09\n        \/\/ bodyUsed: false\n        \/\/ ok: true\n        \/\/ status: 200\n        \/\/ statusText: &quot;OK&quot;\n        \/\/ type: &quot;cors&quot;\n        \/\/\u7b2c\u4e8c\u4e2a\u53c2\u6570\u662f\u5bf9\u8c61,\u7528\u6765\u914d\u7f6e fetch\n        const fd = new FormData();\n        fd.append(&#039;username&#039;, &#039;alex&#039;);\n        fetch(url,{\n            method: &#039;post&#039;,\n            \/\/ body: null\n            \/\/ body: &#039;username=alex&amp;age=18&#039;,\n            \/\/ body: JSON.stringify({ username: &#039;alex&#039; }) \u4e0d\u80fd\u5bf9\u8c61\n            body: fd,\/\/ FormData \u81ea\u52a8\u4f20 Content-Type\n            \/\/ headers: {\n            \/\/   \/\/ &#039;Content-Type&#039;: &#039;application\/x-www-form-urlencoded&#039;\n            \/\/   &#039;Content-Type&#039;: &#039;application\/json&#039;\n            \/\/ }\n            mode: &#039;cors&#039;\n            \/\/ credentials:&#039;include&#039;\n        })\n            .then(response=&gt;{\n            console.log(response);\n            \/\/body\/bodyUsed\n            \/\/body \u53ea\u80fd\u8bfb\u4e00\u6b21,\u8bfb\u8fc7\u4e4b\u540e\u5c31\u4e0d\u8ba9\u518d\u8bfb\u4e86\n            \/\/ok  \u5982\u679c\u4e3a true,\u8868\u793a\u53ef\u4ee5\u8bfb\u53d6\u6570\u636e,\u4e0d\u7528\u518d\u53bb\u5224\u65ad HTTP \u72b6\u6001\u7801\u4e86\n            if (response.ok){\n                return response.json();\n            }else {\n                throw new Error(<code>HTTP CODE \u5f02\u5e38${response.status}<\/code>);\n            }\n        }).then(data=&gt;{\n            console.log(data);\n        }).catch(err=&gt;{\n            console.log(err);\n        });\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u524d\u7aef\u6570\u636e\u4ea4\u4e92\u4e0e HTTP \u534f\u8bae \u521d\u59cb\u524d\u540e\u7aef\u901a\u4fe1 1.\u524d\u540e\u7aef\u901a\u4fe1\u662f\u4ec0\u4e48 \u524d\u7aef\u548c\u540e\u7aef\u6570\u636e\u4ea4\u4e92\u7684\u8fc7\u7a0b \u6d4f\u89c8\u5668\u548c\u670d\u52a1\u5668 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-2720","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/2720","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2720"}],"version-history":[{"count":2,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/2720\/revisions"}],"predecessor-version":[{"id":4161,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/2720\/revisions\/4161"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2720"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2720"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2720"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}