标签：
客户端与服务器，可以在【不必刷新整个浏览器】的情况下，与服务器进行异步通讯的技术，即，AJAX是一个【局部刷新】的【异步】通讯技术；
AJAX不是全新的语言，是2005年Google公司推出的一种全新【编程模式】，不是新的编程语言。
步一：创建AJAX异步对象，例如：createAJAX()
步二：准备发送异步请求，例如：ajax.open(method,url)
步三：如果是POST请求的话，一定要设置AJAX请求头，例如：ajax.setRequestHeader()，如果是GET请求的话，无需设置设置AJAX请求头
步四：真正发送请求体中的数据到服务器，例如：ajax.send()
步五：AJAX不断的监听服务端响应的状态变化，例如：ajax.onreadystatechange，后面写一个无名处理函数
步六：在无名处理函数中，获取AJAX的数据后，按照DOM规则，用JS语言来操作Web页面
事件：
ajax.onreadystatechange：表示AJAX异步对象不断监听服务端的响应，是由服务器程序触发，不是程序员触发
属性：
ajax.readyState==0：表示AJAX异步对象已创建好，但还没有调用open()方法
ajax.readyState==1：表示AJAX异步对象已调用open()方法，但还没有调用send()方法
ajax.readyState==2：表示AJAX异步对象已调用send()方法，但请求还没有到达服务器端
ajax.readyState==3：表示服务端已接收到AJAX异步对象的请求，正在处理响应中。。。
ajax.readyState==【4】：表示AJAX异步对象已经完完全全接收到了服务器的响应信息，但接收到的数据不一定都正确
上述5种状态不是所有浏览器都相同，但状态4每种浏览器都相同
ajax.status==200：表示AJAX异步对象接收到响应码，如果是200的话，表示一切正常
ajax.responseText：表示从AJAX异步对象中获取HTML载体中的数据
ajax.responseXML：表示从AJAX异步对象中获取XML载体中的数据
方法：
ajax.open(method,url,可选的boolean值)
AJAX异步对象准备发送异步请求
参数一：以什么方式发送，常用的用GET或POST，大小写不敏感
参数二：发送到什么地方去，常用Servlet或Struts2或SpringMVC来接收，
参数三：默认值为true，表示AJAX对象以【异步】的方式提交到服务端
如果设置为false，表示AJAX对象以【同步】的方式提交到服务端
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded")
表示将请求体中的内容，按照UTF-8的方式进行编码，只针对POST请求有效
ajax.send(content)
AJAX异步对象真正发送异步请求
参数一：表示HTTP【请求体】中的内容
如果是GET方式：content = null，如果强行传值到服务器，服务端收不到，返回NULL
如果是POST方式：content != null，例如：username=jack&password=123&role=admin
AJAX【适合】不用来传递大量数据，而只用来【传递少量数据】，在用户的【体验】上，【更加人性化】。
AJAX是一个和服务器无关的技术，即服务器可使用：JavaEE，.NET，PHP……这些技术都可。
AJAX只管向服务器发送请求，同时只管接收服务器的HTML或XML或JSON载体响应。
服务端不能使用转发或重定向到web页面，因为这样会起浏览器全面刷新，即只能以流的方式响应给浏览器。
function createAJAX(){ var ajax=null; try{ ajax = new ActiveXObject("microsoft.xmlhttp"); } catch (e){ ajax = new XMLHttpRequest(); } return ajax; }
function checkEmpUsePost(emp){ var empName = emp.value; var ajax = createAJAX(); var method = "POST"; var url = "${pageContext.request.contextPath}/emp_checkEmp?time="+new Date().getTime(); ajax.open(method,url); ajax.setRequestHeader("content-type","application/x-www-form-urlencoded"); var content = "empName="+empName; ajax.send(content); ajax.onreadystatechange = function(){ if(ajax.readyState == 4) { if(ajax.status == 200) { var str = ajax.responseText; var span = document.getElementById("resID"); var img = document.createElement("img"); // 设置src属性值 img.src = str; img.style.width="12px"; img.style.height="12px"; //清空span标签的内容 span.innerHTML=""; span.appendChild(img); } } } }
Action中的方法：（Action中要有相应属性的参数set和get方法）
public String checkEmp() throws IOException { Object empName = request.get("empName"); List<Employee> emps = employeeService.getAll((String) empName); HttpServletResponse response = ServletActionContext.getResponse(); PrintWriter writer = response.getWriter(); if(emps != null && emps.size()>0) { writer.write("images/MsgSent.gif"); } else { writer.write("images/MsgError.gif"); } writer.flush(); writer.close(); return "checkEmp"; }
function getCity(proEle){ var index = proEle.selectedIndex; var province = proEle[index].innerHTML; if("选择省份" != province) { var ajax = createAJAX(); var method = "POST"; var url = "${pageContext.request.contextPath}/ajax_getCity?time="+new Date().getTime(); //var content = "province="+province; ajax.open(method,url); ajax.setRequestHeader("content-type","application/x-www-form-urlencoded"); //ajax.send(content); //var method = "POST"; //var url = "${pageContext.request.contextPath}/getCity?time="+new Date().getTime(); //ajax.open(method,url); //ajax.setRequestHeader("content-type","application/x-www-form-urlencoded"); var content = "province="+province; ajax.send(content); ajax.onreadystatechange = function(){ if(ajax.readyState == 4){ if(ajax.status == 200) { //从ajax异步对象获取服务器响应的xml文档 var xmlDocument = ajax.responseXML; // 解析xml文档 var citySel = document.getElementById("cityID"); var cityEleArray = xmlDocument.getElementsByTagName("city"); citySel.options.length=1; for(var i=0;i<cityEleArray.length;i++){ //获取xml节点的内容 var city = cityEleArray[i].firstChild.nodeValue; var cityEle = document.createElement("option"); cityEle.innerHTML = city; citySel.appendChild(cityEle); } } } } } }
Action中的方法：
public String getCity() throws IOException { Object province = request.get("province"); HttpServletResponse response = ServletActionContext.getResponse(); response.setContentType("text/xml;charset=UTF-8"); PrintWriter writer = response.getWriter(); writer.write("<?xml version=‘1.0‘ encoding=‘UTF-8‘?>"); writer.write("<root>"); if("广东".equals(province)) { writer.write("<city>广州</city>"); writer.write("<city>深圳</city>"); } else if("山东".equals(province)) { writer.write("<city>济南</city>"); writer.write("<city>枣庄</city>"); writer.write("<city>青岛</city>"); } writer.write("</root>"); writer.flush(); writer.close(); return "getCity"; }
标签：
原文地址：http://www.cnblogs.com/juaner767/p/5615346.html
