XMLHttpRequest 实现两数相加

最新推荐文章于 2020-10-04 09:14:45 发布

啋菇凉的尛蘑菇

最新推荐文章于 2020-10-04 09:14:45 发布

阅读量601

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML

本文链接：https://blog.youkuaiyun.com/wangyingtong/article/details/13628851

HTML 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个简单的前端异步请求案例，通过构建两个文本框输入数字，并利用按钮触发askServer()函数，向服务器发送异步请求进行数字相加运算，无需刷新页面即可展示结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.构建两个文本框,用于输入数字

<div>
            <p>
                Enter two numbers:
                <input id="number1" type="number" />
                <input id="number2" type="number" />
            </p>
            <p>
                To ask the server to add them, without refreshing the page, click this button:
                <button onclick="askServer()">Ask the Server</button>
            </p>
</div>
<p id="result">d</p>

2.样式

 	div {
                padding: 10px;
                border: 1px thin black;
                width: 1000px;
                margin: auto;
                background-color: #FBF3CB;
     		}

                div p {
                    font-family: Verdana;
                    font-size: 12px;
                }

                div input {
                    width: 75px;
                }

3 按钮点击事件触发方法askServer(),

//--构建方法前,首先创建一个XMLHttpRequest对象
  var req = new XMLHttpRequest();
 
            function askServer() {
		//分别获取文本框的数值
                var number1 = document.getElementById("number1").value;
                var number2 = document.getElementById("number2").value;
		//拼接URL的参数部分
                var dataToSend = "?number1=" + number1 + "&number2=" + number2 + "";

		//准备发送请求，调用open方法,三个参数：Get/POST、URL、是否异步操作
                req.open("GET", "http://prosetech.com/html5/Chapter%2011/Display.php?code=WebCalculator.php" + dataToSend, true);		//发送请求前，为XMLHttpRequest的onreadystatechange的事件指定处理方法，委托到handleServerResponse
                req.onreadystatechange = handleServerResponse;

		//发送请求
                req.send();
                document.getElementById("result").innerHTML = "The request has been sent";
            }
            function handleServerResponse() {

		//接受响应时，验证readyState【1】初始化完毕【2】请求已发送、【3】已经接收部分响应、【4请求响应完成】
		//status【401】不允许访问、【404】没有找到、【302】已经移动、【503】服务器繁忙
                if (req.readyState == 4 && req.status == 200) {

		    //在	responseText中获取结果
                    var result = req.responseText;
                    document.getElementById("result").innerHTML = "The answer is:" + result;
                }
            }