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

zoukankan html css js c++ java

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

先看一个简单的XMLHTTPRequest，然后对这个demo稍加修改，只需要简单敲几下键盘就可以实现足以让一个从未自己实现过异步更新的菜鸟web程序员激动不已。

我的最终目标是实现一个数字时钟。你用javascript完全可以实现，但是这和我今天要实现的时钟完全是不同的机制。

A:先来看如何实现一个简单的XMLHTTPRequest：

其中要用到一个XML文件：SimpleResponse.xml，这个文件你可以用记事本建立并随便打几个文字，比如HelloWorld!之类的。这个文件只是代表了服务端处理方法，也就是说，XMLHTTPRequest会对其发出请求，然后从这个“伪服务端程序”获取处理结果（其实这里仅仅获取了它的内容）。这里只是简单的模仿一个XMLHTTPRequest请求和服务端的响应并把结果呈现给用户。

这个是《ajax基础教程》里的异步请求的demo，很简单但是实现了异步请求。通过这个demo了解XMLHTTPRequest对象的基本使用方法：

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

function startRequest()
{
createXMLHttpRequest();
xmlhttp.onreadystatechange=handleStateChange;
xmlhttp.open("GET","SimpleResponse.xml",true);
xmlhttp.send(null);
}

function handleStateChange()
{
//alert("Ok");
if(xmlhttp.readyState==4)
   if(xmlhttp.status==200)
   {
    //alert("The server replied: "+xmlhttp.responseText);
    document.write(xmlhttp.responseText);
   }
}
</script>

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

</body>
</html>

B：对以上代码进行一些加工，让一个后台页面专门来处理xmlhttp请求然后把请求结果返回（就我本人目前对WebService的一知半解来看，此处应该不同于WebService）。我们会用到一个asp.net页面(default3.aspx)来返回服务器的当前时间。然后在前台js端，只要每隔一秒钟对这个asp.net页面提出XMLHTTPRequest请求，就可以每秒钟更新时间的显示了。当然在实际开发中，这样来实现数字时钟是十分愚蠢的，但是，对于学习ajax来说，这十个不错的开始，至少我个人认为是这样。

<!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>无标题页</title>

     <script language="javascript" type="text/javascript">
    var xmlhttp;

    function createXMLHttpRequest()
{
    if(window.ActiveXObject)
    {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        //alert("IE");
    }
    else if(window.XMLHttpRequst)
    {
        xmlhttp=new XMLHttpRequest();
    }
}

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

function handleStateChange()
{
    var h=document.getElementById("div1");
    if(xmlhttp.readyState==4)
    {
        if(xmlhttp.status==200)
        {

            h.innerHTML=xmlhttp.responseText;
        }
        else if(xmlhttp.status==404)
        {
            h.innerHTML="<br>找不到请求的服务器资源！";
        }
    }
    /*

    //注释掉的这段可以提示各种状态。
    else if(xmlhttp.readyState==0)
    {
        h.innerHTML="<br>未初始化！";
    }
    else if(xmlhttp.readyState==1)
    {
        h.innerHTML="<br>正在加载^^^^^！";
    }
    else if(xmlhttp.readyState==2)
    {
        h.innerHTML="<br>已经加载完成！";
    }
    else if(xmlhttp.readyState==3)
    {
        h.innerHTML="<br>正在和服务器交互";
    }

    */

}


    function testService()
    {
        setInterval("startRequest();",1000);

    }


    </script>



</head>
<body>
<input type="button" value="WebService" onclick="testService();" id="Button3" />
<div id="div1"></div>

</body>
</html>

defaul3.aspx：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

default3.aspx.cs：

//======================================================================
//
//        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
//
//
//======================================================================

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)
    {
        //当客户端每次对这个页面进行请求的时候，我就返回一个"Hello World!  "加当前的时分秒。
        Response.Write("Hello World!  "+DateTime.Now.ToLongTimeString());
    }
}

在IIS上或者直接在你的vs中调试这个index.html，按下Start按钮就可以看到一个正在运行的时钟了。

////////////////////////////////
////////Sixi. Let it be.../////
//////////////////////////////

查看全文

相关阅读:
php 生成带图片的二维码
 ajax 请求添加正在加载中遮罩层
 uedit上传图片时文件选择框延迟弹出的解决方法
 gulp基本用法
 JS引擎的执行机制
 前端知识体系
 css基础
 gulp使用入门
 AngularJS最佳实践
 Restful API 待更新。。。

原文地址：https://www.cnblogs.com/sixiweb/p/1342019.html

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

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