前端之家收集整理的这篇文章主要介绍了
基础ajax应用,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
function createXMLHttpRequest(){
var xhr = null;
try{
xhr = new XMLHttpRequest();
}catch(e){
var MSXML =
['abc','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
//IE7.0以下的 浏览器以ActiveX组件的方式来创建
for ( var i = 0; i < MSXML.length; i++) {
try {
xhr = new ActiveXObject(MSXML[i]);
break;
} catch(ex){
}
}
}
return xhr;
}
function ajaxGet(){
//1.创建XMLHttpRequest对象
var xhr = createXMLHttpRequest();
//2.创建一个新的http请求,但是没有发送该请求,并指定此请求的方法和url
/**
* 参数一:http方法例如POST、GET、PUT及DELETE
* 参数二:请求的URL地址,可以为绝对地址也可以为相对地址,但是必须是本域路径
* 参数三:指定此请求是否为异步方式,默认为true.一般都为true
*/
xhr.open("GET","/AjaxServlet?username=admin&__task="+new Date().getTime(),true);
//指定当readyState属性改变时的事件处理函数
/**
* 0 (未初始化) 对象已建立,但是尚未初始化(尚未调用open方法)
1 (初始化) 对象已建立,已经调用open方法,尚未调用send方法
2 (发送数据) send方法已调用,但是当前的状态及http头未知
3 (数据传送中) 已接收部分数据,因为响应及http头不全,这时通过responseText获取部分数据会出现错误
4 (完成) 数据接收完毕,此时可以通过通过responseText获取完整的回应数据
*/
xhr.onreadystatechange = function(){
//数据接收完毕
if(xhr.readyState==4 && (xhr.status==200||xhr.status==304)){
var result = xhr.responseText;
document.getElementById("msg").innerHTML = result;
}
};
//3.发送请求到http服务器并接收回应
/**
* 参数一:只对post有效
*/
xhr.send(null);
}
function ajaxPost(){
//创建ajax对象
var xhr = createXMLHttpRequest();
//创建http请求
xhr.open("POST","/AjaxServlet"/*,true*/);
//如果用 POST 请求向服务器发送数据,需要将 “Content-type” 的首部设置为 “application/x-www-form-urlencoded”.它会告知服务器正在发送数据,并且数据已经符合URL编码了。
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
var result = xhr.responseText;
if(result=="true"){
location.href="index.html";
}else{
alert("登录失败");
}
}
};
//参数格式为url方式 http://localhost/AjaxServlet?userName=admin&password=123456
xhr.send("userName=adminx&password=123456");
}