【深入理解ajax系列第四篇——FormData】的更多相关文章

深入理解ajax系列第四篇——FormData

前面的话 现代Web应用中频繁使用的一项功能就是表单数据的序列化,XMLHttpRequest 2级为此定义了FormData类型.FormData为序列化表单以及创建与表单格式相同的数据提供了便利.本文将先介绍表单编码,然后过渡到表单序列化,最后引出FormData的核心概念 表单编码 当用户提交表单时,表单中的数据(每个表单元素的名字和值)编码到一个字符串中并随请求发送.默认情况下,HTML表单通过POST方法发送给服务器,而编码后的表单数据则用做请求主体 对表单数据使用的编码方案相对简单:…

深入理解ajax系列第四篇——请求实例

前面的话 在使用ajax的过程中,常用的请求方式是GET和POST两种.本文将以实例的形式来详细说明这两种请求方式 GET GET是最常见的请求类型,最常用于向服务器查询某些信息.必要时,可以将查询字符串参数追加到URL的末尾,以便将信息发送给服务器.对于XHR而言,位于传入open()方法的URL末尾的查询字符串必须经过正确的编码才行 使用GET请求经常会发生的一个错误,就是查询字符串的格式有问题.查询字符串中每个参数的名称和值都必须使用encodeURIComponent()进行编码,然后才…

深入理解ajax系列第四篇

前面的话 现代Web应用中频繁使用的一项功能就是表单数据的序列化,XMLHttpRequest 2级为此定义了FormData类型.FormData为序列化表单以及创建与表单格式相同的数据提供了便利.本文将先介绍表单编码,然后过渡到表单序列化,最后引出FormData的核心概念 表单编码 当用户提交表单时,表单中的数据(每个表单元素的名字和值)编码到一个字符串中并随请求发送.默认情况下,HTML表单通过POST方法发送给服务器,而编码后的表单数据则用做请求主体 对表单数据使用的编码方案相对简单:…

深入理解ajax系列第八篇——表单提交

前面的话 在以前,网站的用户与后端交互的主要方式是通过HTML表单的使用.表单的引入在1993年,由于其简单性和易用性,直到电子商务出现之前一直保持着重要位置.理解表单提交,对于更深入地理解ajax是有好处的.下面将详细介绍表单形式的交互 建立表单 表单处理是一个多线程.首先创建一个表单,以供用户输入详细的请求信息.接着,输入的数据被发送到网页服务器,在服务器里这些数据得到编译和错误检测.如果PHP代码标识出一个或多个需要重要输入的字段,则带有相关错误信息的表单会重新显示.当精确的输入信息满足代…

深入理解ajax系列第八篇

前面的话 在以前,网站的用户与后端交互的主要方式是通过HTML表单的使用.表单的引入在1993年,由于其简单性和易用性,直到电子商务出现之前一直保持着重要位置.理解表单提交,对于更深入地理解ajax是有好处的.下面将详细介绍表单形式的交互 建立表单 表单处理是一个多线程.首先创建一个表单,以供用户输入详细的请求信息.接着,输入的数据被发送到网页服务器,在服务器里这些数据得到编译和错误检测.如果PHP代码标识出一个或多个需要重要输入的字段,则带有相关错误信息的表单会重新显示.当精确的输入信息满足代…

深入理解ajax系列第三篇——响应解码

前面的话 我们接收到的响应主体类型可以是多种形式的,包括字符串String.ArrayBuffer对象.二进制Blob对象.JSON对象.javascirpt文件及表示XML文档的Document对象等.下面将针对不同的主体类型,进行相应的响应解码 属性 在介绍响应解码之前,要先了解XHR对象的属性.一般地,如果接受的数据是字符串,使用responseText即可,这也是最常用的用于接收数据的属性.但如果获取了其他类型的数据,使用responseText可能就不太合适了 [responseTex…

深入理解ajax系列第七篇——传递JSON

前面的话 虽然ajax全称是asynchronous javascript and XML.但目前使用ajax技术时,传递JSON已经成为事实上的标准.因为相较于XML而言,JSON简单且方便.本文将上一篇中的实例进行改写,以JSON的方式来进行数据传递 前端页面 <!-- 前端页面 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"…

深入理解ajax系列第七篇

前面的话 虽然ajax全称是asynchronous javascript and XML.但目前使用ajax技术时,传递JSON已经成为事实上的标准.因为相较于XML而言,JSON简单且方便.本文将上一篇中的实例进行改写,以JSON的方式来进行数据传递 前端页面 <!-- 前端页面 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"…

深入理解ajax系列第三篇

前面的话 我们接收到的响应主体类型可以是多种形式的,包括字符串String.ArrayBuffer对象.二进制Blob对象.JSON对象.javascirpt文件及表示XML文档的Document对象等.下面将针对不同的主体类型,进行相应的响应解码 属性 在介绍响应解码之前,要先了解XHR对象的属性.一般地,如果接受的数据是字符串,使用responseText即可,这也是最常用的用于接收数据的属性.但如果获取了其他类型的数据,使用responseText可能就不太合适了 [responseTex…

深入理解ajax系列第三篇——头部信息

前面的话 每个HTTP请求和响应都会带有相应的头部信息,其中有的对开发人员有用.XHR对象提供了操作头部信息的方法.本文将详细介绍HTTP的头部信息 默认信息 默认情况下,在发送XHR请求的同时,还会发送下列头部信息 Accept: 浏览器能够处理的内容类型 Accept-Charset: 浏览器能够显示的字符集 Accept-Encoding: 浏览器能够处理的压缩编码 Accept-Language: 浏览器当前设置的语言 Connection: 浏览器与服务器之间连接的类型 Cookie:…

深入理解ajax系列第五篇——进度事件

前面的话 一般地,使用readystatechange事件探测HTTP请求的完成.XHR2规范草案定义了进度事件Progress Events规范,XMLHttpRequest对象在请求的不同阶段触发不同类型的事件,所以它不再需要检査readyState属性.这个草案定义了与客户端服务器通信有关的事件.这些事件最早其实只针对XHR操作,但目前也被其他API(如File API)借鉴.本文将详细介绍进度事件 基础 有以下6个进度事件 loadstart:在接收到响应数据的第一个字节时触发 prog…

深入理解ajax系列第六篇——头部信息

前面的话 每个HTTP请求和响应都会带有相应的头部信息,其中有的对开发人员有用.XHR对象提供了操作头部信息的方法.本文将详细介绍HTTP的头部信息 默认信息 默认情况下,在发送XHR请求的同时,还会发送下列头部信息 Accept: 浏览器能够处理的内容类型 Accept-Charset: 浏览器能够显示的字符集 Accept-Encoding: 浏览器能够处理的压缩编码 Accept-Language: 浏览器当前设置的语言 Connection: 浏览器与服务器之间连接的类型 Cookie:…

深入理解ajax系列第六篇

前面的话 每个HTTP请求和响应都会带有相应的头部信息,其中有的对开发人员有用.XHR对象提供了操作头部信息的方法.本文将详细介绍HTTP的头部信息 默认信息 默认情况下,在发送XHR请求的同时,还会发送下列头部信息 Accept: 浏览器能够处理的内容类型 Accept-Charset: 浏览器能够显示的字符集 Accept-Encoding: 浏览器能够处理的压缩编码 Accept-Language: 浏览器当前设置的语言 Connection: 浏览器与服务器之间连接的类型 Cookie:…

深入理解ajax系列第五篇

前面的话 一般地,使用readystatechange事件探测HTTP请求的完成.XHR2规范草案定义了进度事件Progress Events规范,XMLHttpRequest对象在请求的不同阶段触发不同类型的事件,所以它不再需要检査readyState属性.这个草案定义了与客户端服务器通信有关的事件.这些事件最早其实只针对XHR操作,但目前也被其他API(如File API)借鉴.本文将详细介绍进度事件 基础 有以下6个进度事件 loadstart:在接收到响应数据的第一个字节时触发 prog…

深入理解javascript作用域系列第四篇——块作用域

× 目录 [1]let [2]const [3]try 前面的话 尽管函数作用域是最常见的作用域单元,也是现行大多数javascript最普遍的设计方法,但其他类型的作用域单元也是存在的,并且通过使用其他类型的作用域单元甚至可以实现维护起来更加优秀.简洁的代码,比如块作用域.随着ES6的推广,块作用域也将用得越来越广泛.本文是深入理解javascript作用域系列第四篇——块作用域 let for (var i= 0; i<10; i++) { console.log(i); } 上面这段是很熟…

深入理解javascript作用域系列第四篇

前面的话 尽管函数作用域是最常见的作用域单元,也是现行大多数javascript最普遍的设计方法,但其他类型的作用域单元也是存在的,并且通过使用其他类型的作用域单元甚至可以实现维护起来更加优秀.简洁的代码,比如块作用域.随着ES6的推广,块作用域也将用得越来越广泛.本文是深入理解javascript作用域系列第四篇——块作用域 let for (var i= 0; i<10; i++) { console.log(i); } 上面这段是很熟悉的循环代码,通常是因为只想在for循环内部的上下文中使…

深入理解ajax系列第一篇——XHR对象

× 目录 [1]创建对象 [2]发送请求 [3]接收响应[4]异步处理[5]实例演示 前面的话 ajax是asynchronous javascript and XML的简写,中文翻译是异步的javascript和XML,这一技术能够向服务器请求额外的数据而无须卸载页面,会带来更好的用户体验.虽然名字中包含XML,但ajax通信与数据格式无关.下面将详细介绍ajax的内容 创建 ajax技术的核心是XMLHttpRequest对象(简称XHR),这是由微软首先引入的一个特性,其他浏览器提供商后来…

前端工程师技能之photoshop巧用系列第四篇——图片格式

× 目录 [1]图片格式 [2]保存设置 前面的话 对于前端来说,图片格式是需要重要掌握的知识.本文是photoshop巧用系列第四篇——图片格式 图片格式 目前在前端的开发中常用的图片格式有jpg.png.gif,png分为png8和png24.最近svg格式也开始流行起来 gif gif是无损的,具有文件小.支持动画及透明的优点.但gif无法支持半透明,且仅支持8bit的索引色,即在整个图片中,只能存在256种不同的颜色 但实际上,gif是一种逐渐被抛弃的图片格式.png格式的出现就是为了替…

深入理解JavaScript系列（结局篇）

介绍 最近几个月忙得实在是不可开交,终于把<深入理解JavaScript系列>的最后两篇“补全”了,所谓的全是不准确的,因为很多内容都没有写呢,比如高性能.Ajax安全.DOM详解.JavaScript架构等等.但因为经历所限,加上大叔希望接下来写点其它东西,所以此篇文字就暂且当前完结篇的总结吧,以后有时间的话,可以继续加上一些未涉及的专题内容. 网络文章来源 本系列文章参考了大量的互联网网站,在此向各位网站拥有者.博主.提到的以及未提到的作者们说一声:多谢感谢了. 本系列文章主要参考了如下站…

深入理解ajax系列第九篇——jQuery中的ajax

前面的话 jQuery提供了一些日常开发中需要的快捷操作,例如load.ajax.get和post等,使用jQuery开发ajax将变得极其简单.这样开发人员就可以将程序开发集中在业务和用户体验上,而不需要理会那么繁琐的XMLHTTPRequest对象.jQuery对ajax操作进行了封装,在jQuery中$.ajax()属性最底层的方法,第2层是load().$.get()和$.post()方法,第3层是$.getScript()和$.getJSON()方法.下面将详细介绍jQuery中的aj…

深入理解ajax系列第二篇——请求方式

前面的话 在上一篇中,概要地介绍了XHR对象的使用.本文将详细介绍使用XHR对象发送请求的两种方式——GET和POST.下面将以实例的形式来详细说明 GET GET是最常见的请求类型,最常用于向服务器查询某些信息,它适用于当URL完全指定请求资源,当请求对服务器没有任何副作用以及当服务器的响应是可缓存的情况下 [数据发送] 使用GET方式发送请求时,数据被追加到open()方法中URL的末尾 数据以问号开始,名和值之间用等号链接,名值对之间用和号(&)分隔.使用GET方式发送的数据常常被称为查询…

深入理解ajax系列第二篇

前面的话 在上一篇中,概要地介绍了XHR对象的使用.本文将详细介绍使用XHR对象发送请求的两种方式——GET和POST.下面将以实例的形式来详细说明 GET GET是最常见的请求类型,最常用于向服务器查询某些信息,它适用于当URL完全指定请求资源,当请求对服务器没有任何副作用以及当服务器的响应是可缓存的情况下 [数据发送] 使用GET方式发送请求时,数据被追加到open()方法中URL的末尾 数据以问号开始,名和值之间用等号链接,名值对之间用和号(&)分隔.使用GET方式发送的数据常常被称为查询…

深入理解ajax系列第九篇

前面的话 jQuery提供了一些日常开发中需要的快捷操作,例如load.ajax.get和post等,使用jQuery开发ajax将变得极其简单.这样开发人员就可以将程序开发集中在业务和用户体验上,而不需要理会那么繁琐的XMLHTTPRequest对象.jQuery对ajax操作进行了封装,在jQuery中$.ajax()属性最底层的方法,第2层是load().$.get()和$.post()方法,第3层是$.getScript()和$.getJSON()方法.下面将详细介绍jQuery中的aj…

深入理解javascript函数系列第四篇——ES6函数扩展

× 目录 [1]参数默认值 [2]rest参数 [3]扩展运算符[4]箭头函数 前面的话 ES6标准关于函数扩展部分,主要涉及以下四个方面:参数默认值.rest参数.扩展运算符和箭头函数 参数默认值 一般地,为参数设置默认值需进行如下设置 function log(x, y) { y = y || 'World'; console.log(x, y); } 但这样设置实际上是有问题的,如果y的值本身是假值(包括false.undefined.null.''.0.-0.NaN),则无法取得本身值…

深入理解 ajax系列第一篇（XHR 对象）

1999年,微软公司发布了IE5, 第一次引入新功能:允许javascript 脚本向服务器发起 hffp 请求.这个功能方式并没有被引起注意,知道2004年 Gmail 发布和 Google Map 发布,才引起广泛关注.2005 年2月,ajax 这个词第一次正式提出,指围绕这个功能进行开发一整套做法,从此,ajax称为脚本发起http通信的代名词, W3C也在 2006 年发布了它的国际标准. 概述: Ajax是 asynchronous javasricot and XM;L 的简写,中…

深入理解DOM事件类型系列第四篇——剪贴板事件

× 目录 [1]定义 [2]对象方法 [3]应用 前面的话 剪贴板操作可能看起来不起眼,但是却十分有用,可以增强用户体验,方便用户操作.本文将详细介绍剪贴板事件 定义 剪贴板操作包括剪切(cut).复制(copy)和粘贴(paste)这三个操作,快捷键分别是ctrl+x.ctrl+c.ctrl+v.当然也可以使用鼠标右键菜单进行操作 关于这3个操作共对应下列6个剪贴板事件 copy:在发生复制操作时触发 cut:在发生剪切操作时触发 paste:在发生粘贴操作时触发 IE浏览器只有在文本中选定字…

深入理解DOM事件机制系列第四篇——事件模拟

× 目录 [1]引入 [2]模拟机制 [3]自定义事件 前面的话 事件是网页中某个特别的瞬间,经常由用户操作或通过其他浏览器功能来触发.但实际上,也可以使用javascript在任意时刻来触发特定的事件,而此时的事件就如同浏览器创建的事件一样.本文将详细介绍事件模拟 引入 以下面的实际需求为例,来详细说明事件模拟的使用.按钮一的点击效果是弹出1.而我们通过新增按钮二来模拟按钮一的效果 <button id="btn1">按钮一</button> <scri…

深入理解脚本化CSS系列第四篇——脚本化样式表

× 目录 [1]CSSStyleSheet [2]CSSRule 前面的话 关于脚本化CSS,查询样式时,查询的是计算样式:设置单个样式时,设置的是行间样式:设置多个样式时,设置的是CSS类名.脚本化样式表当然也是一种脚本化CSS的技术,虽然不经常使用,但有时却非常有用.下面将详细介绍脚本化样式表的内容 CSSStyleSheet CSSStyleSheet类型表示的是样式表.我们知道,引入CSS一共有3种方式,包括行间样式.内部样式和外部样式.其中,内部样式和外部样式分别通过<style>和…

深入理解javascript函数进阶系列第四篇——惰性函数

前面的话 惰性函数表示函数执行的分支只会在函数第一次调用的时候执行,在第一次调用过程中,该函数会被覆盖为另一个按照合适方式执行的函数,这样任何对原函数的调用就不用再经过执行的分支了.本文将详细介绍惰性函数 使用背景 因为各浏览器之间的行为的差异,经常会在函数中包含了大量的if语句,以检查浏览器特性,解决不同浏览器的兼容问题.比如,最常见的为dom节点添加事件的函数 function addEvent(type, element, fun) { if (element.addEventListen…

javascript面向对象系列第四篇——选项卡的实现

前面的话 面向对象的应用并非只是读几本书那么容易,需要有大量的工程实践做基础才能真正理解并学会使用它.本文将用面向对象的技术来制作一个简单的选项卡 图示说明 由图示结果看到,这是一个非常简单的选项卡.三个控制按钮利用点击事件分别控制三张不同的选项卡.选项卡用文字和背景颜色区分,控制按钮用轮廓outline区分 HTML代码 [1]使用行间样式来引入CSS的扩展性不高,需要根据实际情况谨慎使用 [2]在a标签中使用javascript:;来阻止默认的页面跳转行为 [3]给最外层div元素设置id属…