如何用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中常用的55个经典技巧
Aug 12 Javascript
JS图片切换的具体方法(带缩略图版)
Nov 12 Javascript
jquery用offset()方法获得元素的xy坐标
Sep 06 Javascript
javascript实现iframe框架延时加载的方法
Oct 30 Javascript
浅谈jQuery事件绑定原理
Jan 02 Javascript
AngularJS实现表单验证
Jan 28 Javascript
JavaScript入门系列之知识点总结
Mar 24 Javascript
jQuery获取this当前对象子元素对象的方法
Nov 29 Javascript
vue 2.0 购物车小球抛物线的示例代码
Feb 01 Javascript
angular4中引入echarts的方法示例
Jan 29 Javascript
JavaScript DOM常用操作代码汇总
Jul 03 Javascript
javascript使用正则表达式实现注册登入校验
Sep 23 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中OR与|| AND与&amp;&amp;的区别总结
2013/10/26 PHP
PHP判断指定时间段的2个方法
2014/03/14 PHP
PHP实现通过URL提取根域名
2016/03/31 PHP
PHP 多进程与信号中断实现多任务常驻内存管理实例方法
2019/10/04 PHP
读JavaScript DOM编程艺术笔记
2011/11/15 Javascript
Node.js实战 建立简单的Web服务器
2012/03/08 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
网站接入QQ登录的两种方法
2014/07/22 Javascript
JSON取值前判断
2014/12/23 Javascript
js对象基础实例分析
2015/01/13 Javascript
JS实现的Select三级下拉菜单代码
2015/08/20 Javascript
AngularJS基础 ng-csp 指令详解
2016/08/01 Javascript
Javascript农历与公历相互转换的简单实例
2016/10/09 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
jQuery复合事件用法示例
2017/06/10 jQuery
详解小程序缓存插件(mrc)
2018/08/17 Javascript
jQuery子选择器与可见性选择器实例分析
2019/06/28 jQuery
Element ui 下拉多选时新增一个选择所有的选项
2019/08/21 Javascript
JS删除数组指定值常用方法详解
2020/06/04 Javascript
element-ui封装一个Table模板组件的示例
2021/01/04 Javascript
Python建立Map写Excel表实例解析
2018/01/17 Python
程序员写Python时的5个坏习惯,你有几条?
2018/11/26 Python
python障碍式期权定价公式
2019/07/19 Python
python 通过 pybind11 使用Eigen加速代码的步骤
2020/12/07 Python
解决pytorch下出现multi-target not supported at的一种可能原因
2021/02/06 Python
HTML5+CSS3模仿优酷视频截图功能示例
2017/01/05 HTML / CSS
Mavi牛仔裤美国官网:土耳其著名牛仔品牌
2016/09/24 全球购物
现代家居用品及礼品:LBC Modern
2018/06/24 全球购物
捷克购买家具网站:JENA nábytek
2020/03/19 全球购物
出国导师推荐信
2014/01/16 职场文书
安全承诺书范文
2014/03/26 职场文书
《爱如茉莉》教后反思
2014/04/12 职场文书
《乡下孩子》教学反思
2014/04/17 职场文书
介绍信格式样本
2015/05/05 职场文书
Django实现WebSocket在线聊天室功能(channels库)
2021/09/25 Python
Elasticsearch 配置详解
2022/04/19 Java/Android