原文:原生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()的方式进行创建。
    看了网上许多人使用如下代码进行兼容:

 try {
xml = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
xml = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e1) {
xml = new XMLHttpRequest();
}
}

    笔者用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: 请求已完成,且响应已就绪

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

原生AJAX基础讲解及兼容处理的更多相关文章

  1. 原生AJAX入门讲解(含实例)

    相对于jQuery.YUI以及其他一些类库的AJAX封装,原生JS的AJAX显得那么的尴尬,兼容性不好,要记很多的方法属性,调用不便捷,代码臃肿...但我还是想说,原生JS才是最根本最底层的知识(虽然 ...

  2. 原生ajax基础

    /*ajax对象的成员常用属性:responseText:以字符串形式接收服务器端返回的信息responseXML:以Xml Document对象形式接收服务器返回的信息readyState:返回当前 ...

  3. 浅谈AJAX的基本原理和原生AJAX的基础用法

    一.什么是AJAX? AJAX,即"Asynchronous Javascript And XML",翻译为异步的JavaScript和XML,是一种创建交互式网页应用的网页开发技 ...

  4. [译]脱离jQuery,使用原生Ajax

    脱离jQuery,使用原生Ajax 标签: Ajax translate 英文出处:<A Guide to Vanilla Ajax Without jQuery> 翻译: 刘健超 J.c ...

  5. 【Java EE 学习 31】【JavaScript基础增强】【Ajax基础】【Json基础】

    一.JavaScript基础增强 1.弹窗 (1)使用window对象的showModelDialog方法和showModelessDialog方法分别可以弹出模式窗口和非模式窗口,但是只能在IE中使 ...

  6. JS原生ajax与Jquery插件ajax深入学习

    序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...

  7. Verilog语法基础讲解之参数化设计

    Verilog语法基础讲解之参数化设计   在Verilog语法中,可以实现参数化设计.所谓参数化设计,就是在一个功能模块中,对于一个常量,其值在不同的应用场合需要设置为不同的置,则将此值在设计时使用 ...

  8. python_way day21 Django文件上传Form方式提交,原生Ajax提交字符处啊,Django文件上传之原生Ajax方式、jQuery Ajax方式、iframe方式,Django验证码,抽屉示例,

    python_way day21 1.Django文件上传至Form方式 2.原生Ajax文件上传提交表单 使用原生Ajax好处:不依赖jquery,在发送一个很小的文件或者字符串的时候就可以用原生A ...

  9. jQuery基础---Ajax基础教程(二)

    jQuery基础---Ajax进阶 内容提纲: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象 发文不易,转载请注明出处! 在 Ajax 基础一篇中, ...

随机推荐

  1. super.getClass()与this.getClass()

    原文地址:http://leihuang.org/2014/11/14/getClass-method/ 首先看一段代码: import java.util.Date; public class Te ...

  2. poj 1699 Best Sequence(AC自己主动机+如压力DP)

    id=1699" target="_blank" style="">题目链接:poj 1699 Best Sequence 题目大意:给定N个D ...

  3. MEF初体验之八:过滤目录

    当在使用子容器的时候,基于某些具体标准来过滤目录可能是重要的.例如,基于部件的创建策略来过滤是很常见的.下面的代码片段演示了如何构建这种特别方法: var catalog = new Assembly ...

  4. 解决github访问问题

    github这是个好地方.但是,上不去就蛋疼. 今天github上不去,果断f12下,看下network.发现里面好多请求都是指向 github.global.ssl.fastly.net这个域名的, ...

  5. Android开发技巧——实现在图标文本底部导航栏(更新)

    本文参考了导航栏的代码viewpagerindicator实现. 本文介绍了之前版本号qq或者微信,添加文本,实现图标,导航栏的底部. 2014-09-14 13:59:42更新:library的代码 ...

  6. 【Linux命令】--(9)其他常用命令

    其他常用命令+++++++++++++++++++++++++++++++lndiffdatecal grep wcpswatchatcrontab++++++++++++++++++++++++++ ...

  7. CSS不常见问题汇总

    写css有一段时间了,其间也遇到一些问题,跟大家分享一下 IE10+滚动条自动以藏问题,导致滚动部分页面看起来不正常 html, body {-ms-overflow-style: scrollbar ...

  8. .NET开发者必备的11款免费工具

    原文:.NET开发者必备的11款免费工具 如今,HTML5,jQuery,JavaScript等等这些热门技术,受到了开发者们的强烈追捧,有了这些开发工具也为开发者们减轻了许多负担.本文为开发者介绍了 ...

  9. MongoDB初学者的配置环境和基础设施的使用

    一个.mongoDB安装 1.第一MongoDB官方网站下载安装包http://www.mongodb.org/. 依照自己的操作系统进行下载. 2.在硬盘上建立两个文件夹分辨存放mongoDB安装文 ...

  10. 你可以不知道原因,但是,我们不能停止努力。httplook抓取路由配置界面信息

    因为实验室的项目要求,需要动态控制路由的配置信息,我们知道.路由选择需要购买的访问后,:http://192.168.1.1 路由配置页面.配置,不须要人手工操作.甚至定时任务配置的时候,就须要进一步 ...