8.7

最新推荐文章于 2025-08-15 22:56:20 发布

转载最新推荐文章于 2025-08-15 22:56:20 发布 · 103 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cj2653240551/p/7301908.html

文章标签：

#javascript #json #ViewUI

一、jq中AJAX的格式以及作用

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

1、使用get和post请求

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

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

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

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

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

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

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

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个响应事件,以便于进一步细化对整个请求响应过程的跟踪

[html] view plain copy print ?

<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>

<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()方法的参数类似,都是一个参数列表,在该方法中设置的选项可以实现全局共享,从而在具体的交互中只要

设置个性化参数即可。

使用方法：

<html>

<head>

<title> New Document </title>