锋利的jQuery 笔记整理三

六 ajax

1 ajax简介

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

（1）XMLHttpRequest 对象

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：:

创建 XMLHttpRequest 对象

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

（2）向服务器发送请求

XMLHttpRequest 对象用于和服务器交换数据。当你的页面全部加载完毕后，客户端会通过 XMLHttpRequest 对象向服务器请求数据，服务器端接受数据并处理后，向客户端反馈数据。

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

一个简单的 GET 请求：

xmlhttp.open("GET","demo_get.html",true);
xmlhttp.send();

一个简单 POST 请求：

xmlhttp.open("POST","demo_post.html",true);
xmlhttp.send();

open() 方法的url参数是服务器上文件的地址：

该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）。

当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

（3）服务器响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

如果来自服务器的响应并非 XML，请使用 responseText 属性。

responseText 属性返回字符串形式的响应，因此您可以这样使用：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

对于 responseText 属性，只有当 readyState 属性值变为4时，responseText 属性才可用，因为这表明AJAX请求已经结束！

如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性：

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
  {
  txt=txt + x[i].childNodes[0].nodeValue + "<br>";
  }
document.getElementById("myDiv").innerHTML=txt;

（4）onreadystatechange 事件

当发送一个请求后，客户端需要确定这个请求什么时候会完成，因此，XMLHttpRequest对象提供了 onreadystatechange 事件机制来捕获请求的状态，继而实现响应。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

（5）回调函数

回调函数是一种以参数形式传递给另一个函数的函数。如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。

该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：

2 安装web环境 appserv

安装成功以后，将编写程序文件放到Appserv\www文件夹中，然后在地址栏输入：http://localhost/ajaxstudy出现如下结果：

3 jQuery中的ajax

jQuery对ajax操作进行了封装

底层方法	$.ajax()
第二层	load() $.get() $.post()
第三层	$.getScript() $.getJSON()

(1)load方法能够远程载入并插入DOM中

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

url	字符串类型(string)	请求html页面的url地址
data[可选]	对象(object)	发送至服务器的key/value数据
callback[可选]	功能函数(function)	请求完成时的回调函数，无论请求成功或失败

首先构造一个test.html的文件

<div class="comment">
<h6>张三</h6>
<p class="para">沙发</P>
</div>
<div class="comment">
<h6>李四</h6>
<p class="para">板凳</P>
</div>
<div class="comment">
<h6>王五</h6>
<p class="para">地板</P>
</div>

再新建一个空白页面

<input type="button" id="send" value="ajax获取"/>
<div class="comment">已有评论</div>
<div id="resText"></div>

jQuery代码如下

$(function(){
   $("#send").click(function(){
       $("#resText").load("test.html");
   })
})

注意：test.html页面中没有样式，但现在加载的内容有样式了，这些样式在主页面中添加的，主页面相应的样式会立即应用到加载的样式上。

筛选载入的HTML文档，load()方法的URL参数的语法结构为：“url selector”,url 和选择器之间有一个空格。例如想要载入test.html页面中的class为“para”的内容，用如下代码来完成：

$("#resText").load("test.html .para");

运行结果如下:

传递方式：load()方法的传递方式根据data来自动指定，没有参数传递，采用get()方式传递，反之为post()方式。

$("#resText").load("test.html，function(){
});//无参数传递，get方式
$("#resText").load("test.html,{name:"rain",age:"22"},function(){
});//有参数传递，post方式

回调参数，load()方法提供了回调函数callback，该函数有三个参数：

responseTest	请求返回的内容
textStatus	请求状态，共4种
XMLHttpRequest	XMLHttpRequest对象

（2）$.get()方法和$.post()方法

load()方法从服务器上获取静态的数据文件，而在项目中，如果需要传递一些参数给服务器中的页面，可以使用$.get()方法和$.post()方法，它们是jQuery中的全局函数。

$.get()方法用get()方式来进行异步请求

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

url：请求html页面的url地址

data: 发送至服务器的key/value数据会作为QueryString附加到请求url中

callback：载入成功时的回掉函数

其中type为服务器端返回内容的样式，包括xml,html,script,json,text和_default

$("#send").click(function(){
      $.get("get1.html",{
      username:$("#username").val(),
      content:$("#content").val()
      },function(data,textStatus){
            $("#resText").html(data);  //将返回的数据添加到页面上
         })
})

$.get()方法的回调函数接收两个参数，data 返回的内容，可以是xml,json,html；textStatus 请求状态，而且回调函数只有当数据成功返回后才被调用，这点和load()方法不一样。

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

参数传递	get请求会将参数跟在url后进行传递，post请求则是作为HTTP请求的实体内容发送给web服务器
传输数据大小	get传输数据大大小一般不超过2kb，post传输数据大小不受限制
缓存问题	get请求的数据会被浏览器缓存起来，会带来安全性问题
传递的数据在服务器端的获取方式	php中，get $_GET[]而post 是$_POST[]获取

$("#send").click(function(){
      $.post("get1.html",{
      username:$("#username").val(),
      content:$("#content").val()
      },function(data,textStatus){
            $("#resText").append(data);  //将返回的数据添加到页面上
         })
})

另外当load()带有参数传递时，会使用post方式发送请求，可以用load()方法来完成同样的功能。

$("#send").click(function(){
      $("#send").load("post1.html",{
      username:$("#username").val(),
      content:$("#content").val()
         })
})

如果还需要编写一些复杂的ajax程序，就需要用到，jQuery中的$.ajax()方法。它不仅能实现与load()、$.get()、$.post()方法同样的功能，而且还能设定beforeSend（提交前回调函数）\error（请求失败后处理）、success（请求成功后处理）以及complete（请求完成后处理），通过这些回调函数，可以给用户更多的ajax提示信息。

（3） $.getScript()和$.getJson()方法

$.getScript()方法

在页面初次加载时获取全部的js文件是没有必要的，当然，可以在需要哪个js文件时，动态的创建<script>标签

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

但是这种方式并不理想，为此jQuery提供了$.getScript()方法来直接加载js文件。

这里js文件编写如下：

var comments = [
  {
    "username": "张三",
    "content": "沙发."
  },
  {
    "username": "李四",
    "content": "板凳."
  },
  {
    "username": "王五",
    "content": "地板."
  }
];

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

  $('#resText').html(html);

$("#send").click(function(){
       $.getScript("test.js");
})

运行结果：

$.getJson()方法

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

$("#send").click(function(){
       $.getScript("test.json");
})

但是，当点击“加载”按钮，网页看不到任何效果，虽然函数加载了json文件，但是并没有告诉javascript对返回的数据如何处理。为此，jQuery提供了回调函数，在回调函数里处理返回的数据。

json文件如下：

[
  {
    "username": "张三",
    "content": "沙发."
  },
  {
    "username": "李四",
    "content": "板凳."
  },
  {
    "username": "王五",
    "content": "地板."
  }
]

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

举例如下：

$(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">'
+comment['content']+'</p></div>';
});
$("#resText").html(html);
});    
});
})

运行结果如下：

（4）$.ajax()方法

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

语法如下：

$.ajax({name:value, name:value, ... })

常用的参数解释

4 序列化元素

（1）serialize()方法

此方法也是作用于一个jQuery对象,能够将DOM元素内容序列化为字符串，用于ajax请求

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

serialize()方法作用于一个jQuery对象，不止表单可以使用他，其它选择器选取的元素也都能使用他。实例如下：

$(function(){
	   $("#send").click(function(){
			var $data =  $(":checkbox,:radio").serialize();
            alert( $data );
	   })
	})

html代码段如下:

<input type="checkbox" name="check" value="1" checked/>篮球<br/>
<input type="checkbox" name="check" value="2" />足球<br/>
<input type="checkbox" name="check" value="3" />乒乓球<br/>
<input type="checkbox" name="check" value="4" />羽毛球<br/>

<input type="radio" name="radio" value="1" checked/>篮球<br/>
<input type="radio" name="radio" value="2" />足球<br/>
<input type="radio" name="radio" value="3" />乒乓球<br/>
<input type="radio" name="radio" value="4" />羽毛球<br/>
<button id="send">提交</button>

点击提交后，运行结果如下：

（2）serializeArray()方法

该方法不是返回字符串，将dom元素序列化以后，返回json格式的数据，举例如下：

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

serialize()方法作用于一个jQuery对象，不止表单可以使用他，其它选择器选取的元素也都能使用他。实例如下：

 $(function(){
		 var fields = $(":checkbox,:radio").serializeArray();
		 console.log(fields);// Firebug输出
		 $.each( fields, function(i, field){
		    $("#results").append(field.value + " , ");
		}); 
   })

html代码段如下：

<p id="results"><b>结果：</b> </p>
<input type="checkbox" name="check" value="1" checked="checked"/>篮球<br/>
<input type="checkbox" name="check" value="2" checked="checked"/>足球<br/>
<input type="checkbox" name="check" value="3" checked="checked"/>乒乓球<br/>
<input type="checkbox" name="check" value="4" />羽毛球<br/>
<input type="radio" name="radio" value="1" checked="checked"/>篮球<br/>
<input type="radio" name="radio" value="2" />足球<br/>
<input type="radio" name="radio" value="3" />乒乓球<br/>
<input type="radio" name="radio" value="4" />羽毛球<br/>

运行结果如下：

（3）$.param()方法

它是serialize（）方法的核心，用来对一个数组或者对象按照key/value进行序列化

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

5 jQuery中的ajax全局事件

通过jQuery提供的一些自定义全局函数，能够为各种与ajax相关的事件注册回调函数。例如，当Ajax请求开始时，会触发ajaxStart（）方法的回调函数，当Ajax请求结束时，会触发ajaxStop（）方法的回调函数。这些方法都是全局的方法，因此无论创建他们的代码位于何处，只要右ajax请求发生，就会触发他们。

 $("#loading").ajaxStart(function(){
	      $(this).show();
	   });
	   $("#loading").ajaxStop(function(){
	      $(this).hide();
	   });

html代码段如下：

<div id="loading">加载中</div>

这样一来，在ajax请求中，只要图片还未加载完毕，就会一直显示“加载中”。

如果想使某个ajax请求不受全局方法的影响，可以在使用$.ajax（options）方法时，将参数中的global设置为false。

$.ajax({
      url:"test.html",
      global:false
});

锋利的jQuery 笔记整理三

猜你喜欢