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.readyState4 && xhr.status200){
  /*
  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，调用
或
.ajaxSetup(),.ajaxComplete()方法将不会被触发。
类似的还有：请求出错ajaxError()、请求发送前ajaxSend()、请求刚开始ajaxStart()、请求完成时ajaxStop()、请求成功完成时ajaxSuccess()
辅助函数
$.param() 创建一个数组或对象序列化的字符串，适用于一个URL地址查询字符串或Ajax请求。此方法无法对复杂数据结构进行编码。
serialize() 将用作提交的表单元素的值编译成字符串。

女 男

console.log($("form").serialize()); // username=abc&age=24&sex=0
serializeArray() 将用作提交的表单元素的值编译成拥有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.cnblogs.com/chaosleo/p/12687559.html