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. h5页面判断移动端系统为Android或IOS

    最近遇到了一个需求,即所谓的 app+web 混合开发,需要将 h5 内嵌到 APP 中,这个时候因为要对 Android 和 IOS 有不同的处理逻辑,所以我们就需要判断一下,移动端的系统到时是哪一 ...

  2. Mybatis中mapper.xml的使用

    详解多对多,mybatis多对多查询(xml方式和注解方式) 链接:https://blog.csdn.net/qq_42524262/article/details/98383977 链接:http ...

  3. web打开本地文件并读取内容

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. iOS 开发之 23种设计模式

    整理了 iOS 开发中用到的设计模式: iOS 开发之 设计模式[一]原型模式 (Prototype pattern) iOS 开发之 设计模式[二]工厂方法模式 iOS 开发之 设计模式[三]抽象工 ...

  5. 刷题17. Letter Combinations of a Phone Number

    一.题目说明 题目17. Letter Combinations of a Phone Number,题目给了下面一个图,输入一个字符串包括2-9,输出所有可能的字符组合. 如输入23所有可能的输出: ...

  6. Servlet详细介绍

    <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" ...

  7. Java基础知识笔记第九章：组件及事件处理

    java Swing 图形用户界面(GUI : Graphics User Interface) 窗口 JFrame常用方法 JFrame()创建一个无标题的窗口. JFrame(String s)创 ...

  8. JDBC笔记一

    连接池原理 数据库连接池:1.提前创建好多个连接对象,放到缓存中(集合),客户端用时直接从缓存中获取连接 ,用完连接后一定要还回来. 目的:提高数据库访问效率.  模拟代码: package com. ...

  9. Css——显示2行数据，超出显示...

    解决需求——数据较长时,只显示两行,超出显示... .showTwoRow { text-align: left; text-overflow: ellipsis; display: -webkit- ...

  10. Java如何实现序列化,有什么意义?

    1.序列化是干什么的? 简单说就是为了保存在内存中的各种对象的状态,并且可以把保存的对象状态再读出来.虽然你可以用你自己的各种各样的方法来保存Object States, 但是Java给你提供一种应该 ...