Ajax简介

l Ajax 的技术的产生

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

• 现在，允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做 Ajax.
* 同步交互和异步交互：
* 同步交互：客户端向服务器端发送请求，服务器端处理并响应的整个过程，客户端不能做任何其他事情的模式
* 异步交互：客户端向服务器端发送请求，服务器端处理并响应的整个过程，客户端可以做任何其他事情的模式
* Ajax的定义：允许浏览器与服务器通信而无须刷新当前页面的技术（不是严谨定义）
* Ajax的特点：
* 并不适用于任何场景
* 性能比较高
* Ajax是解决B\S模型下的异步交互
* Ajax的核心对象：XMLHttpRequest对象
* AJAX包含的技术：Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest等
* Ajax的缺点：
* 考虑浏览器兼容问题
* 搞不清楚数据是否是新的还是旧的
* 浏览器的前进和后退功能失效
* 对流媒体支持不太好
* 扩展：使用WEB技术(Ajax)开发移动应用
* XMLHttpRequest对象：
* 非W3C标准
* 考虑浏览器兼容问题
* 创建代码是固定的（面试题：该对象是如何创建,代码）

创建XMLHttpRequest的三种方法

//创建一个XMLHttpRequest对象,利用此对象与服务器进行通信 是AJAX技术的核心
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
function ajaxFunction(){
   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;
 }
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
function getXMLHttpRequest(){
	 var xmlHttpReq=null; 
	 if (window.ActiveXObject) {//IE浏览器创建XMLHttpRequest对象
	 	xmlHttpReq = new ActiveXObject("MSXML2.XMLHTTP.3.0");
	 }else if(window.XMLHttpRequest){
	 	 xmlHttpReq = new XMLHttpRequest();
	 }
     return xmlHttpReq;
}

/////////////////////////////////////////////////////////////////////////////////////////////////////////////

/**
 * 获取XmlHttpRequest对象
 */
function getXMLHttpRequest() {
	var xmlHttpReq=null;
	if (window.XMLHttpRequest) {//Mozilla 浏览器
		xmlHttpReq = new XMLHttpRequest();
	}else {
		if (window.ActiveXObject) {//IE 浏览器
			try {
				xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e) {
				try {//IE 浏览器
					xmlHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
				}
				catch (e) {
				}
			}
		}
	}
	return xmlHttpReq;
}

 

* 实现Ajax步骤：
* 创建XMLHttpRequest对象
* 服务器端向客户端进行响应（注册监听）
* XMLHttpRequest对象的onreadystatechange属性：监听服务器端的通信状态
* readyState 属性表示Ajax请求的当前状态。它的值用数字代表。
0 代表未初始化。 还没有调用 open 方法
1 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用
2 代表已加载完毕。send 已被调用。请求已经开始
3 代表交互中。服务器正在发送响应
4 代表完成。响应发送完毕
* 常用状态码及其含义：
404 没找到页面(not found)
403 禁止访问(forbidden)
500 内部服务器出错(internal service error)
200 一切正常(ok)
304 没有被修改(not modified)(服务器返回304状态，表示源文件没有被修改 )
* 客户端与服务器端建立连接
* open(method,url,asynch)
* method：请求类型，类似 “GET”或”POST”的字符串。
* 如果设置为POST的话，需要设置请求首部信息
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
* url：请求路径，可以是绝对路径或相对路径。
* asynch：表示请求是否要异步传输，默认值为true(异步)。
* 客户端向服务器端发送请求
* send()
* 如果请求类型是GET方式的话，客户端通过send()方法
向服务器端发送请求数据，服务器端接收不到
* 如果请求类型是POST方式的话，客户端通过send()方法
向服务器端发送请求数据，服务器端可以接收
* 请求类型GET方式与POST方式的区别：
* open()方法的第一个参数：GET还是POST
* send()方法：GET不能发送参数，POST可以发送参数
* 如果是POST的话，需要设置首部信息
* Ajax异步交互，客户端接收服务器端的响应数据：
* XMLHttpRequest对象的responseText属性：文本(HTML)格式

get方式

<form action="" enctype="application/x-www-form-urlencoded">
          <input type="button" name="ok" id="ok" value="测试服务器连接">
      </form>

test.js

window.onload = function(){
	document.getElementById("ok").onclick = function(){
		//1 创建XMLHttpRequest对象
		var xhr = ajaxFunction();
		
		/*
		 * 2 客户端与服务器端建立连接
		 * 
		 * XMLHttpRequest对象的open()方法
		 * 	* method：请求类型，类似 “GET”或”POST”的字符串。
		 * 	* url：请求路径，可以是绝对路径或相对路径。
		 * 	* asynch：表示请求是否要异步传输，默认值为true(异步)。
		 */
		xhr.open("GET","../testServlet?timeStamp="+new Date().getTime()+"&c=9",true);
		
		/*
		 * 3 客户端向服务器端发送请求
		 * 
		 * XMLHttpRequest对象的send()方法
		 * 	* 如果请求类型是GET方式的话，客户端通过send()方法向服务器端发送请求数据，服务器端接收不到
		 * 		* 即使send()方法不能发送请求数据，但是该步骤不能省略。xhr.send(null);
		 */
		xhr.send("a=7&b=8");		//xhr.send(null);
		
		/*
		 * 4 服务器端向客户端进行响应
		 * 
		 * XMLHttpRequest对象的onreadystatechange属性：监听服务器端的通信状态
		 * 
		 * readyState 属性表示Ajax请求的当前状态。它的值用数字代表。
			0 代表未初始化。 还没有调用 open 方法
			1 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用
			2 代表已加载完毕。send 已被调用。请求已经开始
			3 代表交互中。服务器正在发送响应
			4 代表完成。响应发送完毕
		 * 
		 * 常用状态码及其含义：
			404 没找到页面(not found)
			403 禁止访问(forbidden)
			500 内部服务器出错(internal service error)
			200 一切正常(ok)
			304 没有被修改(not modified)(服务器返回304状态，表示源文件没有被修改 )
		 */
		xhr.onreadystatechange = function(){
//			alert(xhr.readyState);
//			alert(xhr.status);
			if(xhr.readyState==4){
				if(xhr.status==200||xhr.status==304){
					var data = xhr.responseText;
					
					alert(data);
				}
			}
		}
		
	}
	
	function ajaxFunction(){
	   var xmlHttp;
	   try{ // Firefox,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;
	 }
}

post方式

window.onload = function(){
	document.getElementById("ok").onclick = function(){
		var xhr = ajaxFunction();
		
		xhr.onreadystatechange = function(){
			alert(xhr.readyState);
			if(xhr.readyState==4){
				if(xhr.status==200||304){
					var data = xhr.responseText;
					
					alert(data);
				}
			}
		}
		
		xhr.open("POST","../testServlet?timeStamp="+new Date().getTime(),true);
		
		//如果请求类型是POST方法的话，需要设置请求首部信息
		xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		
		xhr.send("a=7&b=8");
	}
	
	function ajaxFunction(){
	   var xmlHttp;
	   try{ // Firefox,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;
	 }
}