标签：                           

　　jQuery提供了一些日常开发中需要的快捷操作，例如load、ajax、get和post等，使用jQuery开发ajax将变得极其简单。这样开发人员就可以将程序开发集中在业务和用户体验上，而不需要理会那么繁琐的XMLHTTPRequest对象。jQuery对ajax操作进行了封装，在jQuery中$.ajax()属性最底层的方法，第2层是load()、$.get()和$.post()方法，第3层是$.getScript()和$.getJSON()方法。下面将详细介绍jQuery中的ajax

　　load()方法是jQuery中最简单和常用的ajax方法，使用load()方法通过ajax请求加载服务器中的数据，并把返回的数据放置到指定的元素中

【调用格式】

　　load()方法的调用格式为如下所示，参数url为加载服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数

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

【载入HTML文档】

$(‘#result‘).load(‘ajax/test.html‘);

　　[注意]如果选择器没有匹配的元素，如document不包含id="result"的元素，这个Ajax请求将不会被发送出去

h6 p已有评论: $(function(){ $((){ $() }) }) 张三：沙发.李四：板凳.王五：地板.

【部分载入】

　　如果url参数的字符串中包含一个或多个空格，那么第一个空格后面的内容，会被当成是jQuery的选择器，从而决定应该加载返回结果中的哪部分内容

$(‘#result‘).load(‘ajax/test.html #container‘);

　　当这种方法执行, 它将检索ajax/test.html返回的页面内容，jQuery会获取ID为container元素的内容，并且插入到ID为result元素，而其他未被检索到的元素将被废弃

$(function(){ $(‘#send‘).click(function(){ $(‘#resText‘).load(‘ajaxjQueryLoad.html .para‘) }) })

【传递方式】

　　load()方法默认使用GET方式，如果data参数提供一个对象，那么使用POST方式

//无参数传递，则是GET方式 $(‘#resText‘).load(‘tset.php‘) //有参数传递，则是POST方式 $(‘#resText‘).load(‘tset.php‘,{name:‘rain‘,age:‘22‘})

【回调函数】

　　如果提供了"complete"回调函数，它将在函数处理完之后，并且HTML已经被插入完时被调用。回调函数会在每个匹配的元素上被调用一次，并且this始终指向当前正在处理的DOM元素

　　回调函数有3个参数，分别代表请求返回的内容、请求状态和XMLHTTPRequest对象

$(‘#result‘).load(‘ajax/test.html‘,function(responseText,textStatus,XMLHTTPRequest) { });

<style> h6{margin:4px;} p{margin: 0;} #test{border:1px solid black;} </style> <input type="button" value="ajax获取"> <div>已有评论:</div> <div></div> <div></div> <script> $(function(){ $(‘#send‘).click(function(){ $(‘#resText‘).load(‘ajaxjQueryLoad.html .para‘,function(a,b,c){ $(‘#test‘).html(‘responseText:‘ + a + ‘<br>textStatus:‘ + b + ‘<br>XMLHTTPRequest:‘ + c); }) }) }) </script>

　　getJSON()方法使用一个HTTP GET请求从服务器加载JSON编码的数据

【调用格式】

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

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

　　getJSON()方法相当于以下ajax()方法的缩写

$.ajax({ dataType: "json", url: url, data: data, success: success });

【回调函数】

　　回调函数中的第一个参数表示返回的数据

$.getJSON(‘test.json‘,function(data){ //data :返回的数据 })

　　一般地，使用each()方法，来构建DOM结构

$((){ ); ; $.getJSON((data){ $); $.each(data,function(index,sport){ $html ; }); $().html($html); }) })

　　json文件如下

[{ "name": "足球" },{ "name": "散步" },{ "name": "篮球" },{ "name": "乒乓球" },{ "name": "骑自行车" }]

　　getScript()方法使用一个HTTP GET请求从服务器加载并执行一个javascript文件

　　getScript()方法调用格式如下，参数url为服务器请求地址，可选项callback参数为请求成功后执行的回调函数

$.getScript(url,[callback])

　　相当于一个Ajax函数的缩写

$.ajax({ url: url, dataType: "script", success: success });

$((){ ); $.getScript((){ $); $().html($html); }) })

　　js文件如下

var data = [{ "name": "足球" }, { "name": "散步" }, { "name": "篮球" }, { "name": "乒乓球" }, { "name": "骑自行车" }]; var $html = ‘‘; $.each(data, function (index, sport) { $html += "<div>" + sport["name"] + "</div>"; });

　　get()方法使用一个HTTP GET请求从服务器加载数据

【调用格式】