当前位置: 首页 > Web前端 > HTML

[翻译]SendingFormsviaJavaScript

时间:2023-04-02 18:10:25 HTML

系列文章讲解原文在[SendingFormData]()中,一个HTML表单可以声明式的发送一个HTTP请求。但是表单也可以使用JavaScript来准备HTTP请求。本文探讨了如何做到这一点。表单,而不仅仅是表单随着开放式Web应用程序的出现,提供HTML表单而不是文本表单供用户填写变得越来越普遍。而越来越多的开发者也获得了数据传输的控制权。获得对数据传输的控制标准的HTML表单提交会加载数据发送到的URL,这意味着在浏览器窗口中重新加载整个页面。并且如果避免了页面的重新加载,将避免页面闪烁和网络延迟,从而提供更流畅的用户体验。在许多现代UI设计中,HTML表单仅用于收集用户输入。当用户想要发送数据时,Web应用程序会控制并在后台异步发送数据,只更新需要更改的UI部分。可以异步发送任意数据的技术叫做AJAX,全称是“AsynchronousJavaScriptandXML”。与传统的表单处理不同,AJAX使用XMLHttpRequest(XHR)DOM对象,它可以创建HTTP请求、发送请求和处理结果。注意:旧的AJAX技术可能不使用XMLHttpRequest。例如,JSONP与eval()函数结合使用。虽然此方法有效,但出于严重的安全问题,不建议使用。所以除非兼容那些特别老旧,不支持XMLHttpRequest或者JSON的浏览器,否则尽量避免使用这个技术。由于历史原因,XMLHttpRequest最初设计用于获取和发送以XML交换的数据。但是现在JSON已经取代了XML并且更加常用。但是,XML和JSON都不符合作为表单数据请求的编码。表单数据(application/x-www-form-urlencoded)用于构建键值对的URL编码列表。如果要传输二进制数据,HTTP请求将被重塑为multipart/form-data。如果您控制前端(在浏览器中运行的代码)和后端(在服务器上运行的代码),您可以发送JSON或XML并根据需要处理它们。但是如果你使用的是第三方服务,那就没那么容易了,因为有些服务只接受表单数据。当然,也有使用表单数据处理更方便的情况,比如当数据是键值对或者二进制数据时,可以用现成的后端工具处理,不需要额外的代码.那么,具体如何发送数据呢?发送表单数据目前发送表单数据的方式有3种,既有老技术,也有新特性FormData对象,下面我们来深入了解一下。在隐藏的iframe中构建DOM发送表单数据的最古老的方法是使用DOMAPI构建表单,然后将数据发送到隐藏的