ajax(全称:Asynchronous JavaScript and XML--非同步JavaScript与XML)
一:页面ajax代码流程(String传输):
1.创建引擎
IE6浏览器创建ajax引擎方式:
if(window.XMLHttpRequest){
xmlreq = new XMLHttpRequest();
} else if(window.ActiveXObject){
xmlreq = new ActiveXObject("Microsoft.XMLHttp");
}
IE8+,FF8+浏览器穿件ajax引擎方式:
var xmlhttp = new XMLHttpRequest();
2.设置请求参数:1,设置传送方式(get,post).2,设置url.3,设置是否异步传送
get:
xmlhttp.open("get","${pageContext.request.contextPath }/login.do?userName="+document.getElementById("userName").value,true);
post:
xmlhttp.open("post","${pageContext.request.contextPath }/login.do",true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
3.设置服务器的回应处理:
1.onreadystatechange:可以监听到服务器的响应状态,以便于客户端浏览器实时监听到交互
2.xmlhttp.readyState:交互状态 1,准备交互.2,开始交互.3,服务器运算中.4,处理结束
3.xmlhttp.status:200,成功.404,资源未找到
4.关羽XMLRequest引擎对象返回值问题:xmlhttp.responseText:普通文本.xmlhttp.responseXML:接收XML
xmlhttp.onreadystatechange = function () {
if(xmlhttp.readyState == 4){
if(xmlhttp.status == 200){
document.getElementById("userNameSpan").innerText = xmlhttp.responseText;
}
}else{
alert("服务器出错...");
}
}
else{
alert("数据处理中");
}
};
4.传送数据:
get:
xmlhttp.send(null);
post:
xmlhttp.send("userName="+document.getElementById("userName").value);
例子:
function aMethod(){
//1.创建Ajax引擎
var xmlhttp = new XMLHttpRequest();
//2.设置请求参数
xmlhttp.open("post","${pageContext.request.contextPath }/login.do",true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//3.设置服务器的回应处理
xmlhttp.onreadystatechange = function () {
if(xmlhttp.readyState == 4){
if(xmlhttp.status == 200){
var msg = xmlhttp.responseText;
document.getElementById("userNameSpan").innerText = msg;
}else{
alert("服务器出错...");
}
}
};
//4.发送数据
xmlhttp.send("userName="+document.getElementById("userName").value);
}
页面中文本域挂失焦点事件:<input type="text" name="userName" onblur="aMethod()" id="userName"/>
后台Action类中传送数据逻辑:
boolean isOk = false;
if("scott".equalsIgnoreCase(userName)){
isOk = true;
}
response.getWriter().print(isOk);
二:xml传送数据:
页面代码:(解析xml格式数据)
<script type="text/javascript">
function aMethod(){
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("post","${pageContext.request.contextPath }/xml.do",true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4){
if(xmlhttp.status == 200){
//如果传回的是xml格式的数据,要使用responseXML进行接收,此时接到的数据为xml对象
var msg = xmlhttp.responseXML;
//取得根元素
var rootElement = msg.documentElement;
//取得子元素方式:元素对象.getElementsByTagName("tagName");
var childElements = rootElement.getElementsByTagName("test");
//取得tbody
var tbody = document.getElementById("tbodyId");
//循环,取得每个元素--元素.getAttribute("");
for(var i=0;i<childElements.length;i++){
var childElement = childElements[i];
var id = childElement.getAttribute("id");
var name = childElement.getAttribute("name");
var age = childElement.getAttribute("age");
var sex = childElement.getAttribute("sex");
var birthday = childElement.getAttribute("birthday");
var tr = document.createElement("tr");
tr.align = "center";
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var td4 = document.createElement("td");
var td5 = document.createElement("td");
td1.innerHTML = id;
td2.innerHTML = name;
td3.innerHTML = age;
td4.innerHTML = sex;
td5.innerHTML = birthday;
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
tr.appendChild(td5);
tbody.appendChild(tr);
}
}
}
};
xmlhttp.send("1=1");
}
</script>
<body onload="aMethod()">
<table border="2" cellspacing="0" bgcolor="blue" width="60%" align="center">
<thead>
<tr align="center">
<td>编号</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>生日</td>
</tr>
</thead>
<tbody id="tbodyId">
</tbody>
</table>
</body>
后台Action类中:
String xmlHeader = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>";
xmlHeader +="<tests>";
for(Test l : list){
String test = "<test id='"+l.getId()+"' name='"+l.getName()+"' age='"+l.getAge()+"' sex='"+l.getSex()+"' birthday='"+l.getBirthday()+"' ></test>";
xmlHeader += test;
}
xmlHeader +="</tests>";
//发送数据:response.setContentType("application/xml;charset=utf-8");--以xml形式发送,设置编码utf-8
response.setContentType("application/xml;charset=utf-8");
response.getWriter().print(xmlHeader);
response.getWriter().flush();