面试被问到jquery对ajax的支持应该怎么

电脑教程018

面试被问到jquery对ajax的支持应该怎么,第1张

今天就来说说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")

}

})

}

ajax是一种技术方案,但并不是一种新技术。它依赖的是现有的CSS/HTML/JavaScript,而其中最核心的依赖就是浏览器提供的XMLHttpRequest对象,是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应,实现在页面不刷新的情况下和服务端进行数据交互。浏览器升级之后,出现了fetch,也可以认为是ajax的一种实现。(兼容性差)

使用XMLHttpRequest对象来发送一个Ajax请求。

status:200-300表示正常状态码。

status:404表示这个文件不存在。

status:503服务器收到了请求但是内部报错了。

status:304表示这个数据是有缓存的。

readyState:存有XMLHttpRequest的状态。从0~4发生变化

只要readyState属性的值由一个值变成另一个值,都会触发一次readystatechange事件。必须在调用open()之前指定onreadystatechange事件处理程序才能保证跨浏览器兼容性。与其他事件不同的是,这里没有向readystatechange事件处理程序中传递event对象,必须通过XHR对象本身来确定下一步该怎么做。

在接受响应之前,还可以调用abort()方法来取消异步请求,

调用这个方法之后,XHR对象会停止触发事件,而且也不在允许访问任何与响应有关的对象属性。

XMLHttpRequest标准又分为Level 1和Level 2。

1.缺点:

此属性可以设置HTTP请求的时限。与之相关的是timeout()事件,用来指定回调函数。

timeout属性表示请求在等待多少毫秒之后就终止,再给timeout设置一个数值后,如果在规定的时间内浏览器还没有接收到响应,那么就会触发timeout事件,进而会调用ontimeout事件处理程序。如果在超时终止请求之后再访问status属性,就会导致错误。为避免浏览器报告错误,可以将检查status属性的语句封装在一个try-catch语句中。

ajax直接传送FormData对象与点击submit提交网页表单的效果是一样的。

使用FormData的优点:不必明确地在XHR对象上设置请求头部,XHR能够识别传入的数据类型是FormData的实例,并配置适当的头部信息。

假定files是一个"选择文件"的表单元素(input[type="file"]),将它装入FormData对象,之后发送FormData即可实现文件的上传。

作用:指定xhr.response的数据类型。

作用:获取response数据

作用:表示发送数据。

xhr.send(data)的参数data可以是以下几种类型:

阮一峰:XMLHttpRequest Level 2 使用指南

你真的会使用XMLHttpRequest么?

《javascript高级程序设计》

饥人谷前端教程