摘要:当请求完成后注册一个回调函数。该请求是否触发全局处理事件如等,请求发送前的回调函数,用来修改请求发送前,此功能可用来设置自定义头信息,在函数中返回将取消这个请求。例如,为请求指定一个回调函数名。即改变回调函数的,默认就是传入的整个对象。
Ajax
Ajax 全称是 asynchronous javascript and xml,并不是新的编程语言,可以说是已有技术的组合,主要用来实现客户端与服务器端的异步通信效果,实现页面的局部刷新,从而创建快速动态网页的技术。
Ajax过程- 创建XMLHttpRequest对象,也就是创建一个异步调用对象 - 创建一个新的HTTP请求,并指定其请求的方法、URL及验证信息 - 设置响应 HTTP 请求状态变化的函数 - 发送 HTTP 请求 - 获取异步调用返回的数据 - 使用 JavaScript 和 DOM 实现局部刷新
var xhr = null; // 创建异步对象 if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); // ie7+等现代浏览器 }else if(window.ActiveXObject){ // ie6,老版Opera xhr = new ActiveXObject("Microsft.XMLHTTP"); } xhr.open("get","http://localhost:4000/test",true); // true是异步,可省略 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // post 必须设置 xhr.onreadystatechange = function(){ // 若为同步,此代码不用写,直接在send后,用`xhr.responseText`即可。 if(xhr.readyState==4 && xhr.status==200){ /* readyState 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成,且响应已就绪 status 200 OK 404 Not Found */ xhr.responseText; xhr.responseXML.children[0].children; JSON.parse(xhr.responseText); } } xhr.send(String); // 用于post传参,形式:"a=1&b=2",而get传参就在url后面用“?”拼接优缺点
优点:可以使得页面不重载全部内容的情况下加载局部内容,降低数据传输量,避免用户不断刷新或者跳转页面,提高用户体验
缺点:对搜索引擎不友好,要实现ajax下的前进后退功能成本较大;跨域问题限制
jQuery 中的 Ajax 全局ajax事件处理器jQuery 库支持完整的 Ajax 操作。这里所包含的所有函数和方法用于从服务端加载数据,并且不会导致页面刷新。
$(document).ajaxComplete(handler(event, XMLHttpRequest, ajaxOptions)) 当Ajax请求完成后注册一个回调函数。
每当一个Ajax请求完成,jQuery就会触发ajaxComplete事件,在这个时间点所有处理函数会使用.ajaxComplete()方法注册并执行。
从 jQuery 1.8 开始, .ajaxComplete() 方法只能绑定到 document元素。
如果global选项设置为false,调用$.ajax() 或 $.ajaxSetup(),.ajaxComplete()方法将不会被触发。
类似的还有:请求出错ajaxError()、请求发送前ajaxSend()、请求刚开始ajaxStart()、请求完成时ajaxStop()、请求成功完成时ajaxSuccess()
辅助函数$.param() 创建一个数组或对象序列化的字符串,适用于一个URL地址查询字符串或Ajax请求。此方法无法对复杂数据结构进行编码。
serialize() 将用作提交的表单元素的值编译成字符串。
console.log($("form").serialize()); // username=abc&age=24&sex=0serializeArray() 将用作提交的表单元素的值编译成拥有name和value对象组成的数组。
console.log($("form").serializeArray()); // [{name: "username", value: "abc"}, {name: "age", value: "24"}, {name: "sex", value: "0"}]
底层接口
$.ajax(url, {})或$.ajax({url: ""}) 关于传参项(可以使用$.ajaxSetup()设置任何默认参数),下面列举一些常用的:
url:String,一个用来包含发送请求的URL字符串
data:Object、String,发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后面。
dataType:String,默认Intelligent Guess (xml, json, script, or html))。预期服务器返回的数据类型。
xml,html,script,json,text
jsonp: 以 JSONP 的方式载入 JSON 数据块。会自动在所请求的URL最后添加 "?callback=?"。默认情况下不会通过在URL中附加查询字符串变量 "_=[TIMESTAMP]" 进行自动缓存结果,除非将 cache参数设置为true。
accepts:PlainObject(可用$.isPlainObject()检测),内容类型发送请求头(Content-Type),用于通知服务器该请求需要接收何种类型的返回结果。如果accepts设置需要修改,推荐在$.ajaxSetup() 方法中设置一次。
async:Boolean,默认true,异步请求
global:Boolean,默认true。该请求是否触发全局处理事件(如$(document).ajaxComplete()等)
beforeSend(jqXHR, settings):Function,请求发送前的回调函数,用来修改请求发送前jqXHR,此功能可用来设置自定义 HTTP 头信息,在beforeSend函数中返回false将取消这个请求。
catch:Boolean,默认true,dataType为"script"和"jsonp"时默认为false。是否缓存此页面,原理是在GET请求参数中附加"_=时间戳"。该参数不是其他请求所必须的,除了在IE8中,当一个POST请求一个已经用GET请求过的URL。
complete:Function,请求完成后回调函数 (请求success 和 error之后均调用)。
success(data, textStatus, jqXHR):Function,请求成功时调用函数
error:Function,请求失败时调用函数
timeout:Number,设置请求超时时间(毫秒)。此设置将覆盖$.ajaxSetup() 里的全局设置。
jsonp:String,在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分,比如{jsonp:"onJsonPLoad"}会导致将"onJsonPLoad=?"传给服务器。在jQuery 1.5,,设置jsonp选项为false,阻止了jQuery从加入"?callback"字符串的URL或试图使用"=?"转换。在这种情况下,你也应该明确设置jsonpCallback设置。例如, { jsonp: false, jsonpCallback: "callbackName" }
jsonpCallback:String、Function,为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成一个独特的函数名,这样管理请求更容易,也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候,指定这个回调函数名。从jQuery 1.5开始,你也可以使用一个函数作为该参数设置,在这种情况下,该函数的返回值就是jsonpCallback的结果。
contents: PlainObject,一个以"{字符串/正则表达式}"配对的对象,根据给定的内容类型,解析请求的返回结果。
contentType:String,默认application/x-www-form-urlencoded; charset=UTF-8。发送信息至服务器时内容编码类型。
context:Object,设置Ajax相关回调函数的上下文。即改变回调函数的this,默认就是传入的整个对象。
converters: PlainObject,默认: {"* text": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": jQuery.parseXML}。一个数据类型到数据类型转换器的对象。每个转换器的值是一个函数,返回经转换后的请求结果。
crossDomain:Boolean,同域请求为false, 跨域请求为true。如果你想在同一域中强制跨域请求(如JSONP形式),例如,想服务器端重定向到另一个域,那么需要将crossDomain设置为 true 。
username:String,于响应HTTP访问认证请求的用户名
password:String,用于响应HTTP访问认证请求的密码
$.ajax() 返回jqXHR对象,可调用
.done() success
.fail() error
.always() complete
.then() 传两个回调函数,分别是done和fail
$.ajaxPrefilter([dataTypes], handler(options, originalOptions, jqXHR) ) 在每个请求之前被发送和$.ajax()处理它们前处理,设置自定义Ajax选项或修改现有选项。
$.ajaxSetup(options) 为以后要用到的Ajax请求设置默认的值,其后的 AJAX 请求不再设置任何已设置的选项参数。
快捷方法$.get() {type: "get"}
$.post() {type: "post"}
$.getScript() {type: "script"}
$.getJSON() {type: "json"}
$(selector).load() 从服务器载入数据并且将返回的 HTML 代码并插入至 匹配的元素中。
jQuery中jsonp// 前端 function jsonpFn(data){ console.log(data) console.log("jsonpFn"); } $(function(){ $.ajax({ url: "http://localhost:3000/test", data: {username: "xx"}, dataType: "jsonp", jsonp: "selfNamedReplaceCallback", jsonpCallback: "jsonpFn", // server side:req.query.callback = "jsonpFn" success(data){ console.log(data) } }) }) // 后端 const app = require("express").Router(); app.get("/test", (req, res, next) => { let name = req.query.username; let callback = req.query.selfNamedReplaceCallback let s1 = "{status: 1}" let s2 = ` { status: 0, info: { name: "${name}", age: 24, sex: "girl", tel: "1522*******" } } ` s1=callback+"("+s1+")" s2=callback+"("+s2+")" if(!name)return res.send(s1) res.send(s2) }).listen(3000)Axios
axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF
在vue项目中使用axios 的 Demo// main.js import axios from "axios" axios.defaults.baseURL = "http://localhost/" Vue.prototype.$axios = axios
// 在 .vue 文件(组件) this.$axios.get("").then().catch() this.$axios.all([ this.$axios.post("one","content=123"), this.$axios.get("one?pageIndex=1") ]) .then(this.$axios.spread((res1,res2)=>{ console.log(res1,res2) })) .catch(err=>{ console.log(err) })
这里分发请求,同时请求成功才执行 then 方法,可用于获取 省市区 的数据
// 在 server.js 文件 const Koa = require("koa") const Router = require("koa-router") const app = new Koa() const router = new Router() router.get("/one",ctx=>{ ctx.body = { a: 1, b: 2 } }) router.post("/one",ctx=>{ ctx.body = { c: 3, d: 4 } }) app.use((ctx,next)=>{ ctx.set("Access-Control-Allow-Origin", "*"); ctx.body = {} next() }) .use(router.routes()) .use(router.allowedMethods()) .listen(80)
axios.interceptors.request.use(function(ops){ console.log(ops); ops.headers = {/* ... */}; // 请求前修改 return ops; // 返回没有修改的位置,如果return false 直接拦截 })
例如,在请求成功前显示加载loading图标,拿到数据后消失
// main.js import Mint from "mint-ui" // 实际项目中选择引入 import "mint-ui/lib/style.css" Vue.use(Mint) axios.interceptors.request.use(function(config){ Mint.Indicator.open() return config; }) axios.interceptors.response.use(function(data){ Mint.Indicator.close() return data; })Ajax、jQuery.ajax、Axios和Fetch的区别
ajax最早出现的发送后端请求技术,利用用XMLHttpRequest对象。
$.ajax是jQuery中的发送后端请求技术,基于原生Ajax的封装。
Axios不是原生JS的,需要进行安装。它在client-side和server-side都可以使用。也可以在请求和响应阶段进行拦截。它是基于promise对象的。
Fetch号称是AJAX的替代品,使用了ES6中的promise对象。其参数有点像jQuery.ajax。但是fetch不是对ajax的封装,而是原生js实现的,并没有使用XMLHttpRequest对象。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/100338.html
摘要:个人前端文章整理从最开始萌生写文章的想法,到着手开始写,再到现在已经一年的时间了,由于工作比较忙,更新缓慢,后面还是会继更新,现将已经写好的文章整理一个目录,方便更多的小伙伴去学习。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 个人前端文章整理 从最开始萌生写文章的想法,到着手...
摘要:当用户完成选择文件动作时,提交子页面中的。从此我们上传文件就欢欣鼓舞的来找了。因为的核心是对象,异步的实现是通过一个对象,一般简称该对象对。这些回答基于自己理解,如有不妥,希望路过的大神轻喷,指正。 背景 平时工作中经常会遇到需要上传文件的情况,如果你用ant design 或者element ,它们都提供了上传的组件。 我们分别来看一下element 和 antd 手动上传怎么处理:...
摘要:下面来看下具体的对象有哪些属性和方法。对象的属性和方法属性请求的状态响应体不包括头部对请求的响应,解析为并作为对象返回。方法取消当前响应,关闭连接并且结束任何未决的网络活动。所以,调用对象的方法要有一定的顺序,比如在方法注册事件。 Ajax是一种能够向服务器请求额外的数据而无需卸载页面(无刷新)的技术,是对Asynchronous Javascript + XML的简写,因其良好...
摘要:只有两种数据类型描述符,大括号和方括号,其余英文冒号是映射符,英文逗号是分隔符,英文双引号是定义符。上述两种集合中若有多个子项,则通过英文逗号进行分隔。键值对以英文冒号进行分隔,并且建议键名都加上英文双引号,以便于不同语言的解析。 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现。当然了,通过调用强大的PhoneGap插件然后...
摘要:只有两种数据类型描述符,大括号和方括号,其余英文冒号是映射符,英文逗号是分隔符,英文双引号是定义符。上述两种集合中若有多个子项,则通过英文逗号进行分隔。键值对以英文冒号进行分隔,并且建议键名都加上英文双引号,以便于不同语言的解析。 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现。当然了,通过调用强大的PhoneGap插件然后...
阅读 2956·2023-04-25 17:22
阅读 1525·2019-08-30 15:54
阅读 1248·2019-08-30 15:53
阅读 1766·2019-08-30 15:43
阅读 2949·2019-08-29 12:29
阅读 1184·2019-08-26 11:37
阅读 3232·2019-08-23 18:02
阅读 1584·2019-08-23 14:15