Ajax技术细节

trigkit4 发布于2019-08-22 17:04 / 2308人阅读

摘要：状态码，未发送，创建对象，默认值为执行当前请求已经发送，并且已经接收到服务器端返回的相应头信息响应主体内容正在返回相应主体内容已经返回到客户端网络状态码网络状态码，记录当前服务器返回信息的状态标识成功状态以开头也表示成功，但服务器端做了特殊

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中总共支持几个方法？

状态

readyState：存储当前Ajax状态码

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

responseText最常用，接收的结果为字符串格式（一般服务器返回的数据都是JSON格式字符串）

responseXML接收XML文档数据

status：记录服务器端返回的HTTP状态码

statusText：对返回状态码的描述

timeout：设置当前Ajax请求的超时时间

方法

abort()：强制中断Ajax请求

getAllResponseHeaders()：获取全部的响应头信息（获取结果为字符串文本）

getResponseHeader(key)：获取指定属性名的相应头信息

open()：打开一个URL地址

overrideMimeType()：重写数据的MIME类型

send()：发送Ajax请求

setRequestHeader(key,value)：设置请求头信息

事件

onabort()：当Ajax被中断，请求触发此事件

onreadystatechange：Ajax状态发生改变，触发此事件

ontimeout：当Ajax请求超时，触发此事件

JS编码解码

（非加密）正常编码解码

escape/unescape：把中文汉字进行编码解码（一般只有JS支持）

encodeURI/decodeURI：基本所有编程语言都支持

encodeURIComponent/decodeURIComponent

（加密）编码解码

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

可逆加密

不可逆加密（基于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：完成，触发回调函数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94818.html

几种Ajax技术

摘要：今天我来谈谈技术。我简要罗列一下几种常见的技术动态脚本注入和图片信标技术接下来我简要谈谈我对这几种技术的理解。该特性可以实现无阻塞加载脚本技术。和动态脚本注入类似，技术也有可跨域和无法发送非请求的问题。目前使用最多的技术手段就是利用技术。今天我来谈谈Ajax技术。 Ajax是一种与服务器通信而无需重载页面的方法。数据可以从服务器获取或者发给服务器。 Ajax和异步分不开，但是本文重点...

Nosee 2019-08-22 10:34 评论0 收藏0
再也不学AJAX了！（三）跨域获取资源 ② - JSONP & CORS

摘要：浏览器的同源策略固然保障了互联网世界的数据隐私与数据安全，但是如果当我们需要使用跨域请求资源时，同源策略又会成为开发者的阻碍。我们之前提到过，如果想要绕过浏览器同源策略，实现使用技术跨域获取资源，需要服务端和客户端的协同合作。浏览器的同源策略固然保障了互联网世界的数据隐私与数据安全，但是如果当我们需要使用AJAX跨域请求资源时，同源策略又会成为开发者的阻碍。在本文中，我们会简单介绍需...

enda 2019-08-21 17:55 评论0 收藏0
Promise使用细节

摘要：应用把一个异步操作和定时器放在一起。如果定时器先触发就提示用户超时用户超时什么是值穿透或者期望传入一个函数如果不是函数会发生值穿透和的第二个参数的区别比较类似是一个语法糖相当于还有一点区别就是如果第一个报错第二个无法捕获。 Promise使用细节使用promise需要注意的几点: 1.如何用promise实现并行的异步 (Promise.all配合.map) Promise.all...

fnngj 2019-08-22 16:31 评论0 收藏0
JavaScript考点之一，AJAX总结（一），AJAX概述

摘要：即同步请求，浏览器需要等待服务器处理请求，导致了浏览器端的阻塞。这使得应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变的信息。引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。前言博主博客：Stillwater的博客知乎专栏：前端汪汪本文为作者原创转载请注明出处： http://hiztx.top/2017/01/11/a......

ermaoL 2019-08-20 13:40 评论0 收藏0
再也不学AJAX了！（一）AJAX概述

摘要：需要注意的是，并不是的替代品，两者各自有其适应的场景。但为了方便交流，我们通常将获取资源的一方称为客户端主要的工具是浏览器，而将派发资源的一方称为服务端又称为服务器。它可以帮助我们为之后概念细节的学习打下良好基础。再也不学AJAX了是一个与AJAX主题相关的文章系列，包含以下三个部分的内容： AJAX概述：主要回答AJAX是什么这个问题；使用AJAX：介绍如何通过JavaSc...

neu 2019-08-21 17:49 评论0 收藏0