原生AJAX基础讲解及兼容处理-阿里云开发者社区

开发者社区> 杰克.陈> 正文

原生AJAX基础讲解及兼容处理

简介: 原文:原生AJAX基础讲解及兼容处理   AJAX = Asynchronous JavaScript and XML (异步的JavaScript和XML)。   AJAX不是新技术 ,但却是热门的技术。
+关注继续查看
原文:原生AJAX基础讲解及兼容处理

  AJAX = Asynchronous JavaScript and XML (异步的JavaScript和XML)。

  AJAX不是新技术 ,但却是热门的技术。它可以在不重载(刷新)整个页面的情况下与服务器进行数据交互并更新网页模块。
  AJAX的优点有很多:可以局部刷新、按需加载,这样就减轻了服务器的数据流量。并且在页面更新的同时,用户可以浏览器网页的其它内容而不受影响,也减轻了结构负担。AJAX也不是万能的,在有以上优点的同时SEO也受到了影响。
  在学习AJAX之前,必须先有HTML/XHTML、CSS、JavaScript/DOM的基础。
  AJAX与服务器进行数据交互,必然涉及到服务器端,与此同时也就涉及到了服务器请求对象的创建(new XMLHttpRequest())、确认请求方式(open())、发送请求(send())以及响应请求(responseText)。
  创建对象:
    IE9+及其它浏览器支持使用new XMLHttpRequest()的创建对象方式,而IE8及以下则使用new ActiveXObject()的方式进行创建。
    看了网上许多人使用如下代码进行兼容:

1 try {
2     xml = new ActiveXObject("Msxml2.XMLHTTP");
3 } catch(e) {
4     try {
5         xml = new ActiveXObject("Microsoft.XMLHTTP");
6     } catch(e1) {
7         xml = new XMLHttpRequest();
8     }
9 }

    笔者用IE11调试功能测试IE10及以下不写new ActiveXObject("Msxml2.XMLHTTP")也是没问题的,于是在创建对象时可以使用代码:
    var xml = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
  确认请求:
    xml.open('get', 'url', true/false);
    第一个参数表示:string. 访问方式,有两具值:get/post,大部分的时候使用get
    第二个参数表示:string. 要连接的服务器网址
    第三个参数表示:boolean. 表示是否需要异步请求(true为发起异步加载)
  发送请求:
    xml.send();
    如果需要发送数据则采用xml.send(str);
  响应数据:
    xml.onreadystatechange = function() {
      if (xml.readyState == 4 && xml.status == 200) {
        alert(xml.responseText);
      }
    }

  status返回链接的状态,一般返回200与404,200表示成功返回,404表示未找到页面。
  readyState有5个值,分别为:0、1、2、3、4。而每当值改变时都会触发一次onreadystatechange。
  readyState的5个值含义分别为:

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成,且响应已就绪

  也就是当请求完成,并且找到页面时,然后才获取服务器上的数据。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
C++语言基础 例程 异常处理的方法
贺老师的教学链接  本课讲解 例:防止除数为0 #include <iostream> using namespace std; template <typename T> T Div(T x,T y) { if(y==0) throw y;//抛出异常 return x/y; } int main() { int x=5,y
775 0
C++语言基础 例程 异常处理的任务
贺老师的教学链接  本课讲解 一个典型的问题程序 #include <iostream> using namespace std; template <typename T> T Div(T x,T y) { return x/y; } int main() { int x,y; double x1,y1; cin>>x
819 0
Apache Flink 零基础入门(五):流处理核心组件 Time&Window 深度解析
为什么要有 Window; Window 中的三个核心组件:WindowAssigner、Trigger 和 Evictor;Window 中怎么处理乱序数据,乱序数据是否允许延迟,以及怎么处理迟到的数据;最后我们梳理了整个 Window 的数据流程,以及 Window 中怎么保证 Exactly .
867 0
Apache Flink 零基础入门(五):流处理核心组件 Time&Window 深度解析
为什么要有 Window; Window 中的三个核心组件:WindowAssigner、Trigger 和 Evictor;Window 中怎么处理乱序数据,乱序数据是否允许延迟,以及怎么处理迟到的数据;最后我们梳理了整个 Window 的数据流程,以及 Window 中怎么保证 Exactly
3316 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
12074 0
《C++语言基础》实践项目——异常处理和命名空间
返回:贺老师课程教学链接 【项目1-平方根中的异常】 编写一个程序,求输入数的平方根。设置异常处理,当输入负数时采用异常处理机制给出提示。 [参考解答] 【项目2-有些数的阶乘不算了】 求n!的函数,当用户的输入为负数,以及输入数太大时(例如大于12),使用异常处理机制予以拒绝,并给出恰当的提示。 [参考解答] 【项目3-max带来的冲突】 分析下面程序出现的
825 0
+关注
杰克.陈
一个安静的程序猿~
10427
文章
2
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载