一个简单的使用XMLHttpRequest获得服务器数据的例子

最新推荐文章于 2022-04-18 16:02:27 发布
原创 最新推荐文章于 2022-04-18 16:02:27 发布 · 2.1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#xmlhttprequest #服务器 #url #ajax #null

本文介绍了一个简单的 Ajax 实例，包括前台 JavaScript 代码实现与后台处理流程。前台通过 XMLHttpRequest 对象发送 GET 请求到指定 URL，后台接收请求参数并返回定制消息。

看网上有很多的相关资料，总结的一个Ajax入门实例。

前台代码：

定义一个XMLHttpRequest对象并使用简单的GET方法，直接从指定的url获得服务器的值。


<html>
        <head>
            <title>Ajax 入门</title>
            <script type="text/javascript" language="javascript">
                var req;
                function CreateRequest()
                {
                    if(window.XMLHttpRequest)
                    {
                        req = new XMLHttpRequest();
                    }
                    else
                    {
                        if(window.ActiveXObject)
                        {
                            try
                            {
                                req = new ActiveXObject("Msxml2.XMLHTTP");
                            }
                            catch(msxmlException)
                            {
                                try
                                {
                                    req = new ActiveXObject("Microsoft.XMLHTTP");
                                }
                                catch(ex)
                                {
                                    req = false;
                                }
                            }
                        }                        
                    }
                    
                    if(!req)
                    {
                        alert("XMLHttpRequest initilized failure");
                    }
                    
                    return req;
                }
                
                function AjaxDemo()
                {
                    req = CreateRequest();
                    var empno = document.getElementById("employee").value;
                    if(empno == "") return ;
                    var url = "Server.aspx?empno="+escape(empno);
                    req.open("GET",url,true);
                    req.onreadystatechange = StateChanged;
                    req.send(null);
                }
                
                function StateChanged()
                {
                    if(req.readyState == 4 )
                    {
                        if(req.status == 200)
                        {
                            alert(req.responseText);
                        }
                        else if(req.status == 404)
                        {
                            alert("request url is not found");
                        }
                        else if(req.status == 401 || req.status == 403)
                        {
                            alert("request url is forbidden or not authorized to visit.");
                        }
                        else
                        {
                            alert("unexpected error!Status Code :"+req.status);
                        }
                    }                    
                }
            </script>
        
        </head>
        
        <body>
            <div id="container" class="container">
                                       <input id="employee" onchange="AjaxDemo();" value="" />
            </div>
        </body>    
</html>

 

后台代码：

后台获得传入的参数，处理完，返回【欢迎您，xxx】。

private void Page_Load(object sender, System.EventArgs e)
        {
            string empno = Request.QueryString["empno"];
            ReturnValue(empno);
        }

        public void ReturnValue(string empno)
        {
             //处理.......
            Response.Write("欢迎您"+empno);
            Response.End();
        }
用浏览器XMLHttpRequest向服务器拿数据
weixin_48047636的博客
04-06 620
#用浏览器XMLHttpRequest向服务器拿数据 <script> //1.创建对象XMLHttpRequest var xhr=new XMLHttpRequest(); //2.指定服务器地址 var url='http://127.0.0.1:3000/get2'; xhr.open('GET',url,true); //3.快跑 xhr.send(); /
html5 xmlhttprequest,HTML5 XMLHttpRequest使用
weixin_30099989的博客
06-24 740
XMLHttpRequest是Ajax的核心，通过调用XMLHttpRequest对象的属性和方法可以实现在客户端和浏览器之间进行数据的异步传输，从而实现页面的无刷新效果。XMLHttpRequest对象的常用属性：onreadystatechange：指定当readyState属性值改变时的事件处理句柄(只写)；readyState：返回当前请求的状态(只读)；responseText：将相应信...
使用XMLHTTP Request Object获取服务器数据
High_Mount的专栏
03-07 1203
XMLHTTP
Js XMLHTTPRequest 实现GET请求提交和返回内容获取
热门推荐
u012556900的专栏
03-08 2万+
【需求描述】 在进行html5页面的设计时，希望用户加载完成页面后，进行交互时只改变其中的某些元素的内容，这样更像本地APP的呈现效果，但是HTML中的post、get如果使用submit进行提交的话会直接使用返回的内容刷新整个页面，这样有两个不好的地方： 1、返回的内容必须是整个页面都有的内容，但实际情况是仅仅需要改变页面中部分元素，这样就造成数据流量大，对服务器的性能有耗 2、用户能够明
从XMLHttpRequest中获取请求的URL
weixin_30387423的博客
03-11 2059
在编写Ajax通用错误处理程序时，经常需要记录发生错误的XMLHttpRequest的请求URL。但查询文档，并未找到从XMLHttpRequest中获取请求URL的方法。 在javascript - Get request url from xhr object - Stack Overflow中提供了一种可能的实现方式：为浏览器原生的XMLHttpRequest包上一层。实现代码如下： var...
一个简单的xmlHttpRequest ajax的例子
04-04
在这个“一个简单的xmlHttpRequest AJAX的例子”中，我们将探讨如何使用XMLHttpRequest对象来实现基本的AJAX请求。 首先，我们需要创建一个新的XMLHttpRequest实例。在JavaScript中，这是通过`new XMLHttpRequest()...
XMLHttpRequest使用小例子
07-31
以上就是一个简单的XMLHttpRequest使用示例，通过这个例子，我们可以实现异步地向服务器发送数据，获取并处理返回的数据，而无需刷新整个页面。在实际项目中，XMLHttpRequest常常被用于AJAX（Asynchronous ...
使用XMLHttpRequest对象.doc
01-08
XMLHttpRequest对象是Ajax技术的核心，它允许Web应用程序在不刷新整个页面的情况下与服务器进行异步数据交换，从而实现页面的局部更新。这个对象在不同浏览器中的实现方式有所不同，最初由IE5作为ActiveX组件引入，...
javascript一个无懈可击的实例化XMLHttpRequest的方法
12-09
1. 如果浏览器支持`window.XMLHttpRequest`，则直接创建一个新的XMLHttpRequest对象。这是非IE浏览器的标准实现方式，包括Firefox、Chrome、Safari等。 2. 如果是Internet Explorer，由于早期版本的IE使用...
如何用ajax来创建一个XMLHttpRequest对象
12-08
为了简化代码和提高可维护性，你可以将创建XMLHttpRequest对象的过程封装到一个单独的函数中，如`CreateHTTPObject()`所示： ```javascript function CreateHTTPObject() { var xmlhttp; try { xmlhttp = new ...
XMLHttpRequest中的GET和Post
张晓
01-11 9183
看了ajax的视频后知道了传送数据有post和get两种方法，但是为什么这么用不明白，以下是我做的一点总结。 一、什么是Get和Post方式 1.Get方式      用get方式可传送简单数据，但大小一般限制在1KB下，数据追加到url中发送（http的header传送），也就是说，浏览器将各个表单字段元素及其数据按照URL参数的格式附加在请求行中的资源路径后面。另外最重要
XMLHttpRequest
m0_62962469的博客
04-18 829
XMLHttpRequest，是浏览器提供的JavaScript对象，通过它可以请求服务器上的数据资源。之前所学的Jquery中的ajax函数，就是基于xhr对象封装出来的。 利用xhr发起get请求： 1.创建xhr对象。 var xhr = new XMLHttpRequest() 2.调用open函数，指定请求方式与url地址 xhr.open('get', 'http://www.liulongbin.top:3006/api/getbooks') 3.调用send函数
XML笔记day04 XMLHttpRequest 对象+XML解析器+XML DOM+XML应用实例
奇迹
01-03 737
文章目录XMLHttpRequest 对象XML Parser解析器XML DOM在 HTML 页面中显示 XML 数据XML应用程序实例附： XMLHttpRequest 对象 XMLHttpRequest 对象用于在后台与服务器交换数据。 XMLHttpRequest 对象能够： 在不重新加载页面的情况下更新网页 在页面已加载后从服务器请求接受数据 在后台向服务器发送数据 创建一个 XMLHttpRequest 对象 所有现代浏览器（IE7+、Firefox、Chrome、Safari 和 Opera
XMLHttpRequest—必知必会 （收藏，实用）
chelen_jak的专栏
04-15 1164
原文出处：https://www.jianshu.com/p/918c63045bc3 （简书小军617） 延伸阅读：XMLHttpRequest使用详解 （含：跨域资源共享（CORS））
使用XMLHttpRequest获取Web资源
m15933025112的博客
04-04 321
Ajax入门范例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ajax入门范例</title> </head> <body> <script type="text/javascript"...
XmlHttpRequest对象的获取及相关操作
weixin_34405332的博客
11-10 226
一、获取XMLHttpRequest对象 方案一： function ajaxFunction(){ var xmlHttp; try{ // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e){ try{// Internet Ex...
XHR-XMLHttpRequest
顺其自然~专栏
02-18 2007
XMLHttpRequest 对象是 Ajax 的关键。它从 2000 年 7 月发布的 IE 5.5 开始可用，但是直到 2005 年 Ajax 和 Web 2.0 变得流行起来它都没有完全被发觉。 XMLHttpRequest (XHR) 是一个可以用 JavaScript，JScript，VBScript 和其他 Web 浏览器脚本语言传输和操作 XML 数据，以及使用 HTTP 从 Web 服务器上在网页客户端和服务端之间建立一个独立连接通道的 API。 调用 XMLHttpRequest 返回
使用 XMLHttpRequest 实现 ajax
风如也的博客
02-13 1477
使用 XMLHttpRequest 实现 ajax function ajax (url, method, body, headers) { return new Promise((resolve, reject) => { let request = new XMLHttpRequest() request.open(method, url) // 初始化一个请求 for (let key in headers) { request.setRequestHea
Vb6使用XMLHttpRequest请求post数据，返回JSON数据
最新发布
05-15
好的，我现在需要帮助用户在VB6中使用XMLHttpRequest发送POST请求并解析返回的JSON数据。首先，我得回忆一下VB6中如何操作XMLHttpRequest。VB6通常使用MSXML2库来处理HTTP请求，所以可能需要引用Microsoft XML库，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值