XMLHttpRequest对象创建数据请求处理

最新推荐文章于 2024-06-29 11:58:27 发布
最新推荐文章于 2024-06-29 11:58:27 发布
阅读量313 收藏
点赞数
文章标签： xmlhttprequest function html 文档 null xml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/alexcao247/article/details/1795003
版权
XMLHttpRequest是Ajax的基础对象。异步的数据请求是通过这个对象来实现的。下面的代码是建立XMLHttpRequest对象的示例 。

代码在IE6、FireFox1.5、NetScape8.1、Opera8.54调试通过。服务器为Window2000 + IIS5

1、创建XMLHTTPREQUEST对象

var xhr;
var requestType = "";

//xhr = new XMLHttpRequest();

function createXMLHttpRequest()
{
    if (window.ActiveXObject)   // IE下创建XMLHTTPREQUEST
    {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if (window.XMLHttpRequest)   // 其他浏览器创建XMLHTTPREQUEST
    {
        xhr = new XMLHttpRequest();
    }
}

这种方法对于低版本的IE不适合。

2、XMLHTTPREQUEST对象请求数据

function startRequest(requestedList)
{
    if (xhr)
    {
        requestType = requestedList;
        createXMLHttpRequest();
        xhr.onreadystatechange = handleStateChange;
        xhr.open("GET","../ajax/paraseXML.xml",true);
        xhr.send(null);
    }
    else
        alert("XMLHTTPREQUEST IS FALSE");
}

这是个处理XML文档的示例，请求的文件是paraseXML.xml文件
这里需要说明的是：如果请求的是一个HTML文件，服务器对象会将所有的标签全部返回，包括<HTML>、<head>、<meta>等标签。响应数据如果包含HTML标签，最好把这些标签去掉。
3、XMLHTTPREQUEST对象返回数据处理

function handleStateChange()
{
    if (xhr.readyState == 4)
    {
        if (xhr.status == 200)
        {
            if (requestType == "north")
            {
                listNorthStates();
            }
            if (requestType == "all")
            {
                listAllStates();
            }
        }
    }
}

4、数据处理函数

function listNorthStates()
{
    // xhr 为XMLHTTPREQUEST对象
    // xmlDoc为XMLHTTPREQUEST响应的XML文档对象
    var xmlDoc = xhr.responseXML;   // 取得XML文档对象
    var northNode = xmlDoc.getElementsByTagName("north")[0];   // 取得所有处于北方的节点
    var northStates = northNode.getElementsByTagName("state");   // 在处于北方的节点中提取省份数据
    outputList("north States", northStates);   // 输出省份数据
}

function listAllStates()
{
    var xmlDoc = xhr.responseXML;
    var allStates = xmlDoc.getElementsByTagName("state");   // 取得所有的省份数据
    outputList("All States in document ",allStates);   // 输出省份的数据
}
/**********************************************************
// 输出数据
// title: 输出数据的标题
// states: 输出数据来源
********************************************************/
function outputList(title,states)
{
    var out = title;
    var currentState = null;   // 初始化省份对象
    for (var i = 0; i < states.length; i++)   // 列出Ststes对象的所有数据,生成输出串
    {
        currentState = states[i];   // 取得当前的省份
        //   生成输出HTML字符串
        out = out + "<ul><font face='仿宋_GB2312'><span style='font-size: 9pt'>";
        out = out + "<li>" + currentState.childNodes[0].nodeValue + "</li>";
        out = out + "</span></font></ul>";
    }
    // 取得输出串的对象,输出生成的字符串
    var test = document.getElementById("test");
    test.innerHTML = out;
}

5、完整示例文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHML 1.0 Strict//EN" "http://www.w3.org/TR/xHML/DTD/xhtml-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" CONTENT="text/html; charset=gb2312">
<meta http-equiv="Cache-Control" CONTENT="no-cache">
<meta http-equiv="Pragma" CONTENT="no-cache">
<meta http-equiv="Expires" CONTENT="0">     

<title>AJAX 测试</title>
<script type="text/javascript">
/ 创建XMLHttpRequest对象
var xhr;
var requestType = "";

//xhr = new XMLHttpRequest();

function createXMLHttpRequest()
{
    if (window.ActiveXObject)
    {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if (window.XMLHttpRequest)
    {
        xhr = new XMLHttpRequest();
    }
}
/ ＸＭＬ文档处理
function startRequest(requestedList)
{
    if (xhr)
    {
        requestType = requestedList;
        createXMLHttpRequest();
        xhr.onreadystatechange = handleStateChange;
        xhr.open("GET","../ajax/paraseXML.xml",true);
        xhr.send(null);
    }
    else
        alert("XMLHTTPREQUEST IS FALSE");
}
 
alexcao247
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
XMLHttpRequest对象 请求与响应
unu_citrono的博客
07-04 662
XMLHttpRequest对象介绍 XMLHttpRequest对象用于浏览器和服务器之间的通信，是Ajax的主要接口。 创建XMLHttpRequest对象 var request = new XMLHttpRequest() XMLHttpRequest发送请求 主要使用open()和send()两个方法 open(method, url, async) method–请求方法， url–请求地址，asycn–是否异步（默认为true） send(string) 发送请求，string为传递的参数，
使用XMLHttpRequest对象发送post和get请求
qq_45911604的博客
03-24 2873
使用XMLHttpRequest对象发送post和get请求 效果展示： 代码展示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,
XMLHttpRequest创建对象、发送请求、接收响应
热门推荐
杜小白的博客
08-21 1万+
Ajax工作原理 XMLHttpRequest 对象 Ajax的核心是XMLHttpRequest对象，它是Ajax实现的关键——发送异步请求、接收响应及执行回调都是通过它来完成的。 所有现代浏览器均支持XMLHttpRequest对象（IE5和IE6使用ActiveXObject）。 XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对...
ajax(判断浏览器创建xmlhttprequest对象),XMLHTTPRequest对象的创建与浏览器的兼容问题...
weixin_39714383的博客
08-06 2839
MLHttpRequest 对象是AJAX功能的核心，要开发AJAX程序必须从了解XMLHttpRequest 对象开始。了解XMLHttpRequest 对象就先从创建XMLHttpRequest 对象开始，在不同的浏览器中创建XMLHttpRequest 对象使用不同的方法：先看看IE创建XMLHttpRequest 对象的方法(方法1)：var xmlhttp=ActiveXobject("...
XMLHttpRequest对象的创建
qq_47219637的博客
12-28 527
首先先介绍一下XMLHttpRequest对象，我们都知道Ajax它并不是单单一门技术，而是几种技术的融合。XMLHttpRequest是Ajax技术体系中最为核心的技术，如果没有XMLHttpRequest，Ajax的其余技术就无法成为一个有机的整体。在Ajax应用程序中XMLHttpRequest对象负责将用户信息以异步方式发送到服务器，并接收服务器返回的响应信息和数据。 XMLHttpRequest时XMLHttp组件的一个对象，使用XMLHttpRequest可以实现不向服务器提交整个页面的情况下，
Ajax的XMLHttpRequest对象、Request发送请求、Response处理响应
qq_30906791的博客
10-24 1179
AJAX的重点是XMLHttpRequest对象。 所有现代浏览器都支持XMLHttpRequest对象。 XMLHTTPRequest用于客户端和服务器之间的异步通信 XMLHttpRequest对象可用于与后台的服务器交换数据。 这意味着可以更新网页的某些部分，而无需重新加载整个页面。 创建一个XMLHttpRequest对象 所有现代浏览器（Chrome，Firefox，IE7 +，Edge，Safari Opera）都具有内置的XMLHttpRequest对象。 创建XMLHttpRequest对象
JS XMLHttpRequest对象详解
weixin_52148548的博客
05-09 8965
概念创建XMLHttpRequest对象建立连接发送get请求发送post请求异步响应状态readyState终止请求abort()获取XML数据获取和设置头部信息 概念 XMLHttpRequest对象，顾名思义：是基于XML的HTTP请求,是一个浏览器接口,XMLHttpRequest 用于在后台与服务器交换数据。 我们通过XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL获取数据。 创建XMLHttpRequest对象 var xhr = new XMLHttpRequest().
XMLHttpRequest 对象
油墨香^-^的博客
06-07 1730
作者 |阮一峰 1、简介 浏览器与服务器之间，采用 HTTP 协议通信。用户在浏览器地址栏键入一个网址，或者通过网页表单向服务器提交内容，这时浏览器就会向服务器发出 HTTP 请求。 1999年，微软公司发布 IE 浏览器5.0版，第一次引入新功能：允许 JavaScript 脚本向服务器发起 HTTP 请求。这个功能当时并没有引起注意，直到2004年 Gmail 发布和2005年 Google Map 发布，才引起广泛重视。2005年2月，AJAX 这个词第一次正式提出，它是 Asynchro.
Http请求和XMLHttpRequest对象
huangpb的博客
12-04 2480
一、封装原生 AJAX 请求 // 1. 简单流程 // 实例化 let xhr = new XMLHttpRequest() // 初始化 xhr.open(method, url, async) // 发送请求 xhr.send(data) // 设置状态变化回调处理请求结果 xhr.onreadystatechange = () => { if (xhr.readyStatu...
XMLHttpRequest对象
weixin_68915174的博客
12-04 2693
用于初始化一个XMLHttpRequest实例对象 初始化化一个新创建的请求，或重新初始化一个请求 参数： 设置http“请求头”，给服务器更多信息。此方法必须在open()和send()之间调用。如果多次对同一个请求头赋值，只会生成一个合并了多个值的请求头 参数： 例子： 1.添加一个x-requested-with，便于服务器判断请求是否为Ajax发起： 2.通常post时，还要设定con
AJAX XMLHttpRequest对象创建使用详解
10-14
以上就是关于AJAX中XMLHttpRequest对象创建和使用的基本介绍。理解并熟练运用这些知识，可以帮助开发者构建出更高效、用户体验更好的Web应用程序。在实际开发中，还要注意跨域安全、错误处理等其他方面，确保AJAX...
XMLHttpRequest对象_Ajax异步请求重点(推荐)
11-28
一、XMLHttpRequest对象 1.Ajax能够是实现异步传输，所依赖的就是JavaScript中的XMLHttpRequest 2.XMLHttpRequest对象是XMLHttp组件的对象，它是一个...5.在使用XMLHttpRequest发送请求和处理相应之前需要先创建一个XM
详解XMLHttpRequest（一）同步请求和异步请求
11-22
请求的类型是由这个XMLHttpRequest对象的open()方法的第三个参数async的值决定的。如果该参数的值为false，则该XMLHttpRequest请求以同步模式进行，否则该过程将以异步模式完成。 两种通信模式：同步和异步请求： ...
javascript对XMLHttpRequest异步请求的面向对象封装
10-29
在`GetHttpObject`方法中，代码通过条件语句实现了浏览器兼容性检查，创建了XMLHttpRequest对象。对于较旧的IE浏览器，它尝试创建`ActiveXObject`，而对于现代浏览器，则使用原生的`XMLHttpRequest`构造函数。 `...
获取HTML元素的offsetParent属性
最新发布
weixin_44626980的博客
06-29 513
大家好，我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编，也是冬天不穿秋裤，天冷也要风度的程序猿！今天我们将深入探讨在前端开发中常用的一个属性——HTML元素的。属性，这是前端开发中常用于布局和定位的重要属性。属性用于描述一个元素的包含块（containing block），即元素在页面布局中的参照物。属性，可以帮助开发者更好地处理页面布局和定位的需求，提升用户体验和页面性能。如果项目中使用了jQuery，可以使用其提供的方法来获取元素的。在前端开发中，我们经常需要获取元素的。
测试报告-HTMLTestRunner报告优化（中/英文）
Salted fish in hand, I have the world.
06-27 812
引用原始的HTMLTestRunner.py文件生成的测试报告在美观性不是很好，使用在此文件基础上优化后的HTMLTestReportCN.py文件(生成的报告为中文)、HTMLTestReportEN.py文件(生成的报告为英文)。1 首先新建一个Python项目 例如：testHtmlReport创建case包，用于存...
HTML/CSS 基础 2
Qj60776671的博客
06-26 422
html与css
web前端——HTML
m0_70830675的博客
06-24 707
HTML是超文本标记语言 (HyperText Markup Language)。是指页面内可以包含图片、链接、声音,视频等内容标签(通过标记符号来告诉浏览器网页内容该如何显示)
gin框架 HTML 模板加载，渲染 使用详解和总结
06-28 1077
本文从gin框架中html模板的加载，渲染和使用，功能定义等方面详细讲解了gin框架中的html模板渲染工程和使用注意事项等。
XMLHttpRequest对象用于后台与服务器交换数据
06-08
在上面的例子中，我们创建了一个 XMLHttpRequest 对象，然后使用 open() 方法指定要发送的 HTTP 请求（使用 GET 方法请求 http://example.com/data），然后定义了一个 onload 事件处理函数，当服务器返回数据时，该...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值