jquery的方法 jQuery jQuery教程 jQuery代码 jquery的方法(2)_H5之家

因为使用方法相同，因此只要改变jQuery函数，就可以将程序在GET请求和POST请求之间切换

$("button").click(function(){$.post("get_html.php",{"username":$("#name").val(),"content":$("#cont").val()},
function(data,textStatus,fn){
if(textStatus=="success"){$(data).appendTo("#msg")
}
},
"html"
);
})

运行结果和GET一样。

三、 $.getScript( ) 方法和$.getJson（）方法
3.1 $.getScript( )方法

有时候，在页面出息加载时就获取所需的全部JavaScript文件是完全没有必要的，可以在需要的时候直接加载。jQuery提供了 $.getScript( )方法来直接加载js文件，与加载一个HTML片段一样简单方便，并且不需要对JavaScript文件进行处理，JavaScript文件会自动执行。

3.1.1结构

$.getScript( url , fn )

url：请求地址

fn：回调函数

3.2.1应用

新建一个basejs.js文件，随机生成颜色的函数，代码如下

function randomColor(){
var str="0123456789abcdef";
var color = "#";
for (var i = 0; i < 6; i++) {
color+=str[ Math.floor( Math.random()*str.length)];
};
return color;
}

当我们点击按钮时加载js文件，给body添加颜色

jQuery代码如下

$("button").click(function(){
$.getScript("basejs.js",function(){
$("body").click(function(){$(this).css("background-color",randomColor())
})
})
})

运行结果

jquery的方法 jQuery jQuery教程 jQuery代码 jquery的方法

3.2 $.getJson( )方法

$.getJson( )方法用于加载JSON文件，与$.getScript( )方法的用法相同

$.getJSON( url，回调函数})

当点击加载时，页面上看不到任何效果，虽然函数加载了JSON文件，但是并没有告知JavaScript对返回的数据如何处理，为此，所以在回调函数里我们可以处理返回的数据

通常我们需要遍历我们得到的数据，虽然这里我们可以使用传统的for循环，但是我们也可以通过$.each()，可以用来遍历对象和数组，$.each()函数是以一个数组或者对象为第1个参数，以一个回调函数作为第2个参数，回调函数拥有两个参数，第1个为对象的成员或者数组的下标，第2个位对应变量或内容

$(function(){
$("button").click(function(){
$.getJSON( "text.json" , function( data ){
$.each( data ， function（index，comment）{
处理数据...
}
})
})
})
四、 $.Ajax（）方法

前面用到的$.load()，$.get()，$.post()，$.getScript()，$.getJSON()这些方法，都是基于$.ajax()方法构建的，$.ajax()是jQuery最底层的Ajax实现，因为可以用来代替前面的所有方法。

所以如果除了上面，还需要编写一下复杂的Ajax程序，那么就要用$.ajax()，$.ajax()不仅能实现与$.load()，$.get()，$.post()同样的功能，而且还可以设定beforeSend（提交前回调函数）、error（请求失败后处理）、success（请求成功后处理）、complete（请求完成后处理）回调函数，通过设定这些回调函数，可以给用户更多的Ajax提示信息，另外，还有一些参数可以设置Ajax请求的超时时间或者页面的“最后更改”状态。

之前的文章里面有说过$.Ajax（）方法。

这里不再赘述，直接引之前的例子

$.ajax({

url：请求地址

type:"get | post | put | delete " 默认是get,

data:请求参数 {"id":"123","pwd":"123456"},

success:function(data,dataTextStatus,jqxhr){ },//请求成功时error:function(jqxhr,textStatus,error)//请求失败时

})

$.ajax({
url:"tom.php",
type:"get",
dataType:"text",
success:function(data,textStatus,jqxhr){
console.log("__成功__");
console.log(data);
console.log(textStatus);
console.log(jqxhr);
console.log("______");
},
error:function(jqxhr,textStatus,error){
console.log("__失败__");
console.log(error);
console.log(textStatus);
console.log(jqxhr);
console.log("******");
}
})
番外篇1
Ajax的优势

1、不需任何浏览器插件

不需任何浏览器插件，就可以被大多数浏览器所支持，用户只需要允许JavaScript在浏览器上执行即可。

2、优秀的用户体验。

最大的优点，能在不刷新整个页面的前提下更新数据，这使得Web应用程序能迅速回应用户的操作。

3、提高Web程序的性能

与传统模式相比，Ajax模式在性能上最大区别就是在于传输数据的方式，在传统模式中，数据提交是通过表单（from）来实现的，而数据获取的是靠全面刷新网页来说获取整页的内容，Ajax的模式只是通过XMLHttpRequest对象来向服务器端提交需要提交的数据，即按需发送。

4、减轻服务器和宽带的负担

Ajax的工作的原理相当于在用户和服务器之间加了一个中间层，是用户操作与服务器响应异步化，他在客户端创建Ajax引擎，把传统方式下的一些服务器负担的工作转移到客户端，便于客户端资源来处理，减轻服务器和宽带的负担。

Ajax的缺点

1、浏览器对XMLHttpRequest对象的支持度不足

Ajax的不足之一首先来自于浏览器，IE5.0及以后的版本才支持XMLHttpRequest对象（现阶段大部分客户端都在IE6以上），Mozilla，Netscape等浏览器支持XMLHttpRequest则更在其后，为了使得Ajax应用能在各个浏览器中正常运行，程序员必须花费大量的精力编码以兼顾各个浏览器之间的差别，来让Aajx应用能更好的兼容各个浏览器。

2、破坏浏览器前进、后退按钮的正常功能