XMLHttpRequest之API详解 Ajax 的核心是 JavaScript 对象 XmlHttpRequest。...onreadystatechange属性 当XMLHttpRequest对象的状态改变时会调用的一个函数. readyState属性 对于XMLHttpRequest对象，它有一个属性readyState...,它有五个状态 0创建XMLHttpRequest对象. 1当open时 2当send时 3响应头已经返回，但响应正文没有完成，也就是响应没有完全完成. 4响应完成了 一般情况下,在回调的函数中，我们都是判断...json格式 JSON结构有两种结构 json简单说就是javascript中的对象和数组，所以这两种结构就是对象和数组两种结构，通过这两种结构可以表示各种复杂的结构 u 对象：对象在js中表示为“{}...-2.4-jdk15.jar jsonlib常用api 数组,Collection集合转换成json数据使用 JsonArray.fromObject(对象); Map，javaBean转换成json数据使用
JSON数据文本 JSON(javascript object notation)全称是javascript对象表示法，它是一种数据交换的文本格式，而不是一种编程语言，用于读取结构化数据，2001年由Douglas...也可以是复杂数据类型的值 JSON中对象的键名必须放在双引号里面，因为JSON不是javascript语句，所以没有末尾的分号 说明︰同一个对象中不应该出现两个同名属性 数组 数组也是一种复杂数据类型，...对象，但是，eval()可以执行不符合JSON格式的代码，有可能会包含恶意代码，所以尽量少用 渲染数据，渲染的方式有很多种，比较简写的一般是使用字符串循环遍历来进行拼接后传入html，示例代码 <div...回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数中的JSON数据。 // 封装JSONP function getJSONP(url, callback) { if (!...-> 将数据传出到回调函数供我们使用 -> 删除掉污染的src和函数等 所以JSONP并不是真正的ajax，利用的是调用js文件时则不受跨域的影响。
1.如果obj里面有时间对象，则JSON.stringify后再JSON.parse的结果，时间将只是字符串的形式，而不是对象的形式2.如果obj里有RegExp(正则表达式的缩写)、Error对象，则序列化的结果将只得到空对象...同步和异步的区别同步指的是当一个进程在执行某个请求时，如果这个请求需要等待一段时间才能返回，那么这个进程会一直等待下去，直到消息返回为止再继续向下执行。...异步指的是当一个进程在执行某个请求时，如果这个请求需要等待一段时间才能返回，这个时候进程会继续往下执行，不会阻塞等待消息的返回，当消息返回时系统再通知进程进行处理。...常见的类数组对象有 arguments 和 DOM 方法的返回结果，函数参数也可以被看作是类数组对象，因为它含有 length属性值，代表可接收的参数个数。...[i] = obj[i]; } return cloneObj;}深克隆：考虑基础类型引用类型RegExp、Date、函数 不是 JSON 安全的会丢失 constructor，所有的构造函数都指向
API 分类 3.1 REST API(restful) RESTful 接口设计规范 发送请求进行 CRUD 哪个操作由请求方式来决定 同一个请求路径可以进行多个操作 请求方式会用到 GET / POST...query 参数 两种参数区别：query 参数是从所有的数据中筛选，所以最后是数组的形式；params 参数则是特定查找的形式，所以最后是对象的形式 使用 axios 请求 REST 接口...介绍 XMLHttpRequest（XHR）对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。...ajax 引擎帮忙发送) 浏览器端发送请求，只有 XHR 或 fetch 发出的才是 ajax 请求，其他的都不是 ajax 请求 浏览器端接收到响应(一般请求浏览器会自动更新页面，而 ajax...常用 API XMLHttpRequest()：创建 XHR 对象的构造函数 status：响应状态码，如 200、404 等 statusText：响应状态文本 readyState：标识请求状态的只读属性
XMLHttpRequest可以以异步方式的请求数据处理程序, 可实现对网页的部分更新， 而不是刷新整个页面 XMLHttpRequest对象 浏览器内建对象，用于与服务器通信(交换数据) ， 由此我们便可实现对网页的部分更新...，而不是刷新整个页面。...对象的当前状态 readyState有五种可能的值： xhr.readyState = 0时，UNSENT open尚未调用 xhr.readyState = 1时，OPENED open已调用 xhr.readyState...//obj就变成了一个js对象 var obj = JSON.parse(json);// {a: 'Hello', b: 'World'} 使用json进行数据传输 思考： js有一个对象...当服务端返回图片数量为0时，提示用户没有更多数据。
这种应用模式比较适合纯网页应用，但是当后端对接 App 时，App 可能并不需要后端返回一个 HTML 网页，而仅仅是数据本身，所以后端原本返回网页的接口不再适用于前端 App 应用，为了对接 App...从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。Promise对象有以下两个特点。 ...)：接收一个数组，每个数组元素都是一个 Promise 实例，当这个数组中的 Promise 实例全部返回时，方法执行结束 race(数组)： 接收一个数组，每个数组元素都是一个 Promise 实例...，当这个数组中的 Promise 实例有一个返回时，方法执行结束 1.3 Fetch 1.3.1 Fetch 简介 页面中需要向服务器请求数据时，基本上都会使用 Ajax 来实现。...Ajax 的本质是使用 XMLHttpRequest 对象来请求数据，而 XMLHttpRequest 对象是通过事件的模式来实现返回数据的处理。
apply的第一个参数为null/undefined时，this为null/undefined bind的第一个参数为null/undefined时，this为null/undefined JSON对象...= JSON.stringify(jsonObj, null, 4); console.log(jsonStr3); Object对象 方法有很多，但常用的是最后一个 Object.getPrototypeOf...arr); // 1 2 3 当被用于函数传参时，是一个 Rest 操作符：当被用于函数传参时，是一个 Rest 操作符： function foo(...args) { console.log(args...（即键名），而for of遍历的是数组元素值。...yield放在表达式中的时候,let s = (yield 1+2),s其值将会是undefined， 而1+2这个等于3的值将会作为next返回对象的value的值 next yield表达式本身没有返回值
Ajax本身不是一种新技术，而是用来描述一种使用现有技术集合实现的一个技术方案，浏览器的 XMLHttpRequest是实现 Ajax最重要的对象（ IE6以下使用 ActiveXObject）。...ontimeout xhr.ontimeout = callback; 当进度由于预定时间到期而终止时，会触发 callback，超时时间可使用 timeout属性进行设置。...例如在 Ajax中你要传一个复杂的 json 对像，也就说是对象嵌数组，数组中包括对象，你这样传： application/x-www-form-urlencoded 这种形式是没有办法将复杂的 JSON...当网络故障时或请求被阻止时，才会标记为 reject，如跨域、 url不存在，网络异常等会触发 onerror。 所以使用fetch当接收到异常状态码都是会进入then而不是catch。...由于 fetch是一个非常底层的 API，它并没有被进行很多封装，还有许多问题需要处理： 不能直接传递 JavaScript对象作为参数 需要自己判断返回值类型，并执行响应获取返回值的方法 获取返回值方法只能调用一次
异步指的是当一个进程在执行某个请求时，如果这个请求需要等待一段时间才能返回，这个时候进程会继续往下执行，不会阻塞等待消息的返回，当消息返回时系统再通知进程进行处理。如何防御 XSS 攻击？...every() 和 some() 否 数组方法，some()只要有一个是true，便返回true；而every()只要有一个是false，便返回false....常见的类数组对象有 arguments 和 DOM 方法的返回结果，还有一个函数也可以被看作是类数组对象，因为它含有 length 属性值，代表可接收的参数个数。...创建AJAX请求的步骤：创建一个 XMLHttpRequest 对象。...一个 XMLHttpRequest 对象一共有 5 个状态，当它的状态变化时会触发onreadystatechange 事件，可以通过设置监听函数，来处理请求成功后的结果。
说明：不管是jQuery1.x还是2.x使用的API都是一样的，只是内部实现的方式有区别，2.x不支持IE6/7/8而1.x则支持，2.x更小，效率更高，但功能是一样。.../遍历一个数组或对象，for循环 $.inArray() //返回一个值在数组中的索引位置，不存在返回-1 $.grep() //返回数组中符合某种标准的节点 $.extend({a:1,b:2}...如果指定了script或者jsonp类型，那么当从服务器接收到数据时，实际上是用了<script>标签而不是XMLHttpRequest对象。...在1.4中，JSON就会生成一个JavaScript对象，而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。...有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。
通过配置文件配置url和response 比较符合我们使用习惯的，也许是下面这种mock方式,有一个专门的配置文件，管理请求的url和返回值。...每个请求对应输出数组中的一个对象，对象的rule属性可以是一个字符串或者一个正则表达式，用来匹配url,对象的res属性则是我们希望的从中请求中拿到的返回的数据 （也许这里面还应该加个type表示请求的类型...= XMLHttpRequest; M4.mock配置不影响实际的请求，可无缝切换为实际请求 mock配置不影响实际的请求，当请求没有命中mock配置文件中的url时，自动切换为实际请求，例如 //...对象 let res; // 表示是否config文件中是否有和url对应的配置 let hit = false; // 遍历配置文件中输出的数组，检测并尝试获取匹配url的res对象...) 当然mock.js有它自己的好处，例如： 当你需要动态地造大数据量的mock数据的时候很方便，例如mock.js的Random.paragraph的API能很方便的帮你造出来 当你有一些特殊的需求点的时候
通常，当浏览器从一个域运行脚本时，它允许对同一个域进行 XMLHttpRequest 调用，但在对另一个域进行调用时不允许它们。此浏览器行为限制某人创建可滥用机密数据的恶意脚本。...为了避免这种安全问题，浏览器一般不允许这种跨域调用。在不使用跨域资源共享 (CORS) 的情况下，具有访问 REST 服务的脚本的网页通常必须与提供 REST 服务的服务器位于同一域中。...下面提供了浏览器如何使用 CORS 处理 XMLHttpRequest 的简化描述：域 DomOne 中的网页中的脚本包含对 DomTwo 域中的IRIS REST 服务的 XMLHttpRequest...定义如何处理 CORS 标头当启用 REST 服务以接受 CORS 标头时，默认情况下，该服务接受任何 CORS 请求。 REST 服务应检查 CORS 请求并决定是否继续。...最终结果是调度类从自定义类而不是从 %CSP.REST 继承，因此使用对 OnHandleCorsRequest() 的定义，它覆盖了默认的 CORS 标头处理。
好了，我们直奔中篇的内容～ 数组扩展 数组扩展运算符 数组扩展运算符（spread）是三个点（...）。它好比rest参数的逆运算，将一个数组转为用空格分隔的参数序列。...属于浅拷贝 Object.keys(obj): 返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键名 Object.values(obj): 方法返回一个数组，成员是参数对象自身的...但是它和Set有两个区别： WeakSet对象中只能存放对象引用, 不能存放值, 而Set对象都可以....Object和Map的比较： 一个Object的键只能是字符串或者Symbols，但一个Map的键可以是任意值，包括函数、对象、基本类型。 Map中的键值是有序的，而添加到对象中的键则不是。...因此，当对它进行遍历时，Map对象是按插入的顺序返回键值。 Map在涉及频繁增删键值对的场景下会有些性能优势`。 ... 如果你需要“键值对”的数据结构，Map比Object更合适。
，只是会返回一个新的数组， 连接符 join() 多维数组 数组：存储数据（如何存，如何取，方法都可以自己实现！）...类：模板， 对象：具体实例， 面向对象原型继承 原型对象 当创建一个新函数时，系统会根据一组特定的规则为函数创建一个 prototype 属性，该属性会指向一个名为原型对象的对象，在默认情况下，该对象会自动生成一个构造函数...: "json" 会试图将 controller 的返回值解析成 JSON ，但当返回值是一个字符串或者其他值时，它并不是一个真正的 JSON，解析器会解析失败的！...正如在上面的示例中所看到的，XMLHttpRequest 对象起着重要作用。 用户从 UI 发送请求，JavaScript 中调用 XMLHttpRequest 对象。...服务器将 XML 数据或 JSON 数据发送到 XMLHttpRequest 回调函数。 HTML 和 CSS 数据显示在浏览器上。
$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。...一般情况下，在命名jQuery对象时，为了与DOM对象进行区分，习惯性的以 开头，这不是必须的。...注意：以下设置的内容是书写代码时标签中的在网页显示文本内容，而不是设置网页上显示的内容。...从服务端返回了数据，执行的seccess指定函数 相当于之前使用 XMLHttpRequest对象，当readyState==4 && status ==200的时候 执行的函数。...success : 一个function函数，代表请求成功时，从服务端返回了数据，执行的seccess指定函数 相当于之前使用 XMLHttpRequest对象，当readyState==4 &&
而其中，服务器返回数据的格式其实是字符串形势，并不是我们想要的json数据格式，在此引用只是为了对比说明。...字符串去引号编程json类型数组，也可以在$.post函数后面加一个参数"json"，指定接收的数据为json类型的 3 for(var i=0;i<arry.length;i+...("emp").options.add(op); 6 } 7 }); 也可以写成下面这样，返回的就是json类型数组了，就不要难过去引号了，可以直接遍历。...complete Function 请求完成后回调函数 (请求成功或失败时均调用)。 参数： XMLHttpRequest 对象，成功信息字符串。...error Function (默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。 这个方法有三个参数：XMLHttpRequest 对象，错误信息，（可能）捕获的错误对象。
arr.flatMap(function(v,i){ 对每个元素进行处理(map),在拉平，最后返回一个新数组 }) flatMap只能拉平一层 empty,[,,,] empty:什么都没有，不是...Object.keys()：返回数组，包含对象自身所有可枚举属性的键名 JSON.stringify():只串行化对象自身的可枚举属性 Object.assign():忽略enumerable为...1,b:2,m:3,n:4}; a=1,b=2,c={m:3,n:4} ...只能用在最后一个参数 ...后面不是对象强制转换成对象 ...后面是字符串时,转成类数组 扩展运算符的拷贝 let x={a...，必须放()里 特点:无arguments对象，用rest代替 this是创建时，不是调用时，箭头函数里没有this,this指向外层代码块不能做构造函数 箭头函数使用要注意什么...(str) JSON转Map 键名都是字符串 对象转Map 整个JSON是数组,且每个元素又是数组 new Map(JSON) Proxy Reflect Proxy是在访问之前做一层拦截,对访问进行处理
，且不会随函数的执行环境活动对象的销毁一同销毁，此外，频繁调用存在跨作用域变量存在性能问题，解决方法为使用局部变量存储跨作用域变量。...('div'); for (var i = 0; i < alldivs.length; i++) { document.body.appendChild(document.createElement...浏览器的调用栈大小限制了递归的使用规模，尽量使用迭代代替递归 栈溢出错误的解决方式： 使用try-catch捕获 try{ // 递归程序 }catch(e){} 5 字符串和正则表达式 当连接数量巨大或尺寸巨大的字符串时...信标(beacons) 7.3 数据格式 XML： 支持良好，但笨重且解析慢 JSON： 数组形式的json解析速度更快 JSON-P： 动态脚本注入 区分json与jsonp，二者原理不同，...jsonp是json的一种使用模式 ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加标签来调用服务器提供的js脚本 HTML： 传输极慢
安全问题 AJAX暴露了与服务器交互的细节。 对搜索引擎的支持比较弱。 破坏了程序的异常机制。 不容易调试。 AJAX应用和传统Web应用有什么不同？...服务器并不是以转发的方式响应，而是以流的方式把数据返回给浏览器 XMLHttpRequest异步对象会不停监听服务器状态的变化，得到服务器返回的数据，就写到浏览器上【因为不是转发的方式，所以是无刷新就能够获取服务器端的数据...HTTP请求 获取异步调用返回的数据 使用JavaScript和DOM实现局部刷新 基本示例： //创建 XMLHttpRequest 对象 var ajax = new XMLHttpRequest(...请求主体：HTTP上行请求，有头部、主体。 一般来说，GET请求是只有头部，没有主体 而ＰＯＳＴ请求有请求主体。 一但调用send()方法，HTTP上行请求就将发出。..._JSONtoURLparams(json)); } } })(); 五、关于ajax缓存问题 当Ajax第一次发送请求后，会把请求的URL和返回的响应结果保存在缓存内，当下一次调用
判断对象是否存在循环引用循环引用对象本来没有什么问题，但是序列化的时候就会发生问题，比如调用JSON.stringify()对该类对象进行序列化，就会报错: Converting circular structure...深拷贝： 深拷贝相对浅拷贝而言，如果遇到属性值为引用类型的时候，它新建一个引用类型并将对应的值复制给它，因此对象获得的一个新的引用类型而不是一个原有类型的引用。...深拷贝对于一些对象可以使用 JSON 的两个函数来实现，但是由于 JSON 的对象格式比 js 的对象格式更加严格，所以如果属性值里边出现函数或者 Symbol 类型的值时，会转换失败（1）JSON.stringify...这个方法可以简单粗暴的实现深拷贝，但是还存在问题，拷贝的对象中如果有函数，undefined，symbol，当使用过JSON.stringify()进行处理之后，都会消失。...当对象的 readyState 变为 4 的时候，代表服务器返回的数据接收完成，这个时候可以通过判断请求的状态，如果状态是 2xx 或者 304 的话则代表返回正常。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
