如何用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 相关文章推荐
&amp;lt;script defer&amp;gt; defer 是什么意思
May 10 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
Apr 20 Javascript
基于jquery的表格排序
Sep 11 Javascript
Jquery跨域获得Json时invalid label错误的解决办法
Jan 11 Javascript
nullJavascript中创建对象的五种方法实例
May 07 Javascript
判断日期是否能跨月查询的js代码
Jul 25 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
Aug 21 Javascript
jQuery实现点击查看大图并以弹框的形式居中
Aug 08 Javascript
分分钟玩转Vue.js组件
Oct 25 Javascript
小程序hover-class点击态效果实现
Feb 26 Javascript
javascript操作元素的常见方法小结
Nov 13 Javascript
vue点击按钮实现简单页面的切换
Sep 08 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 特殊字符处理函数
2008/09/05 PHP
php adodb分页实现代码
2009/03/19 PHP
腾讯QQ php程序员面试题目整理
2010/06/08 PHP
Zend Framework教程之配置文件application.ini解析
2016/03/10 PHP
php构造方法中析构方法在继承中的表现
2016/04/12 PHP
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
基于php流程控制语句和循环控制语句(讲解)
2017/10/23 PHP
php无限级评论嵌套实现代码
2018/04/18 PHP
基于PHP+Jquery制作的可编辑的表格的代码
2011/04/10 Javascript
图片在浏览器中底部对齐 解决方法之一
2011/11/30 Javascript
js模拟hashtable的简单实例
2014/03/06 Javascript
给js文件传参数(详解)
2014/07/13 Javascript
JavaScript设计模式之单件模式介绍
2014/12/28 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
js判断空对象的实例(超简单)
2016/07/26 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
2016/12/16 Javascript
Angular4学习之Angular CLI的安装与使用教程
2018/01/04 Javascript
10个经典的网页鼠标特效代码
2018/01/09 Javascript
vue.js内置组件之keep-alive组件使用
2018/07/10 Javascript
理解JavaScript中的Proxy 与 Reflection API
2020/09/21 Javascript
vantUI 获得piker选中值的自定义ID操作
2020/11/04 Javascript
[44:50]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 TNC vs VG
2018/04/02 DOTA
Python编程把二叉树打印成多行代码
2018/01/04 Python
解决已经安装requests,却依然提示No module named requests问题
2018/05/18 Python
利用Python将文本中的中英文分离方法
2018/10/31 Python
详解pandas库pd.read_excel操作读取excel文件参数整理与实例
2019/02/17 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
巴西宠物店在线:Geração Pet
2017/05/31 全球购物
阿迪达斯德国官方网站:adidas德国
2017/07/12 全球购物
意大利网上书店:LaFeltrinelli
2020/06/12 全球购物
写好自荐信的技巧
2013/11/08 职场文书
共产党员岗位承诺书
2014/05/29 职场文书
普通党员自我剖析材料
2014/10/07 职场文书
加强作风建设心得体会
2014/10/22 职场文书
幼儿园小班家长评语
2014/12/30 职场文书
观后感的写法
2015/06/19 职场文书