jQuery中ajax学习记录_H5之家 - 中国HTML5教程资源分享第一站

　　不得不说，jQuery真的是一个特别好用的轻量级JS框架，帮助我们轻松方便的实现一些应用，在一定程度上减少代码量，改变我们编写JavaScript的习惯．昨天巩固了一下jQuery.ajax()，所以来做个笔记，进行总结一下．

1. load(url,[data],[]callback)

载入远程的HTML文件代码并且插入到DOM中．

url(string):请求的HTML页面的URL地址
data(Map):发送到服务器的key/value数据
callback(Callback):请求完成时的回调函数

这个方法默认使用GET方式来传递的，如果［data］参数有传递数据进去，就会自动转换为ＰＯＳＴ方式．
这个方法可以动态加载一些文件，从远程获取一些数据

$("input[type=button]").click(function () {
/*发送的参数形式必须是Json格式*/
　　 let send = {"username":$("#username").val
}
　　　　　　　　　$("div").load("propcess.php",send,function(data){
alert(data);
})
})

此段代码就是当我们点击button按钮的时候，就会在div元素中加载propcess.php文件，send是要请求的数据，function是一个回调函数．

注意：

１．添加**+Math.random**是为了适应各种浏览器下，比如IE浏览器的缓存特别严重，添上它之后会避免此项问题，在我们改动数据后，会及时加载改动数据．
２．所有ajax请求必须在服务器下完成．我的是127.0.0.1+*地址．

　　　　　３．［data］一般用json格式，这样比较方便获取．

function (responseText, textStatus, XMLHttpRequest){
this;//在这里this指向的是当前的DOM对象
//alert(responseText);//请求返回的内容
//alert(textStatus);//请求状态：success，error
//alert(XMLHttpRequest);//XMLHttpRequest对象
});
2.jQuery.get(url,[data],[callback],[dataType])使用GET方式来进行异步请求(POST请求和GET类似)

参数解析

url(String):发送请求的URL地址．
data(map):要发送给服务器的数据，以key/value的键值对形式表示，会做为jQueryString附加到请求URL中．
callback(Function):　载入成功回调函数（只有Response的返回是success时才调用该方法）．
dataType(string):客户端请求的数据类型(JSON,XML.ect)
$("input[type=button]").click(function () {
/*$.get(url, senddata, Callback, datatype){}*/
$.get("text?data="+Math.random(),function (data) 　　　　　　　　{
$(".load").html(data);
})
})

上段代码展示的是用GET请求text文件里的数据，然后将请求到的数据动态加载到l类名为.load的DIV中．

３.jQuery.post(url,[data],[callback],[dataType])(post和get类似，所以就不详细记录了)．
４.jquery.getScript(url,[callback])

通过GET方式请求载入并执行一个JS文件．
参数解析
- url (String) : 待载入 JS 文件地址。
- callback (Function) : (可选) 成功载入后回调函数。
1.2 版本之前，getScript只能调用同域js文件，1.2中我们可以跨域调用．注意：Safari2或者更早的版本不能在全局作用域中同步执行脚本．如果通过getScript加入脚本，需要加入延时函数．
此方法可以用在当编辑器只有focus()的时候才去加载编辑器需要的js文件．
加载并执行AjaxEvent.js

$.getScript("AjaxEvent.js", function(){
　　　　alert("AjaxEvent.js 加载完成并执行完成.你再点击上面的Get或Post按钮看看有什么不同？");
});
５.jQuery　Ajax事件

其实无论是.get還是.post请求，最底层都是通过ajax完成的．
Ajax请求会产生若干不同的时间，我们可以订阅这些事件并在其中处理我们的逻辑．在jQuery有局部和全局事件两种．

局部事件：每次在ajax请求时在方法内定义的．

$.ajax({
beforeSend: function(){
// Handle the beforeSend event
},
complete: function(){
// Handle the complete event
}
// ...
});

全局事件：每次的ajax请求都会触发，它会像DOM中的所有元素广播，上面的getScript()实例中加载脚本就是全局Ajax事件．

$("#loading").bind("ajaxSend", function(){
$(this).show();
}).bind("ajaxComplete", function(){
$(this).hide();
});
或者：
$("#loading").ajaxStart(function(){
$(this).show();
});

我们一般用的都是局部事件，当然用全局的时候，想要将全局事件禁用，只需要设置gobal选项false就行：

$.ajax({
url: "test.html",
global: false,// 禁用全局Ajax事件.
// ...
});

代码示例：

$("input[type=button]").click(function () {
let url = "propcess.php";
let sendData = {"username": $("#username").val()}
$.ajax({
url: url,
　type: "post",
data: sendData,
success: function () {
if (data === "true") {
$("div").html("用户名可以使用");
} else {
$("div").html("用户名不可使用");
}
　　}
})
})
６.jquery.ajax(options)

通过http请求加载远程数据．
$.ajax()返回其创建的XMLHttorequest对象．大多数情况下，无需操作该对象，但特殊情况下可以手动终止请求．
注意：

当设置datatype类型为＂script＂的时候，所有远程post请求都会转化为GET方式．
1.2版本中，可以跨域加载JSON数据，使用时将数据类型设置为JSONP．
常用的ajax参数
　
　 url，type，timeout，async，cache（设为false时，不会从浏览器缓存中加载请求信息），complete（请求完成后回调函数），contentType（发送信息至服务器时内容编码类型），beforeSend ，success ，complete ，error（后面会详细记录.）
７．ajax中的error

在ajax请求不到信息时，我们肯定要给客户返回一个错误信息．所以我们就要处理抛出的错误．

function (XMLHttpRequest, textStatus, errorThrown) {
// 通常情况下textStatus和errorThown只有其中一个有值
this; // the options for this ajax request
}

实例代码：

$("input").click(function () {
$.ajax({
url: "example4.php?" + Math.random(),
type: "get",
timeout: 1000,//请求时间
success: function (data) {
　　　　　　 $("div").html(data);
　　　　 },
error: function (jqXHR, textStatus, errorThrow) {
/* alert("textStatus:"+textStatus);
　 alert("errorThrow:"+errorThrow)*/
if (errorThrow === "Not Found") {
$("span").html("你请求的地址不存在");
}
if (textStatus === timeout) {
$("span").html("请求超时，请重新刷新页面")
}
}
}
});
$(document).ajaxError(function () {
$("span").html("ajax请求发生错误");
});//全局代码