如何用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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(3)
Dec 23 Javascript
javascript中节点的最近的相关节点访问方法
Mar 20 Javascript
javascript打印大全(打印页面设置/打印预览代码)
Mar 29 Javascript
对jQuery的事件绑定的一些思考(补充)
Apr 20 Javascript
js模式化窗口问题![window.dialogArguments]
Oct 30 Javascript
详解angularjs 学习之 scope作用域
Jan 15 Javascript
vue刷新和tab切换实例
Feb 11 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
May 10 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
Jun 19 Javascript
JS用最简单的方法实现四舍五入
Aug 27 Javascript
解决vue-loader加载不上的问题
Oct 21 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
Oct 30 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读取二进制流(C语言结构体struct数据文件)的深入解析
2013/06/13 PHP
php使用GeoIP库实例
2014/06/27 PHP
基于linnux+phantomjs实现生成图片格式的网页快照
2015/04/15 PHP
Symfony2学习笔记之插件格式分析
2016/03/17 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
PHP添加文字水印或图片水印的水印类完整源代码与使用示例
2019/03/18 PHP
extJs 常用到的增,删,改,查操作代码
2009/12/28 Javascript
让IE6支持min-width和max-width的方法
2010/06/25 Javascript
基于jquery可配置循环左右滚动例子
2011/09/09 Javascript
AngularJS Module方法详解
2015/12/08 Javascript
原生JS实现匀速图片轮播动画
2016/10/18 Javascript
基于JavaScript实现的插入排序算法分析
2017/04/14 Javascript
Vue.js仿Metronic高级表格(一)静态设计
2017/04/17 Javascript
JavaScript 中Date对象的格式化代码方法汇总
2017/09/06 Javascript
JavaScript实现求最大公共子串的方法
2018/02/03 Javascript
vue中element组件样式修改无效的解决方法
2018/02/03 Javascript
实现jquery放大镜的两种方法
2018/02/22 jQuery
webpack 开发和生产并行设置的方法
2018/11/08 Javascript
详解vue-cli3多环境打包配置
2019/03/28 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
2019/09/17 Javascript
React+Redux实现简单的待办事项列表ToDoList
2019/09/29 Javascript
如何基于javascript实现贪吃蛇游戏
2020/02/09 Javascript
JavaScript自定义超时API代码实例
2020/04/30 Javascript
python在windows下实现备份程序实例
2014/07/04 Python
纯Python开发的nosql数据库CodernityDB介绍和使用实例
2014/10/23 Python
Python实现1-9数组形成的结果为100的所有运算式的示例
2017/11/03 Python
使用python3+xlrd解析Excel的实例
2018/05/04 Python
Django在admin后台集成TinyMCE富文本编辑器的例子
2019/08/09 Python
python爬虫爬取网页数据并解析数据
2020/09/18 Python
call在Python中改进数列的实例讲解
2020/12/09 Python
捷克时尚网上商店:OTTO
2018/03/15 全球购物
城管执法人员纪律作风整顿思想汇报
2014/09/13 职场文书
政风行风整改方案
2014/10/25 职场文书
2015年度党员自我评价范文
2015/03/03 职场文书
Python 装饰器(decorator)常用的创建方式及解析
2022/04/24 Python
js 实现验证码输入框示例详解
2022/09/23 Javascript