本文共 2533 字，大约阅读时间需要 8 分钟。

网页与硬件交互通常采用CGI方式，但除了CGI外，XHR也能有效实现无表单提交的交互。这引出了一个问题：当使用XHR与WEB服务端交互时，除了CGI响应外，服务端还有其他方法可选。

一、XHR的两种请求方式

XHR的POST和GET请求方式与表单提交相似。GET请求会将数据附加在URL中，使用问号”?"分隔，并以”&”符号分隔键值对。例如：

http://example.com/form?a=1&b=2

而POST请求则通过application/x-www-form-urlencoded格式提交数据，这种方式通常用于表单提交。

二、XHR数据的处理

XHR的数据处理可以分为以下几个方面：

1.ुआ एनcerpt

一旦服务器接收到XHR请求，第一步是分析请求方法是否为GET或POST。可以通过检查HTTP请求头中的方法字段来确定。

2.XHR的文件请求处理

对于文件请求，XHR会以类似表单提交的方式发送文件内容，文件数据可以通过FormData对象来包装。服务端需要解析FormData中的数据，提取文件内容以进行处理。

3.响应数据的构建

响应数据需要以HTTP格式返回，通常返回的数据类型为text/html。HTTP响应需要包括以下几个关键部分：

• 状态码：如200 OK
• 内容编码类型：如text/html
• 内容长度：以Content-Length头 FieldType指定

构建HTTP响应头的主要步骤如下：

4.分析和处理FormData数据

对于XHR的POST请求，服务端接收的数据是以multipart/form-data格式传输的。需要对数据进行解析，提取各个参数的值进行处理。这涉及两个主要步骤：

通过对FormData结构体的递归解析，可以逐一提取出每个字段的值。此外，还需要注意键值对的编码方式，特别是在URL编码和处理方面。

5.响应处理逻辑

对于不同的请求类型（GET或POST），响应逻辑有所不同：

• 对于GET请求，需要直接从URL中提取数据并处理。
• 对于POST请求，需要解析FormData中的数据并处理。

三、代码示例分析

function Request() {    var url = document.getElementById("url").value;    var data1 = document.getElementById("data1").value;    var data2 = document.getElementById("data2").value;    var method = document.getElementById("method").value;    if (method === "POST") {        var formData = new FormData();        formData.append("Data1", data1);        formData.append("Data2", data2);    } else if (method === "GET") {        var url = url + "?Data1=" + encodeURIComponent(data1) + "&Data2=" + encodeURIComponent(data2);    } else {        alert(method + "不支持");        return;    }    var xhr = new XMLHttpRequest();    xhr.onreadystatechange = function() {        if (xhr.readyState === 4) {            if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {                callback(xhr.responseText);            } else {                alert(xhr.responseText);            }        }    };    xhr.open(method, url, true);    xhr.send(formData ? formData : null);}

上述代码实现了对FormData数据的发送，适用于两种请求方式。这段代码的核心部分是xhr.send()，其中传递的是FormData对象或null，根据请求方法决定发送方式。

四、服务器端响应实现

五、实施思路总结

在实现上，可以将数据处理分为以下几个步骤：

在实际实现中，需要注意以下几点：

• 数据解析的正确性：确保能够准确读取和解析发送的数据。
• 边界处理的严谨性：避免边界错误对数据解析造成影响。
• 异常处理：考虑异常情况如连接失效、数据解析错误等，并做好合理处理。

最终，通过上述方法，可以有效的实现通过XHR实现Web与硬件的交互，不再受限于传统的CGI方式。

转载地址：http://abzfk.baihongyu.com/