jq中阿贾克斯的格式及做用

时间 2019-12-08

标签格式栏目 JavaScript 繁體版

原文原文链接

jq中阿贾克斯的格式及做用javascript

Ajax,我一直读的是"阿贾克斯",据当时大学老师讲该读音出处是根据当年风靡欧洲的荷兰足球俱乐部阿贾克斯的名字来的,我以为说法挺靠谱的。css

jQuery封装了Ajax的交互过程，用户不须要考虑XMLHttpRequest对象的兼容性问题以及使用XMLHttpRequest创建链接、发送请求、发送方式、接收方式等细节，利用jquery定义html

的几个简单方法，便可轻松实现客户端与服务端异步通讯的问题，从而帮助开发人员从繁琐的技术细节中解脱出来，专心于业务层开发工做。java

最初始的JavaScript的Ajax在刚刚接触编程的时候接触过，如今都忘没了，只记得首先得获取XMLHttpRequest对象，实际开发中用的全都是jQuery封装好的Ajax，用的也是很繁。jquery

jQuery中$.ajax()方法属于最底层的方法，第二层是load()、$.get()和$.post()方法，第三层是$.getScript()和$.getJSON()方法，其中当属第二层的三个方法使用的频率最高。ajax

一、使用get和post请求编程

get()方法包含4个参数，说明以下：json

第一个参数表示要请求的URL地址浏览器

第二个参数表示一个对象结构的名/值对列表缓存

第三个参数表示异步交互成功以后调用的回调函数，回调函数的参数值为服务器端相应的信息。

第四个参数表示服务器端响应信息返回的内容格式(如XML、HTML、Script、JSON、Text)

其中第一个参数Url是必选参数，后面三个为可选参数。

get()方法是只能在请求成功后调用回调函数,若是要在出错的时候执行回调函数，则必须使用$.ajax()方法。第二个参数所传递的参数能够写在url后面。

[html] view plain copy

print?

<span style="font-family:SimSun;font-size:12px;"> $.get(
"test1.jsp",
{
name:"haha",
pass:"123"
},
function(data){ //回调函数
alert(data); //响应信息
}
)
就能够改为
$.get
(
"test1.jsp?name=haha&pass=123",function(data){
alert(data);
}
) </span>

jQuery还定义了两个专用方法getJSON()和getScript()。这两个方法的功能和用法与get是彻底相同的,只是支持前三个参数,不须要设置第四个参数，从他们的名字上就看出了他

们已经指定响应数据的类型。

post()方法与get()方法几乎相同,只是请求方式的不一样,具体选择哪一种请求方式开发人员本身根据特定需求去决定。

二、$.ajax

$.ajax方法的一些参数
url	发送请求的地址,默认为当前页面地址。
type	设置请求方式，如GET或者POST，默认为GET。
timeout	设置请求超时时间(毫秒)。此设置将覆盖全局设置。
data	发送到服务器的数据。将自动转换为请求字符串格式,必须为key/value格式。
dataType	预期服务器返回的数据类型。若是不指定，jQuery自动根据HTTP包含的MINE信息返回responseXML或responseText。 xml：返回xml文档，可用jquery处理 html：返回纯文本HTML信息：包含的script标签会在插入DOM时执行 script：返回纯文本JavaScript代码。不会自动缓存结果,除非设置了cache参数。 json：返回JSON数据 text：返回纯文本字符串
async	boolean类型,这个参数极为重要！！设置是否为异步请求,默认为true,即全部请求均为异步请求。若是须要发送同步请求,设置为false便可。同步和异步的区别,同步请求将锁住浏览器,用户其余操做必须等待请求完成才能够执行;而异步请求不会影响其余代码的执行。回想一下之前遇到过这种问题,就是在ajax方法内给变量赋值,再ajax方法后面alert该变量,有时候是得不到ajax方法内赋予的那个值。就是由于ajax请求设置的是异步请求的缘由。
beforeSend	发送请求可修改XMLHttpRequest对象的函数,如添加自定义的HTTP头,XMLHttpRequest对象时惟一参数，该函数若是返回fasle,能够取消本次Ajax请求。不经常使用，反正我是还没用过。
cache	设置缓存。默认值为true,当dataType为script的时候默认值是false，设置为false的时候将不会从浏览器缓存中加载请求信息。之前遇到过这个参数设置不对致使的问题,比较经常使用。
complete	请求完成后的回调函数(请求成功和失败均调用)。该函数包含两个参数：XMLHttpRequest对象和一个描述成功请求的类型的字符串。
global	是否触发全局Ajax事件，默认值为true。设置为false将不会触发全局ajax事件，如ajaxStart或ajaxStop可用于控制不一样的Ajax事件
success	请求成功后的回调函数,函数的参数是由服务器返回并根据dataType参数进行处理后的数据
error	请求失败时调用的回调函数。该函数包含三个参数：XMLHttpRequest对象、错误信息（可选）、捕获的错误对象。若是发生了错误,错误信息（第二个参数）除了获得null以外，还多是timeout、error、notmodified和parsererror。
scriptCharset	只有当请求时datatype为jsonp或script,而且type是GET才会用于强制修改charset。一般在本地和远程的内容编码不一样时使用。
dataFilter	给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数，data是ajax返回的原始数据，type是ajax请求时设置的dataType参数。函数的返回值将由jquery进一步处理。

其他也有一些，几乎没用过，不整理了。

三、跟踪状态

jQuery在XMLHttpRequest对象定义的readyState属性基础上，对异步交互中服务器响应状态进行封装,提供了6个响应事件,以便于进一步细化对整个请求响应过程的跟踪

[html] view plain copy

print?

<span style="font-family:SimSun;font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
//页面加载方法
$(function(){
$("input").click(function(){
$.ajax({
type:"POST",
url:"addClass.html",
data :"name=css8"
});
//设置全局ajax跟踪事件
$(document).ajaxStart(function(){
alert("Ajax请求开始")
});
$(document).ajaxSend(function(){
alert("Ajax请求将要发送")
});
$(document).ajaxComplete(function(){
alert("Ajax请求完成")
});
$(document).ajaxSuccess(function(){
alert("Ajax请求成功")
});
$(document).ajaxStop(function(){
alert("Ajax请求结束")
});
$(document).ajaxError(function(){
alert("Ajax请求失败")
});
})
})
</script>
</head>
<body>
<input type="button" value="ajax请求过程">
</body>
</html></span>

四、设置Ajax全局参数

对于频繁与服务器进行交互的页面来讲,每一次交互都要设置许多选项,这种操做是很繁琐的,也容易出错。为此,jQuery定义了ajaxSetup()方法，该方法能够预设异步交互中的通用

选项，从而减轻频繁设置选项的繁琐。ajaxSetup()方法的参数跟$.ajax()方法的参数相似,都是一个参数列表,在该方法中设置的选项能够实现全局共享,从而在具体的交互中只要

设置个性化参数便可。

使用方法：

[html] view plain copy

print?

<span style="font-family:SimSun;font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
//页面加载方法
$(function(){
$.ajaxSetup({
type:"POST",
dataType:"text",
success:function(data){
alert(data);
}
});
$("input").eq(0).click(function(){
$.ajax({
data:"name=wang"
});
});
$("input").eq(1).click(function(){
$.ajax({
data:"name=zhang"
});
});
})
</script>
</head>
<body>
<input type="button" value="按钮1" onclick="">
<input type="button" value="按钮2" onclick="">
</body>
</html></span>

知道有这个东西就行,用起来仍是比较简单的。

zearp