如何用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 相关文章推荐
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
Mar 09 Javascript
javascript实现数组中的内容随机输出
Aug 11 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
Aug 17 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
Sep 23 Javascript
Javascript中常用的检测方法小结
Oct 08 Javascript
js实现对table的增加行和删除行的操作方法
Oct 13 Javascript
Ajax跨域实现代码(后台jsp)
Jan 21 Javascript
jQuery ajax动态生成table功能示例
Jun 14 jQuery
JS查找数组中重复元素的方法详解
Jun 14 Javascript
vue 插件的方法代码详解
Jun 06 Javascript
node 解析图片二维码的内容代码实例
Sep 11 Javascript
JavaScript实现答题评分功能页面
Jun 24 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使用curl模拟登录后采集页面的例子
2013/11/04 PHP
php中session与cookie的比较
2015/01/27 PHP
PHPstorm快捷键(分享)
2017/07/17 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
PHP中一个有趣的preg_replace函数详解
2018/08/15 PHP
利用ASP发送和接收XML数据的处理方法与代码
2007/11/13 Javascript
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
为JavaScript类型增加方法的实现代码(增加功能)
2011/12/29 Javascript
js时间日期格式化封装函数
2014/12/02 Javascript
jQuery原型属性和原型方法详解
2015/07/07 Javascript
JS仿JQuery选择器功能
2017/03/08 Javascript
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
基于ionic实现下拉刷新功能
2018/05/10 Javascript
解决vue项目打包后提示图片文件路径错误的问题
2018/07/04 Javascript
小程序开发基础之view视图容器
2018/08/21 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
2019/09/01 Javascript
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
Element Rate 评分的使用方法
2020/07/27 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
2020/07/28 Javascript
Python 爬虫爬取指定博客的所有文章
2016/02/17 Python
python3模块smtplib实现发送邮件功能
2018/05/22 Python
利用python脚本如何简化jar操作命令
2019/02/24 Python
python爬虫爬取微博评论案例详解
2019/03/27 Python
Python实现 PS 图像调整中的亮度调整
2019/06/28 Python
python list转置和前后反转的例子
2019/08/26 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
英国领先的维生素和营养补充剂直接供应商:Healthspan
2019/04/22 全球购物
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
Kipling意大利官网:世界著名的时尚休闲包袋品牌
2019/06/05 全球购物
Fabletics官网:美国运动服饰品牌,由好莱坞女演员凯特·哈德森创立
2019/10/19 全球购物
小学生作文评语
2014/04/18 职场文书
技术岗位竞聘演讲稿
2014/05/16 职场文书
党的群众路线教育实践活动方案
2014/10/31 职场文书
小米11和iphone12哪个值得买?小米11对比iphone12评测
2021/04/21 数码科技
apache基于端口创建虚拟主机的示例
2021/04/22 Servers
Java中API的使用方法详情
2022/04/06 Java/Android