本文主要是介绍jQuery—Ajax使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
AJAX是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新[百度百科]
** XMLHttpRequest对象
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
常用属性：
| readyState 属性：存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。 状态 描述 |
| responseText 属性：可以通过 responseText 属性来取回由服务器返回的数据。 |
| Status属性：服务器返回的http状态码。200表示“成功”，404表示“未找到”，500表示“服务器内部错误”等。 |
| statusText属性：服务器返回状态的文本信息。 |
| responseXML属性：服务器响应的XML内容对应的DOM对象 |
** load()方法
.load()方法可以参数三个参数：url(必须，请求 html 文件的 url 地址，参数类型为String)、data(可选，发送的 key/value 数据，参数类型为Object)、callback(可选，成功或失败的回调函数，参数类型为函数 Function)
| // post方式发送 url | data | callback function $("input").eq(1).click(function(e){ $("div").load("/jquery/Ajax_load",{ url:'send url', },function(response, status, xhr){// 返回值状态 /* XMLhttpRequest 对象属于JavaScript范畴 属性： responseText:返回的主题 responseXML:返回包含数据的XML DOM文档 status:响应的HTPP状态 statusText:HTTP状态说明 */ // alert("返回值："+response+" | 返回状态："+status); alert("responseText: "+xhr.responseText +"responseXML: "+xhr.responseXML +"status: "+xhr.status +"statusText: "+xhr.statusText); }); }); |
** $.get()和$.post()
.load()方法是局部方法，因为他需要一个包含元素的 jQuery 对象作为前缀。而$.get()和
$.post()是全局方法，无须指定某个元素。对于用途而言，.load()适合做静态文件的异步获取，而对于需要传递参数到服务器页面的，$.get()和$.post()更加合适。
$.get()方法有四个参数，前面三个参数和.load()一样，多了一个第四参数 type，即服务
器返回的内容格式：包括 xml、html、script、json、jsonp 和 text。
| /* get: 地址url, 数据data, 回调函数, 返回类型 返回类型: html, json, xml, text等 */ $('input').eq(0).click(function(){ $.get('/jquery/Ajax_load',{data:"some request data"},function(response,status,xhr){ if(status=='success'){ $("div").html(response); }else{ alert("responseText: "+xhr.responseText +"status: "+xhr.status +"statusText: "+xhr.statusText); } },'html'); }); |
$.post()方法和$.get()方法一样
| /* post */ $('input').eq(1).click(function(){ $.post('/jquery/Ajax_load',{data:'use ajax send data'},function(response,status,xhr){ if(status=='success'){ $("div").html(response); }else{ alert("responseText: "+xhr.responseText +"status: "+xhr.status +"statusText: "+xhr.statusText); } }); }); |
** $.getScript()和$.getJSON()
jQuery 提供了一组用于特定异步加载的方法：$.getScript()，用于加载特定的 JS 文件；
$.getJSON()，用于专门加载 JSON 文件。
** $.ajax()
$.ajax()是所有 ajax 方法中最底层的方法，所有其他方法都是基于$.ajax()方法的封装。
这个方法只有一个参数。
| /* $.ajax 常用参数： url 发送请求的地址 type 请求方式get或者post timeout 请求超时时间 data 发送到服务器的数据 dataType 返回的数据类型 complate 请求完成后调用的回调函数 success 请求成功后调用的回调函数 error 请求失败后调用的回调函数 contentType 指定请求内容的类型 dataFilter 用来筛选响应数据的回调函数 ...... */ $('input').eq(2).click(function(){ $.ajax({ url:'/jquery/Ajax_load', type:'post', data:{data:'use ajax send data'}, success:function(response,status,xhr){ if(status=='success'){ $("div").html(response); }else{ alert("responseText: "+xhr.responseText +"status: "+xhr.status +"statusText: "+xhr.statusText); } } }); }); |
** 表单序列化
使用表单序列化方法.serialize()，会智能的获取指定表单内的所有元素。这样，在面对大量表单元素时，会把表单元素内容序列化为字符串，然后再使用Ajax请求。
除了.serialize()方法，还有一个可以返回JSON 数据的方法：.serializeArray()。这个方法
可以直接把数据整合成键值对的 JSON对象。
| <form> 用户名：<input name="user" type="text"><br/> 电话号码：<input name="phone" type="text"><br/> 性别： <input name="gender" value='1' type="radio" checked="checked">男 <input name="gender" value="0" type="radio">女<br/> <input type="submit" value="submit"> </form> |
| #1 .serialize() $("input[type=submit]","form").click(function(){ $.ajax({ url:'/jquery/Ajax_Adv', data:$("form").serialize(), type:'post', success:function(resp, status, xhr){ $("div").html(resp); } }); returnfalse; }); |
| #2 .serializeArray $("input[type=submit]","form").click(function(){ $.ajax({ url:'/jquery/Ajax_Adv', data:$("form").serializeArray(), type:'post', success:function(resp, status, xhr){ $("div").html(resp); } }); returnfalse; }); |
** 请求加载
jQuery 提供了两个全局事件，.ajaxStart()和.ajaxStop()。这两个全局事件，只要用户触发
了Ajax，请求开始时（未完成其他请求）激活.ajaxStart()，请求结束时（所有请求都结束了）激活.ajaxStop()。
| $("div").ajaxStart(function(){ alert("开始 AJAX 请求已完成"); }); $("div").ajaxStop(function(){ alert("所有 AJAX 请求已完成"); }); |
** 请求全局事件
jQuery对于Ajax 操作提供了很多全局事件方法，.ajaxStart()、.ajaxStop()、.ajaxError()
等事件方法。他们都属于请求时触发的全局事件，除了这些，还有一些其他全局事件：
.ajaxSuccess()，对应一个局部方法：.success()，请求成功完成时执行。
.ajaxComplete()，对应一个局部方法：.complete()，请求完成后注册一个回调函数。
.ajaxSend()，没有对应的局部方法，只有属性beforeSend，请求发送之前要绑定的函数。
** jqXHR对象
在之前，我们使用了局部方法：.success()、.complete()和.error()。这三个局部方法并不
是XMLHttpRequest 对象调用的，而是$.ajax()之类的全局方法返回的对象调用的。这个对象，就是 jqXHR对象，它是原生对象XHR的一个超集。
使用 jqXHR的连缀方式比$.ajax()的属性方式有三大好处：
1.可连缀操作，可读性大大提高
2.可以多次执行同一个回调函数
3.为多个操作指定回调函数
** .done()、.Fail()、always()
使用.success()、.error()和.complete()连缀的方法，可以用.done()、.fail()和.always()取代。
| $("input[type=submit]").click(function(){ $.ajax({ url:'/jquery/Ajax_Adv', data:$("form").serializeArray(), type:'post', }).done(function(resp){ $("div").empty(); $("div").append("<span>"+resp+" ==> 1</span><br/>"); }).done(function(resp){ $("div").append("<span>"+resp+" ==> 2</span>"); }).fail(function (statusText, status){ alert(statusText+" | "+status); }).always(function(resp,status,xhr){ alert("状态："+status+" | 返回数据："+resp); console.log(xhr); }); returnfalse; }); |
这篇关于jQuery—Ajax使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
