首先先介绍下 Ajax,Ajax(ASynchronous JavaScript And xml)为异步的 JavaScript 和 xml. 所谓的异步和同步是指:
同步: 客户端必须等待服务器的响应, 在等待期间客户端不能做其他操作.
异步: 客户端无须等待服务器的响应, 在服务器处理请求的过程中, 客户端可以进行其他的操作.
Ajax 能够在无需加载整个页面的情况下, 能够更新部分网页内容, 可以减小服务器的资源浪费. 通过在后台与服务器进行少量数据交换, Ajax 可以使网页实现异步更新. 这意味着可以在不重新加载整个网页的情况下, 对网页的某部分进行更新. 而传统的网页如果需要更新内容, 必须重新加载整个网页页面.
Ajax 大体上有四种实现方式, 由于基于 JS 的实现方式太过于复杂, 基本上用不到, 所以就暂不贴出其实现代码了.
1. 使用 $.Ajax()发送异步请求
jQuery 底层 Ajax 实现. 简单易用的高层实现见 $.get, $.post 等.$.Ajax() 返回其创建的 XMLHttpRequest 对象. 大多数情况下你无需直接操作该函数, 除非你需要操作不常用的选项, 以获得更多的灵活性. 最简单的情况下,$.Ajax()可以不带任何参数直接使用.
$.Ajax 的参数列表如下:
url:(默认: 当前页地址) 发送请求的地址.
async:(默认: true) 默认设置下, 所有请求均为异步请求. 如果需要发送同步请求, 请将此选项设置为 false. 注意, 同步请求将锁住浏览器, 用户其它操作必须等待请求完成才可以执行.
type: 请求方式, 常见参数为 POST,GET 等等, 默认为 "GET". 注意: 其它 HTTP 请求方法, 如 PUT 和 DELETE 也可以使用, 但仅部分浏览器支持.
data: 请求参数. 必须为 Key/Value 格式. 如果为数组, jQuery 将自动为不同值对应同一个名称. 如 {name:["zhangsan", "lisi"]} 转换为 '&name=zhangsan&name=lisi'.
dataTpye: 预期服务器返回的数据类型. 如果不指定, jQuery 将自动根据 HTTP 包 MIME 信息来智能判断, 比如 xml MIME 类型就被识别为 xml. 在 1.4 中, JSON 就会生成一个 JavaScript 对象, 而 script 则会执行这个脚本. 随后服务器端返回的数据会根据这个值解析后, 传递给回调函数. 可用值如下:
"xml": 返回 xml 文档, 可用 jQuery 处理.
"html": 返回纯文本 HTML 信息; 包含的 script 标签会在插入 dom 时执行.
"script": 返回纯文本 JavaScript 代码. 不会自动缓存结果. 除非设置了 "cache" 参数. 注意: 在远程请求时(不在同一个域下), 所有 POST 请求都将转为 GET 请求.(因为将使用 DOM 的 script 标签来加载)
"json": 返回 JSON 数据 .
"jsonp": JSONP 格式. 使用 JSONP 形式调用函数时, 如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名, 以执行回调函数.
"text": 返回纯文本字符串
contentType: 请求数据的类型,(默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型. 默认值适合大多数情况. 如果你明确地传递了一个 content-type 给 $.Ajax() 那么他必定会发送给服务器(即使没有数据要发送). 如果请求数据是 JSON 格式的, 则需要填写'application/json; charset=UTF-8', 否则后台无法获取到数据.
如果要处理 $.Ajax()得到的数据, 则需要使用回调函数. beforeSend,error,dataFilter,success,complete.
beforeSend 在发送请求之前调用, 并且传入一个 XMLHttpRequest 作为参数.
error 在请求出错时调用. 传入 XMLHttpRequest 对象, 描述错误类型的字符串以及一个异常对象(如果有的话)
dataFilter 在请求成功之后调用. 传入返回的数据以及 "dataType" 参数的值. 并且必须返回新的数据 (可能是处理过的) 传递给 success 回调函数.
success 当请求之后调用. 传入返回后的数据, 以及包含成功代码的字符串.
complete 当请求完成之后调用这个函数, 无论成功或失败. 传入 XMLHttpRequest 对象, 以及一个包含成功或错误代码的字符串.
注意, 必须确保网页服务器报告的 MIME 类型与我们选择的 dataType 所匹配. 比如说, JSON 的话, 服务器端就必须声明 application/JSON 来获得一致的结果.
示例:
- // 发送登陆请求
- $.Ajax({
- url:"/login.do" ,
- type:"POST" ,
- dataType:"text",
- data:{"name":"zhangbo"},
- success:function (data) {
- alert(data);
- },
- error:function () {
- alert("请求响应错误");
- }
- });
- // 加载并执行一个 JS 文件.
- $.Ajax({
- type: "GET",
- url: "test.js",
- dataType: "script"
- });
- // 装入一个 HTML 网页最新版本.
- $.Ajax({
- url: "test.html",
- cache: false,
- success: function(HTML){
- $("#results").append(HTML);
- }
- });
- // 同步加载数据. 发送请求时锁住浏览器. 需要锁定用户交互操作时使用同步方式.
- var HTML = $.Ajax({
- url: "some.php",
- async: false
- }).responseText;
- // 发送 xml 数据至服务器. 设置 processData 选项为 false, 防止自动转换数据格式.
- var xmlDocument = [create xml document];
- $.Ajax({
- url: "page.php",
- processData: false,
- data: xmlDocument,
- success: handleResponse
- });
2. 使用 $.get()发送 get 请求
一个简单的 GET 请求功能 . 请求成功时可调用回调函数. 如果需要在出错时执行函数, 请使用 $.Ajax.
$.get(url, [data], [callback], [type])的参数列表如下:
url: 待载入页面的 URL 地址
data(可选): 待发送 Key/value 参数.
callback(可选): 回调函数.
type(可选): 响应结果的类型. xml, HTML, script, JSON, text, _default.
- $.get("/login.do",{username:"zhangbo"},function (data) {
- alert(data);
- },"text");
3. 使用 $.post()发送 post 请求
一个简单的 POST 请求功能 . 请求成功时可调用回调函数. 如果需要在出错时执行函数, 请使用 $.Ajax.
$.post(url, [data], [callback], [type])的参数列表如下:
url: 待载入页面的 URL 地址
data(可选): 待发送 Key/value 参数.
callback(可选): 回调函数.
type(可选): 响应结果的类型. xml, HTML, script, JSON, text, _default.
- $.post("/login.do",{username:"zhangbo"},function (data) {
- alert(data);
- },"text");
除了这些还有 put,delete 等等请求, 和 $.get(),$.post()差不多, 就不一一叙述了.
上述三种异步实现的方式都大同小异, 使用 Ajax 的关键就在于 JSON 格式数据的获取与响应, 其他的并不难.
来源: https://www.cnblogs.com/Code-Handling/p/12035121.html