• XMLHttpRequest的亲密接触(2.1)——简单示例


      本文只为描述机制,例子很简单,见笑。

      XMLHttpRequest这个对象的作用:用于在后台与服务器交换数据。本文以一个简单代码示例,既是整理,也是总结。

    主要功能:

      客户浏览器输入两个数,服务器相加计算,结果返回客户端;

    技术路线:

      客户浏览器在两个Textbox中输入两个数,通过XMLHttpRequest发送请求并传递消息,经过服务器运算,将结果返回给客户浏览器,并在第三个Textbox显示出。

    技术方案:

      以html为页面即*.htm(不加入任何asp.net控件和代码);

      以javascript传递消息;

      以*.aspx为服务器页面(但不加任何页面元素,仅用cs中的pageload方法写服务功能);

    具体方法:

      1、新建项目“ASP.NET空Web应用程序”,以减少MS自带的一群没用的代码。

      2、添加新项“HTML页”,取名为“HomePage.htm”,手动写入如下代码,即三个textbox和一个button

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2 <html xmlns="http://www.w3.org/1999/xhtml">
    3 <head>
    4 <title>SimpleCalculation</title>
    5 </head>
    6 <body>
    7 <input id="textbox1" type="text" style="100px; height:20px; font-weight:bold" />
    8 &nbsp+&nbsp
    9 <input id="textbox2" type="text" style="100px; height:20px; font-weight:bold" />
    10 &nbsp=&nbsp
    11 <input id="textbox3" type="text" style="100px; height:20px; font-weight:bold" />
    12 <input name="try" type="button" value="GET SUM" />
    13 </body>
    14 </html>

    3、右键添加一个空“Web窗体”(*.aspx)作为服务器页面备用,名为“WebService.aspx”,稍后用来实现服务器功能。

    4、“修改”第2步中代码:用Javascript写入button的“onclick”事件,即通过XMLHttpRequest发送请求和消息的实现。至此,客户页面及其功能代码已完成,完整代码如下:

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2 <html xmlns="http://www.w3.org/1999/xhtml">
    3 <head>
    4 <title>SimpleCalculation</title>
    5 <script type="text/javascript">
    6 var xmlHttpReq; //定义XMLHttpRequest对象
    7 function sendRequest() {
    8 var para1 = document.getElementById("textbox1").value;//获取第一个参数
    9 var para2 = document.getElementById("textbox2").value;//获取第二个参数
    10 var url = "WebService.aspx?pa1=" + para1 + "&pa2=" + para2; //组成URL请求
    11
    12 if (window.XMLHttpRequest){//IE7+,chrome,ff等
    13 xmlHttpReq = new XMLHttpRequest();
    14 }
    15 else if (window.ActiveXObject) {//IE5、IE6等
    16 xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
    17 }
    18
    19 if (xmlHttpReq) {//发送请求并传递消息
    20 xmlHttpReq.open("GET", url);
    21 xmlHttpReq.onreadystatechange = callback;
    22 xmlHttpReq.send(null);
    23 }
    24 } //end function
    25
    26 function callback() {//回调函数
    27 alert(xmlHttpReq.readyState.toString()); //非必要,只是为查看状态变化
    28 if (xmlHttpReq.readyState == 4) {
    29 if (xmlHttpReq.status == 200) {
    30 document.getElementById("textbox3").value = xmlHttpReq.responseText;
    31 }
    32 else {
    33 alert("服务器返回状态:" + xmlHttpReq.statuesText);
    34 }
    35 }
    36 }//end function
    37 </script>
    38 </head>
    39 <body>
    40 <input id="textbox1" type="text" style="100px; height:20px; font-weight:bold" />
    41 &nbsp+&nbsp
    42 <input id="textbox2" type="text" style="100px; height:20px; font-weight:bold" />
    43 &nbsp=&nbsp
    44 <input id="textbox3" type="text" style="100px; height:20px; font-weight:bold" />
    45 <input name="try" type="button" value="GET SUM" onclick="sendRequest()" />
    46 </body>
    47 </html>



    5、写一步处理服务器捕捉请求(URL)之后的处理代码,右键WebService.aspx ->查看代码(极其简单,其实这种简单的功能完全可以直接用页面JS实现,再次强调仅为表述“机制”而写本文)

     1 using System;
    2 using System.Collections.Generic;
    3 using System.Linq;
    4 using System.Web;
    5 using System.Web.UI;
    6 using System.Web.UI.WebControls;
    7
    8 namespace mySecondWebsite
    9 {
    10 public partial class WebService : System.Web.UI.Page
    11 {
    12 protected void Page_Load(object sender, EventArgs e)
    13 {
    14 Response.Clear();
    15 string a = Request.QueryString["pa1"];//用QueryString捕捉请求中的参数
    16 string b = Request.QueryString["pa2"];//QueryString为“集合”,后面要用方括号
    17 int c = int.Parse(a) + int.Parse(b);
    18 Response.Write(c.ToString());//通过response对象返回
    19 Response.End();
    20 }
    21 }
    22 }

    6、实现页面效果(chrome)

    至此,示例已全部完成。当初我关心的,而且总是弄不清的就是,页面用户元素,也就是页面变量是如何“流动”的,在上述示例中,两个“textbox”中相当于“用户变量”,第三个“textbox”是服务器处理后的返回结果。




    依旧还有问题:

    听说这个是Rest风格,我弄不太明白,等高手,什么是rest风格?可否有高手能形象点说明?





  • 相关阅读:
    开发环境SQL Server 数据库安装和配置
    使用Hogo+LoveIt主题搭建博客网站
    .Net6 winform 程序使用依赖注入
    Redis Stream 的一点理解
    Node.js躬行记(16)——活动配置化
    对求职面试者的一点小建议
    幕后产品
    Node.js躬行记(15)——活动规则引擎
    深入理解什么是LSMTree
    数字孪生智慧服务器:信息安全监控平台
  • 原文地址:https://www.cnblogs.com/zhuyuchen/p/2385818.html
Copyright © 2020-2023  润新知