首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

AJAX学习笔记一：简单的XMLHTTPRequest示例和asp.net异步更新。

作者：书友33947127 | 来源：互联网 | 2023-09-04 01:22
先看一个简单的XMLHTTPRequest，然后对这个demo稍加修改，只需要简单敲几下键盘就可以实现足以让一个从未自己实现过异步更新的菜鸟web程序员
先看一个简单的XMLHTTPRequest&＃xff0c;然后对这个demo稍加修改&＃xff0c;只需要简单敲几下键盘就可以实现足以让一个从未自己实现过异步更新的菜鸟web程序员激动不已。
我的最终目标是实现一个数字时钟。你用Javascript完全可以实现&＃xff0c;但是这和我今天要实现的时钟完全是不同的机制。
A:先来看如何实现一个简单的XMLHTTPRequest&＃xff1a;
其中要用到一个XML文件&＃xff1a;SimpleResponse.xml&＃xff0c;这个文件你可以用记事本建立并随便打几个文字&＃xff0c;比如HelloWorld!之类的。这个文件只是代表了服务端处理方法&＃xff0c;也就是说&＃xff0c;XMLHTTPRequest会对其发出请求&＃xff0c;然后从这个“伪服务端程序”获取处理结果&＃xff08;其实这里仅仅获取了它的内容&＃xff09;。这里只是简单的模仿一个XMLHTTPRequest请求和服务端的响应并把结果呈现给用户。
这个是《ajax基础教程》里的异步请求的demo&＃xff0c;很简单但是实现了异步请求。通过这个demo了解XMLHTTPRequest对象的基本使用方法&＃xff1a;


<html>
<head>
<title>
XMLHTTPRequest sample!
title>
ExpandedBlockStart.gifContractedBlock.gif<script language&＃61;"Javascript" type&＃61;"text/Javascript">
var xmlhttp;
function createXMLHttpRequest()
ExpandedSubBlockStart.gifContractedSubBlock.gif{//This Function will create a XMLHttpRequest object .
if(window.ActiveXObject)
ExpandedSubBlockStart.gifContractedSubBlock.gif{
   xmlhttp&＃61;new ActiveXObject("Microsoft.XMLHTTP");
   //alert("IE");
}
else if(window.XMLHttpRequst)
ExpandedSubBlockStart.gifContractedSubBlock.gif{//firefox and the other broswers.
   xmlhttp&＃61;new XMLHttpRequest();
}
}

function startRequest()
ExpandedSubBlockStart.gifContractedSubBlock.gif{
createXMLHttpRequest();
xmlhttp.onreadystatechange&＃61;handleStateChange;
xmlhttp.open("GET","SimpleResponse.xml",true);
xmlhttp.send(null);
}

function handleStateChange()
ExpandedSubBlockStart.gifContractedSubBlock.gif{
//alert("Ok");
if(xmlhttp.readyState&＃61;&＃61;4)
   if(xmlhttp.status&＃61;&＃61;200)
ExpandedSubBlockStart.gifContractedSubBlock.gif   {
    //alert("The server replied: "&＃43;xmlhttp.responseText);
    document.write(xmlhttp.responseText);
   }
}
script>



head>
<body>
<form action&＃61;"#">
<input type&＃61;"button" value&＃61;"Test Server Response" onclick&＃61;"startRequest();" />
form>

body>
html>
B&＃xff1a;对以上代码进行一些加工&＃xff0c;让一个后台页面专门来处理xmlhttp请求然后把请求结果返回&＃xff08;就我本人目前对WebService的一知半解来看&＃xff0c;此处应该不同于WebService&＃xff09;。我们会用到一个asp.net页面(default3.aspx)来返回服务器的当前时间。然后在前台js端&＃xff0c;只要每隔一秒钟对这个asp.net页面提出XMLHTTPRequest请求&＃xff0c;就可以每秒钟更新时间的显示了。当然在实际开发中&＃xff0c;这样来实现数字时钟是十分愚蠢的&＃xff0c;但是&＃xff0c;对于学习ajax来说&＃xff0c;这十个不错的开始&＃xff0c;至少我个人认为是这样。
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns&＃61;"http://www.w3.org/1999/xhtml" >
<head>
    <title>无标题页title>
    
     <script language&＃61;"Javascript" type&＃61;"text/Javascript">
    var xmlhttp;
    
    function createXMLHttpRequest()
{
    if(window.ActiveXObject)
    {
        xmlhttp&＃61;new ActiveXObject("Microsoft.XMLHTTP");
        //alert("IE");
    }
    else if(window.XMLHttpRequst)
    {
        xmlhttp&＃61;new XMLHttpRequest();
    }
}

function startRequest()
{
    createXMLHttpRequest();
    xmlhttp.onreadystatechange&＃61;handleStateChange;
    xmlhttp.open("POST","Default3.aspx",true);
    xmlhttp.send(null);
}

function handleStateChange()
{
    var h&＃61;document.getElementById("div1");
    if(xmlhttp.readyState&＃61;&＃61;4)
    {
        if(xmlhttp.status&＃61;&＃61;200)
        {
            
            h.innerHTML&＃61;xmlhttp.responseText;
        }
        else if(xmlhttp.status&＃61;&＃61;404)
        {
            h.innerHTML&＃61;"
找不到请求的服务器资源&＃xff01;";
        }
    }
    /*
    
    //注释掉的这段可以提示各种状态。
    else if(xmlhttp.readyState&＃61;&＃61;0)
    {
        h.innerHTML&＃61;"
未初始化&＃xff01;";
    }
    else if(xmlhttp.readyState&＃61;&＃61;1)
    {
        h.innerHTML&＃61;"
正在加载^^^^^&＃xff01;";
    }
    else if(xmlhttp.readyState&＃61;&＃61;2)
    {
        h.innerHTML&＃61;"
已经加载完成&＃xff01;";
    }
    else if(xmlhttp.readyState&＃61;&＃61;3)
    {
        h.innerHTML&＃61;"
正在和服务器交互";
    }
    
    */
    
}
    
    
    function testService()
    {
        setInterval("startRequest();",1000);
      
    }
    
    
    script>
    
    
    
head>
<body>
 <input type&＃61;"button" value&＃61;"WebService" onclick&＃61;"testService();" id&＃61;"Button3" />
 <div id&＃61;"div1">div>
 
body>
html>
defaul3.aspx&＃xff1a;
<%&＃64; Page Language&＃61;"C#" AutoEventWireup&＃61;"true" CodeFile&＃61;"Default3.aspx.cs" Inherits&＃61;"Default3" %>
default3.aspx.cs&＃xff1a;

 
//&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;
//
//        Copyright (C) 2008-2009 **** Sixi ****.
//        All rights reserved
//        guid1:  3b1a48f0-1179-4196-b701-42432118f7a4
//        guid2:  36415080-496a-40a3-a899-e14a63eca7e1
//        guid3:  a7dbe67f-1adb-4785-bd19-b26033ee8af6
//        guid4:  7e1ef938-22f1-4459-8fb8-923459574352
//        guid5:  c4857688-36f0-4138-95e8-0d7282950486
//        CLR版本:            2.0.50727.42
//        新建项输入的名称: Default3
//        机器名称:            SIXI
//        注册组织名:         HZX
//        命名空间名称:      
//        文件名:              Default3
//        当前系统时间:      11/26/2008 17:51:14

//        当前登录用户名:   Administrator
//        创建年份:           2008
//
//        created by SIXI at  11/26/2008 17:51:14
//  
//
//&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class Default3 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        //当客户端每次对这个页面进行请求的时候&＃xff0c;我就返回一个"Hello World!  "加当前的时分秒。
        Response.Write("Hello World!  "&＃43;DateTime.Now.ToLongTimeString());
    }
}
 
在IIS上或者直接在你的vs中调试这个index.html&＃xff0c;按下Start按钮就可以看到一个正在运行的时钟了。

转载于:https://www.cnblogs.com/sixiweb/archive/2008/11/27/1342019.html


推荐阅读
  • java

    AJAX的POST请求及实现数据修改功能的方法

    本文介绍了使用AJAX的POST请求实现数据修改功能的方法。通过ajax-post技术，可以实现在输入某个id后，通过ajax技术调用post.jsp修改具有该id记录的姓名的值。文章还提到了AJAX的概念和作用，以及使用async参数和open()方法的注意事项。同时强调了不推荐使用async=false的情况，并解释了JavaScript等待服务器响应的机制。 ... [详细]
  • java

    Java工具类库Hutool介绍及功能概述

    本文介绍了Java工具类库Hutool，该工具包封装了对文件、流、加密解密、转码、正则、线程、XML等JDK方法的封装，并提供了各种Util工具类。同时，还介绍了Hutool的组件，包括动态代理、布隆过滤、缓存、定时任务等功能。该工具包可以简化Java代码，提高开发效率。 ... [详细]
  • java

    flowable工作流 流程变量_信也科技工作流平台的技术实践

    flowable工作流 流程变量_信也科技工作流平台的技术实践
    1背景随着公司业务发展及内部业务流程诉求的增长,目前信息化系统不能够很好满足期望,主要体现如下：目前OA流程引擎无法满足企业特定业务流程需求，且移动端体 ... [详细]
  • controller

    如何在codeigniter中识别angularjs请求

    本文讨论了如何在codeigniter中识别来自angularjs的请求，并提供了两种方法的代码示例。作者尝试了$this->input->is_ajax_request()和自定义函数is_ajax()，但都没有成功。最后，作者展示了一个ajax请求的示例代码。 ... [详细]
  • config

    网络请求模块选择——axios框架的基本使用和封装

    网络请求模块选择——axios框架的基本使用和封装
    本文介绍了选择网络请求模块axios的原因，以及axios框架的基本使用和封装方法。包括发送并发请求的演示，全局配置的设置，创建axios实例的方法，拦截器的使用，以及如何封装和请求响应劫持等内容。 ... [详细]
  • java

    SpringMVC接收请求参数的方式总结

    SpringMVC接收请求参数的方式总结
    本文总结了在SpringMVC开发中处理控制器参数的各种方式，包括处理使用@RequestParam注解的参数、MultipartFile类型参数和Simple类型参数的RequestParamMethodArgumentResolver，处理@RequestBody注解的参数的RequestResponseBodyMethodProcessor，以及PathVariableMapMethodArgumentResol等子类。 ... [详细]
  • python

    svnWebUI：一款现代化的svn服务端管理软件

    svnWebUI：一款现代化的svn服务端管理软件
    svnWebUI是一款图形化管理服务端Subversion的配置工具，适用于非程序员使用。它解决了svn用户和权限配置繁琐且不便的问题，提供了现代化的web界面，让svn服务端管理变得轻松。演示地址：http://svn.nginxwebui.cn:6060。 ... [详细]
  • config

    VScode格式化文档换行或不换行的设置方法

    VScode格式化文档换行或不换行的设置方法
    本文介绍了在VScode中设置格式化文档换行或不换行的方法，包括使用插件和修改settings.json文件的内容。详细步骤为：找到settings.json文件，将其中的代码替换为指定的代码。 ... [详细]
  • java

    XML介绍与使用的概述及标签规则

    XML介绍与使用的概述及标签规则
    本文介绍了XML的基本概念和用途，包括XML的可扩展性和标签的自定义特性。同时还详细解释了XML标签的规则，包括标签的尖括号和合法标识符的组成，标签必须成对出现的原则以及特殊标签的使用方法。通过本文的阅读，读者可以对XML的基本知识有一个全面的了解。 ... [详细]
  • stream

    java 模拟get post请求_Java后台模拟发送http的get和post请求，并测试

    个人学习使用：谨慎参考1Client类importcom.thoughtworks.gauge.Step;importcom.thoughtworks.gauge.T ... [详细]
  • config

    HDFS2.x新特性

    HDFS2.x新特性
    一、集群间数据拷贝scp实现两个远程主机之间的文件复制scp-rhello.txtroothadoop103:useratguiguhello.txt推pushscp-rr ... [详细]
  • config

    Android系统移植与调试之如何修改Android设备状态条上音量加减键在横竖屏切换的时候的显示于隐藏

    Android系统移植与调试之如何修改Android设备状态条上音量加减键在横竖屏切换的时候的显示于隐藏
    本文介绍了如何修改Android设备状态条上音量加减键在横竖屏切换时的显示与隐藏。通过修改系统文件system_bar.xml实现了该功能，并分享了解决思路和经验。 ... [详细]
  • controller

    javaweb多图片打包下载，弹出提示框问题_html/css_WEBITnose

    在springmvc框架中，前台ajax调用方法，对图片批量下载，如何弹出提示保存位置选框？Controller方法 ... [详细]
  • python

    恶意软件分析的最佳编程语言及其应用

    恶意软件分析的最佳编程语言及其应用
    本文介绍了学习恶意软件分析和逆向工程领域时最适合的编程语言，并重点讨论了Python的优点。Python是一种解释型、多用途的语言，具有可读性高、可快速开发、易于学习的特点。作者分享了在本地恶意软件分析中使用Python的经验，包括快速复制恶意软件组件以更好地理解其工作。此外，作者还提到了Python的跨平台优势，使得在不同操作系统上运行代码变得更加方便。 ... [详细]
  • go

    一次上线事故，30岁+的程序员踩坑经验之谈

    一次上线事故，30岁+的程序员踩坑经验之谈
    本文主要介绍了一位30岁+的程序员在一次上线事故中踩坑的经验之谈。文章提到了在双十一活动期间，作为一个在线医疗项目，他们进行了优惠折扣活动的升级改造。然而，在上线前的最后一天，由于大量数据请求，导致部分接口出现问题。作者通过部署两台opentsdb来解决问题，但读数据的opentsdb仍然经常假死。作者只能查询最近24小时的数据。这次事故给他带来了很多教训和经验。 ... [详细]
author-avatar
书友33947127
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有