一、Ajax请求
- 现在常见的前后端分离项目中,一般都是服务器返回静态页面后
浏览器加载完页面,运行script中的js代码,通过ajax向后端api发送异步请求
获取数据,然后调用回调函数,将数据添加到页面上
1.1 JQuery封装后的ajax请求
- 注意:jQuery Ajax本质 XMLHttpRequest 或 ActiveXObject
1 jQuery.get(...) 2 ????????????????所有参数: 3 ?????????????????????url: 待载入页面的URL地址 4 ????????????????????data: 待发送 Key/value 参数。 5 ?????????????????success: 载入成功时回调函数。 6 ????????????????dataType: 返回内容格式,xml, json, ?script, text, html 7 ?8 ?9 ????????????jQuery.post(...)10 ????????????????所有参数:11 ?????????????????????url: 待载入页面的URL地址12 ????????????????????data: 待发送 Key/value 参数13 ?????????????????success: 载入成功时回调函数14 ????????????????dataType: 返回内容格式,xml, json, ?script, text, html15 16 17 ????????????jQuery.getJSON(...)18 ????????????????所有参数:19 ?????????????????????url: 待载入页面的URL地址20 ????????????????????data: 待发送 Key/value 参数。21 ?????????????????success: 载入成功时回调函数。22 23 24 ????????????jQuery.getScript(...)25 ????????????????所有参数:26 ?????????????????????url: 待载入页面的URL地址27 ????????????????????data: 待发送 Key/value 参数。28 ?????????????????success: 载入成功时回调函数。29 30 31 ????????????jQuery.ajax(...)32 33 ????????????????部分参数:34 35 ????????????????????????url:请求地址36 ???????????????????????type:请求方式,GET、POST(1.9.0之后用method)37 ????????????????????headers:请求头38 ???????????????????????data:要发送的数据39 ????????????????contentType:即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")40 ??????????????????????async:是否异步41 ????????????????????timeout:设置请求超时时间(毫秒)42 43 ?????????????????beforeSend:发送请求前执行的函数(全局)44 ???????????????????complete:完成之后执行的回调函数(全局)45 ????????????????????success:成功之后执行的回调函数(全局)46 ??????????????????????error:失败之后执行的回调函数(全局)47 ????????????????48 49 ????????????????????accepts:通过请求头发送给服务器,告诉服务器当前客户端课接受的数据类型50 ???????????????????dataType:将服务器端返回的数据转换成指定类型51 ???????????????????????????????????"xml": 将服务器端返回的内容转换成xml格式52 ??????????????????????????????????"text": 将服务器端返回的内容转换成普通文本格式53 ??????????????????????????????????"html": 将服务器端返回的内容转换成普通文本格式,在插入DOM中时,如果包含JavaScript标签,则会尝试去执行。54 ????????????????????????????????"script": 尝试将返回值当作JavaScript去执行,然后再将服务器端返回的内容转换成普通文本格式55 ??????????????????????????????????"json": 将服务器端返回的内容转换成相应的JavaScript对象56 ?????????????????????????????????"jsonp": JSONP 格式57 ??????????????????????????????????????????使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数58 59 ??????????????????????????????????如果不指定,jQuery 将自动根据HTTP包MIME信息返回相应类型(an XML MIME type will yield XML, in 1.4 JSON will yield a JavaScript object, in 1.4 script will execute the script, and anything else will be returned as a string60 61 ?????????????????converters: 转换器,将服务器端的内容根据指定的dataType转换类型,并传值给success回调函数62 ?????????????????????????$.ajax({63 ??????????????????????????????accepts: {64 ????????????????????????????????mycustomtype: ‘application/x-some-custom-type‘65 ??????????????????????????????},66 ??????????????????????????????67 ??????????????????????????????// Expect a `mycustomtype` back from server68 ??????????????????????????????dataType: ‘mycustomtype‘69 70 ??????????????????????????????// Instructions for how to deserialize a `mycustomtype`71 ??????????????????????????????converters: {72 ????????????????????????????????‘text mycustomtype‘: function(result) {73 ??????????????????????????????????// Do Stuff74 ??????????????????????????????????return newresult;75 ????????????????????????????????}76 ??????????????????????????????},77 ????????????????????????????});
1.2.2 一个简单的Ajax请求
原生Ajax XMLHttpRequest对象
原文地址:https://www.cnblogs.com/shiqi17/p/9906145.html