ajax

ajax
Asynchronize Javascript And Xml
特点：局部刷新
用在：
1.实时时间获取
2.验证码客户端
3.级联
4.搜索提示
5.注册时用户名检测
三个步骤(js)
1，创建核心对象XMLHttpRequest (在IE中 new ActiveXObject("Microsoft.XMLHttp"),火狐中new XMLHttpRequest())
2，创建请求 XMLHttp.open(param1 , param2); 第一个参数是get/post 第二个参数是“去哪里”，设置回调函数
XMLHttp.onreadystatechange= 回调函数 ，发送请求XMLHttp.send(null)
3，创建回调函数，其中要判断是否请求已经发送并接收，readyState == 4 ,请求没有错误 status == 200
Ajax 接收的参数URL中的IE和火狐兼容问题：
1，在页面用EncodeURL(param); EP:xmlhttp.open("post","${pageContext.request.contextPath}/emp.do?method=checkUser&username="+encodeURI(name));
2，在后台的action类中：String name = new String(requesst.getparameter("username").getBytes("iso-8859-1"),"utf-8");
· Ajax需要接收List集合或者数组的时候，要拼JSON，在页面要用eval（）来计算成json
·如果要Ajax中得到后台的传过来的值，那么就要转变为字符串，response.getWrite().print(...);
在页面中可以用xmlhttp.responseText；来接收，用eval()来转换ajax
   Asynchronize Javascript And Xml
   特点：局部刷新
   用在：
        1.实时时间获取
2.验证码客户端
3.级联
4.搜索提示
5.注册时用户名检测
   三个步骤(js)
      1，创建核心对象XMLHttpRequest (在IE中 new ActiveXObject("Microsoft.XMLHttp"),火狐中new XMLHttpRequest())
      2，创建请求 XMLHttp.open(param1 , param2); 第一个参数是get/post 第二个参数是“去哪里”，设置回调函数
      XMLHttp.onreadystatechange= 回调函数 ，发送请求XMLHttp.send(null)
      3，创建回调函数，其中要判断是否请求已经发送并接收，readyState == 4 ,请求没有错误 status == 200
   
   Ajax 接收的参数URL中的IE和火狐兼容问题：
      1，在页面用EncodeURL(param);  EP:xmlhttp.open("post","${pageContext.request.contextPath}/emp.do?method=checkUser&username="+encodeURI(name));
      2，在后台的action类中：String name = new String(requesst.getparameter("username").getBytes("iso-8859-1"),"utf-8");
  · Ajax需要接收List集合或者数组的时候，要拼JSON，在页面要用eval（）来计算成json
  ·如果要Ajax中得到后台的传过来的值，那么就要转变为字符串，response.getWrite().print(...);
在页面中可以用xmlhttp.responseText；来接收，用eval()来转换

一个级联操作的例子：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
部门：<select id="dep" οnchange="changeEmp(this.value)">
			<option value="0">-请选择-</option>
			<c:forEach items="${deplist}" var="dep">
			<option value="${dep.depid }">${dep.depname}</option>
			</c:forEach>
	</select>
员工：<select id="emp">
		<option value="0">-请选择-</option>
	</select>
<div id="hh"></div>


<script>
	var xmlhttp;
	function createXMLHttp()
	{
		try
		{
			xmlhttp = new XMLHttpRequest();
		}catch(e)
		{
			xmlhttp = new ActiveXObject("Microsoft.XMLHttp");
		}
	}
	
	function changeEmp(depid)
	{
		createXMLHttp();
		xmlhttp.open("post","${pageContext.request.contextPath}/emp.do?method=getEmps&depid="+depid);
		xmlhttp.onreadystatechange = changeEmpCallback;//这里不需要加括号
		xmlhttp.send(null);
	}
	
	function changeEmpCallback()
	{
		if(xmlhttp.readyState == 4)
		{
			if(xmlhttp.status == 200)
			{
				var jsons = eval(xmlhttp.responseText); //这里要计算json,使得成为一个json
				var slt = document.getElementById("emp");
				slt.length = 0;
				//在DIV中显示
				var d = document.getElementById("hh");
				var str = "";
				for(var i = 0; i < jsons.length; i++)
				{
					str = str + "<li>"+jsons[i].name+"</li>";
					slt.options[i] = new Option(jsons[i].name,jsons[i].id);
				}
				d.innerHTML = str;
			}	
		}
	}
</script>