jquery对ajax的支持

前面详细介绍的了XMLHttpRequest http://www.cnblogs.com/shenliang123/archive/2012/05/13/2498524.html，是采用纯js的方式来实现的，这样有助于我们对底层XMLHttpRequest的实现的了解，但也有缺点就是创建会比较的麻烦并且不够果断

今天就来说说jquery对于ajax的支持，jquery封装了XMLHttpRequest的底层实现，直接调用提供的方法即可

1.$.ajax(options)

这个方法是jquery对于ajax最为全面的支持，$.ajax(options)既可以发送GET请求，也可以发送POST请求等等，因此我们通过这个方法可以获得ajax交互的所有控制权。

该方法中包含了一个参数options，该参数的形式为{key1:val1,key2:val2,key3:val3....},如

{url:delTagAction,data:{sendTime:(new Date()).getTime(),idStr:idStr},type:"post",async:false,dataType:"json",success:function(data){if(data.success){$("#shield").fadeOut(400);$("#subDetailWrapper").fadeOut(400);$("#middle").load(listTagAction,{sendTime:(new Date()).getTime(),currentPage:currentPage})alert("操作成功！！！");}else{alert("操作失败，请联系开发人员！！！");}}}

下面就介绍发送ajax请求可指定的各个选项：

常用的：
async-----------------------------------指定是否使用异步请求，默认值为true(使用异步)

beforeSend-----------------------------指定发送请求之前将触发指定的函数，通过该函数我们可以在请求前加一些自定义的请求头或者是请求状态条等，

complete-------------------------------指定ajax交互完成后的回调函数，该函数将在succes或error回调函数之后被调用。该选项指定的函数是形如：

function(xhr,textStatus){....},xhr表示本次交互的XMLHttpRequest对象,textStatus表示服务器端相应状态的描述。

data------------------------------------发送本次ajax请求的请求参数。指定的参数形如：{key1:val1,key2:val2,key3:val3....}

dataType------------------------------指定服务器响应的类型，如果不指定，jquery会根据响应头来返回responseXML或responseText,并将响应传给回调函数对应的参数，可选值有以下：

　　xml:返回可以使用jquery处理的XML文档

　　html:返回html文本

　　script:返回javascript脚本，要注意的是此时必须将读取浏览器缓存禁止掉

　　json:返回一个符合json格式的字符串

　　text:返回普通的文本响应

　　jsonp:指定使用jsonp加载json块，使用jsonp时应该在请求的url之后额外添加“？callback=?”,其中callback为回调函数

error-----------------------------------指定服务器响应出现错误的回调函数，指定的函数型形如function(xhr, textStatus, errorThrown){..},其中xhr参数表示请求的XMLHttpRequest对象，textStatus参数为关于错误的信息描述，errorThrown参数表示引起错误的错误对象

success---------------------------------指定服务器响应成功后的回调函数，指定的函数型形如function(xhr, textStatus){..},其中xhr参数表示请求XMLHttpRequest对象，textStatus参数为服务器响应状态的信息

timeout---------------------------------设置ajax请求超时时长

type-------------------------------------设置发送请求的方式，常用的就是“POST”与"GET",默认值为"GET"

url---------------------------------------指定发送ajax请求的目的URL地址

其他：

cache-----------------------------------是否从浏览器中读取缓存，默认为true(读取缓存)，我们一般是不希望读取缓存的，办法就是在发送的参数中添加时间戳来骗过浏览器

contentType---------------------------指定发送到服务器端的请求所使用的编码格式，默认值为“application/x-www-form-urlencoded”

dataFilter------------------------------执行一个回调函数，该回调函数会对服务器端的响应进行预处理，指定的函数如：function(data,type){....},data表示服务器端返回的响应，type表示服务器端响应的数据类型

global----------------------------------设置是否触发ajax的全局事件处理函数，默认值为true

ifModified------------------------------设置是否仅在服务器数据改变获取新数据，默认值为false

jsonp-----------------------------------该选型指定的值将会覆盖jsonp中请求的callback函数

username-------------------------------对目标url需要用户名的指定用户名

password-------------------------------对目标url需要密码的指定密码

processData----------------------------指定是否需要处理请求数据，默认为true(需要处理)

xhr--------------------------------------使用自己的方式来创建XMLHttpRequest对象

示例常用选项的ajax：

function update(delTagAction, listTagAction){var tagId = $("#examId").val(); var currentPage=$("#currentPage").val();  //获取当前页//alert(currentPage);var ids=new Array();if($("input[name='id']:checked").size()==0){alert("请先勾取选项！");return false;}$("input[name='id']:checked").each(function(i,obj){ids[i]=$(obj).val();});var idStr=ids.join("-");$.ajax({url:delTagAction,data:{sendTime: (new Date()).getTime(),idStr: idStr,tagId: tagId},type:"post",async:false,dataType:"json",success:function(data){if(data.success){$("#middle").load(listTagAction,{sendTime:(new Date()).getTime(),currentPage:currentPage})alert("操作成功！！！");}else{alert("操作失败，请联系开发人员！！！");}}});
}

看上面的代码大家可以看到一个load方法的使用：

$("#middle").load(listTagAction,
      {
       sendTime:(new Date()).getTime(),
       currentPage:currentPage
      }
)

load方法是一个非常便捷的ajax交互方法，它可以向一个远程URL发送一个异步请求，可以不需要指定回调函数，可以指定一个制定id的css来自动加载服务器的html响应

方法说明如下：load(url, [,data][,callback]),data是一个形如{key1:val2,key2:val2,key3:val3...}的js对象，callback为回调函数，两个参数都是可选的

下面示例：

//根据省份来进行显示
function show(tagAction, city){$("#detail").empty();$("#detail").load(tagAction,{sendTime:(new Date()).getTime(),city: city});
}

交互后，服务器端返回的数据将加载到id为detail的元素的位置

2.上面介绍的$.ajax(options)为我们提供了全面控制ajax的请求细节，但另一个方面就会显得比较的复杂，因此jquery提供了几个简单的方法来发送请求

(1)$.get(url, [data], [callback], [type]):向服务器端发送GET请求，参数表示分别是：url：访问的服务器的地址；data:一个js对象，同于指定请求参数；

callback:指服务器响应成功后的回调函数，该函数形如：function(data, statusText){...}函数，其中data表示服务器端的响应，statusText表示服务器端

响应类型的描述信息；type:表示服务器端响应的数据类型

(2)$.post(url, [data], [callback], [type]):用于向服务器端发送Post请求，用法与$.get()一样

(3)$.getJSON(url, [data], [callback]):与$.get()一样，只是默认指定type方式为json

(4)$.getScript(url, [callback])：与$.get()一样，只是默认指定type方式为script

这四个方法都比较相似：以$.getJSON(url, [data], [callback])方法示例代码

function startExam() {//这里通过ajax进行交互$.getJSON("../adminPath/startExamAction.action", {sendTime:(new Date()).getTime()}, function(json) {if (json.success == true) {//alert(json.responseMsg);$("#rightContent").load("../adminPath/settingExam.action", {sendTime: (new Date()).getTime(), pid: json.pid, tskid: json.tskid, examId: 0});} else {alert("\u64cd\u4f5c\u5931\u8d25\uff01");}});
}

jquery对ajax的支持相关推荐

java接口支持ajax,【JavaWeb】jQuery对Ajax的支持
jQuery对Ajax的支持 jQuery对Ajax进行封装,提供了$.ajax()方法语法:$.ajax(options) 常用设置项说明 url 发送请求地址 type 请求类型get|pos ...
IT兄弟连 JavaWeb教程 jQuery对AJAX的支持经典案例
案例需求:编写用户登陆页面的验证码模块,在用户进行登陆时,输入验证码后不需要点击提交按钮,使用AJAX异步地向服务器发送验证验证码的请求.如果验证码正确,可以点击提交按钮,如果验证码输入错误,提示用户 ...
不同浏览器 ajax,完整的 AJAX 写法(支持多浏览器)
代码如下: var xmlhttp; function Submit() { //1.创建 XMLHttpRequest 对象 if (window.XMLHttpRequest) { //IE7,I ...
js ajax获得对象怎么放到td上,jquery通过AJAX从后台获取信息并显示在表格上，并支持行选中...
不想用Easyui的样式,但是想要他的表格功能,本来一开始是要到网上找相关插件的,但是没找到就开始自己写,没想到这么简单. 后台代码:(这个不重要) public ActionResult GetDi ...
从零开始学习jQuery (六) AJAX快餐【转】
一.摘要本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章讲解如何使用jQuery方便快捷的实现A ...
jQuery之Ajax应用
一.jQuery中$.Ajax()方法的参数 1.url #发送请求的地址 2.type #HTTP 请求方法(默认以GET发送) 可用值: -GET -POST ...
jQuery的Ajax初识
1. 什么是Ajax? Ajax是"Asynchronous Javascript And XML(异步Javascript和XML)"的缩写, 是指一种创建交互式网页应用的网站开 ...
从零开始学习jQuery (六) AJAX快餐
本系列文章导航从零开始学习jQuery (一) 开天辟地入门篇从零开始学习jQuery (二) 万能的选择器从零开始学习jQuery (三) 管理jQuery包装集从零开始学习jQuery ( ...
jQuery+php+ajax实现无刷新上传文件功能
2019独角兽企业重金招聘Python工程师标准>>> jQuery+php+ajax实现无刷新上传文件功能,还带有上传进度条动画效果,支持图片.视频等大文件上传. js代码: &l ...

jquery对ajax的支持

jquery对ajax的支持

jquery对ajax的支持相关推荐

最新文章

热门文章