Jquery系列（六） jQuery与Ajax

最新推荐文章于 2024-03-13 07:00:00 发布

IT四王子

最新推荐文章于 2024-03-13 07:00:00 发布

阅读量501

点赞数

本文链接：https://blog.csdn.net/liming363873117/article/details/51864142

版权

引言：

jQuery对Ajax操作进行了封装，可以在jQuery应用中方便地进行应用和实现。

概述：

Ajax（Asynchronous JavaScript and XML）概述：是异步JavaScript和XML技术，它有机地将一系列交互式网页应用技术结合起来，它的出现揭开了无刷新更新页面的新时代，替代了传统的Web页面刷新模式。

内容：

一 Ajax基础知识：

1 原理：通过XMLHttpRequest对象向服务器发送异步请求，从服务器获得数据，然后利用JavaScript操作DOM来更新页面。

2 作用：Ajax使用JavaScript在浏览器与服务器之间进行数据的发送和接收，通过在后台与服务器交换数据，而不是每当用户做出改变时重载整个Web页面，从而使网页更迅速第响应用户的操作。

3 核心：XMLHttpRequest是Ajax的核心机制，JavaScript可以及时向服务器提出请求和处理响应，而不阻塞用户，从而达到页面屋刷新的效果。

4 创建XMLHttpRequest实例：

function CreateXmlHttp(){
	//非IE浏览器创建XmlHttpRequest对象
	if(window.XmlHttpRequest){
		xmlhttp = new XmlHttpRequest();
	}
	//IE浏览器创建XmlHttpRequest对象
	if(window.ActiveXObject){
		try{
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch (e){
			try{
				xmlhttp = new ActiveXObject("msxm12.XMLHTTP");
			}
			catch (ex) {}
		}
	}
}

function use(){
	var data = document.getElementById("username").value;
	CreateXmlHttp();
	if(!xmlhttp)
	{
		alert("创建xmlhttp对象异常！");
		return false;		
	}
	xmlhttp.open("POST",url,false);
	xmlhttp.onreadystatechange = function(){
		if(xmlhttp.readyState == 4){
			document.getElementById("user1").innerHTML = "数据正在加载...";
			if(xmlhttp.status ==200){
				document.write(xmlhttp.responseText);
			}
		}
	}
	xmlhttp.send()

二 jQuery中的Ajax方法：

1 最底层方法$.ajax():

实现原理：通过HTTP请求加载远程数据，并返回其创建的XMLHttpRequest对象，下面的方法都是基于本方法构建的，可以用本方法代替其它方法。

基本语法：$(selector).jQuery.ajax([settings])

实例：代替$.getScript()方法

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

2 第二层方法load()、$.get()和$.post():

（1）load()方法：

实现原理：通过Ajax请求从服务器加载数据，并把返回的数据放置到指定的元素中。

基本语法格式：load(url,data,function(response,status,xhr))

实例：这个实例需要将load.htm以及jQuery的js文件和demo.txt文件部署在Tomcat服务器的\webapps\ROOT根目录中，访问该页面的URL地址为http://127.0.0.1:8080/load.htm

<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script>
	$(document).ready(function(){
		$("#btn1").click(function(){ //绑定click事件
			$('#test').load('/demo.text');
		})	
	})
</script>
</head>
<body>
	<h3 id="test">请单击下面的按钮，通过jQuery AJAX 改变这段文本。</h3>
	<button id="btn1" type="button">获得外部文件的内容</button>
</body>
</html

（2）$.get()方法：

实现原理：通过HTTP GET请求从服务器上请求数据。与load()方法不同之处在于load方法允许规定要插入的远程文档的某个部分，可以通过url参数的特殊语法实现。

基本语法：$(selector).get(url,data,success(response,status,xhr),dataType)

实例：

<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script>
	$(document).ready(function(){
		$("button").click(function(){ //绑定click事件
			$.get("/demo.txt",function(data,status){//载入服务器端文本文件
				alert("数据：" + data + "\n状态：" + status);//获取返回结果并显示
			});	
		});
	});
</script>
</head>
<body>	
	<button>向页面发送 HTTP GET 请求，然后获得返回的结果</button>
</body>
</html

（3）$.post()方法：

实现原理：通过HTTP POST请求从服务器载入数据。

基本语法：$(selector).post(url,data,success(data,textStatus,jqXHR),dataType)。

实例：

$("button").click(function(){
	$.post("demo_post.asp",
	{
		name:"liming",
		city:"zhangjiakou"
	},
	function(data,status){
		alert("Data:" + data + "\nStatus:" + status);
	});
});

3 第三层方法$.getScript()方法和$.getJSON()方法：

（1）$.getScript()方法：

实现原理：通过HTTP GET请求载入并执行 JavaScript文件

基本语法：$(selector).getScript(url,success(response,status)

实例：

<html>
<head>
	<script src="jquery.js" type="text/javascript"></script>
	<script type ="text/javascript">
		$(document).ready(function(){
			$("button").click(function(){      //绑定click事件
				$.getScript("demo_script.js"); //载入服务器端JavaScript文件
			})；
		})；
	</script>
</head>
<body>
	<button>使用 Ajax 来获得并运行一个JavaScript文件</button>
</body>
</html>

（2）$.getJSON()方法：

实现原理：可以通过HTTP GET请求载入JSON数据。

基本语法：$(selector).getJSON(url,data,success(data,status,xhr))

实例：略。

三 jQuery中的Ajax事件：

1 全局事件：

ajaxStart ：开始新的Ajax请求，并且此时没有其他Ajax请求正在进行；

ajaxSend ：请求开始前触发的全局事件；

ajaxSuccess ：全局的请求成功；

ajaxError ：全局的发生错误时触发；

ajaxComplete ：全局的请求完成触发；

ajaxStop：当没有Ajax正在进行中的时候触发；

基本语法：

$(document).ajaxStart(onStart)
                    .ajaxComplete(onComplete)
                    .ajaxSuccess(onSuccess);
           function onStart(event){
                //开始Ajax请求事件的处理程序
           }
           function onComplete(event, xhr ,settings){
               //全局请求完成事件的处理程序
           }
           function onSuccess (event , xhr , settings){
             //全局请求成功事件的处理程序
          }

不产生全局事件设置：可以通过设置$.ajax()方法的global选项为false，来将全局事件禁用。

$.ajax({
    url:"test.html",
    global:false,  //禁用全局Ajax事件
    //....
})；<strong><span style="font-size:18px;">           </span></strong>

2 局部事件：

beforeSend：当一个Ajax请求开始时触发。如果需要，可以在这里设置XHR对象；

success：请求成功时触发，即服务器没有返回错误，返回的数据也没有错误；

error：仅当发生错误时触发。无法同时执行success和error俩个回调函数；

ajaxComplete : 全局的请求完成时触发。

基本语法：

$.ajax({
       beforeSend : function(){
          //beforeSend 事件处理程序
       }，
       complete : function(){
          //complete事件处理程序
       }
       // ...
})