HTTP请求

Posted on | In |

HTTP请求

一个HTTP请求一般由四个部分组成

  • HTTP请求的动作或者方法，比如是GET或者POST请求。
    • GET请求. 一般用于信息获取。（一般用来查询）；使用URL传递参数；对发送的数据信息有限制，一般在2000个字符。
    • POST请求。 一般用于修改服务器上的资源。（一般用来修改数据）；对与大小没有限制；
  • 正在请求的URL。你要知道你请求的地址是什么。
  • 请求头，包含一些客户环境，身份验证信息等等。
  • 请求体，也就是请求正文，这里面包含查询的字符串，表单信息等等。

头域详解

HTTP的头域包括通用头、请求头、响应头和实体头四个部分。每个头域由一个域名，冒号（:）和域值三部分组成。

  • 通用头部是客户端和服务器都可以使用的头部，可以在客户端、服务器和其他应用程序之间提供一些非常有用的通用功能，如Date头部。
  • 请求头部是请求报文特有的，它们为服务器提供了一些额外信息，比如客户端希望接收什么类型的数据，如Accept头部。
  • 响应头部便于客户端提供信息，比如，客服端在与哪种类型的服务器进行交互，如Server头部。
  • 实体头部指的是用于应对实体主体部分的头部，比如，可以用实体头部来说明实体主体部分的数据类型，如Content-Type头部。

参考链接

状态码

  • 1** 信息，服务器收到请求，需要请求者继续执行操作
  • 2** 成功，操作被成功接收并处理
  • 3** 重定向，需要进一步的操作以完成请求
  • 4** 客户端错误，请求包含语法错误或无法完成请求
  • 5** 服务器错误，服务器在处理请求的过程中发生了错误

常见状态码

  • 200 – 服务器成功返回网页
  • 404 – 请求的网页不存在
  • 503 – 服务器超时

参考链接

XMLHttpRequest(XHR)对象

兼容IE6及以下版本

1
2
3
4
5
6
7
8
if (window.XMLHttpRequest)
  {// code for all new browsers
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// code for IE5 and IE6
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

XMLHttpRequest发送请求

方法
  • open(merhod, url, async) 建立请求 。async 为是否异步，默认为true
  • send(srting) 发送请求
例子
1
2
3
4
5
6
7
8
9
request.open("GET","get.php",true); 
request.send();
request.open("POST","post.php",true);
request.send();
request.open("POST","create.php",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("name=abigele&sex=female");

XMLHttpRequest取得响应

方法
  • onreadystatechange* 指定当readyState属性改变时的事件处理句柄。只写
  • readyState 返回当前请求的状态，只读.
  • responseBody 将回应信息正文以unsigned byte数组形式返回.只读
  • responseStream 以Ado Stream对象的形式返回响应信息。只读
  • responseText 将响应信息作为字符串返回.只读
  • responseXML 将响应信息格式化为Xml Document对象并返回，只读
  • status 返回当前请求的http状态码.只读
  • statusText 返回当前请求的响应行状态，只读
  • getResponseHeader(headerName) 获取某个请求头
  • getAllResponseHeader() 获取所有请求头
例子
1
2
3
4
5
6
7
8
var request = new XMLHttpRequest();
request.open("GET","get.php",true);
request.send();
request.onreadystatechange = function() {
	if(request.readyState === 4 && request.status === 200) {
		// request.responseText
	}
}

示例代码

  • npm init
  • npm install live-server --save

  • 新建 test.txt

    1
    2
    3
    {
    	"name":"aa"
    }

  • 新建 index.html

    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
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    <!DOCTYPE>
    <html>
    <head>
      <meta charset="UTF-8" />
    </head>
    <style>
      .modal {
        float: left;
        margin-right: 20px;
        border: 1px solid #eee;
        padding: 10;
      }
    </style>
    <body>
      <h1>HTTP请求</h1>
      <div class="modal">
        <h3>responseText</h3>
        <p class="responseText"></p>
      </div>
      <div class="modal">
        <h3>allResponseHeader</h3>
        <p class="requestHeader"></p>
      </div>
      <script>
        let requestData = document.getElementsByClassName("responseText")[0];
        let requestHeader = document.getElementsByClassName("requestHeader")[0];
        let request = new XMLHttpRequest();
        request.open('GET', 'http://127.0.0.1:8080/test.txt');
        request.send();
        request.onreadystatechange = function () {
          console.log(request)
          if (request.readyState == 4) {
            requestData.innerHTML = `<pre>${request.responseText}</pre>`
            requestHeader.innerHTML = `<pre>${request.getAllResponseHeaders()}</pre>`
          }
        }
      </script>
    </body>
    </html>

  • live-server

  • 结果显示
    http请求