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. Flask - Flask高级技巧(Advanced Flask Patterns)

    传送门 来自作者的PPT https://speakerdeck.com/mitsuhiko/advanced-flask-patterns?slide=46

  2. 笔记本分享热点wifi给手机上网

    2013年11月18日夜,刚在东莞安顿下来,明天开始上班. 闲来无事,因为无线路由器被牛哥“抢”走了,手机不能连接wifi了,考虑到每月的流量有限,于是考虑让笔记本分享热点给手机上网.因为之前也试过, ...

  3. 创建DataTable与DataGridView进行绑定

    private DataTable dt = new DataTable(); BindingSource bs = new BindingSource(); /// <summary> ...

  4. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例：手机、平板电脑、台式电脑

    <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 手机.平板电脑.台式电脑</title&g ...

  5. express session 实现登录

    https://www.cnblogs.com/mingjiatang/p/7495321.html Express + Session 实现登录验证   1. 写在前面 当我们登录了一个网站,在没有 ...

  6. 高级T-SQL进阶系列 （一）【中篇】：使用 CROSS JOIN 介绍高级T-SQL

    [译注:此文为翻译,由于本人水平所限,疏漏在所难免,欢迎探讨指正] 原文连接:传送门. 当一个CROSS JOIN 表现得如同一个INNER JOIN 在上一章节我提到当你使用一个CROSS JOIN ...

  7. python浅谈编程规范和软件开发目录规范的重要性

    前言 我们这些初学者,目前要做的就是遵守代码规范,这是最基本的,而且每个团队的规范可能还不一样,以后工作了,尽可能和团队保持一致,目前初学者就按照官方的要求即可 新人进入一个企业,不会接触到核心的架构 ...

  8. Python Tkinter学习笔记

    介绍 入门实例 显示一个窗口,窗口里面有一个标签,显示文字 import tkinter as tk # 一个顶层窗口的实例(Top Level),也称为根窗口 app = tk.Tk() # 设置窗 ...

  9. 吴裕雄--天生自然TensorFlow2教程：全连接层

    out = f(X@W + b) out = relut(X@W + b) import tensorflow as tf x = tf.random.normal([4, 784]) net = t ...

  10. eclipse 快速隐藏所有方法的代码块

    java开发中往往一个class文件中会有很多方法,一个方法的实现代码有时候特别长 我个人就喜欢把无关的方法代码全部隐藏起来,只打开当前需要编辑的代码就行了(不喜欢看导航视图,容易头晕) Ctrl+s ...