jquery的ajax总结中....
ajax的优势和不足
优势：
1.不需要插件支持(一般浏览器且默认开启JavaScript即可);
2.用户体验极佳(不刷新页面即可获取可更新的数据);
3.提升Web程序的性能(在传递数据方面做到按需放松,不必整体提交);
4.减轻服务器和带宽的负担(将服务器的一些操作转移到客户端);
缺点：
1.不同版本的浏览器度XMLHttpRequest对象支持度不足(比如IE5之前);
2.前进、后退的功能被破坏(因为Ajax永远在当前页,不会几率前后页面);
3.搜索引擎的支持度不够(因为搜索引擎爬虫还不能理解JS引起变化数据的内容);
4.开发调试工具缺乏(相对于其他语言的工具集来说,JS或Ajax调试开发少的可怜)。
异步和同步：
异步：好比我们发短信，非阻塞
同步：好比我们打电话 阻塞
ajax都是实行的是异步加载模式
jquery采用了三层封装：
最底层的封装方式：
$.ajax();
第二层：
.load(),$.get(), $.post()
最高层：
$.getscript()和$.getJSON();
.load()三个参数：url－请求url地址，data（发送的key／value数据），callback（成功或失败）;.load()方法是局部方法,因为他需要一个包含元素的jQuery对象作为前缀。适合做静态文件的异步获取
案例：
$("#btn").click(function(){
$("#box").load('./2.html');
}
2.$("#btn").click(function(){
$("#box").load('./1.php');
})
3.$("#btn").click(function(){
$("#box").load('./1.php',{url:'lle'});
})
4.$("#btn").click(function(){
$("#box").load('./1.php',{url:'lle'});
},function(response,status,xhr){
console.log(response);
})
注意:status得到的值,如果成功返回数据则为:success,否则为:error。XMLHttpRequest对象属于JavaScript范畴,可以调用一些属性如下:
属性名
说明
responseText
作为响应主体被返回的文本
responseXML
如果响应主体内容类型是"text/xml"或"application/xml",
则返回包含响应数据的XML DOM文档
status
响应的HTTP状态
statusText
HTTP状态的说明
2.$.get()和$.post()是全局方法,无须指定某个元素。使用在需要传递参数到服务器页面的
案例：
$("#btn").click(function(){
$.get('./1.php',{
url:'lle'
}, function(response,status,xhr){
if(status=='success'){
$("#box").html(response);－－－
}
})
})
注意:第四参数type是指定异步返回的类型。一般情况下type参数是智能判断,并不需要我们主动设置,如果主动设置,则会强行按照指定类型格式返回。
type自动转为html
$.post()方法的使用和$.get()基本上，具体区别如下:
1.GET请求是通过URL提交的,而POST请求则是HTTP消息实体提交的;
2.GET提交有大小限制(2KB),而POST方式不受限制;
3.GET方式会被缓存下来,可能有安全性问题,而POST没有这个问题;
4.GET方式通过$_GET[]获取,POST方式通过$_POST[]获取。
3.$.post();
$("#btn").click(function(){
$.post('./1.php',{
url:'lle'
}, function(response,status,xhr,type){
if(status=='success'){
$("#box").html(response);
console.log(type);
}
})
})
$.getScript()和$.getJSON()
jQuery提供了一组用于特定异步加载的方法:$.getScript(),用于加载特定的JS文件;
$.getJSON(),用于专门加载JSON文件
//点击按钮后再加载JS文件$('input').click(function () {
$.getScript('test.js');
});
$.getJSON()方法是专门用于加载JSON文件的,使用方法和之前的类似。$('input').click(function () {
$.getJSON('test.json', function (response, status, xhr) {
alert(response[0].url);
});
});
4.$.ajax()
$.ajax()是所有ajax方法中最底层的方法,所有其他方法都是基于$.ajax()方法的封装。
$('form button').click(function () {
$.ajax({
type : 'POST',
url : '1.php',
data : $('form').serialize(),
success : function (response, status, xhr) { alert(response);
} });
});
小案例：自己用最近学了点php基本语法写后台数据，挺兴奋的！毕竟自己心里知道一路自学前端以来，这次又是一个不错的成长！加油！
5.加载请求：
在Ajax异步发送请求时,遇到网速较慢的情况,就会出现请求时间较长的问题。而超过一定时间的请求,用户就会变得不再耐烦而关闭页面。而如果在请求期间能给用户一些提示,比如:正在努力加载中...,那么相同的请求时间会让用户体验更加的好一些。
jQuery提供了两个全局事件,.ajaxStart()和.ajaxStop()。这两个全局事件,只要用户触发
了Ajax,请求开始时(未完成其他请求)激活.ajaxStart(),请求结束时(所有请求都结束了)
激活.ajaxStop()。
