jquery与ajax的应用2

1.两个全局方法

 $.getScript(path,function(){}) ;

用途：动态加载script脚本。

 path:script地址。

 callback:可选。在javascript文件成功载入后运行。

代码：

$(function(){
  $.getScript('jquery.color.js',function(){
   $("#go").click(function){
    $(".block").animate({backgroundColor: 'pink'}, 1000).animate({backgroundColor: 'blue'}, 1000)
});
});
});

 

 $.getJSON(url,function(data){}) ;

 用途：当于加载JSON文件。

 url:目标url地址

 callback:可选。

       data：返回的内容的json片段。

代码：

 

$(function(){
  $('#send').click(function(){
       $.getJSON('test.json', function(data){
       $(('#resText').empty();
       var html = '';
       $.each(data, function(commentIndex, comment){
        html +='<div class="comment"><h6>'+
       comment['username']+':</h6><p class="para">'+commnet['content']+'</p></div>';
});
 $('#resText').html(html);
})
})
});

ps: 全局函数$.each(data, function(commentIndex, comment){})用法。用于遍历数组或对象集合。

    data是一个数组或者一个对象。

    commentIndex代表索引，comment为索引对应的变量或内容。

 

2.jQuery最底层的Ajax实现

  $.ajax()方法是jQuery最底层的Ajax实现。

  它的结构为：$.ajax(options)

   options参数以key/value的形式存在。

   url: String 发送请求地址。

   type:请求方式默认为Get.

   timeout:超时时间，毫秒级。

   data：发送到服务器的数据，Object或者String.

   dataType：预期服务器返回数据类型，如果不指定将根据HTTP包的MIME信息返回reponseXML或reponseText.

   beforeSend：发送请求前可以修改XMLHttpRequest对象函数，例如添加自定义HTTP头。返回false可取消此次ajax请求。

   complete：请求完成时的回调函数.

   success：请求成功时的回调函数。

   error：请求失败时的回调函数。

   global：是否触发全局Ajax事件。默认为true;

 

代码：

$(function(){
  $('#send').click(function(){
   #.ajax({
       type: "GET",
       url: "test.js",
       dataType: "script"
});
});
});

 

 3.序列化元素

  serialize()方法

  用途：作用于一个Jquery对象，将dom元素的内容序列化为字符串。通常用于ajax表单提交。

  返回字符串。

 

<form id="form1" action="#">
<p>评论：</p>
<p>姓名：<input type="text" name="username" id="username"/></p>
<p>内容：<input type="text" name="content" id="content"/></p>
<p>内容：<input type="button" id="send" value="提交"/></p>
</form>

 

$('#send').click(function(){
   $.get("get1.php", $('#form1').serialize(),function(data,textStatus){
 #('#resText').html(data);
})
});

 

  serialize()函数的核心是$.param()方法

用途：对一个数组或对象按照key/value进行序列化。

 

var obj = {a:1,b:2,c:3};
var k = $.param(obj);
alert(k);//输出a=1&b=2%c=3

 

4.jQuery中全局Ajax事件

当Ajax开始请求时会触发ajaxStart()方法的回调函数。请求结束时会请求ajaxStop回调函数。

ajaxStart(callback) 开始请求执行

ajaxStop(callback) 请求结束执行

ajaxComplete(callback) 请求完成时执行

ajaxError(callback) 发生错误时执行

ajaxSend(callback) 请求发送前执行

ajaxSuccess(callback) 请求成功时执行

如果想使某个Ajax请求不受全局方法的影响，可以将参数中的global设置为false.