AJAX在网站服务中使用到频率很高，也需要考虑各个浏览器版本的兼容性，本示例中详细介绍简单快捷的处理兼容性问题。

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>AJAX</title>

<style>

.myBtn{

	background:#3498db;

	color:#fff;

	font-size:14px;

	text-align:center;

	width:100px;

	height:36px;

	line-height:34px;

	border:none 0;

	cursor:pointer;

}

</style>

<script>

window.onload = function() {

	var oBtn = document.getElementById('btn');

	oBtn.onclick = function() {

		/*

			1.创建一个ajax对象

				ie6以下new ActiveXObject('Microsoft.XMLHTTP')

		*/

		var xhr = null;

		//第一种处理兼容方式

		/*if (window.XMLHttpRequest) {

			xhr = new XMLHttpRequest();  //Firefox(或其他非IE)

		} else {

			xhr = new ActiveXObject('Microsoft.XMLHTTP');  //IE浏览器

		}*/

		//第二种处理兼容方式

		try {

			xhr = new XMLHttpRequest();

		} catch (e) {

			xhr = new ActiveXObject('Microsoft.XMLHTTP');

		}

		/*

			open方法

			参数

				1.打开方式

				2.地址

				3.是否异步

					异步:非阻塞 前面的代码不会影响后面代码的执行

					同步:阻塞 前面的代码会影响后面代码的执行

		*/

		xhr.open('get','links/1.txt',true);

		//提交 发送请求

		xhr.send();

		//等待服务器返回内容

		xhr.onreadystatechange = function() {

			if ( xhr.readyState == 4 ) {

				alert( xhr.responseText );

			}

		}

	}

}

</script>

</head>

<body>

	<input type="button" value="按钮" id="btn" class="myBtn" />

</body>

</html>

通过创建对象，使用try catch语句：try…catch 可以测试代码中的错误。try 部分包含需要运行的代码，而 catch 部分包含错误发生时运行的代码。通过open方法来发送请求的地址等待返回结果。

AJAX的兼容处理方式的更多相关文章

  1. Ajax的兼容及Ajax的缓存问题

    Ajax的兼容: 在ie 6 7 8 不支持XMLHttpRequest的对象: 他的Ajax内置对象为ActiveXObject("Microsoft XMLHTTP") 除了内 ...

  2. Struts2实现ajax的两种方式

    基于Struts2框架下实现Ajax有两种方式,第一种是原声的方式,另外一种是struts2自带的一个插件. js部分调用方式是一样的: JS代码: function testAjax() { var ...

  3. JQuery书写Ajax的几种方式?

    1 $.ajax({ type: "Post", //请求方式 ("POST" 或 "GET"), 默认为 "GET" ...

  4. 通过XMLHttpRequest和jQuery实现ajax的几种方式

    AJAX大家已经都知道了,是为了实现异步通讯,提高用户体验度,而将很多旧知识(XML,DOM,JavaScript,HTML,Jquery,Css……)重新融合的一个新的知识框架.而,XMLHttpR ...

  5. jquery的ajax和原始的ajax这两种方式的使用方法

    jquery的ajax是对原始的ajax进行的封装,方便用户的使用.下面用代码分别举例各自的使用方式. jquery的ajax发送和接收xml数据格式. $.ajax({ type: "PU ...

  6. (转载)MVC + JQUERY + AJAX的几种方式

    MVC + JQUERY + AJAX的几种方式 // 传过去一个简单值,获取一个简单值 $.ajax({            type: "GET",         url: ...

  7. AJAX中的请求方式以及同步异步的区别

    AJAX中的请求方式以及同步异步的区别请求方式,分为GET与POST: GET 最为常见的HTTP请求,普通上网浏览页面就是GET.GET方式的参数请求直接跟在URL后,以问号开始.(JS中用wind ...

  8. ajax的post提交方式和传统的post提交方式哪个更快？

    如果同时用ajax和post提交先执行哪个呢?是ajax返回后再执行post呢还是同时执行? ajax的post提交方式和传统的post提交方式哪个更快? >> php这个答案描述的挺清楚 ...

  9. ajax两张传输数据方式

    encodeURI() 函数可把字符串作为 URI 进行编码. 语法 encodeURI(URIstring) 参数 描述 URIstring 必需.一个字符串,含有 URI 或其他要编码的文本. 返 ...

随机推荐

  1. GO面向接口

    Go 语言提供了另外一种数据类型即接口,它把所有的具有共性的方法定义在一起,任何其他类型只要实现了这些方法就是实现了这个接口. 实例 实例 /* 定义接口 */ type interface_name ...

  2. Educational Codeforces Round 82 C. Perfect Keyboard

    Polycarp wants to assemble his own keyboard. Layouts with multiple rows are too complicated for him ...

  3. office 2016

    Excel 2016: F4  : 重复上一步操作. 例子: 如果上一步是合并单元格, 则 再次选中其他几个单元格, F4即再次完成合并. 单元格中插入对角线: 选中单元格, 右键--设置单元格格式- ...

  4. 【转载】Eclipse 最常用快捷键 (动画讲解)，最简单的一些快捷键

    Eclipse有强大的编辑功能, 工欲善其事,必先利其器, 掌握Eclipse快捷键,可以大大提高工作效率. 小坦克我花了一整天时间, 精选了一些常用的快捷键操作,并且精心录制了动画, 让你一看就会. ...

  5. ECMAScript 6 和数组的新功能

    Array. @@iterator 返回一个包含数组键值对的迭代器对象,可以通过同步调用得到数组元素的键值对 copyWithin 复制数组中一系列元素到同一数组指定的起始位置 entries 返回包 ...

  6. jemter-plugins-maven dependency -WIiki用法配置介绍

    1.先介绍下jmeter 的maven中央仓库地址,有兴趣自己看下 https://mvnrepository.com/artifact/org.apache.jmeter 2.Wiki github ...

  7. PB specified database is invalid

    拷贝资料库到其他机器,可以重新配置ODBC ,如果还是报错,建议删除log .

  8. win10 免安装版本的MySQL的下载安装和配置

    一.概述 网上找了好多,发现好多不是linux系统的就是与现在新版本有出入,自己做小项目亲手实践了一下,供大家借鉴. MySQL版本:mysql-5.7.17 下载方法: 1.MySQL官方网址htt ...

  9. 一个linuxk开发板的开发笔记

    arm-fsl-linux-gnueabi开发笔记 //开发主机系统信息 $ lsb_release -a No LSB modules are available. Distributor ID:U ...

  10. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：设定文本小写

    <!DOCTYPE html> <html> <head> <title>菜鸟教程(runoob.com)</title> <meta ...