如何用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 相关文章推荐
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
Jan 22 Javascript
js判断浏览器的比较全的代码
Feb 13 Javascript
json跟xml的对比分析
Jun 10 Javascript
9个javascript语法高亮插件 推荐
Jul 18 Javascript
jquery统计输入文字的个数并对其进行判断
Jan 07 Javascript
js实现网页随机切换背景图片的方法
Nov 01 Javascript
基于Javascript实现倒计时功能
Feb 22 Javascript
javascript作用域链与执行环境详解
Mar 25 Javascript
vue与原生app的对接交互的方法(混合开发)
Nov 28 Javascript
vue里如何主动销毁keep-alive缓存的组件
Mar 21 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
Jul 03 Javascript
微信小程序 行的删除和增加操作实现详解
Sep 29 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 mail 通过Windows的SMTP发送邮件失败的解决方案
2009/05/27 PHP
php中spl_autoload详解
2014/10/17 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
在JS中最常看到切最容易迷惑的语法(转)
2010/10/29 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
2011/08/20 Javascript
javascript学习笔记(十一) 正则表达式介绍
2012/06/20 Javascript
javascript学习笔记(四)function函数部分
2014/09/30 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
Node接收电子邮件的实例代码
2017/07/21 Javascript
深入了解query和params的使用区别
2019/06/24 Javascript
[04:29]2014DOTA2国际邀请赛 主赛事第三日TOPPLAY
2014/07/21 DOTA
Python实现截屏的函数
2015/07/25 Python
Python中函数及默认参数的定义与调用操作实例分析
2017/07/25 Python
Python中的四种交换数值的方法解析
2019/11/18 Python
wxPython窗体拆分布局基础组件
2019/11/19 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
详解django使用include无法跳转的解决方法
2020/03/19 Python
python爬虫中抓取指数的实例讲解
2020/12/01 Python
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
JBL澳大利亚官方商店:扬声器、耳机和音响系统
2018/05/24 全球购物
英国Iceland杂货店:网上食品购物
2020/12/16 全球购物
试解释COMMIT操作和ROLLBACK操作的语义
2014/07/25 面试题
两只小狮子教学反思
2014/02/05 职场文书
英语演讲稿3分钟
2014/04/29 职场文书
亲子阅读的活动方案
2014/08/15 职场文书
幼儿生日活动方案
2014/08/27 职场文书
学习十八大宣传标语
2014/10/09 职场文书
毕业实习指导教师评语
2014/12/31 职场文书
广告业务员岗位职责
2015/02/13 职场文书
2015医德医风个人工作总结
2015/04/02 职场文书
药品销售员2015年终工作总结
2015/10/22 职场文书
初中思品教学反思
2016/02/20 职场文书
详解Node.js如何处理ES6模块
2021/05/15 Javascript
MySQL8.0.18配置多主一从
2021/06/21 MySQL
淡雅古典唯美少女娇媚宁静迷人写真
2022/03/21 杂记
DSP接收机前端设想
2022/04/05 无线电