Ajax教程

1.同步交互和异步交互

l 同步交互

n 客户端向服务器端发送请求 ——> 等待服务器端处理 ——> 处理完毕返回，这个期间客户端不能做任何其他事情。

n 发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。

n 举例：文件上传

l 异步交互

n 客户端向服务器端发送请求 ——> 等待服务器端处理 ——> 处理完毕返回，这个期间客户端可以做其他事情。

n 发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。

n 举例：文件上传

2.Ajax的定义

l Ajax被认为是(AsynchronousJavaScript and XML的缩写）。

l 允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax。

3.Ajax现今经典案例

l AJAX案例之googlesuggest

l AJAX案例之Google Maps

4.Ajax模型与传统web模型的区别

l Ajax模型

l 传统web模型

5.实现异步交互的技术

l Flash

l Java applet

l 框架：如果使用一组框架构造了一个网页，可以只更新其中一个框架，而不必惊动整个页面

l 隐藏的iframe

l XMLHttpRequest：该对象是对 JavaScript 的一个扩展，可使网页与服务器进行通信。是创建 Ajax 应用的最佳选择。实际上通常把 Ajax 当成 XMLHttpRequest 对象的代名词。

6.Ajax的工作原理

l Ajax的核心是JavaScript对象XmlHttpRequest。

l XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

l 用户的浏览器在执行任务时即装载了AJAX引擎。AJAX引擎用JavaScript语言编写，通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互。

l AJAX引擎允许用户与应用软件之间的交互过程异步进行，独立于用户与网络服务器间的交流。现在，可以用Javascript调用AJAX引擎来代替产生一个HTTP的用户动作，内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求可以交给AJAX来执行。

7.Ajax包含的技术

AJAX:(Asynchronous JavaScript and XML)并不是一项新技术,其实是多种技术的综合，包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest。

l 服务器端语言：服务器需要具备向浏览器发送特定信息的能力。Ajax与服务器端语言无关。

l XML (eXtensible Markup Language，可扩展标记语言) 是一种描述数据的格式。AJAX程序需要某种格式化的格式来在服务器和客户端之间传递信息，XML 是其中的一种选择。

l XHTML（eXtendedHypertext Markup Language,使用扩展超媒体标记语言）和 CSS（CascadingStyle Sheet,级联样式单）标准化呈现。

l DOM（DocumentObject Model,文档对象模型）实现动态显示和交互。

l 使用XMLHTTP组件XMLHttpRequest对象进行异步数据读取。

l 使用JavaScript绑定和处理所有数据。

8.Ajax的优点与缺点

l 优点：

n 最大的一点是页面无刷新，在页面内与服务器通信，给用户的体验非常好。

n 使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。

n 可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。

n 基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

l 缺点：

n AJAX大量使用了Javascript和AJAX引擎，而这个取决于浏览器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持，Mozilla虽然也支持AJAX，但是提供XMLHttpRequest的方式不一样。所以，使用AJAX的程序必须测试针对各个浏览器的兼容性。

n AJAX更新页面内容的时候并没有刷新整个页面，因此，网页的后退功能是失效的；有的用户还经常搞不清楚现在的数据是旧的还是已经更新过的。这个就需要在明显位置提醒用户“数据已更新”。

n 对流媒体的支持没有FLASH、Java Applet好。

n 对搜索引擎的支持比较弱。

n 一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax。

9.XMLHttpRequest对象

XMLHttpRequest是XMLHTTP组件的对象，通过这个对象，AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新界面，也不用每次将数据处理的工作都交给服务器来做；这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。

l XMLHttpRequest最早是在IE5中以ActiveX组件的形式实现的。非W3C标准！

l 由于非标准所以实现方法不统一

n Internet Explorer把XMLHttpRequest实现为一个ActiveX对象。

n 其他浏览器（Firefox、Safari、Opera…）把它实现为一个本地的JavaScript对象。

n XMLHttpRequest在不同浏览器上的实现是兼容的，所以可以用同样的方式访问XMLHttpRequest实例的属性和方法，而不论这个实例创建的方法是什么。

l 创建XMLHttpRequest对象

function createXmlHttpRequest(){
		var xmlHttp;
		try{    //Firefox,Opera 8.0+,Safari
			xmlHttp=new XMLHttpRequest();
		}catch (e){
			try{    //Internet Explorer
				xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
			}catch (e){
				try{
					xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
				}catch (e){}  
			}
		}
		return xmlHttp;

l XMLHttpRequest对象的方法

1.Ajax的实现步骤

1.1.创建XMLHttpRequest对象

参看上面的示例！

1.2.服务器端向客户端响应（注册监听）

l XMLHttpRequest对象的onreadystatechange属性

n 该事件处理函数由服务器触发，而不是用户。

n 在 Ajax 执行过程中，服务器会通知客户端当前的通信状态。这依靠更新XMLHttpRequest 对象的 readyState来实现。改变readyState 属性是服务器对客户端连接操作的一种方式。

n 每次 readyState 属性的改变都会触发 readystatechange事件。

l XMLHttpRequest对象的readyState 属性

n readyState 属性表示Ajax请求的当前状态。

n 它的值用数字代表。

u 0 代表未初始化。 还没有调用 open 方法

u 1 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用

u 2 代表已加载完毕。send 已被调用。请求已经开始

u 3 代表交互中。服务器正在发送响应

u 4 代表完成。响应发送完毕

n 每次 readyState 值的改变，都会触发 readystatechange 事件。如果把 onreadystatechange 事件处理函数赋给一个函数，那么每次 readyState 值的改变都会引发该函数的执行。

n readyState 值的变化会因浏览器的不同而有所差异。但是，当请求结束的时候，每个浏览器都会把 readyState 的值统一设为 4。

l XMLHttpRequest对象的status属性

n 服务器发送的每一个响应也都带有首部信息。三位数的状态码是服务器发送的响应中最重要的首部信息，并且属于超文本传输协议中的一部分。

n 常用状态码及其含义：

u 404 没找到页面(notfound)

u 403 禁止访问(forbidden)

u 500 内部服务器出错(internalservice error)

u 200 一切正常(ok)

u 304 没有被修改(notmodified)(服务器返回304状态，表示源文件没有被修改 )

n 在 XMLHttpRequest 对象中，服务器发送的状态码都保存在 status 属性里。通过把这个值和 200 或 304 比较，可以确保服务器是否已发送了一个成功的响应。

1.3.建立客户端与服务器端的通信连接

l XMLHttpRequest对象的open ( method,url,asynch ) 方法

n XMLHttpRequest 对象的 open 方法允许程序员用一个Ajax调用向服务器发送请求。

n method：请求类型，类似 “GET”或”POST”的字符串。若只想从服务器检索一个文件，而不需要发送任何数据，使用GET(可以在GET请求里通过附加在URL上的查询字符串来发送数据，不过数据大小限制为2000个字符)。若需要向服务器发送数据，用POST。

n url：路径字符串，指向你所请求的服务器上的那个文件。可以是绝对路径或相对路径。

n asynch：表示请求是否要异步传输，默认值为true(异步)。指定true，在读取后面的脚本之前，不需要等待服务器的相应。指定false，当脚本处理过程经过这点时，会停下来，一直等到Ajax请求执行完毕再继续执行。

l 如果请求方式是”POST”方式的话，需要再open ( ) 方法后，调用setRequestHeader(header,value)方法

n 当浏览器向服务器请求页面时，它会伴随这个请求发送一组首部信息。这些首部信息是一系列描述请求的元数据(metadata)。首部信息用来声明一个请求是 GET 还是 POST。

n Ajax 请求中，发送首部信息的工作可以由 setRequestHeader完成。

n 参数header： 首部的名字; 参数value：首部的值。

n 如果用 POST 请求向服务器发送数据，需要将 “Content-type” 的首部设置为 “application/x-www-form-urlencoded”.它会告知服务器正在发送数据，并且数据已经符合URL编码了。

n 该方法必须在open()之后才能调用。

1.4.客户端向服务器端发送请求

l XMLHttpRequest对象的send (data ) 方法

n 如果请求方式是”GET”方式的话，send ( ) 方法发送请求数据，服务器端接受不到参数。

n 如果请求方式是”POST”方式的话，send ( ) 方法发送请求数据，服务器端可以接受参数。

1.5.GET请求方式的Ajax应用

	//1 创建XmlHttpRequest对象
	var xmlHttp=ajaxFunction();
	  
	 /*
	  * 2 接收服务器返回的数据[注册监听]
	  *   * onreadystatechange事件处理函数由服务器触发，而不是用户
          * 在 Ajax 执行过程中，服务器会通知客户端当前的通信状态。通信状态的改变要激发函数的执行
          * readyState 属性表示Ajax请求的当前状态。它的值用数字代表。
				0 代表未初始化。 还没有调用 open 方法
				1 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用
				2 代表已加载完毕。send 已被调用。请求已经开始
				3 代表交互中。服务器正在发送响应
				4 代表完成。响应发送完毕
	  */
	xmlHttp.onreadystatechange=function(){
		 if(xmlHttp.readyState==4){
		 	if(xmlHttp.status==200||xmlHttp.status==304){
				//接收服务器端返回的数据
				var data=xmlHttp.responseText;
				alert(data);
			}
		 }
	}  
	
	/*
	 * 3 打开和服务器的连接
	 *  xmlHttp.open("get","../testServlet",true);
	 *   * 参数1:请求方法  get post
	 *   * 参数2:请求的路径
	 *   * 参数3:表示请求是否要异步传输，默认值为true(异步)
	 */
	xmlHttp.open("get","../testServlet?timeStamp="+new Date().getTime()+"&c=18",true);
	   
	/*
	 * 4 发送数据到服务器端
	 *   * 如果请求方法是get,此时send方法不能发送数据到服务器端
	 *     即使发送了数据,服务器端也接收不到,该参数设置null
	 *   * 此时传递参数可以使用url方式传递参数  
	 */
	xmlHttp.send("a=9&b=8");  //xmlHttp.send(null);

1.1.POST请求方式的Ajax应用

//1 创建XmlHttpRequest对象
	var xmlHttp=ajaxFunction();
	  
	 /*
	  * 2 接收服务器返回的数据[注册监听]
	  *   * onreadystatechange事件处理函数由服务器触发，而不是用户
          * 在 Ajax 执行过程中，服务器会通知客户端当前的通信状态。通信状态的改变要激发函数的执行
          * 
          * 
          * readyState 属性表示Ajax请求的当前状态。它的值用数字代表。
				0 代表未初始化。 还没有调用 open 方法
				1 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用
				2 代表已加载完毕。send 已被调用。请求已经开始
				3 代表交互中。服务器正在发送响应
				4 代表完成。响应发送完毕
	  */
	xmlHttp.onreadystatechange=function(){
		 if(xmlHttp.readyState==4){
		 	if(xmlHttp.status==200||xmlHttp.status==304){
				//接收服务器端返回的数据
				var data=xmlHttp.responseText;
				alert(data);
			}
		 }
	}  
	
	/*
	 * 3 打开和服务器的连接
	 *  xmlHttp.open("get",true);
	 *   * 参数1:请求方法  get post
	 *   * 参数2:请求的路径
	 *   * 参数3:表示请求是否要异步传输，默认值为true(异步)
	 */
	xmlHttp.open("post",true);
	   
	/*
	 * 如果请求方法是post,需要设置Content-Type的类型
	 *  * 该方法必须放置在open方法的后面
	 */   
	xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");  
	
	/*
	 * 4 发送数据到服务器端
	 *   * 如果请求方法是post,此时send方法可以发送数据到服务器端
	 */
	xmlHttp.send("a=9&b=8");  //xmlHttp.send(null);

1.Ajax的数据格式

1.1.HTML

l XMLHttpRequest对象的responseText属性

n responseText 属性包含了从服务器发送的数据。它是一个HTML,XML或普通文本，这取决于服务器发送的内容。

n 当 readyState 属性值变成 4 时,responseText 属性才可用，表明 Ajax 请求已经结束。

l 优点：

n 从服务器端发送的 HTML 代码在浏览器端不需要用 JavaScript 进行解析。

n HTML 的可读性好。

n HTML 代码块与 innerHTML属性搭配，效率高。

l 缺点：

n 若需要通过 AJAX 更新一篇文档的多个部分，HTML 不合适(拆串)。

n innerHTML 并非 DOM 标准。

1.2.XML

l XMLHttpRequest对象的responseXML属性

n 只用服务器发送了带有正确首部信息的数据时， responseXML 属性才是可用的。 MIME 类型必须为 text/xml。

l 优点：

n XML 是一种通用的数据格式。

n 不必把数据强加到已定义好的格式中，而是要为数据自定义合适的标记。

n 利用 DOM 可以完全掌控文档。

l 缺点：

n 如果文档来自于服务器，就必须得保证文档含有正确的首部信息。若文档类型不正确，那么 responseXML 的值将是空的。

n 当浏览器接收到长的 XML 文件后， DOM 解析可能会很复杂。

1.3.JSON

l JSON数据格式

n JSON（JavaScriptObject Notation）一种简单的数据格式，比xml更轻巧。JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。

n JSON的规则很简单：对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’对”之间使用“,”（逗号）分隔。

n 规则如下:

1.映射用冒号（“：”）表示。名称:值。

2.并列的数据之间用逗号（“，”）分隔。

3.映射的集合（对象）用大括号（“{}”）表示。

4.并列数据的集合（数组）用方括号(“[]”)表示。

5.元素值可具有的类型：string,number,object,array,true,false,null。

l 解析JSON

n JSON 只是一种文本字符串。它被存储在 responseText 属性中

n 为了读取存储在 responseText 属性中的 JSON 数据，需要根据 JavaScript 的 eval 语句。

n 函数 eval 会把一个字符串当作它的参数。然后这个字符串会被当作 JavaScript代码来执行。因为 JSON 的字符串就是由 JavaScript 代码构成的，所以它本身是可执行的。

2.json-lib

l JSON-lib 是一个java类库

n 转换 javabeans,maps,collections,java arrays 和 XML 成为json 格式数据

n 转换json格式数据成为 javabeans 对象

l 需要jar包

n jakarta commons-lang 2.5

n jakarta commons-beanutils 1.8.0

n jakarta commons-collections 3.2.1

n jakarta commons-logging 1.1.1

n ezmorph 1.0.6

		 /**           
		  * 数组或集合-->JSON串          
		  */         
		System.out.println("------------数组或集合-->JSON串----------");
		boolean[] boolArray = new boolean[]{true,true};
		JSONArray jsonArray1 = JSONArray.fromObject(boolArray);
		System.out.println(jsonArray1);  //[true,true]
		
		List list = new ArrayList();
		list.add("first");
		list.add("second");
		JSONArray jsonArray2 = JSONArray.fromObject(list);
		System.out.println(jsonArray2);  //["first","second"]
		
		JSONArray jsonArray3 = JSONArray.fromObject("['json','is','easy']");
		System.out.println(jsonArray3);  // ["json","is","easy"]

		/**
		  * Object|Map-->JSON串          
		  */         
		System.out.println("------------Object|Map-->JSON串----------");
		Map map = new HashMap();
		map.put("name","json");
		map.put("bool",Boolean.TRUE);
		map.put("int",new Integer(1));
		map.put("arr",new String[]{"a","b"});
		map.put("func","function(i){ returnthis.arr[i]; }");
		JSONObject jsonObject1 = JSONObject.fromObject(map);
		System.out.println(jsonObject1);  
		//{"func":function(i){ return this.arr[i]; },		"arr":["a","b"],"int":1,"bool":true,"name":"json"}
		
		JSONObject jsonObject2 = JSONObject.fromObject(new MyBean());
		System.out.println(jsonObject2);  
		//{"func1":function(i){ return this.options[i]; },		"func2":function(i){ return this.options[i]; },		"name":"json","options":["a","f"],"pojoId":1}  

		/**           
		 * JSON串-->Object
		 */         
		System.out.println("------------JSON串-->Object----------");
		String json1 = "{name="json",bool:true,int:1,double:2.2,func:function(a){ return a; },array:[1,2]}";
		JSONObject jsonObject3 = JSONObject.fromObject(json1);
		Object bean1 = JSONObject.toBean(jsonObject3);
		System.out.println(bean1);  
		//net.sf.ezmorph.bean.MorphDynaBean@10dd1f7[  //    
		{double=2.2,func=function(a){ return a; },		int=1,name=json,bool=true,array=[1,2]}  //]
		
		String json2 = "{bool:true,integer:1,string:"json"}";                  
		JSONObject jsonObject4 = JSONObject.fromObject(json2);
		BeanA bean2 = (BeanA) JSONObject.toBean(jsonObject4,BeanA.class);                  
		System.out.println(bean2);  
		// BeanA{bool=true,integer=1,string='json'}

 /**           
		  * XML-->JSON串          
		  */
		System.out.println("------------XML-->JSON串----------");
		String xml3 = "" + "<a class="array">n" + 
"<e type="function" params="i,j">n" + "return matrix[i][j];n" +"</e>n" + "</a>";
		JSONArray json5 = (JSONArray) new XMLSerializer().read(xml);
		System.out.println(json5);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!