Ajax简单应用示例： XMLHttpRequest对象实例化方式及调用

最新推荐文章于 2024-07-25 12:41:07 发布
最新推荐文章于 2024-07-25 12:41:07 发布
阅读量2.7k 收藏
点赞数
分类专栏： JSP JavaScript Ajax 文章标签： ajax AJAX Ajax firefox FIREFOX html Html HTML xmlhttprequest
JSP 同时被 3 个专栏收录
20 篇文章 0 订阅
订阅专栏
JavaScript
15 篇文章 0 订阅
订阅专栏
Ajax
3 篇文章 0 订阅
订阅专栏

这里要做的是使用XMLHttpRequest对象读取XML文件。
a.xml文件内容如下：（其实是一个HTML格式的XML文件）

<html>
<head>
	<title>Hello, Ajax!</title>
</head>
<body>I am there.</body>
</html>

MyHtml.html文件内容如下： 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>MyAjax</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script language="javascript" type="text/javascript">
    /*
    * 实例化一个HttpRequest对象
    */
    function getHttpRequest()
	{
	   var xmlrequest = false;
	    //对于Firefox和Opera等浏览器  
	    if (window.XMLHttpRequest) {  
	       xmlrequest = new XMLHttpRequest(); 
	       //有此版本的Mozilla浏览器在处理服务器返回的包含XML mime-type头部信息内容时会出错。
	       //所以，为了确保返回内容是text/xml信息，需要包含下面的语句。
	       if(xmlrequest.overrideMimeType)
	       {
				xmlrequest.overrideMimeType("text/xml");
		   }
	    }  
	    else //对于IE浏览器  
	    {  
	        //将IE的不同XMLHttp实现声明数组  
	        var MSXML=new Array('Msxml2.XMLHTTP.7.0',
						        'Msxml2.XMLHTTP.6.0',
						        'Msxml2.XMLHTTP.5.0', 
						        'Msxml2.XMLHTTP.4.0', 
						        'MSXML2.XMLHTTP.3.0', 
						        'MSXML2.XMLHTTP', 
						        'Microsoft.XMLHTTP');   
	        //依次对每个XMLHTTP实现创建XMLHttpRequest对象  
	        for(var i=0; i<MSXML.length; i++)  
	        {  
	            try  
	            {  
	                xmlrequest=new ActiveXObject(MSXML[i]); 
	                break;  
	            }  
	            catch (ex) {  
	            }  
	        }  
	    }  
	   return xmlrequest;
	}
	
    /*
    * 使用一个已经实例化HttpRequest的对象执行GET请求
    */
    var request;
    function processRequest(url,processMethod)
    {
		request = getHttpRequest();
		if(request)
		{
		    request.onreadystatechange = processMethod;
		    request.open("GET",url,true);//第3个参数设置为true时将发生异步调用  ，false时为同步调用。
		    request.send(null);
		}
    }
    
    /*
    * GET请求时执行的详细方法。【多个不同的GET请求可以定制多个方法】
    */
    function processMethod1()
    {
	   if(request.readyState == 4){
	     if(request.status == 200){
	      	var xmlObj = request.responseXML;//获得XML对象
	      	//var titlee = xmlObj.getElementsByTagName("title")[0].text 只兼容IE
	      	//var titlee = xmlObj.getElementsByTagName("title")[0].textContent 只兼容FireFox
	      	var titlee = xmlObj.getElementsByTagName("title")[0].childNodes[0].nodeValue;
	      	
	      	alert(titlee);
	     }
	     else
		alert("Error");
	   }
    }
     
    </script>
  </head>
  
  <body>
    This is my HTML page. <br>
    <input name="btn" type="button" id="btn"
     οnclick="processRequest('a.xml',processMethod1);" value="弹出消息" size=25px/>
  </body>
</html>
修改上面的processRequest()方法，可以更直接调用XMLHttpRequest对象，但不灵活。代码如下： 
	
    /*
    * 使用一个已经实例化HttpRequest的对象执行GET请求
    */
    var request;
    function processRequest()
    {
		request = getHttpRequest();
		if(request)
		{
		    request.onreadystatechange = function(){ //在这里直接嵌入执行方法
			if(request.readyState == 4){
			     if(request.status == 200){
			      	var xmlObj = request.responseXML;//获得XML对象
			      	var titlee = xmlObj.getElementsByTagName("title")[0].childNodes[0].nodeValue;
			      	alert(titlee);
			       }
			     else
				alert("Error");
			}
		    };
		    request.open("GET","a.xml",true);//第3个参数设置为true时将发生异步调用  ，false时为同步调用。
		    request.send(null);
		}
    }

本文参考自：
《JSP宝典》邹竹彪
http://xplq.iteye.com/blog/197522
http://www.cnblogs.com/sunbett/archive/2010/10/12/1848891.html
http://blog.csdn.net/bianzhiqi/article/details/4640700




lutinghuan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AJAX概念介绍：2.2 XMLHttpRequest对象的创建、请求、响应
fengxinqi的博客
08-21 255
首先用构造函数创建一个XMLHttpRequest对象（简称XHR）var request=new XMLHttpRequest();以上代码使用大部分浏览器，但是不支持ie6，ie5var request; if(window.XMLHttpRequest){ request=new XMLHttpRequest(); } else{ request=new ActiveXObje
ajax调用简单实例
12-09
这个简单的Ajax调用示例展示了如何在客户端和服务端之间进行数据交互，以及如何动态更新页面内容，对于理解和应用Ajax技术是非常基础且重要的。在实际项目中，开发者通常会使用像jQuery、axios或fetch这样的库来简化...
Ajax应用示例： XMLHttpRequest封装
一个情绪猿的脖克...
12-09 5694
XMLHttpRequest封装在HttpClient.js文件内，代码如下： function HttpClient(){} HttpClient.prototype={ //传给open方法的GET或者POST类型 requestType: 'GET',
ajax使用xmlhttprequest,使用 XMLHttpRequest（一）：发送请求获取响应
weixin_33821493的博客
08-05 1583
使用 XMLHttpRequest(一)：发送请求获取响应由 学院君 创建于11个月前, 最后更新于 11个月前版本号 #6791 views0 likes0 collectsXMLHttpRequest浏览器在 XMLHttpRequest 类上定义了它们的 HTTP API，这个类的每个实例都表示一个独立的请求/响应对，并且这个对象的属性和方法允许指定请求细节和提取响应数据。注：Microso...
ajax及模板引擎、XMLHttpRequest2、axios
roydon
10-06 1796
总结
ajax异步调试,AJAX实例教程:异步调用的程序
weixin_30062561的博客
08-06 261
Ajax(Asynchronous JavaScript and XML)，使用户在使用Web程序时，不用在来来回回的Post了，可以近乎实时的从客户端收到服务器返回的信息，而无需刷新，极大的非富了用户的操作体验。下面是AJAX实例教程:异步调用的程序的相关内容，文章教程主要讲述与AJAX 异步 相关的一些技术与知识，更多的内容欢迎大家访问http://www.alixixi.com,获取更多最新...
Ajax核心XMLHttpRequest对象
Joe_owl的专栏
12-08 433
Ajax核心XMLHttpRequest对象、（发送请求、接收）方法和属性介绍、AJAX开发框架、数据格式提要（XML、JSON、HTML）XMLHttpRequest对象 　　 XMLHttpRequest对象在大部分浏览器上已经实现而且拥有一个简单的接口允许数据从客户端传递到服务端，但并不会打断用户当前的操作。使用XMLHttpRequest传送的数据可以是任何格式，虽然从名字上建议是XML格式
html ajax 实例,jQuery Ajax 实例全解析
weixin_39524636的博客
06-20 272
废话少说，直接进入正题，我们先来看一些简单的方法，这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法，当然，如果要处理复杂的逻辑，还是需要用到jQuery.ajax()的(这个后面会说到).1. load( url, [data], [callback] ) ：载入远程 HTML 文件代码并插入至 DOM 中。url(String) : 请求的HTML页的URL地址。data(M...
JS XMLHttpRequest对象详解
weixin_52148548的博客
05-09 9125
概念创建XMLHttpRequest对象建立连接发送get请求发送post请求异步响应状态readyState终止请求abort()获取XML数据获取和设置头部信息 概念 XMLHttpRequest对象，顾名思义：是基于XML的HTTP请求,是一个浏览器接口,XMLHttpRequest 用于在后台与服务器交换数据。 我们通过XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL获取数据。 创建XMLHttpRequest对象 var xhr = new XMLHttpRequest().
javascript一个无懈可击的实例化XMLHttpRequest的方法
12-09
这个实例化的`getHTTPRequest`函数是为了兼容不同浏览器而设计的，确保无论用户使用的是现代浏览器还是较旧版本的Internet Explorer，都能正确创建XMLHttpRequest对象。 首先，我们定义一个变量`xhr`并将其初始值设...
原生ajax调用数据实例讲解
10-23
2. 实例化AJAX对象： 在示例中，`ajaxEl`是一个自定义的对象，用于封装AJAX操作。`contentLoad`函数用于加载指定URL的数据： ```javascript var ajaxEl = new Object(); ajaxEl.contentLoad = function(url) { // ...
Ajax通讯原理XMLHttpRequest
12-10
在IE5和IE6中，由于标准尚未统一，使用ActiveXObject来创建XMLHttpRequest实例。对于其他浏览器，可以使用`new XMLHttpRequest()`来创建对象。 ### XHR的生命周期与状态 XMLHttpRequest对象有五个不同的`...
jQuery高级编程之js对象、json与ajax用法实例分析
10-16
AJAX的核心是XMLHttpRequest对象，通过实例化这个对象并调用其方法来发送HTTP请求。一个基本的AJAX请求示例： ```javascript $.ajax({ url: '/index_data', type: 'get', dataType: 'json', success: function...
快速入门了解Ajax
音符犹如代码的博客
07-25 1008
上面是一个原生的Ajax的一个写法，但是原生的Ajax太繁琐甚至还有浏览器不兼容的问题，所以现在都是基于原生的Ajax的Axios。意义：AJAX（Asynchronous JavaScript and XML）即异步 JavaScript 和 XML。介绍：Axios是简化的Ajax，对传统的Ajax操作的简化和改进，也是一个更强大和便捷的http请求处理的工具。下边是两个来自官网的post的请求和get请求的代码。
Linux环境docker部署Firefox结合内网穿透远程使用浏览器测试
qq_63320529的博客
07-24 1034
Linux环境docker部署Firefox结合内网穿透远程使用浏览器测试
Python爬虫技术 第14节 HTML结构解析
hummhumm的专栏
07-25 1087
HTML 结构解析是 Web 爬虫中的核心技能之一，它允许你从网页中提取所需的信息。Python 提供了几种流行的库来帮助进行 HTML 解析，其中最常用的是和lxml。
数字信号处理课程设计 (1).docx
最新发布
08-01
数字信号处理课程设计 (1)
基于小程序的前端数据采集+行为上报
08-01
基于小程序的前端数据采集+行为上报
理解Ajax：XMLHttpRequest对象与异步请求
一个简单的AJAX请求示例： ```javascript var request = false; if(window.XMLHttpRequest) { request = new XMLHttpRequest(); } else if(window.ActiveXObject) { try { request = new ActiveXObject("Msxml2....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值