ajax

 

参数名	类型	描述
url	String	(默认: 当前页地址) 发送请求的地址。
type	String	(默认: “GET”) 请求方式 (“POST” 或 “GET”)， 默认为 “GET”。 注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
timeout	Number	设置请求超时时间（毫秒）。此设置将覆盖全局设置。
async	Boolean	(默认: true) 默认设置下，所有请求均为异步请求。 如果需要发送同步请求，请将此选项设置为 false。 注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
beforeSend	Function	发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。   XMLHttpRequest 对象是唯一的参数。 function (XMLHttpRequest) { this; // the options for this ajax request } function (XMLHttpRequest) { this; // the options for this ajax request }
cache	Boolean	(默认: true) jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。
complete	Function	请求完成后回调函数 (请求成功或失败时均调用)。   参数： XMLHttpRequest 对象，成功信息字符串。 function (XMLHttpRequest, textStatus) { this; // the options for this ajax request } function (XMLHttpRequest, textStatus) { this; // the options for this ajax request }
contentType	String	(默认: “application/x-www-form-urlencoded”) 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。
data	Object, String	发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。 查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。 如果为数组，jQuery 将自动为不同值对应同一个名称。 如 {foo:[“bar1”, “bar2”]} 转换为 ‘&foo=bar1&foo=bar2′。
dataType	String	预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息 返回 responseXML 或 responseText，并作为回调函数参数传递，可用值:   “xml”: 返回 XML 文档，可用 jQuery 处理。 “html”: 返回纯文本 HTML 信息；包含 script 元素。 “script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。 “json”: 返回 JSON 数据 。 “jsonp”: JSONP 格式。使用 JSONP 形式调用函数时， 如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
error	Function	(默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。   这个方法有三个参数：XMLHttpRequest 对象，错误信息，（可能）捕获的错误对象。 function (XMLHttpRequest, textStatus, errorThrown) { // 通常情况下textStatus和errorThown只有其中一个有值 this; // the options for this ajax request } function (XMLHttpRequest, textStatus, errorThrown) { // 通常情况下textStatus和errorThown只有其中一个有值 this; // the options for this ajax request }
global	Boolean	(默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件，   如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件
ifModified	Boolean	(默认: false) 仅在服务器数据改变时获取新数据。   使用 HTTP 包 Last-Modified 头信息判断。
processData	Boolean	(默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串)   以配合默认内容类型 “application/x-www-form-urlencoded”。 如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
success	Function	请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态 function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc… this; // the options for this ajax request } function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc… this; // the options for this ajax request }

jQuery对AJAX操作的封装——$.ajax() 
使用方法
$.ajax( {
type: ‘GET/POST/PUT/DELETE’, //请求的方式，有POST和GET两种，默认是GET，数据类型是String.也可以是http请求
url: ‘xx.php’, //请求的服务器地址，默认是当前页面，数据类型是String
data: ‘k1=v1&k2=v2’ | {k1:v1, k2:v2},

//data的传值方式有两种，http协议规定标准格式：k1=v1&k2=v2/或者是js对象格式：{k1:v1,k2:v2}。Jq在发送次格式的数据之前会自动调用$.param()将js对象改成第一种样式。
dataType: ‘text/html/script/xml/json/jsonp’,

//dataType：预期服务器返回的数据类型，数据类型是String，参数值有：xml：返回XML文档，可用JQuery处理。
html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
json：返回JSON数据。
jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
text：返回纯文本字符串。

async：‘true’所有请求是同步还是异步，当值是true时是异步请求，为false时是同步请求。同步请求会锁住浏览器，即进入页面假死状态，用户其他操作必须等待请求完成才可以执行，请求完成以后页面假死状态解除。
beforeSend: fn, //Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数
success: fn,

//success：请求成功后调用的回调函数。这里必须是Function类型的参数，它有两个参数：
(1)由服务器返回，并根据dataType参数进行处理后的数据。
(2)描述状态的字符串。
error: fn,
complete: fn //Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。
} )

在jQuery提供的所有AJAX函数中，提交的数据可以有两种形式：(1)HTTP协议规定的标准格式： ‘k1=v1&k2=v2…’
(2)JS对象格式：{ k1: v1, k2:v2 } jQuery在发送此格式的数据之前会自动调用$.param()函数，将JS对象改
为第一种格式

jQuery对AJAX操作的封装——$.get()

.get()是.ajax()的一个简化版本。
用法：.get(url,[data],[sccessFn]).get(‘2.php’, function(data){
})

jQuery对AJAX操作的封装——$.post()

.post()是.ajax()的一个简化版本。
示例：实现表单数据的异步提交
$.post(‘4.php’ , ‘k1=v1&k2=v2’/{k1:v1,k2:v2},## 标题 ## function(data){
})                                                                                                                                                                                               提示：(1)若请求数据是对象格式，jQuery底层会自动将其转换为符合HTTP标准的数据格式(键值对形式)
(2)$.post底层会自动修改Content-Type请求消息的头部为application/x-www-form-urlencoded

jQuery对AJAX操作的封装——.getJSON()     

.getJSON()是.ajax()的一个简化版本。发起异步的GET请求，获取
服务器端返回的JSON响应，并自动调用JSON.parse()方法把服务器返回的JSON字符串解析为JS对象。用
法：.getJSON(‘xx.php’, data, fn)

jQuery对AJAX操作的封装——.getScript()

.getScript()是.ajax()的一个简化版本。发起异步的GET请求，
获取服务器端返回的JS响应，并自动调用eval()方法，执行服务器端范围的字符串数据。用法：.getJSON
(‘xx.php/xx.js’)

使用AJAX异步提交表单 
(1)方式一：手工收集所有的用户输入，封装为大的“k1=v1&k2=v2…”键值对形式，使用.post(url,data,fn)
把数据提交给服务器                                                                                                                                                             (2)方式二：表单序列化：(‘#myform’).serialize( ); 其返回值就是“k1=v1&k2=v2…
”键值对形式，再使用$.post发起异步请求即可。
(3)方式三：使用jQuery Form插件提供的ajaxSubmit()函数，用法：
$(‘#myform’).ajaxSubmit({
type: ‘GET/POST’,
url: ‘xx.php’,
dataType: ‘json’,
success: fn,
clearForm: true,
resetForm: true
}); //此函数会自动把选定的表单进行序列化并异步提交

load( url, [data], [callback] );
url (String) 请求的HTML页的URL地址
data (Map)(可选参数) 发送至服务器的 key/value 数据
callback (Callback) (可选参数) 请求完成时(不需要是success的)的回调函数

load()方法可以轻松载入静态页面内容到指定jQuery对象。
$(‘#ajax-div’).load(‘data.html#my-section’);

ajax的所有参数项，其中有一项dataType是设置具体的服务器返回方式的，有html、xml、json、js和jsonp五
种方式。下面分别对每种方式进行一下详细的解释。

（1） html方式。这种方式是最常见的方式（默认方式），jQuery（这里如果返回值中有JS代码，并不执
行）执行 sucuess回调函数，比如html()、append()等等，这些函数将html代码装载到当前页面的时候才执行
其中包含的js代码，而且该代码只执行一次并不缓存。示例代码：

$.ajax({
type: “get”,
url: “http://www.xxx.com/test.html”,
dataType: “html”,//(可以不写,默认)
success: function(data){
alert(data);//data是一个字符串对象
}

});

（2） xml方式。xml方式和html方式的整个工作流程是一样，就是操作了不同的属性,返回不同的对象，html
方式操作的responseText属性，而xml方式操作的是responseXML属性，html返回是一个String对象，而xml 返
回的是一个XML对象。操作返回值的时候就大不相同，必须按照XML对象的方式进行操作，如果用alert()，结
果肯定是object。xml和html不一样，定义很严格，没有容错机制，如果被请求的xml写的不正确，或者是不完
整，jQuery抛出一个异常，Ajax请求终止。示例代码：

$.ajax({
url:’my.xml’,
type: ‘GET’,
dataType: ‘xml’,
timeout: 3000,
error: function(xml){
alert(‘Error loading‘);
},
success: function(responseXml){
alert(responseXml.xml);//xml的xml属性只在IE下支持
$(responseXml).find(“XXX”).text();
}
});

（3）json方式。 json方式和html方式在请求和服务器中完全是一样，就不在重复说明，请求的返回值实际上
都是String对象，有两点不同，第一：html方式的时 候并没有限制返回的字符串格式，而json方式的时候，
必须符合json协议的规范。第二：html方式请求完成之后没有做任何的操作直接回调 sucuess，而json多了一
步就是加了eval，执行返回的字符串，看看源码data = eval_r(“(” + data + “)”);返回json对象。示例代码
：

$.ajax({
url:’my.js’,//{‘name’:’name’,’test’:’test’}
type: ‘GET’,
dataType: json,
timeout: 3000,
error: function(xml){
alert(‘Error loading’);
},
success: function(data){
$.each(data,function(i,n){
alert(n);//显示name和test
});
}
});

详细示例：

function doRequestUsingJSON(){
$.getJSON(“data.php”,$(“#firstName.val()”),function(jsonData){
$(“#getJSONResponse”).html(jsonData.id);}//无需设置，直接获取的数据类型为json，
所以调用时需要使用jsonData.id方式
);

}

假设返回的json数据为：

[{“id”:”19″,”name”:”123″,”content”:”123″},
{“id”:”20″,”name”:”1231″,”content”:”123123123″},
{“id”:”21″,”name”:”123123″,”content”:”123123123″},{“id”:”26″,”name”:”24″,”content”:”123123″},
{“id”:”25″,”name”:”321123″,”content”:”321123″},{“id”:”24″,”name”:”age”,”content”:”age”},
{“id”:”23″,”name”:”123123″,”content”:”123123″},{“id”:”22″,”name”:”213″,”content”:”123″},
{“id”:”27″,”name”:”qianglc”,”content”:”dfadsfsadf”},{“id”:”28″,”name”:””,”content”:””}]

$.ajax({
url:’my.js’,//alert(‘test’)
type: ‘GET’,
dataType: script,
timeout: 3000,
success: function(data){
alert(‘load js success’);
}
});

（5）jsonp方式。jsonp方式的交互方式和js是一样的，本身xmlHttpRequest对象并不能跨域访问，但是
script标签的src可以跨域访问，这里就注意两个概念：第一Ajax是不能跨域操作的，第二jQuery的jsonp是可
以跨域操作，jsonp到底是什么东西呢？他是一个非官方的定义，目前的规范，需要服务器和客户端进行配合
使用，服务器返回必须是这样的格式：

xxx(json对象);xxx是客户端定义的函数名字.

客户端需要这样的定义格式url?callback=xxx，这个的callback和xxx都是自己定义，只要服务器端能理解即
可。如果没有定义xxx函数默认是？，jQuery会自动将？替换成内部定义的函数jquery12345678990这样的形式
。

为什么需要这样定义呢？因为js本身不能操作script标签src请求结果中的数据（如果想操作就需要用DOM获得
innerText再加上eval）。就定义一个客户端函数，将请求的结果以参数的形式传递进去，就可以操作了。示
例代码：

$.ajax({
url:’ jsonp.jsp?callback=test’,//alert(‘test’)
type: ‘GET’,
dataType: jsonp,
timeout: 3000,
success: function(data){
alert(‘load jsonp success’);
}
});
function test(data){
alert(data);
}

 

 

ajax beforeSend请求之前的函数（防止重复数据），ajax complete请求之后的函数

在实际项目开发中，提交表单时常常由于网络或者其原因，用户点击提交按钮误认为自己没有操作成功，进而会重复提交按钮操作次数，如果页面前端代码没有做一些相应的处理，通常会导致多条同样的数据插入数据库，导致脏数据的增加。要避免这种现象，在$.ajax请求中的beforeSend方法中把提交按钮禁用掉，等到Ajax请求执行完毕，在恢复按钮的可用状态。

// 提交表单数据到后台处理                                                                                                                                                   $.ajax({                                                                                                                                                                              type: “post”,                                                                                                                                                                      data: studentInfo,                                                                                                                                                 contentType: “application/json”,                                                                                                                                          url: “/Home/Submit”,                                                                                                                                             beforeSend: function () {                                                                                                                                                        // 禁用按钮防止重复提交                                                                                                                                          $(“#submit”).attr({ disabled:“disabled” });                                                                                                                                 },                                                                                                                                                                                   success: function (data) {                                                                                                                                                        if (data == “Success”) { //清空输入框 clearBox(); } },                                                                                                         complete: function () { $(“#submit”).removeAttr(“disabled”); },                                                                                            error: function (data) { console.info(“error: “ +data.responseText); } });

转载于:https://www.cnblogs.com/xin521/p/9076977.html