网络请求

基础知识

houdunren.com (opens new window)@ 向军大叔
浏览器天生具发送HTTP请求的能力，比如在在址栏输入内容，提交FORM表单等。本章来学习通过JS程序来管理HTTP请求的能力。
使用JS脚本发送HTTP请求，不会带来页面的刷新，所以用户体验非常好。

#XMLHttpRequest

使用XMLHttpRequest发送请求，是一种存在很久的方案。现代浏览器支持使用fetch的异步请求方式，fetch基于promise异步操作体验更好。

#基本使用

使用XMLHttpRequest 发送请求需要执行以下几步

1. 使用 new XMLHttpRequest创建xhr对象
2. xhr.open 初始化请求参数
3. xhr.send 发送网络请求
4. xhr.onload 监听请求结果
5. xhr.onerror 请求中断等错误发生时的处理

   #响应类型

   通过设置 xhr.responseType 对响应结果进行声明，来对结果自动进行处理。
   下面是可以使用的响应类型

#响应结果

xhr.onload 用于处理响应完毕后的处理
使用以下属性来处理结果

• xhr.status 为HTTP状态码 如 404/422/403等，当为200时为正确响应
• xhr.statusText HTTP状态码内容，200时为ok,404 为Not Found
• xhr.response 服务器端响应的内容

  #使用示例

  const xhr = new XMLHttpRequest()
  xhr.timeout = 5000
  xhr.open(‘GET’, ‘hd.php’)
  xhr.send()
  xhr.onload = function () {
  if (xhr.status == 200) {
  console.log(xhr.response)
  } else {
  console.log(${xhr.status}:${xhr.statusText})
  }
  }
  xhr.onerror = function (error) {
  console.log(error)
  }

  #发送表单

  下面来使用XMLHttpRequest发送POST请求

  #后台服务

  下面创建hd.php后台脚本（你可以使用你喜欢的后台脚本进行测试）
  <?php
  echo $_POST[‘title’];
  然后启动服务器
  php -S localhost:8000
  现在可以在浏览器中访问 http://localhsot:8080/hd.php 请求hd.php

  #前端异步请求