{"id":9925,"date":"2023-11-28T21:20:23","date_gmt":"2023-11-28T13:20:23","guid":{"rendered":"https:\/\/wx.kaifamiao.info\/?p=9925"},"modified":"2023-11-30T19:47:35","modified_gmt":"2023-11-30T11:47:35","slug":"javascript-zhong-ajax-yuan-li","status":"publish","type":"post","link":"http:\/\/wx.kaifamiao.info\/index.php\/2023\/11\/28\/javascript-zhong-ajax-yuan-li\/","title":{"rendered":"JavaScript \u4e2d Ajax \u539f\u7406\uff1f"},"content":{"rendered":"

Ajax\uff08Asynchronous JavaScript and XML\uff09\u662f\u4e00\u79cd\u4f7f\u7528\u524d\u7aefJavaScript\u548c\u540e\u7aef\u670d\u52a1\u5668\u8fdb\u884c\u6570\u636e\u4ea4\u6362\u7684\u6280\u672f\uff0c\u80fd\u591f\u5728\u4e0d\u5237\u65b0\u6574\u4e2a\u9875\u9762\u7684\u60c5\u51b5\u4e0b\u5411\u670d\u52a1\u5668\u53d1\u9001\u8bf7\u6c42\u5e76\u83b7\u53d6\u6570\u636e\u3002<\/p>\n

<\/span><\/a>Ajax \u539f\u7406\uff1a<\/h3>\n
    \n
  1. \n

    \u521b\u5efa XMLHttpRequest \u5bf9\u8c61<\/strong>\uff1a
    \nJavaScript\u4e2d\u7684XMLHttpRequest\u5bf9\u8c61\u662f\u6267\u884cAjax\u7684\u6838\u5fc3\u3002\u901a\u8fc7\u521b\u5efaXMLHttpRequest\u5bf9\u8c61\uff0c\u53ef\u4ee5\u5728\u540e\u53f0\u4e0e\u670d\u52a1\u5668\u8fdb\u884c\u6570\u636e\u4ea4\u6362\u3002<\/p>\n<\/li>\n

  2. \n

    \u53d1\u9001\u8bf7\u6c42<\/strong>\uff1a
    \n\u4f7f\u7528XMLHttpRequest\u5bf9\u8c61\u7684open()<\/code>\u65b9\u6cd5\u6307\u5b9aHTTP\u8bf7\u6c42\u7684\u7c7b\u578b\uff08GET\u3001POST\u7b49\uff09\u3001URL\u548c\u662f\u5426\u5f02\u6b65\u53d1\u9001\u8bf7\u6c42\u3002<\/p>\n<\/li>\n

  3. \n

    \u63a5\u6536\u54cd\u5e94<\/strong>\uff1a
    \n\u901a\u8fc7XMLHttpRequest\u5bf9\u8c61\u7684onreadystatechange<\/code>\u4e8b\u4ef6\u5904\u7406\u7a0b\u5e8f\uff0c\u5f53\u8bf7\u6c42\u72b6\u6001\u53d1\u751f\u53d8\u5316\u65f6\uff08\u6bd4\u5982\u4ece\u670d\u52a1\u5668\u63a5\u6536\u5230\u54cd\u5e94\uff09\uff0c\u53ef\u4ee5\u5904\u7406\u8fd4\u56de\u7684\u6570\u636e\u3002<\/p>\n<\/li>\n

  4. \n

    \u5904\u7406\u54cd\u5e94<\/strong>\uff1a
    \n\u5f53XMLHttpRequest\u5bf9\u8c61\u7684readyState<\/code>\u5c5e\u6027\u503c\u53d8\u4e3a4\u65f6\uff0c\u8868\u793a\u8bf7\u6c42\u5b8c\u6210\u3002\u53ef\u4ee5\u901a\u8fc7status<\/code>\u5c5e\u6027\u83b7\u53d6HTTP\u72b6\u6001\u7801\uff0c\u5982\u679c\u72b6\u6001\u7801\u4e3a200\uff0c\u5219\u8868\u793a\u8bf7\u6c42\u6210\u529f\u3002\u63a5\u7740\u53ef\u4ee5\u4f7f\u7528responseText<\/code>\u6216responseXML<\/code>\u5c5e\u6027\u83b7\u53d6\u670d\u52a1\u5668\u54cd\u5e94\u7684\u6570\u636e\u3002<\/p>\n<\/li>\n

  5. \n

    \u66f4\u65b0\u9875\u9762<\/strong>\uff08\u53ef\u9009\uff09\uff1a
    \n\u83b7\u53d6\u5230\u670d\u52a1\u5668\u54cd\u5e94\u7684\u6570\u636e\u540e\uff0c\u53ef\u4ee5\u4f7f\u7528JavaScript\u66f4\u65b0\u9875\u9762\u7684\u5185\u5bb9\uff0c\u4f8b\u5982\u52a8\u6001\u6539\u53d8HTML\u5143\u7d20\u3001\u663e\u793a\u6570\u636e\u7b49\u3002<\/p>\n<\/li>\n<\/ol>\n

    <\/span><\/a>\u793a\u4f8b\u4ee3\u7801\uff1a<\/h3>\n
    \/\/ \u521b\u5efa XMLHttpRequest \u5bf9\u8c61\nlet xhr = new XMLHttpRequest();\n\n\/\/ \u76d1\u542c\u72b6\u6001\u53d8\u5316\nxhr.onreadystatechange = function() {\n  if (xhr.readyState === 4) {\n    if (xhr.status === 200) {\n      \/\/ \u5904\u7406\u670d\u52a1\u5668\u54cd\u5e94\u7684\u6570\u636e\n      console.log(xhr.responseText);\n    } else {\n      console.error('\u8bf7\u6c42\u5931\u8d25');\n    }\n  }\n};\n\n\/\/ \u53d1\u9001\u8bf7\u6c42\nxhr.open('GET', 'https:\/\/api.example.com\/data', true);\nxhr.send();\n<\/code><\/pre>\n
    \u8fd9\u4e2a\u793a\u4f8b\u6f14\u793a\u4e86\u4e00\u4e2a\u7b80\u5355\u7684Ajax\u8bf7\u6c42\u8fc7\u7a0b\u3002\u901a\u8fc7XMLHttpRequest\u5bf9\u8c61\u53d1\u9001GET\u8bf7\u6c42\uff0c\u5f53\u72b6\u6001\u53d8\u4e3a4\u65f6\u8868\u793a\u8bf7\u6c42\u5b8c\u6210\uff0c\u5728\u8fd9\u91cc\u901a\u8fc7\u63a7\u5236\u53f0\u8f93\u51fa\u670d\u52a1\u5668\u8fd4\u56de\u7684\u54cd\u5e94\u6570\u636e\u3002<\/p>\n
    \u73b0\u4ee3\u7684JavaScript\u5f00\u53d1\u4e2d\uff0c\u9664\u4e86XMLHttpRequest\uff0c\u8fd8\u6709fetch API<\/code>\u548c\u57fa\u4e8ePromise\u7684axios<\/code>\u7b49\u5de5\u5177\uff0c\u5b83\u4eec\u63d0\u4f9b\u4e86\u66f4\u4fbf\u6377\u3001\u66f4\u7075\u6d3b\u7684\u65b9\u5f0f\u6765\u6267\u884cAjax\u8bf7\u6c42\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
    Ajax\uff08Asynchronous JavaScript and XML\uff09\u662f\u4e00\u79cd\u4f7f\u7528\u524d\u7aefJavaScript\u548c […]<\/p>\n","protected":false},"author":11,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[115],"tags":[],"class_list":["post-9925","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"http:\/\/wx.kaifamiao.info\/index.php\/wp-json\/wp\/v2\/posts\/9925","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/wx.kaifamiao.info\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/wx.kaifamiao.info\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/wx.kaifamiao.info\/index.php\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"http:\/\/wx.kaifamiao.info\/index.php\/wp-json\/wp\/v2\/comments?post=9925"}],"version-history":[{"count":2,"href":"http:\/\/wx.kaifamiao.info\/index.php\/wp-json\/wp\/v2\/posts\/9925\/revisions"}],"predecessor-version":[{"id":13693,"href":"http:\/\/wx.kaifamiao.info\/index.php\/wp-json\/wp\/v2\/posts\/9925\/revisions\/13693"}],"wp:attachment":[{"href":"http:\/\/wx.kaifamiao.info\/index.php\/wp-json\/wp\/v2\/media?parent=9925"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/wx.kaifamiao.info\/index.php\/wp-json\/wp\/v2\/categories?post=9925"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/wx.kaifamiao.info\/index.php\/wp-json\/wp\/v2\/tags?post=9925"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}