【技术】使用原生XHR(XMLHttpRequest)对象来获取并包括HTML片段

1. 创建文件名为“someResource”的文件(文件无后缀),文件类型:文件,在文件夹中如下图:

"someResource"文件代码:

<b>This is the content of resource <tt>someResource</tt></b>

2. HTML代码:

<!DOCTYPE html>
<html>
  <head>
    <title>使用原生XHR来获取并包括HTML片段</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
      window.onload = function() {

//创建XHR
        var xhr;
//测试ActiveX是否存在
        if (window.ActiveXObject) {
          xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }

//测试XHR是否已经被定义
        else if (window.XMLHttpRequest) {
          xhr = new XMLHttpRequest();
        }

//如果不支持Ajax则抛出错误
        else {
          throw new Error("Ajax is not supported by this browser");
        }

xhr.onreadystatechange = function() {

//就绪处理器,忽略除DONE状态之外的所有状态
          if (this.readyState == 4) {

//根据响应状态进行代码分支
            if (this.status >= 200 && this.status < 300) {

//成功时执行
              document.getElementById(‘someContainer‘)
                .innerHTML = this.responseText;
            }
          }
        };

xhr.open(‘GET‘,‘someResource‘);
        xhr.send(‘‘);
      };
    </script>
  </head>

<body>
    <div id="someContainer"></div>
  </body>
</html>

时间: 2024-10-15 18:49:32

【技术】使用原生XHR(XMLHttpRequest)对象来获取并包括HTML片段的相关文章

XHR——XMLHttpRequest对象

创建XMLHttpRequest对象 与之前众多DOM操作一样,创建XHR对象也具有兼容性问题:IE6及之前的版本使用ActiveXObject,IE7之后及其它浏览器使用XMLHttpRequest 不但IE6及其之前的版本将XHR作为一个ActiveXObject运行,而且还存在众多版本:一开始是Microsoft.XMLHTTP 之后变成Msxml2.XMLHTTP及更新版的Msxml3.XMLHTTP function XHR() { var xhr; try {xhr = new XM

原生Ajax XMLHttpRequest对象

一.Ajax请求 - 现在常见的前后端分离项目中,一般都是服务器返回静态页面后浏览器加载完页面,运行script中的js代码,通过ajax向后端api发送异步请求获取数据,然后调用回调函数,将数据添加到页面上   1.1 JQuery封装后的ajax请求   - 注意:jQuery Ajax本质 XMLHttpRequest 或 ActiveXObject 1 jQuery.get(...) 2 所有参数: 3 url: 待载入页面的URL地址 4 data: 待发送 Key/value 参数.

XMLHTTPRequest对象不能跨域获取数据?!

写了一小段代码,是用XMLHTTPRequest对象来获取数据的,在本地服务器中,运行的很顺利,但是转向实际服务器(实质上就是转向http://gumball.wickedlysmart.com获取一个json文件过来),运行就跑不起来了. 这就涉及到跨域获取数据的问题了. 我运行时的环境是这样的: 本地服务器运行当前代码.转向http://gumball.wickedlysmart.com获取一个json文件过来. 结果:报错. XMLHttpRequest cannot load   No

【转载并整理】AJAX XmlHttpRequest对象详解

一. XMLHttpRequest由来及原生介绍 XMLHttpRequest(XHR)是一个API对象,其中的方法可以用来在浏览器和服务器端传输数据.这个对象是浏览器的js环境提供的.从XHR获取数据的目的是为了持续修改一个加载过的页面,XHR是Ajax设计的底层概念.XHR使用的协议不同于HTTP,不仅可以使用XML格式的数据,也支持JSON,HTML或者纯文本. WHATWG组织负责维护一个动态的XHR标准文档.W3C基于WHATWG标准创建了一个固定的规范. 历史 XMLHttpRequ

实现jquery.ajax及原生的XMLHttpRequest调用WCF服务的方法

废话不多说,直接讲解实现步骤 一.首先我们需定义支持WEB HTTP方法调用的WCF服务契约及实现服务契约类(重点关注各attribute),代码如下: //IAddService.cs namespace WcfService1 { [ServiceContract] public interface IAddService { [OperationContract] [WebInvoke(Method="POST",RequestFormat=WebMessageFormat.Js

Ajax原生XHR对象

前端学了有一段时间了,在项目中我通常使用的都是jQuery封装好的Ajax函数($.ajax.$.get.$.post),使用非常的简单方便,但为了更清楚的了解Ajax,需要学习原生xhr对象. 先来明确什么是Ajax,Ajax:"Asynchronous JavaScript and XML",翻译过来就是异步JavaScript和XML. Ajax是一种用于创建快速动态网页的技术,通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新.意味这可以再不重新加载整个网页的情

Ajax原生的js(XMLHttpRequest对象)--实现局部刷新

AJAX 是一种用于创建快速动态网页的技术.(不用刷新整个页面和服务器通讯的方法 ) XMLHttpRequest对象:是对js的扩展,可以实现网页与服务器进行通信,通常把Ajax当做XMLHttpRequest对象的代名词. 客户端的语言一般是HTML,css,JavaScript:服务器端一般用PHP,jsp,ASP:中间传输的格式一般为HTML,xml,TXT,json:传输协议是http ajax需要某种格式化的格式在服务器和客户端之间传递信息,XML,JSON是常用的格式 DOM实现动

获取xmlhttprequest对象

/** * 获取XmlHttpRequest对象 */ function getXMLHttpRequest(){ var xmlHttpReq; try{ // Firefox, Opera 8.0+, Safari xmlHttpReq=new XMLHttpRequest(); } catch (e){ try{// Internet Explorer xmlHttpReq=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e){ try

Ajax技术及 XMLHttpRequest 对象

这一节,主要内容是简单介绍Ajax技术,并了解其核心技术: XMLHttpRequest 对象. 1.首先,要了解什么是 Ajax : Ajax是asynchronous javascript and xml 缩写,意思是异步的JavaScript 与 XML.这是一种使用客户端脚本与web服务器交换数据的web应用开发方法,可以与JSP.ASP.PHP.Python和CGI脚本交互,不用关心服务器是什么. 对于 web 开发人员来说,发送异步请求是一个巨大的进步.很多在服务器执行的任务都相当费