Ajax实现原理

??? AJAX是"Asynchronous([e??s??kr?n?s])JavaScript and XML",即异步JavaScript和XML,是一种创建交互式网页应用的网页开发技术。

Ajax 的工作

? Ajax直觉认识：我们发送一个请求，但是这个请求比较特殊它是异步的，也就是说客户端是不会感觉到的。在发送这个请求的时候我们绑定了一个事件，这个事件会监控我们发送请求的状态，并且每次状态改变都会触发，所以我们就可以根据不同的状态让他执行不同的操作。请求到达服务器端后，服务器端根据相应的请求返回对应的信息，这个返回信息我们可以取得并且是异步得到，不会引起客户端刷新。既然在上面已经绑定了监控状态变化的事件，我们就可以在那里首先做好在得到返回信息后要做的处理（当然如果失败也会有相应的状态，我们也会做出相应的处理），通过javascript在客户端操作返回的数据。

Ajax 核心—XMLHttpRequest

? 上面我们大概感受了一下Ajax的过程，我们发现发送异步请求才是核心，事实上它就是XMLHttpRequest，整个Ajax之所以能完成异步请求完全是因为这个对应可以发送异步请求的缘故。而且我们又发现上面那个事件就是整个处理过程的核心，可以根据不同状态执行不同操作，其实它就是XMLHttpRequest的方法onreadystatechange，它在每次状态发生改变时都会触发。那么是谁取得的返回信息呢？它就是XMLHttpRequest的另一个方法responseText（当然还有responseXML）。我们还没有说发送给谁以及执行发送操作，这两个就是XMLHttpRequest的open和send方法。其他的当然还有了，我们直接列出来吧：

在具体应用中，明确了readyState的五个状态（XMLHttpRequest对象的生命周期各个阶段）的含义，就可以消除对Ajax核心的神秘感 ，迅速把握其实质，对减少学习中的挫折感和增强自信心都极其有益。

属性status的含义:

0**：未被始化 1**：请求收到，继续处理

2**：操作成功收到，分析、接受

3**：完成此请求必须进一步处理

4**：请求包含一个错误语法或不能完成

5**：服务器执行一个完全有效请求失败

Get和Post的区别

? Get方式:
?? 用get方式可传送简单数据，但大小一般限制在1KB下，数据追加到url中发送（http的header传送），也就是说，浏览器将各个表单字段元素及其数据按照URL参数的格式附加在请求行中的资源路径后面。另外最重要的一点是，它会被客户端的浏览器缓存起来，那么，别人就可以从浏览器的历史记录中，读取到此客户的数据，比如帐号和密码等。因此，在某些情况下，get方法会带来严重的安全性问题。

? Post方式:
???当使用POST方式时，浏览器把各表单字段元素及其数据作为HTTP消息的实体内容发送给Web服务器，而不是作为URL地址的参数进行传递，使用POST方式传递的数据量要比使用GET方式传送的数据量大的多。

? 总之，GET方式传送数据量小，处理效率高，安全性低，会被缓存，而POST反之。

使用Post方式需注意：
1.设置header的Context-Type为application/x-www-form-urlencode确保服务器知道实体中有参数变量.通常使用XmlHttpRequest对象的SetRequestHeader("Context-Type","application/x-www-form-urlencoded;")。例：

xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
2.参数是名/值一一对应的键值对,每对值用&号隔开.如 var name=abc&sex=man&age=18，注意var name=update.php?

abc&sex=man&age=18以及var name=?abc&sex=man&age=18的写法都是错误的;
3.参数在Send(参数)方法中发送,例： xmlHttp.send(name); 如果是get方式，直接 xmlHttp.send(null);

GET和POST方式乱码解决方案

1如果是POST方式：

var? url=encodeURI(encodeURI("name=高晓&age=23"));

服务器端：String name =URLDecoder.decode(request.getParameter("name"),"UTF-8");

如果参数用send发送则不需要处理? send("name=高晓&age=23");

2如果是GET方式：

? xmlHttp.open("GET",true);

? xmlHttp.send(null);

服务器端

String name? = new String(request.getParameter("name").getBytes("ISO-8859-1"),"UTF-8");

<script type="text/javascript">
		xmlHttpRequest = null;
		//创建XMLHttpRequest对象
		function newXMLHttpRequest()
		{
			if(window.XMLHttpRequest)//除IE浏览器的其他浏览器
			{
				xmlHttpRequest = new XMLHttpRequest();
			}
			else if(window.ActiveXObject)//IE浏览器
			{
				try
				{
					xmlHttpRequest = new ActiveXObject("Msxm12.XMLHTTP");
				}
				catch(e1)
				{
					try{
						xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
					}catch(e2)
					{

					}	
				}	
			}
			return xmlHttpRequest;
		}
		//与服务器通讯
		
		function takeToServer()
		{
			newXMLHttpRequest()
			if(xmlHttpRequest!=null)
			{
				var url = "TestServlet?name=高晓";
				xmlHttpRequest.onreadystatechange = callbackHander;
				xmlHttpRequest.open("POST",true);
				xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
				xmlHttpRequest.send(null);
			}
		}
		function callbackHander()
		{
			if(xmlHttpRequest.readyState == 4)
			{
				if(xmlHttpRequest.status == 200)
				{
					//responseText为String类型
					var responseText = xmlHttpRequest.responseText;
					//把responseText变成对象
					var jsonObject = eval("(" +responseText +")");//eval只接收原始字符串
					for(var i=0;i<jsonObject.length;i++)
					{
						var name = jsonObject[i].name;
					}
				}
			}
		}
	</script>

public void doPost(HttpServletRequest request,HttpServletResponse response)
			throws ServletException,IOException {
		//若list中对象属性有引用类型
		List list = new ArrayList();
		JsonConfig jsonConfig = new JsonConfig();
		jsonConfig.registerJsonValueProcessor(java.util.Date.class,(JsonValueProcessor) (new DateJsonValueProcessor("yyyy-MM-dd")));
		JSONArray jsonArray = JSONArray.fromObject(list,jsonConfig);
		response.getWriter().println(jsonArray.toString());
		//若没有
		List list = new ArrayList();
		JSONArray jsonArray = JSONArray.fromObject(list);
		response.getWriter().println(jsonArray.toString());
	}

package com.jxd.util;

import java.text.SimpleDateFormat;
import java.util.Date;

import net.sf.json.JsonConfig;
import net.sf.json.processors.JsonValueProcessor;

public class DateJsonValueProcessor implements JsonValueProcessor
{
	private String format = "yyyy-MM-dd";

	public DateJsonValueProcessor()
	{
		
	}

	public DateJsonValueProcessor(String format)
	{
		this.format = format;
	}

	public Object processArrayValue(Object value,JsonConfig jsonConfig)
	{
		String[] obj = {};
		if (value instanceof Date[])
		{
			SimpleDateFormat sf = new SimpleDateFormat(format);
			Date[] dates = (Date[]) value;
			obj = new String[dates.length];
			for (int i = 0; i < dates.length; i++) 
			{
				obj[i] = sf.format(dates[i]);
			}
		}
		return obj;
	}

	public Object processObjectValue(String key,Object value,JsonConfig jsonConfig)
	{
		if (value instanceof Date) 
		{
			String str = new SimpleDateFormat(format).format((Date) value);
			return str;
		}
		return value.toString();
	}

	public String getFormat()
	{
		return format;
	}

	public void setFormat(String format)
	{
		this.format = format;
	}
}