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. jq基础（2）

    jquery的选择器 基本选择器 id选择器:$(“#id名称”); 元素选择器:$(“元素名称”); 类选择器:$(“.类名”); 通配符:* 多个选择器共用(并集) 案例代码: <html& ...

  2. Nmap工具用法详解

    Nmap                                       Network  Mapper    是一款开放源代码的网络探测和安全审核工具   1.介绍  

  3. 案例：WLC HA主WLC进入维护模式

    案例场景: 如图所示,7609-1和7609-2分别是网络中的核心设备,起了HSRP,7609-1连接的是WLC-1,,7609-2连接的是WLC-2,WLC1和WLC2的RP口相互连接. WLC的管 ...

  4. Android、iOS与Servlet接口上传文件和JSON串的交互

    package etcom.servlet; import java.io.File; import java.io.IOException; import java.sql.Connection; ...

  5. proto school tutorial: blog: lesson 1

    https://proto.school/#/blog/01 我们现在希望:把一个post 和他的作者联系起来. 从之前的教程here中,你可以知道, 一个cid 就是代表一个link 比如: { l ...

  6. 区分git ，github，github桌面版，gitbash、gitshell

    推荐链接:https://www.runoob.com/git/git-tutorial.html     https://www.zhihu.com/question/34582452?sort=c ...

  7. 自定义Redis作为Session存储服务提供

    之前看网上介绍可使用Redis自定义Session托管,使用第三方的Harbour.RedisSessionStateStore GitHub:https://github.com/TheCloudl ...

  8. Flask - 底层原理和基本流程

    一. flask依赖wsgi,实现wsgi的模块:wsgiref(django),werkzeug(flask),uwsgi 1. werkzeug示例 from werkzeug.wrappers ...

  9. 如何查看NXP产品的供货计划？

    大的半导体厂商一般会提供每个产品的生命周期计划,NXP的工业级IC一般供货10年,汽车级是15年,具体的时间可以在官网查询得到. 首先,打开NXP官网链接 产品长期供货计划,可以看到以下页面 接着,筛 ...

  10. 笔记-AJAX

    笔记-AJAX 1.      简介 Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML AJAX 是一种用于创建快速动态网页的技术 ...