原生JS利用XMLHttpRequest实现Get和Post请求

之前用jQuery的时候经常使用$.ajax()方法发送请求,由于最近一直在捣鼓原生JS,所以对XMLHttpRequest作了一番研究,下面看一个例子:输入两个数,计算他们的和,这里使用XMLHttpRequest实现。
在这里插入图片描述
Get请求代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>测试</title>
</head>
<body>
    <input id="num_one" type="text" /> + <input id="num_two" type="text" /> = <input id="num_res" type="text" /> 
    <button id="btn">计算</button>
    <script>
        document.getElementById('btn').onclick = function () {
            getData();
        }

        function getData() {
            // 获取数据
            var num_one = document.getElementById('num_one').value;
            var num_two = document.getElementById('num_two').value;
            var url = 'ashx/TestHandler.ashx?num_one=' + num_one + '&num_two=' + num_two;

            // 发送请求
            var xhr = new XMLHttpRequest();
            xhr.open('get', url);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    document.getElementById('num_res').value = xhr.responseText;
                }
            }
            xhr.send();
        }
    </script>
</body>
</html>

Post请求代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>测试</title>
</head>
<body>
    <input id="num_one" type="text" /> + <input id="num_two" type="text" /> = <input id="num_res" type="text" /> 
    <button id="btn">计算</button>
    <script>
        document.getElementById('btn').onclick = function () {
            postData();
        }
        function postData() {
            // 获取数据
            var num_one = document.getElementById('num_one').value;
            var num_two = document.getElementById('num_two').value;
            var url = 'ashx/TestHandler.ashx?num_one=' + num_one + '&num_two=' + num_two;

            // 发送请求
            var xhr = new XMLHttpRequest();
            xhr.open('post', url);
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    document.getElementById('num_res').value = xhr.responseText;
                }
            }
            xhr.send();
        }
    </script>
</body>
</html>

后台代码:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace WebApplication1.ashx
{
    /// <summary>
    /// TestHandler 的摘要说明
    /// </summary>
    public class TestHandler : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";

            int num_one = int.Parse(context.Request["num_one"].ToString());
            int num_two = int.Parse(context.Request["num_two"].ToString());

            context.Response.Write((num_one + num_two).ToString());
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

这里需要注意:xhr.readyState表示XMLHttpRequest对象的状态:
0:未初始化。对象已创建,未调用open;
1:open方法成功调用,但Sendf方法未调用;
2:send方法已经调用,尚未开始接受数据;
3:正在接受数据。Http响应头信息已经接受,但尚未接收完成;
4:完成,即响应数据接受完成。
xhr.status服务器返回的http状态码:
200:表示“成功”;
404:表示“未找到”;
500:表示“服务器内部错误”等。
xhr.responseText表示后台返回的结果

### 回答1: 使用XMLHttpRequest对象可以实现get和post请求:// get请求 var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://www.example.com/data.json', true); xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ console.log(xhr.responseText); } } } xhr.send();// post请求 var xhr = new XMLHttpRequest(); xhr.open('POST', 'http://www.example.com/data.json', true); xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ console.log(xhr.responseText); } } } xhr.send('data=test'); ### 回答2: 要使用原生JavaScript来实现GET和POST请求,可以使用XMLHttpRequest对象进行数据的发送和接收。 GET请求实现可以按照以下步骤进行: 1. 创建XMLHttpRequest对象:使用"new XMLHttpRequest()"来创建一个新的XMLHttpRequest对象。 2. 设置请求的方法和URL:使用open()方法设置请求的方法为"GET",并指定请求的URL。 3. 发送请求:使用send()方法发送请求。对于GET请求,可以将参数以字符串形式加在URL的末尾。 4. 监听响应状态变化:使用onreadystatechange属性来监听XMLHttpRequest对象的状态变化,判断是否接收到了响应。 5. 处理响应:在状态值为4且响应状态码为200时,表示请求成功,可以通过responseText属性获取响应的内容。 以下是一个简单的GET请求的示例代码: ```javascript let xhr = new XMLHttpRequest(); xhr.open('GET', 'https://api.example.com/data', true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); } }; xhr.send(); ``` POST请求实现相对复杂一些,需要在发送请求前设置请求头和请求体的内容。可以按照以下步骤进行: 1. 创建XMLHttpRequest对象:同样使用"new XMLHttpRequest()"来创建一个新的XMLHttpRequest对象。 2. 设置请求的方法和URL:使用open()方法设置请求的方法为"POST",并指定请求的URL。 3. 设置请求头:使用setRequestHeader()方法设置请求头的内容,例如设置"Content-Type"为"application/json"。 4. 设置请求体:使用send()方法发送请求体的内容,以字符串形式传递参数和数据。 5. 监听响应状态变化:同样使用onreadystatechange属性来监听XMLHttpRequest对象的状态变化,判断是否接收到了响应。 6. 处理响应:在状态值为4且响应状态码为200时,表示请求成功,可以通过responseText属性获取响应的内容。 以下是一个简单的POST请求的示例代码: ```javascript let xhr = new XMLHttpRequest(); xhr.open('POST', 'https://api.example.com/data', true); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); } }; xhr.send(JSON.stringify({ key1: 'value1', key2: 'value2' })); ``` 以上就是用原生JavaScript实现GET和POST请求的简单示例。实际应用中,还可以根据需要添加错误处理、参数处理等功能。 ### 回答3: 使用JavaScript原生实现GET请求可以通过创建一个XMLHttpRequest对象,并使用open()方法指定请求的方法和URL,例如: ```javascript let xhr = new XMLHttpRequest(); xhr.open('GET', 'http://example.com/api/data', true); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { // 请求成功 let response = JSON.parse(xhr.responseText); console.log(response); } }; xhr.send(); ``` 上述代码创建了一个GET请求,URL为http://example.com/api/data,回调函数onreadystatechange会在readyState为4(请求已完成)且status为200(成功)时执行。在回调函数中可以处理服务器返回的数据。 使用JavaScript原生实现POST请求也是通过创建XMLHttpRequest对象,但需要使用send()方法发送请求数据,并设置合适的请求头。例如: ```javascript let xhr = new XMLHttpRequest(); xhr.open('POST', 'http://example.com/api/data', true); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { // 请求成功 let response = JSON.parse(xhr.responseText); console.log(response); } }; let data = {name: 'John', age: 25}; xhr.send(JSON.stringify(data)); ``` 上述代码创建了一个POST请求,URL为http://example.com/api/data,并设置请求头Content-Type为application/json表示发送的数据为JSON格式。请求体数据需要通过JSON.stringify()方法将对象转换为字符串,然后通过send()方法发送。同样,在回调函数中可以处理服务器返回的数据。 这些是使用JavaScript原生实现GET和POST请求的简单示例,可以根据具体的需求和使用场景进行灵活调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值