如何用ajax来创建一个XMLHttpRequest对象


Posted in Javascript onDecember 10, 2012

我每次创建一个对象,都要这样复杂吗?如下代码:
JScript code:
"testAjax.htm" 文件:

<html> 
<body> 

<script type="text/javascript"> 

function ajaxFunction() 

{ 

var xmlHttp; 

try 

{ 

// Firefox,Opera 8.0+,Safari 

xmlHttp=new XMLHttpRequest(); 

} 

catch (e) 

{ 

// Internet Explorer 

try 

{ 

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); 

} 

catch (e) 

{ 

try 

{ 

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); 

} 

catch (e) 

{ 

alert("您的浏览器不支持AJAX!"); 

return false; 

} 

} 

} 

} 

</script> 

<form name="myForm"> 

用户: <input type="text" name="username" /> 

时间: <input type="text" name="time" /> 

</form></body> 

</html>

首先声明一个保存 XMLHttpRequest 对象的 xmlHttp 变量。
然后使用 XMLHttp=new XMLHttpRequest() 来创建此对象。这条语句针对 Firefox、Opera 以及 Safari 浏览器。假如失败,则尝试针对 Internet Explorer 6.0+ 的 xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”),假如也不成功,则尝试针对 Internet Explorer 5.5+ 的 xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”)。

假如这三种方法都不起作用,那么这个用户所使用的浏览器已经太过时了,他或她会看到一个声明此浏览器不支持 AJAX 的提示。

可以不用这么麻烦,直接可以把这个函数的定义单独保存为一个js文件,在需要使用AJAX的页面中引用这个文件就可以了。
如下面详解的例子:
JScript code:

function CreateHTTPObject() 
{ 
var xmlhttp; 
try 
{ 
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); 
} 
catch (e) 
{ 
try 
{ 
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
} 
catch (e) 
{ 
xmlhttp = false; 
} 
} 
if (!xmlhttp && typeof XMLHttpRequest!='undefined') 
{ 
try 
{ 
xmlhttp = new XMLHttpRequest(); 
} 
catch (e) 
{ 
xmlhttp=false; 
} 
} 
if (!xmlhttp && window.createRequest) 
{ 
try 
{ 
xmlhttp = window.createRequest(); 
} 
catch (e) 
{ 
xmlhttp=false; 
} 
} 
return xmlhttp;

}定义上面的函数,调用时创建实例即可,如下:
JScript code:
var xmlHttp = CreateHTTPObject(); 
if (!xmlHttp) 
{ 
return; //无法创建 xmlhttp 对象 
} 
xmlHttp.open("GET", url, true); 
xmlHttp.onreadystatechange = function(){HandleRequest(xmlHttp, "元素ID")}; 
xmlHttp.send(null);

也可以直接用jquery ,一句话搞定,如下代码:
$(document).ready(function(){ 
$("#userpass").blur(function(){ 
var password=$("#userpass").val(); 
var name=$("#username").val(); 
if(password==""||password==null){ 
$("#pass").html("<font color='red'>请输入密码! </font>"); 
b=false; 
}else if(!/^[a-zA-Z0-9_]{6,16}$/.test(password)){ 
$("#pass").html("<font color='red'>输入格式不正确!密码应至少6为数字或字符 </font>"); 
b=false; 
}else{ 
$.get("LoginAjaxPassword",{"userpass":encodeURI(encodeURI(password)),"username":encodeURI(encodeURI(name))},function(response){ 
$("#pass").html(response); 
if(response=="<font color='green' size='2' >"+"√"+"</font>"){ 
b=true; 
} 
}); 
} 
return b; 
}); 
$("#login-submit").click(function(){ 
var autologin=document.getElementById("autologin").checked; 
if(a&&b){ 
//if($("#autologin").attr("checked")==true){ 
if(autologin==true){ 
//${"#login-user-form"}.attr("action","AutoLogin"); 
//$("#login-user-form").submit(); 
document.form.action="AutoLogin"; 
document.form.submit(); 
}else{ 
//${"#login-user-form"}.attr("action","Login"); 
//$("#login-user-form").submit(); 
document.form.action="Login"; 
document.form.submit(); 
} 
} else{} 
}); 
}); 
</script>
Javascript 相关文章推荐
JQuery之focus函数使用介绍
Aug 20 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
Apr 02 Javascript
javascript实现10个球随机运动、碰撞实例详解
Jul 08 Javascript
jQuery事件处理的特征(事件命名机制)
Aug 23 Javascript
Seajs是什么及sea.js 由来,特点以及优势
Oct 13 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
Jan 06 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
May 12 Javascript
vue基础之v-bind属性、class和style用法分析
Mar 11 Javascript
Vue中全局变量的定义和使用
Jun 05 Javascript
微信小程序组件传值图示过程详解
Jul 31 Javascript
Vuex实现数据增加和删除功能
Nov 11 Javascript
JavaScript canvas绘制渐变颜色的矩形
Feb 18 Javascript
iframe 上下滚动条如何默认在下方实现原理
Dec 10 #Javascript
Ajax执行顺序流程及回调问题分析
Dec 10 #Javascript
js切换div css注意的细节
Dec 10 #Javascript
不同的jQuery API来处理不同的浏览器事件
Dec 09 #Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
Dec 09 #Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
Dec 09 #Javascript
定义JavaScript二维数组采用定义数组的数组来实现
Dec 09 #Javascript
You might like
PHP如何通过传引用的思想实现无限分类(代码简单)
2015/10/13 PHP
PHP简单检测网址是否能够正常打开的方法
2016/09/04 PHP
PHP 以POST方式提交XML、获取XML,解析XML详解及实例
2016/10/26 PHP
掌握PHP垃圾回收机制详解
2019/03/13 PHP
php use和include区别总结
2019/10/13 PHP
javascript函数中的arguments参数
2010/08/01 Javascript
javascript 设为首页与加入收藏兼容多浏览器代码
2011/01/11 Javascript
jquery实现的Accordion折叠面板效果代码
2015/09/02 Javascript
js判断移动端是否安装某款app的多种方法
2015/12/18 Javascript
js 实现一些跨浏览器的事件方法详解及实例
2016/10/27 Javascript
微信小程序tabBar用法实例详解
2017/12/04 Javascript
微信小程序实现YDUI的ScrollTab组件
2018/02/02 Javascript
vue iView 上传组件之手动上传功能
2018/03/16 Javascript
解决vue项目打包后提示图片文件路径错误的问题
2018/07/04 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
js字符串倒序的实例代码
2018/11/30 Javascript
使用js在layui中实现上传图片压缩
2019/06/18 Javascript
微信小程序swiper实现文字纵向轮播提示效果
2020/01/21 Javascript
[53:52]OG vs EG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
跟老齐学Python之让人欢喜让人忧的迭代
2014/10/02 Python
Django 生成登陆验证码代码分享
2017/12/12 Python
Python实现PS图像抽象画风效果的方法
2018/01/23 Python
Python实现接受任意个数参数的函数方法
2018/04/21 Python
Django-Rest-Framework 权限管理源码浅析(小结)
2018/11/12 Python
python使用装饰器作日志处理的方法
2019/07/11 Python
python过滤中英文标点符号的实例代码
2019/07/15 Python
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
祖国在我心中演讲稿
2014/01/15 职场文书
九年级科学教学反思
2014/01/29 职场文书
拓展训练激励口号
2014/06/17 职场文书
历史学专业求职信
2014/06/19 职场文书
人事专员岗位说明书
2014/07/29 职场文书
财务工作疏忽检讨书
2014/09/11 职场文书
2014党的群众路线教育实践活动总结材料
2014/10/31 职场文书
高二数学教学反思
2016/02/18 职场文书
六年级作文之自救
2019/12/19 职场文书