如何用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 相关文章推荐
filemanage功能中用到的common.js
Apr 08 Javascript
js控制div及网页相关属性的代码
Dec 19 Javascript
extjs之去除s.gif的影响
Dec 25 Javascript
jquery 获取自定义属性(attr和prop)的实现代码
Jun 27 Javascript
jquery实现对联广告的方法
Feb 05 Javascript
jquery插件jSignature实现手动签名
May 04 Javascript
vue watch深度监听对象实现数据联动效果
Aug 16 Javascript
解决Angular2 router.navigate刷新页面的问题
Aug 31 Javascript
在vue中多次调用同一个定义全局变量的实例
Sep 25 Javascript
Vue批量图片显示时遇到的路径被解析问题
Mar 28 Javascript
layui layer select 选择被遮挡的解决方法
Sep 21 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
Nov 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
论建造顺序的重要性
2020/03/04 星际争霸
zend framework配置操作数据库实例分析
2012/12/06 PHP
php引用返回与取消引用的详解
2013/06/08 PHP
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
2010/07/11 Javascript
jquery中实现标签切换效果的代码
2011/03/01 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
2013/08/13 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
2013/08/13 Javascript
jquery获取一个元素下面相同子元素的个数代码
2014/07/31 Javascript
JavaScript将字符串转换为整数的方法
2015/04/14 Javascript
javascript实现表单提交后,提交按钮不可用的方法
2015/04/18 Javascript
JS简单限制textarea内输入字符数量的方法
2015/10/14 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
2016/10/28 Javascript
详解jQuery中的事件
2016/12/14 Javascript
js用类封装pop弹窗组件
2017/10/08 Javascript
详解使用webpack打包编写一个vue-toast插件
2017/11/08 Javascript
微信小程序实现列表下拉刷新上拉加载
2020/07/29 Javascript
vue-router相关基础知识及工作原理
2018/03/16 Javascript
echarts统计x轴区间的数值实例代码详解
2019/07/07 Javascript
VueX模块的具体使用(小白教程)
2020/06/05 Javascript
在Python中关于中文编码问题的处理建议
2015/04/08 Python
python+selenium+autoit实现文件上传功能
2017/08/23 Python
Python机器学习之SVM支持向量机
2017/12/27 Python
python+django+sql学生信息管理后台开发
2018/01/11 Python
浅谈python下tiff图像的读取和保存方法
2018/12/04 Python
python二进制文件的转译详解
2019/07/03 Python
python 求某条线上特定x值或y值的点坐标方法
2019/07/09 Python
django下创建多个app并设置urls方法
2020/08/02 Python
amazeui页面校验功能的实现代码
2020/08/24 HTML / CSS
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
瑞士领先的网上超市:LeShop.ch
2018/11/14 全球购物
酒店工作职员求职简历的自我评价
2013/10/23 职场文书
高一自我鉴定
2013/12/17 职场文书
成功的餐厅经营创业计划书
2014/01/15 职场文书
减负增效提质方案
2014/05/23 职场文书
2014年秋季开学典礼致辞
2014/08/02 职场文书
2015年医院后勤工作总结
2015/05/20 职场文书