先来一张图,看一下最简单的Ajax的写法,如下图
详细分析一个通用版的Ajax:
//代码整体流程
<script type="text/javascript">
var xmlHttpRequst;
function verify(){ //用户名校验方法
var success = createXMLHTTPRequest(); //创建XMLHTTPRequst对象进行AJAX的一部数据交换
if(!success){
return;
}
var name = document.getElementById("name").value;
xmlHttpRequst.onreadystatechange = callback; //注册回调函数,callback是一个函数名不需要括号,加上括号的号返回的是值,是错误的
//设置连接信息:第一个参数http的请求方式,支持所有http的请求方式,主要使用get和post,第二个参数表示请求的url地址,get方式请求的参数也在url中,
//第三个参数表示采用异步还是同步方式交互,true表示异步
//xmlHttpRequst.open("GET","OriginalityAjaxAction?username=" + userName,true); //get方式
xmlHttpRequst.open("POST", "OriginalityAjaxAction", true); //post方式
xmlHttpRequst.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //post方式需要设置http请求头
xmlHttpRequst.send("name" + name); //post方式发送数据
//xmlHttpRequst.send(null); //异步方式下,send这句话会立即执行,get方式用,也可以省去null
//回调函数
function callback() {
if (xmlHttpRequest.readyState == 4) { //判断对象的状态是交互完成
if (xmlHttpRequest.status == 200) { //判断http的交互是否成功
var responseText = xmlHttpRequest.responseText; //获取服务器器端返回的数据 out.println(“内容”);
var divNode = document.getElementById("result"); //将数据显示在页面上
divNode.innerHTML = responseText;
} else {
alert("出错了!!!");
}
}
}
//创建XMLHTTPRequest对象来进行AJAX的异步数据交互
function createXMLHTTPRequest() {
if (window.XMLHttpRequest) { //需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码
xmlHttpRequest = new XMLHttpRequest(); //针对FireFox,Mozillar,Opera,Safari,IE7,IE8
if (xmlHttpRequest.overrideMimeType) { //针对某些特定版本的mozillar浏览器的BUG进行修正
xmlHttpRequest.overrideMimeType("text/xml");
}
} else if (window.ActiveXObject) {
var activexName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ]; //针对IE6,IE5.5,IE5
for ( var i = 0; i < activexName.length; i++) {
try {
xmlHttpRequest = new ActiveXObject(activexName[i]);
break;
} catch (e) {
}
}
}
if (!xmlHttpRequest) { //确认XMLHTtpRequest对象是否创建成功
alert("XMLHttpRequest对象创建失败!!");
return false;
} else {
return true;
}
}
</script>