1:GET访问 浏览器 认为 是等幂的 就是 一个相同的URL 只有一个结果[相同是指 整个URL字符串完全匹配] 所以 第二次访问的时候 如果 URL字符串没变化 浏览器是 直接拿出了第一次访问的结果...Post方式: 当使用POST方式时,浏览器把各表单字段元素及其数据作为HTTP消息的实体内容发送给Web服务器,而不是作为URL地址的参数进行传递,使用POST方式传递的数据量要比使用GET方式传送的数据量大的多...使用get方式需要注意: 1 对于get请求(或凡涉及到url传递参数的),被传递的参数都要先经encodeURIComponent方法处理.例:var url = "update.php?...为正确的函数名,以执行回调函数。数据类型设置为 "jsonp" 时,jQuery 将自动调用回调函数。...(这个我不是很懂) 参数列表: 名 类型 描述 url String (默认: 当前页地址) 发送请求的地址。
1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中。 url (String) : 请求的HTML页的URL地址。...当然这里捕捉不到error,因为error的时候根本不会运行该回调函数 //alert(this); }); 点击发送请求: jQuery.get()回调函数里面的 this ,指向的是Ajax请求的选项配置信息...这个方法可以用在例如当只有编辑器focus()的时候才去加载编辑器需要的JS文件.下面看一些示例代码: 加载并执行 test.js。...(这个我不是很懂) 参数列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址。...processData Boolean (默认: true) 默认情况下,发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded
第一张图尤其说明了传统 Web 应用程序的结构与采用了 AJAX 技术的 Web 应用程序的结构上的差别 主要的差别,其实不是 JavaScript,不是 HTML/XHTML 和 CSS,而是采用了...二、创建 ajax 的步骤 Ajax 的原理简单来说通过 XmlHttpRequest 对象来向服务器发异步请求,从服务器获得数据,然后用 javascript 来操作 DOM 而更新页面。...传递方式 load()方法的传递方式根据参数 data 来自动指定,如果没有参数传递,则采用 GET 方式传递,反之,采用 POST 回调参数 必须在加载完成后才执行的操作,该函数有三个参数 分别代表请求返回的内容...页的地址 data(可选) Object 发送至服务器的 key/ value 数据会作为 QueryString 附加到请求 URL 中 callback(可选) Function 载入成功的回调函数...(只有当 Response 的返回状态是 success 才调用该方法) type(可选) String 服务器返回内容的格式,包括 xml、html、script、json、text 和 _default
你甚至可以通过制定ID来实现载入部分内容的Ajax操作,如: $('#ajax-div').load('data.html#my-section'); 实现GET和POST方法 get( url,...JSON是一种理想的数据传输格式,它能够很好的融合与JavaScript或其他宿主语 言,并且可以被JS直接使用。...使用JSON相比传统的通过 GET、POST直接发送”裸体”数据,在结构上更为合理,也更为安全。至于jQuery的getJSON()函数,只是设置了JSON参数的 ajax()函数的一个简化版本。...下面的例子中,我们用ajax()来调用一个XML文档: $.ajax({ url: 'doc.xml', type: 'GET', dataType: 'xml', timeout...即服务器没有返回错误,返回的数据也没有错误 ajaxSuccess 全局事件全局的请求成功 error (局部事件) 仅当发生错误时触发。
而传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。 还有为什么叫异步呢? 因为在加载的时候,页面的其他部分还是可以自由操作的,没有出现卡死的状态,所以是异步。...在此之前,我们可以通过以下几种方式让浏览器发出对服务端的请求,获得服务端的数据: 地址栏输入地址,回车,刷新 特定元素的 href 或 src 属性 表单提交 这些方案都是我们无法通过或者很难通过代码的方式进行编程...用JavaScript写一个完整的AJAX代码并不复杂,但是需要注意:AJAX请求是异步执行的,也就是说,要通过回调函数获得响应。...具体数值的含义见下表: readyState xhr状态 说明 0 UNSENT 代理(xhr)被创建,但尚未调用 open 方法 1 OPENED open 方法已经被调用,建立了连接 2 HEADERS_RECEIVED...send 方法已经被调用,已经可以获取状态行和响应头 3 LOADING 响应体下载中,responseText 属性可能已经包含部分数据 4 DONE 响应体下载完成,可以直接调用 responseText
url (String) : 请求的HTML页的URL地址。 data (Map) : (可选参数) 发送至服务器的 key/value 数据。...当然这里捕捉不到error,因为error的时候根本不会运行该回调函数 //alert(this); }); 点击发送请求: jQuery.get()回调函数里面的 this ,指向的是Ajax...如果通过 getScript 加入脚本,请加入延时函数。 这个方法可以用在例如当只有编辑器focus()的时候才去加载编辑器需要的JS文件.下面看一些示例代码: 加载并执行 test.js。...(这个我不是很懂) 参数列表: 参数名类型描述urlString(默认: 当前页地址) 发送请求的地址。...processDataBoolean(默认: true) 默认情况下,发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded
ajax:为一种找早起避免页面重载而动态更新页面的方式,不过现在是直接数据驱动,或者类似于vue的单页应用 comet:这个和ajax正好相反,为推送消息到web浏览器端 ps;ajax和comet都为一个美国的洗涤日用品牌...下面是旧的ajax方式 使用iframe完成一次ajax,脚本先把要发送给web服务器的信息编码到url中,服务器在动态的创建一个html文档,将其内容返回给web,在iframe中显示,这种方式受道同源的限制...ajax 在本地写js的时候,必须搭建一个服务器其AJAX才能工作 原因:因为文件的协议为file而本地的请求的协议为http,由于同源策略的影响,导致无法使用http协议的文件,故本地无法直接使用ajax...最后调用send()方法,完成发送。 顺序问题:必须先调用open后调用send()才方可。...下面编写函数获取HTTP响应的onreadystatechange // 发出一个HTTP GET请求获取指定的URL的内容 // 当响应成功到达,验证它是否是纯文本 // 如果是,将会把它传递给指定的回调函数
页面对不同访问者的响应叫做事件。 事件处理程序指的是当 HTML中发生某些事件时所调用的方法。 实例: 在元素上移动鼠标。...通过 jQuery AJAX 方法,您能够使用HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML或JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。...回调函数可以设置不同的参数: responseTxt - 包含调用成功时的结果内容 statusTXT - 包含调用的状态 xhr - 包含 XMLHttpRequest 对象 下面的例子会在 load...第二个参数是回调函数。第一个回调参数存有被请求页面的内容,第二个回调参数存有请求的状态。...第一个回调参数存有被请求页面的内容,而第二个参数存有请求的状态。
.ajaxError() 当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。 .ajaxSend() 在 Ajax 请求发送之前显示一条消息。....ajaxStop() 当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。 .ajaxSuccess() 当 Ajax 请求成功完成时显示一条消息。..., [callback] ) 载入远程 HTML 文件代码并插入至 DOM 中,其中: url (String) :请求的HTML页的URL地址。...这个方法可以用在例如当只有编辑器focus()的时候才去加载编辑器需要的JS文件.下面看一些 示例代码: 加载并执行 test.js。...(这个我不是很懂) 参数列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址。
, AJAX 不是一门的新的语言,而是对现有技术的综合利用。...,而不是刷新整个页面。...方法 jQuery为我们提供了更强大的Ajax封装 $.ajax 参数列表 参数名称 描述 取值 示例 url 接口地址 url:"02.php" type 请求方式 get/post type:"get...{} complete 完成后的回调函数 function () {} complete:function () {} 使用示例: $.ajax({ type:"get",//请求类型 url...给window注册scroll事件,当触底时,需要动态的加载图片。 //5. 加载时,显示加载中的提示信息,并且要求不能重复发送ajax请求 //6.
与现代浏览器的通过存取浏览器DOM结构的编程代码(JavaScript)动态地改变被显示内容的支持相配合,AJAX让开发者在浏览器端更新被显示的HTML内容而不必刷新页面。...仅当readyState值为1时,你才可以调用send()方法;否则的话,XMLHttpRequest对象将引发一个异常。该请求被使用提供给open()方法的参数发送到服务器。...仅当readyState值是3或4(换句话说,在响应头部可用以后)时,才可以调用这个方法;否则,该方法返回一个空字符串。 ...如果不是使用AJAX技术来校验这个UserID域,那么整个表单都必须被填充和提交。如果该UserID不是有效的,这个表单必须被重新提交。...在这种情况下,对URL validateForm的调用将激活服务器端的一个servlet,但是你应该能够注意到服务器端技术不是根本性的;实际上,该URL可能是一个ASP,ASP.NET或PHP页面或一个
在1.4中,JSON就会生成一个JavaScript对象,而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。...此设置被设置之前beforeSend函数被调用;因此,消息头中的值设置可以在覆盖beforeSend函数范围内的任何设置。...(技术上讲只要不是字符串),都会处理转化成一个查询字符串,以配合默认内容类型 “application/x-www-form-urlencoded”。...通常只在本地和远程的内容编码不同时使用。 statusCode 默认: {} 一组数值的HTTP代码和函数对象,当响应时调用了相应的代码。...注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。 url type:String (默认: 当前页地址) 发送请求的地址。
单页面应用指的是应用只有一个主页面,通过动态替换DOM内容并同步修改url地址,来模拟多页应用的效果,切换页面的功能直接由前台脚本来完成,而不是由后端渲染完毕后前端只负责显示。...前端路由,顾名思义就是一个前端不同页面的状态管理器,可以不向后台发送请求而直接通过前端技术实现多个页面的效果。...在下面的示例中,点击导航按钮,可以看到url地址栏发生了变化,且控制台打印出了响应的信息。...实用性 可直接使用 通常服务端需要修改代码以配合实现 兼容性 IE8以上 IE10以上 三.亲手造一个简单的前端路由插件 造轮子,不是为了把它装在你的车上,而是当你在荒郊野外开车而轮子出了问题时多一种选择...运行附件中的router-demo-hash.html,点击导航按钮,即可看到url地址栏以及内容区域同步更改。
URL 中的 # 符号hash 模式下,仅 hash 符号之前的内容会被包含在请求中,如 http://www.abc.com,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误。...,事实上它也确实是默认被渲染为 a 标签。...(A----->B----->C 结果B被C替换 A----->C)2) 设置replace属性(默认值:false)的话,当点击时,会调用router.replace(),而不是router.push...用 path 的时候,提供的 path 值必须是相对于根路径的相对路径,而不是相对于父路由的相对路径,否则无法成功访问。...◼️ url地址显示与否:query更加类似于我们ajax中的get传参,页面跳转之后页面 url后面会拼接参数,类似?
当页面加载完成之后,利用路由实现HTML内容的变换,UI与用户 的交互,而不会因为用户的操作进行页面的重新加载或跳转 优点: 用户体验感好,避免了不必要的跳转和重复渲染 SPA对服务器压力小 前后端职责分离...Vue常用的修饰符 .prevent 提交事件不再重载页面 .stop 阻止单击事件冒泡 .self 当事件发生在该元素本身而不是子元素时会触发 .capture 事件侦听,事件发生时会调用 .once...b.假设首页进入详情页,如果用户在首页每次点击都是相同的,那么详情页就没必要重复请求,直接缓存起来。 如果点击的不是同一个,则直接请求。...mutation,而不是直接变更状态,可以包含异步操作。...q=params&spm=1001.2101.3001.7020) 在刷新页面的时候参数会消失 可以考虑本地存储解决此问题 4.query传过来的参数会显示到地址栏中 而params传过来的参数不会显示到地址栏中
特点: 固定定位元素它脱离了标准文档流 固定定位元素的的层级比标准文档流里面的元素要高 所以固定定位元素它会压盖住标准文档流里面的元素 固定定位元素它不再占用空间 固定定位元素它显示的位置不会随着浏览器滚动而滚动.../json数据类型 success :当Ajax状态码为4且响应状态码为200时所触发的回调函数 type :发送的http请求,可以是get,也可以是post url :请求的url地址 3、什么时候用同步请求...也就是说,当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载,页面处于一个假死状态,当这个AJAX执行完毕后才会继续运行其他代码页面解除假死状态(即当ajax返回数据后,才执行后面的function2...异步请求可以完全不影响用户的体验效果,无论请求的时间长或者短,用户都在专心的操作页面的其他内容,并不会有等待的感觉。 4、PHP有哪些魔术方法??...不同之处在于:对include()语句来说,在执行文件时每次都要进行读取和评估;报错时不会阻止后面的代码运行;而对于require()来说,文件只处理一次(实际上,文件内容替换require()语句)。
在这三种方式中,除了第三种,其他两种方式想要发送一个请求,就必须要刷新页面,如果页面只有展示内容的话刷新一下自然无所谓,但倘若一个页面有很多的表单内容需要填写,而你在最后填写完成提交的时候才告诉你,其中某一个地方不符合要求...通过 AJAX 技术,服务器和浏览器之间交换的数据大量减少,服务器回应更快了。同时,很多的处理工作可以在发出请求的客户端机器上完成,因此服务端的负荷也减少了许多。...事实上,这已经不是在AJAX的讨论范围了,但是作为一个拓展知识点,我还是想介绍下状态码这个东西。状态码的作用是服务器返回给客户端的用来描述HTTP请求的状态的。...我们看到了很长的一段JSON数据,格式化后(这里我们可以直接切换到Preview选项卡)筛选出一部分可以看到: ? 是不是刚才那个页面里面的东西都在这里面呢?...但是也有成为用户的一个不安全因素,比如有些网站直接将 sessionid 或是 token 放在地址栏里传递的,会原样不动地当作 Referrer 报头的内容传递给第三方网站。
7、Vue声明组件的state是⽤data⽅法,那为什么data是通过⼀个function来返回⼀个对象,⽽不是直接写⼀个对象呢?...从原理上的话,⼤概就是组件可以被多次创建,如果不使⽤function就会使所有调⽤该组件的页⾯公⽤同⼀个数据域,这样就失去了组件的概念了 8、介绍一下Vue的响应式系统 1、任何一个 Vue...使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。...另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。...url地址显⽰:query更加类似于我们ajax中get传参,params则类似于post,说的再简单⼀点,前者在浏览器地址栏中显⽰参数,后者则不显⽰ 注意点:query刷新不会丢失query
前端如何把页面信息有效传达给后台,以及后台如何获取到这些数据 所有前端请求的URL后面的参数都是辅助后台数据查询的,若不需要参数,那后台就会直接给个URL给前端。...当前端在调用数据接口时,发现有些数据不是我们想要的,那么前端应该怎么办 把请求的URL和返回的数据以及在页面的展示的情况给后台看。...回调函数可以设置不同的参数: - responseTxt : 包含调用成功时的结果内容 - statusTXT : 包含调用的状态 - xhr : 包含 XMLHttpRequest 对象 例子:在...第一个回调参数存有被请求页面的内容data,第二个回调参数存有请求的状态status。..."demo_test_post.asp" 中的 ASP 脚本读取这些参数,对它们进行处理,然后返回结果。 第三个参数是回调函数。第一个回调参数存有被请求页面的内容,而第二个参数存有请求的状态。
一旦页面加载完成,SPA 不会因为用户的操作而进行页面的重新加载或跳转;取而代之的是利用路由机制实现 HTML 内容的变换,UI 与用户的交互,避免页面的重新加载。...:为实现单页 Web 应用功能及显示效果,需要在加载页面的时候将 JavaScript、CSS 统一加载,部分页面按需加载;前进后退路由管理:由于单页应用在一个页面中显示所有的内容,所以不能使用浏览器的前进后退功能...,所有的页面切换需要自己建立堆栈管理;SEO 难度较大:由于所有的内容都在一个页面中动态替换显示,所以在 SEO 上其有着天然的弱势。...当使用自定义指令直接修改 value 值时绑定v-model的值也不会同步更新;如必须修改可以在自定义指令中使用keydown事件,在vue组件中使用 change事件,回调中修改vue数据;(1)自定义指令基本内容全局定义...这里不是说要改造 URL、凭空制造出 N 个 URL 来。
领取专属 10元无门槛券
手把手带您无忧上云