ajax原理和数据格式

前端之家收集整理的这篇文章主要介绍了ajax原理和数据格式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

异步请求技术的实现除了jquery ajax,还有flash,applet,iframe等。
但ajax对流媒体的支持没有flash,applet要好。另外ajax对手持设备的支持不是很好。

ajax的工作原理

ajax的核心是XmlHttpRequest。
1.创建XmlHttpRequest核心对象。
var xhr=new XmlHttpRequet()
2.注册回调函数,监听服务器的状态
 xhr.onreadystatechange=function{
	if(xhr.readyState==4){
		if(xhr.status==200||xhr.state.status==304){
			 //开始处理信息
			 xhr.responseText()
		}
	}
 }	

当服务器的readyState值为4时,说明已经请求已经结束了,服务器可以进行响应了。

3.客户端与服务端建立连接

xhr.open(method,url,async)

method:get或post方式
url:请求的路径
async:是否异步(默认true)

4.设置请求头(post请求才需要设置)

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
5.客户端向服务器发送请求
xhr.send(data)
如果是get请求,则不会向服务器发送任何数据。需要手动设置:

xhr.send(null)   

服务器响应的数据格式

可以是文本格式,xml或者json。文本格式用的较少,通常是xml或json格式。
1.文本格式
XMLHttpRequest对象的responseText属性

2.XML格式
如果响应数据格式为XML的话,需设置响应的首部信息:"Content-Type"为"text/xml"。
注意:如果不设置首部信息,客户端接收并不会报错,但是接收值为空。
3.json格式
json被存储在responseText属性
可以使用XMLHttpRequest对象的responseText属性

json格式分为类map格式和类数组格式。

其他格式转为XML和JSON格式

将List,Array,Map格式转化为XML格式:XStream
将List,Array,Map格式转化为JSON格式:Json-lib
JSONUtils.java
import java.util.List;
import java.util.Map;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import net.sf.json.JsonConfig;
import net.sf.json.util.CycleDetectionStrategy;
import net.sf.json.xml.XMLSerializer;

/**
 * 处理json数据格式的工具类
 * 
 * @author lp
 * @version 1.0
 */
public class JsonUtil {
	/**
	 * 将数组转换成String类型的JSON数据格式
	 * 
	 * @param objects
	 * @return
	 */
	public static String array2json(Object[] objects){
		
		JSONArray jsonArray = JSONArray.fromObject(objects);
		return jsonArray.toString();
		
	}
	
	/**
	 * 将list集合转换成String类型的JSON数据格式
	 * 
	 * @param list
	 * @return
	 */
	public static String list2json(List list){
		
		JSONArray jsonArray = JSONArray.fromObject(list);
		return jsonArray.toString();
		
	}
	
	/**
	 * 将map集合转换成String类型的JSON数据格式
	 * 
	 * @param map
	 * @return
	 */
	public static String map2json(Map map){
		
		JSONObject jsonObject = JSONObject.fromObject(map);
		return jsonObject.toString();
		
	}
	
	/**
	 * 将Object对象转换成String类型的JSON数据格式
	 * 
	 * @param object
	 * @return
	 */
	public static String object2json(Object object){
		
		JSONObject jsonObject = JSONObject.fromObject(object);
		return jsonObject.toString();
		
	}
	
	/**
	 * 将XML数据格式转换成String类型的JSON数据格式
	 * 
	 * @param xml
	 * @return
	 */
	public static String xml2json(String xml){
		
		JSONArray jsonArray = (JSONArray) new XMLSerializer().read(xml);
		return jsonArray.toString();
		
	}
	
	/**
	  * 除去不想生成的字段(特别适合去掉级联的对象)
	  *
	  * @param excludes
	  * @return
	*/
	public static JsonConfig configJson(String[] excludes) {
		JsonConfig jsonConfig = new JsonConfig();
		jsonConfig.setExcludes(excludes);
		jsonConfig.setIgnoreDefaultExcludes(true);
		jsonConfig.setCycleDetectionStrategy(CycleDetectionStrategy.LENIENT);
		return jsonConfig;
	}
	
}

eval()函数

eval():将js对象转化为json对象



xhr.onreadystatechange = function(){
	if(xhr.readyState==4){
		if(xhr.status==200){
			var data = xhr.responseText;					
			/*
			 * eval()函数:JSON格式的转换
			 * 如果向eval()函数,传递一对空的大括号"{}"
			 * 	* 利用"()"将其包装,eval()函数会强行将其转换成JSON数据格式
			 * 	* 不用"()"将其包装,eval()函数会将其解析为一个空的语句块
			 */
			var json = eval("("+data+")");
			
			alert(data);
		}
	}
}
IE将XmlHttpRequest实现为一个Active对象 其他浏览器则实现为本地的js对象

猜你在找的Ajax相关文章