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请求是只有头部,没有主体 而POST请求有请求主体。 一但调用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元无门槛券
手把手带您无忧上云