jQuery整理笔记八----jQuery的Ajax

最新推荐文章于 2022-08-23 09:50:58 发布

hai_cheng001

最新推荐文章于 2022-08-23 09:50:58 发布

阅读量2.5k

点赞数 3

分类专栏： WEB其他 jQuery 文章标签： jquery ajax success jquery全局

本文链接：https://blog.csdn.net/caohaicheng/article/details/26631857

版权

jQuery 同时被 2 个专栏收录

21 篇文章 11 订阅

订阅专栏

WEB其他

7 篇文章 0 订阅

订阅专栏

Ajax,我一直读的是"阿贾克斯",据当时大学老师讲该读音出处是根据当年风靡欧洲的荷兰足球俱乐部阿贾克斯的名字来的,我觉得说法挺靠谱的。

jQuery封装了Ajax的交互过程，用户不需要考虑XMLHttpRequest对象的兼容性问题以及使用XMLHttpRequest建立连接、发送请求、发送方式、接收方式等细节，利用jQuery定义

的几个简单方法，即可轻松实现客户端与服务端异步通信的问题，从而帮助开发人员从繁琐的技术细节中解脱出来，专心于业务层开发工作。

最初始的JavaScript的Ajax在刚刚接触编程的时候接触过，现在都忘没了，只记得首先得获取XMLHttpRequest对象，实际开发中用的全都是jQuery封装好的Ajax，用的也是很繁。

jQuery中$.ajax()方法属于最底层的方法，第二层是load()、$.get()和$.post()方法，第三层是$.getScript()和$.getJSON()方法，其中当属第二层的三个方法使用的频率最高。

1、使用get和post请求

get()方法包含4个参数，说明如下：

第一个参数表示要请求的URL地址

第二个参数表示一个对象结构的名/值对列表

第三个参数表示异步交互成功之后调用的回调函数，回调函数的参数值为服务器端相应的信息。

第四个参数表示服务器端响应信息返回的内容格式(如XML、HTML、Script、JSON、Text)

其中第一个参数Url是必选参数，后面三个为可选参数。

get()方法是只能在请求成功后调用回调函数,如果要在出错的时候执行回调函数，则必须使用$.ajax()方法。第二个参数所传递的参数可以写在url后面。

<span style="font-family:SimSun;font-size:12px;">		$.get(
				"test1.jsp",
				{
					name:"haha",
					pass:"123"
				},
				function(data){			//回调函数
					alert(data);		//响应信息
				}
			)
		
		就可以改成
		
		$.get
		(
			"test1.jsp?name=haha&pass=123",function(data){
				alert(data);
			}
		)	</span>

jQuery还定义了两个专用方法getJSON()和getScript()。这两个方法的功能和用法与get是完全相同的,只是支持前三个参数,不需要设置第四个参数，从他们的名字上就看出了他

们已经指定响应数据的类型。

post()方法与get()方法几乎相同,只是请求方式的不同,具体选择哪种请求方式开发人员自己根据特定需求去决定。

2、$.ajax

$.ajax方法的一些参数
url	发送请求的地址,默认为当前页面地址。
type	设置请求方式，如GET或者POST，默认为GET。
timeout	设置请求超时时间(毫秒)。此设置将覆盖全局设置。
data	发送到服务器的数据。将自动转换为请求字符串格式,必须为key/value格式。
dataType	预期服务器返回的数据类型。如果不指定，jQuery自动根据HTTP包含的MINE信息返回responseXML或responseText。 xml：返回xml文档，可用jquery处理 html：返回纯文本HTML信息：包含的script标签会在插入DOM时执行 script：返回纯文本JavaScript代码。不会自动缓存结果,除非设置了cache参数。 json：返回JSON数据 text：返回纯文本字符串
async	boolean类型,这个参数极为重要！！设置是否为异步请求,默认为true,即所有请求均为异步请求。如果需要发送同步请求,设置为false即可。同步和异步的区别,同步请求将锁住浏览器,用户其他操作必须等待请求完成才可以执行;而异步请求不会影响其他代码的执行。回想一下以前遇到过这种问题,就是在ajax方法内给变量赋值,再ajax方法后面alert该变量,有时候是得不到ajax方法内赋予的那个值。就是因为ajax请求设置的是异步请求的原因。
beforeSend	发送请求可修改XMLHttpRequest对象的函数,如添加自定义的HTTP头,XMLHttpRequest对象时唯一参数，该函数如果返回fasle,可以取消本次Ajax请求。不常用，反正我是还没用过。
cache	设置缓存。默认值为true,当dataType为script的时候默认值是false，设置为false的时候将不会从浏览器缓存中加载请求信息。以前遇到过这个参数设置不对导致的问题,比较常用。
complete	请求完成后的回调函数(请求成功和失败均调用)。该函数包含两个参数：XMLHttpRequest对象和一个描述成功请求的类型的字符串。
global	是否触发全局Ajax事件，默认值为true。设置为false将不会触发全局ajax事件，如ajaxStart或ajaxStop可用于控制不同的Ajax事件
success	请求成功后的回调函数,函数的参数是由服务器返回并根据dataType参数进行处理后的数据
error	请求失败时调用的回调函数。该函数包含三个参数：XMLHttpRequest对象、错误信息（可选）、捕获的错误对象。如果发生了错误,错误信息（第二个参数）除了得到null之外，还可能是timeout、error、notmodified和parsererror。
scriptCharset	只有当请求时datatype为jsonp或script,并且type是GET才会用于强制修改charset。通常在本地和远程的内容编码不同时使用。
dataFilter	给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数，data是ajax返回的原始数据，type是ajax请求时设置的dataType参数。函数的返回值将由jquery进一步处理。

其余也有一些，几乎没用过，不整理了。

3、跟踪状态

jQuery在XMLHttpRequest对象定义的readyState属性基础上，对异步交互中服务器响应状态进行封装,提供了6个响应事件,以便于进一步细化对整个请求响应过程的跟踪

<span style="font-family:SimSun;font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>
  <script type="text/javascript">
	//页面加载方法
	$(function(){
		$("input").click(function(){
			$.ajax({
				type:"POST",
				url:"addClass.html",
				data :"name=css8"
			});

			//设置全局ajax跟踪事件
			$(document).ajaxStart(function(){
				alert("Ajax请求开始")
			});
			$(document).ajaxSend(function(){
				alert("Ajax请求将要发送")
			});
			$(document).ajaxComplete(function(){
				alert("Ajax请求完成")
			});
			$(document).ajaxSuccess(function(){
				alert("Ajax请求成功")
			});
			$(document).ajaxStop(function(){
				alert("Ajax请求结束")
			});
			$(document).ajaxError(function(){
				alert("Ajax请求失败")
			});
		})


	})
  </script>
 </head>

 <body>
	 <input type="button"  value="ajax请求过程">
 </body>
</html></span>

4、设置Ajax全局参数

对于频繁与服务器进行交互的页面来说,每一次交互都要设置许多选项,这种操作是很繁琐的,也容易出错。为此,jQuery定义了ajaxSetup()方法，该方法可以预设异步交互中的通用

选项，从而减轻频繁设置选项的繁琐。ajaxSetup()方法的参数跟$.ajax()方法的参数类似,都是一个参数列表,在该方法中设置的选项可以实现全局共享,从而在具体的交互中只要

设置个性化参数即可。

使用方法：

<span style="font-family:SimSun;font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>
  <script type="text/javascript">
	//页面加载方法
	$(function(){
		$.ajaxSetup({
			type:"POST",
			dataType:"text",
			success:function(data){
				alert(data);
			}
		});

		$("input").eq(0).click(function(){
			$.ajax({
				data:"name=wang"
			});
		});
		$("input").eq(1).click(function(){
			$.ajax({
				data:"name=zhang"
			});
		});

	})
  </script>
 </head>

 <body>
	<input type="button" value="按钮1" οnclick="">
	<input type="button" value="按钮2" οnclick="">
 </body>
</html></span>

知道有这个东西就行,用起来还是比较简单的。