Ajax技术细节

原文

Ajax状态码，xhr.readyState

0：UNSENT 未发送，创建Ajax对象，默认值为0
1：OPENED 执行xhr.open
2：HEADERS_RECEIVED 当前ajax请求已经发送，并且已经接收到服务器端返回的相应头信息
3：LOADING 响应主体内容正在返回
4：DONE 相应主体内容已经返回到客户端

Http网络状态码

HTTP网络状态码，记录当前服务器返回信息的状态xhr.status

200：标识成功状态

以3开头也表示成功，但服务器端做了特殊处理

301：永久转移（永久重定向），应用于域名迁移
302：临时转移（临时重定向，新版本Http中307是临时重定向），用于服务器负载均衡
304：从浏览器缓存中获取数据，把不常更新的数据缓存到浏览器中

以4开头，标识失败状态，多在客户端

400：请求参数错误
401：无权限访问
404：访问地址不存在

以5开头，标识失败状态，多在服务器端

500：Internal Server Error 未知的服务器错误
503：Service Unavailable 服务器超负载

Ajax常用属性和方法

题目：Ajax中总共支持几个方法？

状态

  1. readyState：存储当前Ajax状态码

  2. response/responseText/responseXML：接收服务器返回的相应主体内容

    • responseText最常用，接收的结果为字符串格式（一般服务器返回的数据都是JSON格式字符串）
    • responseXML接收XML文档数据
  3. status：记录服务器端返回的HTTP状态码
  4. statusText：对返回状态码的描述
  5. timeout：设置当前Ajax请求的超时时间

方法

  1. abort()：强制中断Ajax请求
  2. getAllResponseHeaders()：获取全部的响应头信息（获取结果为字符串文本）
  3. getResponseHeader(key)：获取指定属性名的相应头信息
  4. open()：打开一个URL地址
  5. overrideMimeType()：重写数据的MIME类型
  6. send()：发送Ajax请求
  7. setRequestHeader(key,value)：设置请求头信息

事件

  1. onabort()：当Ajax被中断，请求触发此事件
  2. onreadystatechange：Ajax状态发生改变，触发此事件
  3. ontimeout：当Ajax请求超时，触发此事件

JS编码解码

（非加密）正常编码解码

  1. escape/unescape：把中文汉字进行编码解码（一般只有JS支持）
  2. encodeURI/decodeURI：基本所有编程语言都支持
  3. encodeURIComponent/decodeURIComponent

（加密）编码解码

URL问号传递参数，encodeURI不能编码一些特殊字符，只能使用encodeURLComponent处理

  1. 可逆加密
  2. 不可逆加密（基于MD5加密，可能会把MD5加密后的结果二次加密）

Ajax的同步和异步

Ajax任务：发送请求接收到相应主体内容（完整HTTP事务）

  • xhr.send()：任务结束
  • xhr.readyState===4：任务结束

Ajax类库的封装

  • url：请求API地址
  • method：请求方式GET/POST
  • dataTpye：预设结果类型，不影响服务器的返回（服务器一般返回JSON格式字符串），如果预设为json，类库将服务器返回的字符串转换为json对象
  • cache：设置是否清除缓存，只对GET系列请求有效，默认是TRUE不清除缓存，手动设置为FALSE，JQ类库在请求URL的末尾追加一个随机数来清楚缓存
  • data：通过DATA把一些信息传递给服务器（GET请求把DATA中的内容拼接在URL的末尾通过问好传参的方式传递给服务器，POST请求把内容放在请求主体中传递给服务器）（DATA的值可以设置为两种格式：字符串、对象）
  • async：设置同步或异步，默认是TRUE，代表异步，FALSE是同步
  • success：请求成功执行回调函数，并把获取的结果作为实参传递给回调函数
  • error：请求错误触发回调函数
  • complete：完成，触发回调函数

Ajax技术细节的更多相关文章

  1. HTML5 播放 RTSP 视频的实例代码

    目前大多数网络摄像头都是通过 RTSP 协议传输视频流的，但是 HTML 并不标准支持 RTSP 流。本文重点给大家介绍HTML5 播放 RTSP 视频的实例代码，需要的朋友参考下吧

  2. 浅析HTML5中的download属性使用

    这篇文章主要介绍了浅析HTML5中的download属性使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

  3. HTML5 Blob 实现文件下载功能的示例代码

    这篇文章主要介绍了HTML5 Blob 实现文件下载功能的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

  4. web字体加载方案优化小结

    这篇文章主要介绍了web字体加载方案优化小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

  5. ios – 在WKWebView中获取链接URL

    我想在WKWebView中获取tapped链接的url.链接采用自定义格式,可触发应用中的某些操作.例如HTTP：//我的网站/帮助#深层链接对讲.我这样使用KVO：这在第一次点击链接时效果很好.但是,如果我连续两次点击相同的链接,它将不报告链接点击.是否有解决方法来解决这个问题,以便我可以检测每个点击并获取链接？任何关于这个的指针都会很棒！解决方法像这样更改addobserver在observeValue函数中,您可以获得两个值

  6. ios – 加载空白页面的SFSafariViewController

    我正在使用SFSafariViewController在我的iOS应用程序中打开一个URL..它在iOS9上完美运行但在将我的设备更新到iOS10后,它只是在地址栏中加载了一个没有URL的空白页面.甚至safariViewController(控制器：SFSafariViewController,didCompleteInitialLoaddidLoadSuccessfully：Bool)在控制器

  7. ios – 应用更新,NSURL和文档目录

    我应该存储相对图像网址或字符串来表示这些资源的位置,还是应该可以存储最终成为绝对网址的内容？

  8. 有没有办法知道购买哪个iTunes帐户？ – iOS

    我的应用程序提供应用内购买非消耗类型.该应用程序具有登录功能.是否可以根据登录用户购买我的应用程序？

  9. ios – 从Facebook这样的任何URL获取特定图像

    我的问题看起来可能与其他问题类似,但事实并非如此.(据我所知).我无法理解如何从任何URL获取特定图像像Facebook一样,我无法向您显示屏幕截图,因为我没有真正的设备.但我可以告诉你Skype的屏幕截图来自MAC.任何帮助将不胜感激.thanks.编辑：我使用这个link获得了favicon,但它非常小我想要更大的尺寸.解决方法最后,我得到了答案.这可能对你有帮助,这就是为什么我发布这个答案.

  10. ios – 资产目录与文件夹参考：何时使用其中一个？

    我可以将文件放入Assets.xcassets,或者我可以将文件放入文件夹引用.我何时会选择一个而不是另一个？

随机推荐

  1. xe-ajax-mock 前端虚拟服务

    最新版本见Github，点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件；对于前后端分离的开发模式，ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装，XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js，更小的压缩版本，可以带来更快的速度体验。

  2. vue 使用 xe-ajax

    安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装，VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js，更小的压缩版本，可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

  3. AJAX POST数据中文乱码解决

    前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

  4. Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多，其中一个是利用CORS，而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的，最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止，相当于仅仅完成了预检，还没发送真正的请求呢。

  5. form提交时，ajax上传文件并更新到<input>中的value字段

  6. ajax的cache作用

    filePath="+escape;},error:{alert;}});解决方案：1.加cache:false2.url加随机数正常代码：网上高人解读：cache的作用就是第一次请求完毕之后，如果再次去请求，可以直接从缓存里面读取而不是再到服务器端读取。

  7. 浅谈ajax上传文件属性contentType = false

    默认值为contentType="application/x-www-form-urlencoded".在默认情况下，内容编码类型满足大多数情况。在这里，我们主要谈谈contentType=false.在使用ajax上传文件时：在其中先封装了一个formData对象，然后使用post方法将文件传给服务器。说到这，我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗？这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

  8. 909422229_ajaxFileUpload上传文件

    ajaxFileUpload.js很多同名的，因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来，以后不用到处找了。语法：$.ajaxFileUploadoptions参数说明：1、url上传处理程序地址。2，fileElementId需要上传的文件域的ID，即的ID。3，secureuri是否启用安全提交，默认为false。4，dataType服务器返回的数据类型。6，error

  9. AJAX-Cache：一款好用的Ajax缓存插件

    原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段，在频繁的异步请求业务中，我们往往需要利用“缓存”提升界面响应速度，减少网络资源占用。AJAX-Cache是一款jQuery缓存插件，可以为$.ajax()方法扩展缓存功能。

  10. jsf – Ajax update/render在已渲染属性的组件上不起作用

    我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的，我该如何解决呢？必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位，那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部