文章来源：
JS原生Ajax和jQuery的Ajax与代码示例 -- 苏凯勇往直前
JS原生的Ajax其实就是围绕浏览器内内置的Ajax引擎对象进行学习的，要使用js原生的Ajax完成异步操作，有如下几个步骤：
1)创建Ajax引擎对象
2)为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）
3)绑定提交地址
4)发送请求
5)接受响应数据
<body>
<input type="button" value="异步请求服务器" onclick="fn1()">
<span id="span1"></span>
</body>
function fn1() {
//发送异步请求
//1.创建ajax引擎对象----所有操作都是由ajax引擎完成
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.为引擎对象绑定监听事件
xmlHttp.onreadystatechange = function() {
//当状态变化时处理的事情
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
//5.接收响应信息
var data = xmlHttp.responseText;
//alert(data);
document.getElementById("span1").innerHTML=data;
}
}
//3.绑定服务器地址
//第一个参数：请求方式GET/POST
//第二个参数：后台服务器地址
//第三个参数：是否是异步 true--异步 false--同步
xmlHttp.open("GET" , "${pageContext.request.contextPath}/ajaxServlet?username=zhangsan" , true);
//4.发送请求
xmlHttp.send();
}
注意：接收响应信息应该在监听事件中完成，并且只有当readyState为4（即请求已处理完毕，响应已准备就绪），并且status为200（正常响应）时，方可处理响应信息。
注意：在JS原生Ajax中，也可以指定 如果是post提交
在发送请求之前设置一个头
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
function fn1() {
//发送异步请求
//1.创建ajax引擎对象----所有操作都是由ajax引擎完成
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.为引擎对象绑定监听事件
xmlHttp.onreadystatechange = function() {
//当状态变化时处理的事情
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
//5.接收响应信息
var data = xmlHttp.responseText;
//alert(data);
document.getElementById("span1").innerHTML=data;
}
}
//3.绑定服务器地址
//第一个参数：请求方式GET/POST
//第二个参数：后台服务器地址
//第三个参数：是否是异步 true--异步 false--同步
xmlHttp.open("POST" , "${pageContext.request.contextPath}/ajaxServlet" , true);
//设置Content-type
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//4.发送请求
xmlHttp.send("username=zhangsan" );
}
网友评论