jQuery与Ajax的应用

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011435776/article/details/79938161
一、Ajax的XMLHttpRrequest对象

Ajax的核心是XMLHttpRequest对象(发送异步请求、接受响应及执行回调),它是ajax实现的关键

XMLHttpRequest对象的open()方法与send()方法

方法描述
open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

  • method:请求的类型;GET 或 POST
  • url:文件在服务器上的位置
  • async:true(异步)或 false(同步)
send(string)

将请求发送到服务器。

    • string:仅用于 POST 请求

请求类型,GET 还是 POST?

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

然而,在以下情况中,请使用 POST 请求:

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

(1). GET请求

//简单的get请求,可能得到的是缓存的结果
xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();
//为了避免上述情况,请向 URL 添加一个唯一的ID
xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);
xmlhttp.send();
//若希望通过 GET 方法发送信息,请向 URL 添加信息
xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();

(2). POST请求

//简单的POST请求
xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();
//如果需要像HTML表单那样POST数据,请使用 setRequestHeader()来添加HTTP头。
//然后在send()方法中规定您希望发送的数据
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
方法描述
setRequestHeader(header,value)

向请求添加 HTTP 头。

  • header: 规定头的名称
  • value: 规定头的值


async参数设置

XMLHttpRequest对象如果要用于AJAX的话,其open()方法的async参数必须设置为true
通过 AJAX,JavaScript 无需等待服务器的响应,而是:
  • 在等待服务器响应时执行其他脚本
  • 当响应就绪后对响应进行处理
(1). 当使用 async=true 时,请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数:
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
(2). 当您使用 async=false 时,请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可:
xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

服务器响应

使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性描述
responseText获得字符串形式的响应数据。
responseXML获得 XML 形式的响应数据。


(1). 如果来自服务器的响应并非 XML,请使用 responseText 属性。

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

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

(2). 如果来自服务器的响应是 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;
onreadystatechange事件
当请求被发送到服务器时,我们需要执行一些基于响应的任务。
每当 readyState 改变时,就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。

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

属性描述
onreadystatechange存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成,且响应已就绪
status

200: "OK"

404: 未找到页面

Ajax()函数示例:

  • 定义一个函数,用于异步获取信息
function Ajax(){
	//code
}
  • 声明一个空对象来装入XMLHttpRequest对象
var xmlHttpReq = null;
  • 给XMLHttpRequest对象赋值
if(window.ActiveXObject){
	xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
	xmlHttpReq = new XMLHttpRequest();
}

IE5、IE6是以ActiveXObject的方式引入XMLHttpRequest对象的,而其他浏览器的XMLHttpRequest对象是window的子对象。

    • 实例化后,使用open()方法初始化XMLHttpRequest对象,指定HTTP方法和要使用的服务器URL
xmlHttpReq.open("GET","test.php",true);
  • 因为要做一个异步调用,所以需要注册一个XMLHttpRequest对象将调用的回调事件处理器当做它的readystate值改变时调用。当readyState值改变时,会激发一个readystatechange事件,可以使用onreadystatechange属性来注册该回调事件处理器。
xmlHttpReq.onreadystatechange = RequestCallBack;
  • 使用send()方法发送请求,因为这个请求使用的是HTTP的“GET”方式,所以可以在不指定参数或使用null参数的情况下调用send()方法
xmlHttpReq.send(null);

当请求改变时,XMLHttpRequest对象调用onreadystatechange属性注册的事件处理器,因此在处理该响应前,事件处理器首先应该检查readyState的值和HTTP的状态。当请求完成加载时(readyState==4)并且已经响应成功(status==200)时,就可以调用JavaScript函数来处理该响应内容。

function RequestCallBack(){
	if (xmlHttpReq.readyState == 4) {
		if (xmlHttpReq.status == 200) {
			//将xmlHttpReq.responText的值赋予id为resText的元素
			document.getElementById('resText').innerHTML = xmlHttpReq.responText;
		}
	}
}
二、jQuery中的Ajax

jQuery对Ajax操作进行了封装,在jQuery中$.ajax()方法属于最底层的方法,第2层是load()、$.get()、$.post()方法,第3层是$.getScript()、$.getJSON()方法

1、load()方法    通常用来从WEB服务器上获取静态的数据文件

最常用的Ajax方法,能载入远程HTML代码并插入DOM中

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

  • url:String    请求HTML页面的URL地址
  • data:Object    发送至服务器的key/value数据
  • callback:Function    请求完成时的回调函数,无论请求成功或失败
$(function(){
	$("#send").click(function(){
		$("#resText").load("test.html");
	})
})
<button type="button" id="send">ajax加载</button>
<div class="comment">已有评论:</div>
<div id="resText">替换内容</div>

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>

筛选载入的HTML文档

load()方法的URL参数的语法结构为:“url selector”

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

load()传递方式根据参数data自动指定,没有参数 --> GET,反之为POST   

// 无参数传递 GET
$("#resText").load("test.html",function(){
	//code
});
// 有参数传递 POST
$("#resText").load("test.html",{name:"rain",age:"22"},function(){
	//code
});

回调函数:有三个参数,请求返回的内容、请求状态、XMLHttpRequest对象

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

2、$.get()和$.post()方法    jQuery中的全局函数

2.1 $.get()    使用GET方式来进行异步请求

$.get(url[,data][,callback][,type]);
  • url:String    请求HTML页面的URL地址
  • data:Object    发送至服务器的key/value数据会作为QueryString附加到请求URL中
  • callback:Function    载入成功时回调函数(只有当response的返回状态是success才调用该函数)自动将请求结果和状态传递给该方法
  • type:服务器返回内容的格式,包括html、xml、script、json、text、_default
$("#send").click(function(){
	$.get("get1.php",{
		username:$("#username").val(),
		content:$("#comment").val()
	},function(data,textStatus){
		// data:返回的内容
		// textStatus:请求状态,success、error、notmodified、timeout
	})
})

数据格式:服务器返回的数据格式

(1)HTML片段    较少工作量

$.get("get1.php",{
	username:$("#username").val(),
	content:$("#comment").val()
},function(data,textStatus){
	// data:返回的内容
	// textStatus:请求状态,success、error、notmodified、timeout
	$("#resText").html(data);	//将返回的数据添加到页面上
});

(2) XML文档    需要对返回的数据处理

方便使用

可以通过attr()、find()、filter()方法对数据进行处理

$("#send").click(function(){
	$.get("get1.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文档,因此需要在服务期端设置Content-Type类型
header("Content-Type:text/html; charset=utf-8");

(3)JSON文件    需要对返回的数据处理

JSON相对于XML比较简洁

$("#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");
})

以上三种方法对比:

HTML返回数据最简单,如果数据需要重用使用JSON(性能与文件大小方面有优势),当远程程序未知时使用XML。

2.2 $.post()    通过 HTTP POST 请求从服务器上请求数据

$.post(URL[,data][,callback]);

  • url:String    请求的URL地址
  • data:Object    发送至服务器的key/value数据
  • callback:Function    载入成功时的回调函数

由于POST和GET方式提交的所有数据都可以通过$_REQUEST[]来获取,因此只需要改变jQuery函数,就可以将程序在GET请求和POST请求之间切换。

当load()方法带有参数传递时,会使用POST方式发送请求。因此也可以使用load()方法来完成同样的功能。


$.post()与$.get()方法的区别:

  • GET请求会将参数跟在URL后进行传递,而POST请求则是作为HTTP消息的实体内容发送给Web服务器。当然,在Ajax请求中,这种区别对用户是不可见的。
  • GET方式对传输的数据有大小限制(通常不能大于2KB),而使用POST方式传递的数据量要比GET方式大得多(理论上不受限制)。
  • GET方式请求的数据会被浏览器缓存起来,因此其他人就可以从浏览器的历史记录中读取到这些数据,例如账号和密码等。在某种情况下,GET方式会带来严重的安全性问题,而POST方式相对来说就可以避免这些问题。
  • GET方式和POST方式传递的数据在服务器端的获取也不相同。在PHP中,GET方式的数据可以用$_GET[]获取,而POST方式可以用$_POST[]获取。两种方式都可以用$_REQUEST[]来获取。

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

3、$.getScript()和$.getJSON()方法

3.1 $.getScript()

有时候,在页面初次加载时就取得所需的全部JavaScript文件是完全没有必要的。虽然可以在需要哪个JavaScript文件时,动态地创建<script>标签

$(document.createElement("script").attr("src","test.js")).appenChild("head");
//或
$("<script type='text/javscript' src='test.js'></script>").appendChild("head");
上述方法不理想,jQuery又提供了$.getScript()方法
$(function(){
	$("#btn").click(function(){
		$.getScript("test.js");
	})
})
有回调函数
$.getScript("test.js",function(){
	$(element).click(function(){
		$(element).animate({backgroundcolor:'pink'},1000)
		.animate({backgroundcolor:'coral'},1000);
	})
});

3.2 $.getJSON()方法    用于加载JSON文件,用法同$.getScript()方法

$(function(){
	$("#btn").click(function(){
		$.getJSON("test.json");
	})
})

上面函数虽然加载了JSON代码,但是并没有告诉JS对返回的数据如何处理,所以需要回调函数

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

jQuery遍历方法  -->  $.each()方法    遍历对象和数组

$.each(data,callback)    // 为全局函数   不同于each()方法

  • data:数组或对象

  • callback:回调函数,有两个参数(对象的成员或数组的索引,对应变量或内容)


4、$.ajax()方法    jQuery最底层的Ajax实现

$.ajax(options);

参数名称 类型 说明
urlString(默认为当前页地址)发送请求的地址
typeString

 请求方式(POST/GET)默认GE

注意其他HTTP请求方法,例如PUT和DELETE,仅部分浏览器支持

timeoutNumber

 设置请求超时时间(毫秒)

此设置将覆盖$.ajaxSetup()方法的全局设置

dataObject/String

 发送到服务器的数据。如果已经不是字符串,将自动转换为字符串格式。

GET请求中将附加在URL后。防止这种自动转换,可以查看processData选项。

对象必须为key/value格式

    例如:{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。

如果是数组,jQuery将自动为不同的值对应同一个名称

    例如:{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2

dataTypeString

预期服务器返回的数据类型。

如果不指定,jQuery将自动根据HTTP包MIME信息返回responseXML或responseText,

并作为回调函数参数传递。

可用类型,

xml:返回XML文档,可用jQuery处理

html:返回纯文本HTML信息,包含的script标签会在插入DOM是执行

script:返回纯文本的JavaScript代码,不会自动缓存结果。除非设置cache参数

            注意在远程请求时(不在同一个域下),所有POST请求都将转换为GET请求

json:返回json数据

jsonp:jsonp格式,使用jsonp形式调用参数时,myurl?callback=?

jQuery:将自动替换后一个“?”为正确的函数名,以执行回调函数

text:返回纯文本字符串

beforeSendFunction

发送请求前可以修改XMLHttpRequest对象的函数例如添加自定义HTTP头。

在beforeSend中如果返回false可以取消本次Ajax请求。XMLHttpRequest对象是唯一的函数

function(XMLHttpRequest){

    this;//调用本次Ajax请求时传递的options参数

}

completeFunction

 请求完成后调用的函数(请求成功或失败时均调用)

参数:XMLHttpRequest对象和一个描述成功请求类型的字符串

function(XMLHttpRequest,textStatus){

    this;//调用本次Ajax请求时传递的options参数

}

successFunction

请求完成后调用的函数(请求成功或失败时均调用)

参数:(1) 由服务器返回,并根据datatype参数进行设置

           (2) 描述状态的字符串

function(XMLHttpRequest,textStatus){

    //data可能是XMLDoc、jsonObj、html、text等

    this;//调用本次Ajax请求时传递的options参数

}

errorFunction

 请求失败时被调用的函数

参数:(1) XMLHttpRequest对象

           (2) 错误信息

           (3) 捕获的错误对象(可选)

function(XMLHttpRequest,textStatus,errorThrown){

    //通常情况下textStatus和errorThrown只有其中一个包含信息

    this;//调用本次Ajax请求时传递的options参数

}

globalBoolean

 默认为true。表示是否触发全局Ajax事件。设置为false将不会触发全局Ajax事件

AjaxStart或AjaxStop可用于控制各种Ajax事件

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

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

可被替换为

$(function(){
	$("#btn").click(function(){
		$.ajax({
			type:"GET",
			url:"test.js",
			dataType:"script"
		});
	});
})
$(function(){
	$("#btn").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);
			}
		});
	});
})

可被替换为

$(function(){
	$("#btn").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);
  1. })
} }); });
三、序列化元素

1.serialize()方法

异步提交表单,并将服务器返回的数据显示到当前页面中

$.get("get1.php",{
	username:$("#username").val(),
	content:$("#comment").val()
},function(data,textStatus){
	// data:返回的内容
	// textStatus:请求状态,success、error、notmodified、timeout
	$("#resText").html(data);	//将返回的数据添加到页面上
});

serialize()方法也是作用于一个jQuery对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求。可将上述代码简化为:

$.get("get1.php",$("#form1").serialize(),function(data,textStatus){
	// data:返回的内容
	// textStatus:请求状态,success、error、notmodified、timeout
	$("#resText").html(data);	//将返回的数据添加到页面上
});

serialize()方法作用于jQuery对象,所以不光只有表单能使用它,其他选择器选取的元素也都能使用它,如以下jQuery代码:

$(":checkbox,:radio").serialize();

把复选框和单选框的值序列化为字符串形式,只会将选中的值序列化。

2.serializeArray()方法

该方法不是返回字符串,而是将DOM元素序列化后,返回JSON格式的数据


3.$.param()方法

它是serialize()方法的核心,用来对一个数组或对象按照key/value进行序列化。

比如将一个普通的对象序列化:


四、jQuery中的全局事件

jQuery简化Ajax操作不仅体现在调用Ajax方法和处理响应方面,而且还体现在对调用Ajax方法的过程中的HTTP请求的控制。通过jQuery提供的一些自定义全局函数,能够为各种与Ajax相关的事件注册回调函数。例如当Ajax请求开始时,会触发ajaxStart()方法的回调函数;当Ajax请求结束时,会触发ajaxStop()方法的回调函数。这些方法都是全局的方法,因此无论创建它们的代码位于何处,只要有Ajax请求发生时,就会触发它们。

有时,当网页加载过慢时,就需要为网页添加一个提示信息,常用的提示信息是“加载中…”,代码如下:

<div class="loading">加载中...</div>
然后通过CSS控制元素隐藏,当Ajax请求开始的时候,将此元素显示,用来提示用户Ajax请求正在进行。当Ajax请求结束后,将此元素隐藏。
$("$loading").ajaxStart(function(){
	$(this).show();
}).ajaxStop(function(){
	$(this).hide();
});

jQuery的Ajax全局事件中还有几个方法,也可以在使用Ajax方法的过程中为其带来方便。


方法名称 说明
ajaxComplete(callback)Ajax请求完成时执行的函数
ajaxError(callback)Ajax请求发生错误时执行的函数,捕捉到的错误可以作为最后一个参数传递
ajaxSend(callback)Ajax请求发送前执行的函数
ajaxSuccess(callback)Ajax请求成功时执行的函数

注意:

1,如果想使某个Ajax请求不受全局方法的影响,那么可以在使用$.ajax(options)方法时,将参数中的global设置为false,jQuery代码如下

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

2,在jQuery1.5版本之后,如果Ajax请求不触发全局方法,那么可以设置:

$.ajaxPrefilter(function(options){
	options.global = true;
})

没有更多推荐了,返回首页