如何用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 相关文章推荐
有关js的变量作用域和this指针的讨论
Dec 16 Javascript
Jquery异步请求数据实例代码
Dec 28 Javascript
关于JavaScript中原型继承中的一点思考
Jul 25 Javascript
js数组操作学习总结
Nov 04 Javascript
分享网页检测摇一摇实例代码
Jan 14 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
Oct 13 Javascript
微信小程序  Mustache语法详细介绍
Oct 27 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
Dec 14 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
Angular 作用域scope的具体使用
Dec 11 Javascript
js 图片转base64的方式(两种)
Apr 24 Javascript
一行JavaScript代码如何实现瀑布流布局
Dec 11 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利用header函数下载各种文件
2016/08/24 PHP
Javascript 中的类和闭包
2010/01/08 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
2012/08/09 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
2014/11/06 Javascript
JavaScript实现简单图片翻转的方法
2015/04/17 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
2015/11/21 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
2015/12/24 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
2016/06/12 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
几行js代码实现自适应
2017/02/24 Javascript
Node.js和Express简单入门介绍
2017/03/24 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
2018/04/23 Javascript
nodejs express配置自签名https服务器的方法
2018/05/22 NodeJs
JS实现前端页面的搜索功能
2018/06/12 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
2018/10/08 Javascript
javascript实现小型区块链功能
2019/04/03 Javascript
微信小程序实现日期格式化和倒计时
2020/11/01 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
2019/09/10 Javascript
微信jssdk踩坑之签名错误invalid signature
2020/05/19 Javascript
Python二叉树定义与遍历方法实例分析
2018/05/25 Python
基于随机梯度下降的矩阵分解推荐算法(python)
2018/08/31 Python
实例讲解python中的协程
2018/10/08 Python
使用PyCharm创建Django项目及基本配置详解
2018/10/24 Python
Python如何调用外部系统命令
2019/08/07 Python
Python用Jira库来操作Jira
2020/12/28 Python
Waterford美国官网:爱尔兰水晶制品品牌
2017/04/26 全球购物
项目采购员岗位职责
2014/04/15 职场文书
2014年计生协会工作总结
2014/11/21 职场文书
材料采购员岗位职责
2015/04/03 职场文书
2015年领班工作总结
2015/04/29 职场文书
2019年大学生暑期社会实践调查报告模板
2019/11/07 职场文书
OpenCV-Python 实现两张图片自动拼接成全景图
2021/06/11 Python
Java中的继承、多态以及封装
2022/04/11 Java/Android
Mysql数据库事务的脏读幻读及不可重复读详解
2022/05/30 MySQL
Python使用Opencv打开笔记本电脑摄像头报错解问题及解决
2022/06/21 Python