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

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

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

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


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

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

1、使用get和post请求

get()方法包括4个參数，说明例如以下：

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

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

第三个參数表示异步交互成功之后调用的回调函数，回调函数的參数值为server端对应的信息。


第四个參数表示server端响应信息返回的内容格式(如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
 发送到server的数据。将自己主动转换为请求字符串格式,必须为key/value格式。
dataType
 预期server返回的数据类型。

假设不指定，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
 请求成功后的回调函数,函数的參数是由server返回并依据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属性基础上，对异步交互中server响应状态进行封装,提供了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全局參数

对于频繁与server进行交互的页面来说,每一次交互都要设置很多选项,这样的操作是非常繁琐的,也easy出错。为此,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" onclick="">
	<input type="button" value="按钮2" onclick="">
 </body>
</html></span>

知道有这个东西即可,用起来还是比較简单 的。



posted on 2017-06-13 08:36  yjbjingcha  阅读(155)  评论(0)  编辑  收藏  举报

导航