`
JavaCrazyer
  • 浏览: 3008908 次
  • 性别: Icon_minigender_1
  • 来自: 河南
社区版块
存档分类

AJAX基础学习(4)——AJAX 浏览器支持

阅读更多

 

AJAX - 浏览器支持

 

AJAX 的要点是 XMLHttpRequest 对象。

 

不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。

 

IE 浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。

 

如需针对不同的浏览器来创建此对象,我们要使用一条 "try and catch" 语句。您可以在我们的 JavaScript 教程中阅读更多有关 try 和 catch 语句 的内容。

 

让我们用这段创建 XMLHttpRequest 对象的 JavaScript 来更新一下我们的 "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 的提示。

 

注释:上面这些浏览器定制的代码很长,也很复杂。不过,每当您希望创建 XMLHttpRequest 对象时,这些代码就能派上用场,因此您可以在任何需要使用的时间拷贝粘贴这些代码。上面这些代码兼容所有的主流浏览器:Internet Explorer、Opera、Firefox 以及 Safari。

 

下一节为您展示如何使用 XMLHttpRequest 对象与服务器进行通信。


分享到:
评论

相关推荐

    学习ajax的文档——ajax基础文档

    Ajax的核心是创建一个`XMLHttpRequest`对象,它是浏览器内置的对象,负责与服务器进行异步通信。通过这个对象,我们可以发送HTTP请求,并接收服务器返回的数据。使用Ajax的主要优点是提高了用户体验,因为页面可以在...

    Atlas/ajax基础教程——范例源码

    在"Atlas基础教程——范例源码"中,我们可以期待学习以下关键知识点: 1. **Ajax基础**:理解Ajax的工作原理,包括XMLHttpRequest对象的使用,以及如何创建、发送和处理HTTP请求。 2. **Atlas API**:熟悉Atlas...

    ajax学习——自学文件

    1. **浏览器兼容性**:不同的浏览器对Ajax的支持程度不同,需要编写兼容代码。 2. **SEO问题**:搜索引擎爬虫可能无法抓取到Ajax加载的内容,影响搜索引擎优化。 3. **页面跳转问题**:Ajax无法直接实现页面的前进...

    Ajax联动-支持所有浏览器

    ### Ajax联动-支持所有浏览器 #### 一、背景与需求 在Web开发中,经常会遇到一个常见的问题:如何实现跨浏览器兼容性?特别是在处理Ajax请求时,不同的浏览器可能有不同的实现方式,这使得开发者不得不考虑各种...

    Ajax实战——深入理解AJAX

    【Ajax实战——深入理解AJAX】 Ajax,全称为"Asynchronous JavaScript and XML",是一种在无需刷新整个网页的情况下,能够更新部分网页内容的技术。Ajax的核心在于利用JavaScript与服务器进行异步数据交换,结合XML...

    谷歌浏览器插件—— Ajax Interceptor

    Ajax Interceptor 的实现离不开JavaScript和ECMAScript的支持。 ### 7. 前端开发工具生态 Ajax Interceptor 是前端开发者工具箱中的一员,它与Chrome DevTools、Postman、Prettier、ESLint等工具一起,构建了强大的...

    Ajax征服——相册模块 源码

    - **兼容性**:考虑到不同浏览器对Ajax的支持程度,可能需要引入polyfill库或使用更低级的备选方案,如IFrame或隐藏的Form提交。 ### 5. 实战演练 "Ajax征服——相册模块 源码"提供了具体的实现代码,你可以通过...

    Ajax教程 AJAX——新手快车道

    1. **浏览器兼容性**:虽然大部分现代浏览器都支持AJAX,但在一些老版本浏览器中可能存在问题,需要使用库如jQuery来处理兼容性问题。 2. **安全问题**:由于AJAX请求仍然遵循同源策略,跨域请求需要服务器端设置...

    Ajax征服——Ajax小偷模块 源码

    在"Ajax征服——Ajax小偷模块 源码"中,我们可能会涉及到以下几个关键知识点: 1. **XMLHttpRequest对象**:这是Ajax的基础,用于在后台与服务器进行通信。通过创建XMLHttpRequest实例,我们可以打开到服务器的连接...

    Ajax征服——留言本

    总结来说,“Ajax征服——留言本”是Ajax技术在实际应用中的一个经典示例,通过它,我们可以学习到如何利用Ajax实现实时、无刷新的数据交互,提高Web应用的用户体验。这个实例不仅涵盖了Ajax的基本用法,还涉及到...

    Ajax开发精要——概念、案例与框架

    4. **回退机制**:对于不支持JavaScript的浏览器,需要提供非Ajax版本的页面,保证基本功能可用。 Ajax技术是现代Web开发不可或缺的一部分,理解其核心概念、工作流程以及如何选择合适的框架,对于提升网页的交互性...

    AJAX——新手快车道

    在《AJAX——新手快车道》这本教程中,作者旨在为有一定JavaScript基础的读者提供一个快速学习Ajax的通道。以下是一些关键的知识点: 1. **XMLHttpRequest对象**:这是Ajax的核心,用于在后台与服务器进行通信。...

    精通Ajax——基础概念、核心技术与典型案例之 书中源码

    《精通Ajax——基础概念、核心技术与典型案例》是一本深入探讨Ajax技术的专业书籍,旨在帮助读者掌握Ajax的基础知识,理解其核心技术,并通过实际案例提升应用能力。Ajax,全称Asynchronous JavaScript and XML,是...

    Ajax技术简介——处于尖端的技术

    - **Prototype.js**: 为AJAX提供了强大的支持,并且易于学习和使用。 - **Dojo Toolkit**: 强调高性能和模块化的设计,适合大型项目的开发。 #### 八、结论 综上所述,AJAX技术通过异步通信的方式显著提高了网页的...

    Ajax开发精要——概念、案例与框架.

    4. **React、Vue、Angular等前端框架**:内建对Ajax的支持,如React的fetch或axios,Vue的axios插件,Angular的HttpClient模块。 **五、最佳实践与注意事项** 1. **缓存控制**:合理设置HTTP头来控制请求是否缓存...

    学习jQuery中的Ajax——$.get()方法

    本篇文章将深入探讨jQuery中的Ajax方法之一——`$.get()`,以及如何通过它来实现异步数据交互。`$.get()`是jQuery提供的一个便捷的Ajax函数,用于发起GET类型的HTTP请求。 ### 一、$.get()的基本用法 `$.get()`...

Global site tag (gtag.js) - Google Analytics