AJAX:XMLHttpRequest说明

前端之家收集整理的这篇文章主要介绍了AJAX:XMLHttpRequest说明前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1.创建XMLHttpRequest对象

function createXmlHttp() {

if (window.XMLHttpRequest) {
//针对FireFox,Mozillar,Opera,Safari,IE7,IE8
xmlhttp = new XMLHttpRequest();
//针对某些特定版本的mozillar浏览器的BUG进行修正
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType("text/xml");
}
} else if (window.ActiveXObject) {
//针对IE6,IE5.5,IE5
//两个可以用于创建XMLHTTPRequest对象的控件名称,保存在一个js的数组中
//排在前面的版本较新
var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for (var i = 0; i < activexName.length; i++) {
try{
//取出一个控件名进行创建,如果创建成功就终止循环
//如果创建失败,回抛出异常,然后可以继续循环,继续尝试创建
xmlhttp = new ActiveXObject(activexName[i]);
break;
} catch(e){
}
}
}

if (!xmlhttp) {
alert("XMLHttpRequest对象创建失败!!");
return;
}
}

2.在函数中处理

function verify() {
var userName = document.getElementById("userName").value;
createXmlHttp();
//以post方式提交请求
xmlhttp.open("POST","AjaxXMLServer",true);
//post方式需要设置请求头
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//设置回调函数
xmlhttp.onreadystatechange=callback;
//post方式发送数据
xmlhttp.send("name="+userName);
}

3.回调函数

//回调函数处理提交回来的xml数据
function callback() {
if(xmlhttp.readyState == 4) {
if(xmlhttp.status == 200) {
//接收xml文档
var domObj = xmlhttp.responseXML;
if(domObj){
var messageNodes = domObj.getElementsByTagName("message");
if(messageNodes.length > 0) {
var textNode = messageNodes[0].firstChild;
var responseMessage = textNode.nodeValue;
var divNode = document.getElementById("result");
divNode.innerHTML=responseMessage;
}else {
alert("XML数据格式错误,原始文本内容为:" + xmlhttp.responseText);
}
} else {
alert("XML数据格式错误,原始文本内容为:" + xmlhttp.responseText);
}
}
}
}

4.后台Servlet

@Override protected void doGet(HttpServletRequest httpServletRequest,HttpServletResponse httpServletResponse) throws ServletException,IOException { //1.取得参数 httpServletResponse.setContentType("text/xml;charset=utf-8"); StringBuilder sb = new StringBuilder(); PrintWriter out = httpServletResponse.getWriter(); String old = httpServletRequest.getParameter("name"); sb.append("<message>"); if(old == null || old.length() == 0) { sb.append("用户名不能为空"); } else { String name = old; if(name.equals("huaguoming")) { sb.append("用户名[") .append(name) .append("]已经存在"); }else { sb.append("用户名[") .append(name) .append("]不存在,可以使用!"); } } sb.append("</message>"); out.println(sb.toString()); }

原文链接:https://www.f2er.com/ajax/166823.html

猜你在找的Ajax相关文章