jQuery中的AJAX的使用
1.运用ajax()方法,比其它如load()、get()、post()全局性函数它更多地关注实现过程中的细节;首先要了解其参数列表:
url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址。
type:要求为String类型的参数,请求方式(post或get)默认为get。注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持。
timeout: 要求为Number类型的参数,设置请求超时时间(毫秒)。此设置将覆盖$.ajaxSetup()方法的全局设置。
async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为false。注意,同步请求将锁住浏览器,用户其他操作必须等待请求完成才可以执行。
cache:要求为Boolean类型的参数,默认为true(当dataType为script时,默认为false)。设置为false将不会从浏览器缓存中加载请求信息。
data: 要求为Object或String类型的参数,发送到服务器的数据。如果已经不是字符串,将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换,可以查看processData选项。对象必须为key/value格式,例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组,JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。
dataType: 要求为String类型的参数,预期服务器返回的数据类型。如果不指定,JQuery将自动根据http包mime信息返回responseXML或responseText,并作为回调函数参数传递。可用的类型如下:
xml:返回XML文档,可用JQuery处理。
html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行。
script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时(不在同一个域下),所有post请求都将转为get请求。
json:返回JSON数据。
jsonp:JSONP格式。使用SONP形式调用函数时,例如myurl?callback=?,JQuery将自动替换后一个 “?”为正确的函数名,以执行回调函数。
text:返回纯文本字符串。
beforeSend:要求为Function类型的参数,发送请求前可以修改XMLHttpRequest对象的函数,例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求XMLHttpRequest对象是惟一的参数。
function(XMLHttpRequest){
this; //调用本次ajax请求时传递的options参数
}
complete:要求为Function类型的参数,请求完成后调用的回调函数(请求成功或失败时均调用)。参数:XMLHttpRequest对象和一个描述成功请求类型的字符串。
function(XMLHttpRequest, textStatus){
this; //调用本次ajax请求时传递的options参数
}
success:要求为Function类型的参数,请求成功后调用的回调函数,有两个参数。
(1)由服务器返回,并根据dataType参数进行处理后的数据。
(2)描述状态的字符串。
function(data, textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this; //调用本次ajax请求时传递的options参数
error:要求为Function类型的参数,请求失败时被调用的函数。该函数有3个参数,即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。
ajax事件函数如下:
function(XMLHttpRequest, textStatus, errorThrown){
//通常情况下textStatus和errorThrown只有其中一个包含信息
this; //调用本次ajax请求时传递的options参数
}
contentType:要求为String类型的参数,当发送信息至服务器时,内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。
dataFilter:要求为Function类型的参数,给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据,type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
function(data, type){
//返回处理后的数据
return data;
}
global:要求为Boolean类型的参数,默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件,ajaxStart或ajaxStop可用于控制各种ajax事件。
ifModified:要求为Boolean类型的参数,默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false,即忽略头信息。
jsonp:要求为String类型的参数,在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分,例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。
username:要求为String类型的参数,用于响应HTTP访问认证请求的用户名。
password:要求为String类型的参数,用于响应HTTP访问认证请求的密码。
processData:要求为Boolean类型的参数,默认为true。默认情况下,发送的数据将被转换为对象(从技术角度来讲并非字符串)以配合默认内容类型"application/x-www-formurlencoded"。如果要发送DOM树信息或者其他不希望转换的信息,请设置为false。
scriptCharset:要求为String类型的参数,只有当请求时dataType为"jsonp"或者"script",并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。
<script type="text/javascript" src="~/Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function () {
$("#标签ID").click(function () {
$.ajax({
url: "目标url",
type: "请求方式,GET或POST",
dataType: "返回数据类型,如json,xml等",
data: {//请求携带参数
key1: "value1",
key2: "value2"
},
success: function (data) {
//请求成功后做什么,请写上你的代码
//data返回的数据
}
});
});
});
</script>
2.Ajax在jQuery中的常见使用方法:
- Jquery.get(url,[data],[callback],[type]) 通过远程HTTP GET请求载入信息,简单的GET请求功能以取代复杂Jquery.ajax()中的GET方式,如果需要在出错时执行函数,请使 用Jquery.ajax();其中参数如下:url:待载入页面的URL地址。data:待发送 Key/value 参数(可选)。callback:载入成功时回调函数(可选)。type:返回内容格式,xml, html, script, json, text, _default(可选)。
<script type="text/javascript" src="~/Scripts/jquery-1.8.2.min.js"></script>
//引入jQuery文件
<script type="text/javascript">
$(function () {
$("#标签ID").click(function () {
$.get("目标Url地址",
{ key: "value" },//参数,键值对
function (data) {//data返回的数据
//这里写你的代码
});
});
})
</script>
- Jquery.post(url,[data],[callback],[type]) 通过远程HTTP POST请求载入信息,简单的GET请求功能以取代复杂Jquery.ajax()中的POST方式,全局函数Jquery.post()跟Jquery.get()在本质上没有太大的区别,所不同的是,Get方式适合传递数据量较大的数据,同时,其请求的历史信息会保存在浏览器的缓存中,有一定的安全风危;Post方式就不会存在这两方面的不足;,如果需要在出错时执行函数,请使用Jquery.ajax();其中参数如下:url:待载入页面的URL地址。data:待发送 Key/value 参数(可选)。callback:载 入成功时回调函数(可选)。type:返回内容格式,xml, html, script, json, text, _default(可选)。
<script type="text/javascript" src="~/Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function () {
$("#标签ID").click(function() {
$.post("目标Url",
{//参数
key1: "value1",
key2: "value2"
},
function(data) {
//你的代码你做主
});
});
})
</script>
- jQuery.getJSON(url, [data], [callback])通过 HTTP GET 请求载入 JSON 数据。其方法可以专门快速获得JSON文件的内容,其中参数如下:url:待载入页面的URL地址。 data:待发送 Key/value 参数(可选)。callback:载入成功时回调函数(可选)。其和get方法一样,区别就是这个返回数据类型定为json格式的了,内部还是调用get方法。
<script type="text/javascript" src="~/Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function () {
$("#标签ID").click(function () {
$.getJSON("目标url",
{//参数
key: "value1",
key2: "value2"
},
function (data) {
//你的代码你做主
});
});
})
</script>
- jQuery.getScript(url, [callback]) 通过 HTTP GET 请求载入并执行一个 JavaScript 文件,jQuery.getScript()不仅可以像加载页面片段一样轻松地注入脚本,而且所注入的脚本会自动执行,大大提高了页面的执行效率。其中参数如下:url:待载入 JS 文件地址。callback:成功载入后回调函数(可选)。
<script type="text/javascript" src="~/Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function () {
$("#标签ID").click(function() { //按钮单击事件
//打开已获取返回数据的文件
$.getScript("返回js的url");
});
})
</script>
- load(url, [data], [callback])方法与上面其四个不同的它不是全局函数,载入远程 HTML 文件代码并插入至 DOM 中,其中参数如下:url:待装入 HTML 网页网址。data:发 送至服务器的 key/value 数据,在jQuery 1.3中也可以接受一个字符串了。callback:载入成功时回调函数。注意:参数url还可以用于过滤页面中的某类别的元素,如代码"$. ('#divTip').load("b.html .divContent")",则表示获取页面b.html中类别名为"divContent"的全部元素;因为浏览器在获得数据时经常会有缓存,所以在请求时可以增加一个时 间的参数避开这个问题:"b.html?date="+Date();
<script type="text/javascript" src="~/Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function () {
$("#标签ID1").click(function () {
$("#标签ID2").load("目标url");
});
})
</script>
以上所提及的选择器为ID选择器,仅作演示。实际中根据你的需求使用合适的选择器。
get,getJson,post等其实只是对ajax方法的进一步封装,如果想高效些,请直接使用ajax方法。
jQuery中的AJAX的使用的更多相关文章
- Jquery中的Ajax
AJAX: * jQuery中的Ajax * 封装第一层 - 类似于原生Ajax的用法 * $.ajax() - 最复杂 * 选项 * url - 请求地址 * type - 请求类型,默认为GET ...
- jQuery入门(4)jQuery中的Ajax应用
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- 【Java EE 学习 33 上】【JQuery样式操作】【JQuery中的Ajax操作】【JQuery中的XML操作】
一.JQuery中样式的操作 1.给id=mover的div采用属性增加样式.one $("#b1").click(function(){ $("#mover" ...
- jquery中的ajax参数
jquery中将ajax封装成了函数,我们使用起来非常方便,jquery会自动根据内容选择post还是get方式提交数据,并且会自动编码,但是要想完全掌握jquery中的ajax,我们必须将它的各个参 ...
- 用JQuery中的Ajax方法获取web service等后台程序中的方法
用JQuery中的Ajax方法获取web service等后台程序中的方法 1.准备需要被前台html页面调用的web Service,这里我们就用ws来代替了,代码如下: using System; ...
- jQuery中操作Ajax方法小结
有时候,越深入去了解一个点,越发觉得自己无知,而之前当自己晓得一两个片面的点还洋洋自得,殊不知,这是多么讽刺 jQery对Ajax操作进行了封装,常见的 ajax()属于最底层的方法,使用频率很高的 ...
- $.ajax()方法详解 jquery中的ajax方法
jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(p ...
- 深入理解ajax系列第九篇——jQuery中的ajax
前面的话 jQuery提供了一些日常开发中需要的快捷操作,例如load.ajax.get和post等,使用jQuery开发ajax将变得极其简单.这样开发人员就可以将程序开发集中在业务和用户体验上,而 ...
- 两强相争,鹿死谁手 — JQuery中的Ajax与AngularJS中的$http
一.JQuery与AngularJS 首先,先简单的了解一下JQuery与AngularJS.从源头上来说,两者都属于原生JS所封装成的库,两种为平行关系. 二.Ajax请求与数据遍历打印 这里是Aj ...
- jQuery中的$.ajax()方法
jQuery中的$.ajax()方法 $.ajax({ type:"POST", url:"../page/user.action?userId=" + use ...
随机推荐
- webpack 常用插件及作用
copy-webpack-plugin :复制文件到目标文件夹.在开发时使用热模替换,(没有生成dist 文件夹,都在内存中),如果想引用某一个js文件,直接写script标签是找不到的,因为服务器内 ...
- 第五章 二叉树(e1)先序遍历
- Python3 pow() 函数
Python3 pow() 函数 Python3 数字 描述 pow() 方法返回 xy(x的y次方) 的值. 语法 以下是 math 模块 pow() 方法的语法: import math mat ...
- Python staticmethod() 函数
Python staticmethod() 函数 Python 内置函数 python staticmethod 返回函数的静态方法. 该方法不强制要求传递参数,如下声明一个静态方法: class ...
- C# .net MD5加密函数
using System.Web.Security; string password =FormsAuthentication.HashPasswordForStoringInConfigFile(t ...
- dede添加自定义函数
在dede安装目录下的include/extend.func.php添加自定义函数: /** * 获取文章第一张图片 */ function getFirstImg($arcId) { global ...
- win, cmd下安装mysql(win真tm难用)
常用命令: 修改root用户密码 update mysql.user set authentication_string=password('1234qwer') where user='root' ...
- PAT 1015 德才论 (25)(代码+思路)
1015 德才论 (25)(25 分)提问 宋代史学家司马光在<资治通鉴>中有一段著名的"德才论":"是故才德全尽谓之圣人,才德兼亡谓之愚人,德胜才谓之君子, ...
- makefile all
all:udps udpc udps:udpserv.c gcc -Wall -o udps udpserv.cudpc:udpclient.c gcc -Wall -o udpc udp ...
- Jmeter的log输出控制
Jmeter的log输出控制(jmeter.log) log_level.jmeter=ERROR log_level.jmeter.junit=DEBUG 在jmeter.properties中,修 ...