锋利的jQuery Day6

JavaScript jQuery

jQuery与Ajax的应用

1 Ajax的优势和不足

1.1 Ajax的优势

1. 不需要插件支持：可以被绝代多数主流浏览器所支持
2. 优秀的用户体验：能在不刷新整个页面的前提下更新数据
3. 提高Web程序的性能：传统模式中，数据提交通过表单(Form)来实现，数据获取是靠全面舒心来获取的；而Ajax模式只通过XMLH对象向服务器端提交希望提交的数据，即按需发送
4. 减轻服务器和带宽的负担：工作原理想到于在用户和服务器之间加了一个中间层，使用户操作与服务器响应异步化。

1.2 Ajax的不足

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

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

• 对搜索引擎的支持不足：通常搜索引擎都是通过爬虫程序来对数据进行搜索整理，但爬虫程序不能够理解复杂的JavaScript代码和因此引起的页面变化。

• 开发和调试工具的缺乏

2 Ajax的XMLHttpRequest对象

Ajax的核心是XMLHttpRequest对象，它是Ajax实现——发送异步请求、接受相应及执行回调的关键。
下面是对于不同浏览器创建XMLHttpRequest对象的不同方法：

if (window.XMLHttpRequest)
  {// code for IE7, Firefox, Opera, etc.
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

5 jQuery中的Ajax

jQuery对Ajax操作进行了封装，在jQuery中$.ajax()方法属于最底层方法，第二层是$.load()、$.get()和$.post()方法，第三层是$.getScript()和$.getJSON()方法。

5.1 load()方法

• 载入HTML文档
  load()方法是jQuery中最简单和常用的Ajax方法，能载入远程HTML代码并插入DOM中，其语法结构为：

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

如果只想加载指定url内的部分元素，可以使用load()方法的URL参数来达到目的。URL参数的语法结构是：“url selector”。注意，URL和选择器之间有一个空格。

load()方法的传递方式根据参数data来自动指定。如果没有参数传递，采用GET方式传递；反之，自动转换成POST方式。

对于必须在加载完成后才能继续的操作，load()方法提供了回调函数(callback)，该函数有3个参数，分别代表请求返回的内容，请求状态和XMLHttpRequest对象：

$("#resText").load("test.html",function(responseText,textStatus,XMLHttpRequest){
        // responseText:    请求返回的内容
        //textStatus:       请求状态：success、error、notmodified、timeout  4种
        // XMLHttpRequest:  XMLHttpRequest对象

注：在load()方法中，无论Ajax请求是否成功，只要当请求完成后，回调函数就会被触发。

5.2 $.get()方法和$.post()方法

load()方法通常用来从Web服务器上获取静态的数据文件。在项目中，如果需要传递一些参数给服务器中的页面，那么可以使用$.get()和$.post()（或$.ajax()方法）。

5.2.1 $.get()方法

$.get()方法使用GET方法来进行异步请求，语法结构为：

$.get(url [,data] [,callback] [,type]);

$.get()方法的回调函数只有两个参数：

function(){
    //data；        返回内容，可以是xml文档，JSON文件，HTML片段
    //textStatus;   请求状态：success.error,notmodified,timeout 4种

data参数代表请求返回的内容，textStatus参数代表请求状态，而回调函数只有当数据成功返回（success）后才被执行，这与load()方法不同。

• HTML片段

$(function(){
 $("#send").click(function(){
 	$.get("get1.php",{
 		username:$("#username").val(),
 		content:$("#content").val()
  	},function(data,textStatus){
 		$("#resText").html(data);
    });
 });
})

由于服务器端返回的数据格式是HTML片段，因此并不需要经过处理就可以将新的HTML数据插入到主页面。HTML片段实现起来只需要很少工作量，但这种固定的数据结构不一定能够在其他的Web应用中得到重用。

• XML文档

$(function() {
    $("#send").click(function() {
        $.get("get2.php", {
            username: $("#username").val(),
            content: $("#content").val()
        }, function(data, textStatus) {
            var username = $(data).find("comment").attr("username");
            var content = $(data).find("comment content").text();
            var txtHtml = "<div class='comment'><h6>" + username + ":</h6><p class='para'>" + content + "</p></div>";
            $("#resText").html(txtHtml);
        });
    });
})

由于服务器端返回的数据是XML文档，所以需要对返回的数据进行处理。XML文档的可移植性是其他数据格式无法比拟，因此这种格式提供的数据的重要性极大提高。但XML文档体积相对较大，与其他文件格式相比，解析和操作速度要慢一些。

• JSON文件

JSON文件和XML文档一样，可以方便被重用。且JSON文件相当简洁，也容易阅读。

$(function() {
    $("#send").click(function() {
        $.get("get3.php", {
            username: $("#username").val(),
            content: $("#content").val()
        }, function(data, textStatus) {
        	var username = data.username;
        	var content = data.content;
        	var txthtml = "<div class='comment'><h6>"+username+"</h6><p class='para'>"+content+'</p></div>';
        	$("#resText").html(txthtml);
        },"json");
    });
});

$.get()方法的第4个参数(type)设置为“json”表示期待服务器端返回的数据格式。
得知在不需要与其他应用程序共享数据的时候，使用HTML片段来提供返回数据一般是最简单的；如果数据需要重用，那么JSON文件是不错的选择；当远程应用程序未知时，XML文档是最佳选择， 它是Web服务领域的世界语。

5.2.2 $.post()方法

与$.get()方法结构和使用方式都相同，其区别如下：

1. GET请求将参数跟在URL后进行传递，POST请求则是作为HTTP消息的实体内容发送给Web服务器。在Ajax请求中，这种却别对用户是不可见的。
2. GET方式对传输的数据有大小限制（通常不能大于2KB），而使用POST方式传递的数据理论上不受限制。
3. GET方式请求的数据会被浏览器缓存起来，故可以从浏览器历史中读取到这些数据，如账号密码等。POST相对可以避免这些问题。
4. GET方式和POST传递的数据在服务器端的获取也是不同的。在PHP中，GET方式的数据可以用$_GET[ ]获取，而POST方式可以用$_POST[ ]获取。两种方式都可以用$_REQUEST[ ]来获取。

$.ajax()不仅能实现与load()、$.get()和$.post()方法有同样的功能，而且还能设定beforeSend（请求成功后处理）、error（请求失败后处理）、success（请求成功后处理）以及complete（提交前回调函数）。另外还有一些参数，可以设置Ajax请求的超时时间或者页面的“最后更改”状态等。

5.3 $.getScript()方法和$.getJson()方法

5.3.1 $.getScript()

在页面初次加载时就取得所需的全部JavaScript文件是完全没有必要的。可以根据需要哪个JavaScript文件，而动态的创建<script>标签：

$(document.createElement("script")).attr("src","test.js").appendTo("head");

或者：

$("<srcipt type="text/javascript" src="test.js">).appendTo("head");

但这种方式并不理想。可以使用$.getScript()方法来直接加载.js文件，与加载一个HTML片段一样简单方便，并不需要对JavaScript文件进行处理，JavaScript文件会自动执行：

$(function(){
    $('#send').click(function(){
        $.getScript('test.js',function(){
            //回调函数
        });
    });
})

$.getScript()方法也有回调函数，会在JavaScript文件成功载入后运行。

5.3.2 $.getJSON()

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

$(function(){
    $('#send').click(function(){
        $.getJSON('test.json',function(data){
            //data:返回的数据
        });
    });
})

$.each()函数不同于each()方法，它是个全局函数，不操作jQuery对象，而是一个数组或者对象作为第一个参数，以一个回调函数作为第二个参数。回调函数有两个参数：第1个为对象的成员或数组的索引，第2个为对应变量或内容：

$.each( data  , function(commentIndex, comment) {
    html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>';
})

还可以通过使用JSONP形式的回调函数来加载其他网站的JSON数据。

5.4 $.ajax()方法

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

$.ajax(options);

只有1个参数，但是这个对象包含了$.ajax()方法所需要的请求设置一集回调函数等信息，参数以key/value形式存在，所有参数都是可选的：

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

上述代码代替$.getScript()方法。

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

上述代码代替$.getJSON()方法。

6 序列化元素

6.1 serialize()方法

提交表单常规做法是，使表单提交到另一个页面，整个浏览器都会被刷新。而Ajax技术能够达到异步地提交表单，并将服务器返回的数据显示在当前页面中。
少量字段的表单可以使用：

$(function(){
	$('#send').click(function(){
		$.get("get1.php",{
			username:$("#username").val(),
			content:$("#content").val()
		},function(data,textStatus){
			$("#resText").html(data);
        })
    })
})

jQuery提供了一个简化方法——serialize()，作用对象是jQuery对象，能将DOM元素内容序列化为字符串，用于Ajax请求。

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

注serialize()方法不只表单可以使用，其他选择器选取的元素也可以使用。

6.2 seruakuzeArray()方法

serializeArray()方法是将DOM元素序列化，返回JSON格式的数据：

var fields = $(":checkbox,:radio").serializeArray();
console.log(fields);

6.3 $.param()方法

$.param()方法是serialize()方法的核心，用来对一个数组或对象按照key/value进行序列化：

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