原生JS发送GET、POST请求

一、使用XMLHttpRequest

主要分三步:

第一步:创建需要的对象,这里主要用到的是XMLHttpRequest,注意需要考虑早期的IE;

第二步:连接和发送;

第三步:接收;

二、发送post请求并处理

  var httpRequest = new XMLHttpRequest();
    httpRequest.open("POST",url,true);
    httpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    httpRequest.send("keyword="+keyword+"&name="+name);
    httpRequest.onreadystatechange = ()=>{
        if(httpRequest.readyState == 4 && httpRequest.status == 200){
            var data = JSON.parse(httpRequest.responseText);
            console.log(data);
        }
    }    

发送Get请求并处理

var httpRequest = new XMLHttpRequest();//第一步:建立所需的对象
        httpRequest.open('GET', 'url', true);//第二步:打开连接  将请求参数写在url中  ps:"./Ptest.php?name=test&nameone=testone"
        httpRequest.send();//第三步:发送请求  将请求参数写在URL中
        /**
         * 获取数据后的处理程序
         */
        httpRequest.onreadystatechange = function () {
            if (httpRequest.readyState == 4 && httpRequest.status == 200) {
                var json = httpRequest.responseText;//获取到json字符串,还需解析
                console.log(json);
            }
        };
### 回答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、付费专栏及课程。

余额充值