jquery的ajax总结

元素中，并将加载按钮变为不可用。如下图所示：

②使用getJSON()方法异步加载JSON格式数据

使用getJSON()方法可以通过Ajax异步请求的方式，获取服务器中的数组，并对获取的数据进行解析，显示在页面中，它的调用格式为：

**jQuery.getJSON(url,[data],[callback])**或**$.getJSON(url,[data],[callback])**

其中，url参数为请求加载json格式文件的服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数。

例如，点击页面中的“加载”按钮，调用getJSON()方法获取服务器中JSON格式文件中的数据，并遍历数据，将指定的字段名内容显示在页面中。如下图所示：

③使用getScript()方法异步加载并执行js文件

使用getScript()方法异步请求并执行服务器中的JavaScript格式的文件，它的调用格式如下所示：

jQuery.getScript(url,[callback])或$.getScript(url,[callback])

参数url为服务器请求地址，可选项callback参数为请求成功后执行的回调函数。

例如，点击“加载”按钮，调用getScript()加载并执行服务器中指定名称的JavaScript格式的文件，并在页面中显示加载后的数据内容，如下图所示：

在浏览器中显示的效果：

④使用get()方法以GET方式从服务器获取数据

使用get()方法时，采用GET方式向服务器请求数据，并通过方法中回调函数的参数返回请求的数据，它的调用格式如下：

$.get(url,[callback])

参数url为服务器请求地址，可选项callback参数为请求成功后执行的回调函数。

例如，当点击“加载”按钮时，调用get()方法向服务器中的一个.php文件以GET方式请求数据，并将返回的数据内容显示在页面中，如下图所示：

⑤使用post()方法以POST方式从服务器发送数据

与get()方法相比，post()方法多用于以POST方式向服务器发送数据，服务器接收到数据之后，进行处理，并将处理结果返回页面，调用格式如下：

$.post(url,[data],[callback])

参数url为服务器请求地址，可选项data为向服务器请求时发送的数据，可选项callback参数为请求成功后执行的回调函数。

例如，在输入框中录入一个数字，点击“检测”按钮，调用post()方法向服务器以POST方式发送请求，检测输入值的奇偶性，并显示在页面中，如下图所示：

⑥使用serialize()方法序列化表单元素值

使用serialize()方法可以将表单中有name属性的元素值进行序列化，生成标准URL编码文本字符串，直接可用于ajax请求，它的调用格式如下：

**$(selector).serialize()**

其中selector参数是一个或多个表单中的元素或表单元素本身。

例如，在表单中添加多个元素，点击“序列化”按钮后，调用serialize()方法，将表单元素序列化后的标准URL编码文本字符串显示在页面中，如下图所示：

在浏览器中的显示效果：

⑦使用ajax()方法加载服务器数据

使用ajax()方法是最底层、功能最强大的请求服务器数据的方法，它不仅可以获取服务器返回的数据，还能向服务器发送请求并传递数值，它的调用格式如下：

**jQuery.ajax([settings])**或**$.ajax([settings])**

其中参数settings为发送ajax请求时的配置对象，在该对象中，url表示服务器请求的路径，data为请求时传递的数据，dataType为服务器返回的数据类型，success为请求成功的执行的回调函数，type为发送数据请求的方式，默认为get。

例如，点击页面中的“加载”按钮，调用ajax()方法向服务器请求加载一个txt文件，并将返回的文件中的内容显示在页面，如下图所示：

⑧使用ajaxSetup()方法设置全局Ajax默认选项

使用ajaxSetup()方法可以设置Ajax请求的一些全局性选项值，设置完成后，后面的Ajax请求将不需要再添加这些选项值，它的调用格式为：

**jQuery.ajaxSetup([options])**或**$.ajaxSetup([options])**

可选项options参数为一个对象，通过该对象设置Ajax请求时的全局选项值。

例如，先调用ajaxSetup()方法设置全局的Ajax选项值，再点击两个按钮，分别使用ajax()方法请求不同的服务器数据，并将数据内容显示在页面，如下图所示：

⑨使用ajaxStart()和ajaxStop()方法

ajaxStart()和ajaxStop()方法是绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数，ajaxStop()方法用于在Ajax请求完成后触发函数。它们的调用格式为：

**$(selector).ajaxStart(function())**和**$(selector).ajaxStop(function())**

其中，两个方法中括号都是绑定的函数，当发送Ajax请求前执行ajaxStart()方法绑定的函数，请求成功后，执行ajaxStop ()方法绑定的函数。

例如，在调用ajax()方法请求服务器数据前，使用动画显示正在加载中，当请求成功后，该动画自动隐藏，如下图所示：

在浏览器中的结果：

从图中可以看出，由于使用ajaxStart()和ajaxStop()方法绑定了动画元素，因此，在开始发送Ajax请求时，元素显示，请求完成时，动画元素自动隐藏。

参考：JQuery中ajax的相关方法总结 - 小蚊 - 博客园
https://www.cnblogs.com/LuckyWinty/p/5279032.html

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()。

参考：jquery的ajax总结中…. - 简书
https://www.jianshu.com/p/6d8efb1812e2