HTTP之ajax请求
|
1,792
|
0
|
前端开发类

1003 字
|
5 分钟

AJAX是什么？

全名：

Asynchronous JavaScript and XML，异步的JavaScript与XML技术，是‘浏览器端’网页开发技术。

与传统的网页请求区别：

传统的网页请求是允许用户操作表单，提交表单时向服务器发送一个请求；服务器接收到表单并处理表单数据，给用户返回一个新的网页（包括用户修改与未修改的部分），会造成网络资源的浪费，自然数据处理速度也很慢。AJAX的出现改变了这一局面，AJAX可以仅发送并取回必须的（变化的）数据，在客户端使用JavaScript处理取回的数据。大大的减少了数据的发送与请求，加快了服务器的响应速度。

进一步减少数据量：

使用JSON格式的数据，形成AJAJ，客户端与服务器也无需异步了。

常见格式：

// 知识点：Content-Type 当前内容的MIME类型（对互联网邮件的扩展）

Content-Type 请求体的 多媒体类型 （用于POST和PUT请求中）

//知识点：MIME（多用途互联网邮件扩展）

支持：

  • 非ASCII字符文本；
  • 非文本格式附件（二进制、声音、图像等）；
  • 由多部分（multiple parts）组成的消息体；
  • 包含非ASCII字符的头信息（Header information）。这个标准被定义在 RFC 2045、RFC 2046、RFC 2047、RFC 2048、RFC 2049 等RFC中。

内容类型（Content-Type），这个头部领域用于指定消息的类型。一般以下面的形式出现：

Content-Type: [type]/[subtype]; parameter

type有下面的形式：

  • Text：用于标准化地表示的文本信息，文本消息可以是多种字符集和或者多种格式的；
  • Multipart：用于连接消息体的多个部分构成一个消息，这些部分可以是不同类型的数据；
  • Application：用于传输应用程序数据或者二进制数据；
  • Message：用于包装一个E-mail消息；
  • Image：用于传输静态图片数据；
  • Audio：用于传输音频或者音声数据；
  • Video：用于传输动态影像数据，可以是与音频编辑在一起的视频数据格式。

常用的subtype:

  • text/plain（纯文本）
  • text/html（HTML文档）
  • application/xhtml+xml（XHTML文档）
  • image/gif（GIF图像）
  • image/jpeg（JPEG图像）【PHP中为：image/pjpeg】
  • image/png（PNG图像）【PHP中为：image/x-png】
  • video/mpeg（MPEG动画）
  • application/octet-stream（任意的二进制数据）
  • application/pdf（PDF文档）
  • application/msword（Microsoft Word文件）
  • application/vnd.wap.xhtml+xml (wap1.0+)
  • application/xhtml+xml (wap2.0+)
  • message/rfc822（RFC 822形式）
  • multipart/alternative（HTML邮件的HTML形式和纯文本形式，相同内容使用不同形式表示）
  • application/x-www-form-urlencoded（使用HTTP的POST方法提交的表单）
  • multipart/form-data（同上，但主要用于表单提交时伴随文件上传的场合）

简单请求：

post 请求
常用请求头设置：
    content-Type：application/x-www-form-urlencoded;         charset=UTF-8
get 请求
content-Type无要求

复杂请求：

使用JSON数据：
{
    "请求头设置": "content-Type : 'applycation/json'；",
    "数据处理": "JSON.stringify()【将数据转为JSON字符串】，JSON.parse()【解析JSON字符串数据】"
}

// 知识点：FormData发送数据

FormData.append() // 向 FormData 中添加新的属性值，FormData 对应的属性值存在也不会覆盖原值，而是新增一个值，以数组的形式传递给后台。如果属性不存在则新增一项属性值。
FormData.get() // 获取第一个与给定关键词关联的值，举个栗子：FormData.get('yourkey')。

更多api见https://developer.mozilla.org/zh-CN/docs/Web/API/FormData

文件上传：

请求头设置content-Type : 'multipart/form-data'；

PUT 、DELETE等请求

存在的问题

异步请求，多请求，响应顺序不保证

异步请求是加快了请求速度，但也由于异步向服务器请求，对服务器来言与传统请求并无不同，但是由于是异步请求，无法保证哪一个请求先获得服务器响应。这必然会造成应用程序的多进程和多线程的竞争问题，所以必须手动处理JavaScript以保证请求，因此增加了程序员的负担，已知的自动处理此问题之开发框架似乎只有ZK（后台处理）。

上一篇
下一篇