原生Js封装Get，Post请求和ajax整体封装和测试

最新推荐文章于 2024-01-04 14:32:55 发布
最新推荐文章于 2024-01-04 14:32:55 发布
阅读量2.5k 收藏 5
点赞数 1
分类专栏： ajax 文章标签： 原生js封装get请求 原生js封装post请求 原生js封装ajax ajax封装 原生Js封装Get，Post请求和ajax整体封装
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jackson23333/article/details/81840960
版权

/*ajax封装-get
       @param url:请求的路径
       @param data:发送的数据,格式:key1=value1&key2=value2
       @param callback:回调函数,方便用户处理自己的数据,传递逻辑
*/
function get(url, data, callback){
       //创建异步对象
       var xhr = new XMLHttpRequest();
       //判断data是否为空
       if(data){
           url=url+'?'+data;
       }
       //设置请求行
       xhr.open('get',url);
       //设置请求头(get可以省略)
       //注册回调函数
       xhr.onreadystatechange = function(){
            if(xhr.readyState==4&&xhr.status==200){
                //调用传递的回调函数
                callback(xhr.responseText);
            }
       }
       //发送请求主体
       xhr.send(null);
}

/*ajax封装-post
       @param url:请求的路径
       @param data:发送的数据,格式:key1=value1&key2=value2
       @param callback:回调函数,方便用户处理自己的数据,传递逻辑
*/
function post(url, data, callback){
       //创建异步对象
       var xhr = new XMLHttpRequest();
       //设置请求行
       xhr.open('post',url);
       //设置请求头(post有数据发送才需要设置请求头)
       //判断是否有数据发送
       if(data){
             xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
       }
       //注册回调函数
       xhr.onreadystatechange = function(){
             if(xhr.readyState==4&&xhr.status==200){
                 //调用传递的回调函数
                 callback(xhr.responseText);
             }
       }
       //发送请求主体
       xhr.send(data);
}

/*ajax封装
       @param option:传入一个对象
       属性分别为(顺序可以打乱):
            url:请求的路径
            type:请求的不同类型get或post
            data:发送的数据,格式:key1=value1&key2=value2
            callback:回调函数,方便用户处理自己的数据,传递逻辑           
*/
function ajax(option){
       //创建异步对象
       var xhr = new XMLHttpRequest();
       //如果是get并且有数据
       if(option.type=='get'&&option.data){
            option.url=option.url+'?'+option.data;
       }
       //设置请求行
       xhr.open(option.type,option.url);
       //设置请求头(post有数据发送才需要设置请求头)
       //判断是否有数据发送
       if(option.type=='post'&&option.data){
             xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
       }
       //注册回调函数
       xhr.onreadystatechange = function(){
             if(xhr.readyState==4&&xhr.status==200){
                 //接收返回的数据类型
                 var type = xhr.getResponseHeader('Content-Type');
                 //json格式
                 if(type.indexOf('json')!=-1){
                      option.callback(JSON.parse(xhr.responseText));
                 }
                 //xml格式
                 else if(type.indexOf('xml')!=-1){
                      option.callback(xhr.responseXML);
                 }
                 //普通格式
                 else{
                      option.callback(xhr.responseText);
                 }
             }
       }
       //发送请求主体
       //判断不同的请求类型
       xhr.send(option.type=='post'?option.data:null);
}

测试封装的效果代码html：

<!DOCTYPE html>
<html>
        <head>
                 <title>测试ajax封装</title>   
                 <meta charset="UTF-8" />   
        </head>
        <body>
                  <h1>测试ajax封装</h1>
                  <input class="get" type="button" value="get测试"/>
                  <input class="post" type="button" value="post测试"/>
                  <input class="ajax" type="button" value="ajax测试"/>

                  <script src="ajax_tool.js"></script>
                  <script>
                          //get
                          document.querySelector('.get').onclick = function(){
                               //直接调用get方法,传入三个参数url,data,callback
                               get('./ajax-test.php','name=jackson&friend=german',function(data){
                                     console.log(data);
                               });
                          }
                          //post
                          document.querySelector('.post').onclick = function(){
                               //直接调用post方法,传入三个参数url,data,callback
                               post('./ajax-test.php','name=german&friend=jackson',function(data){
                                     console.log(data);
                               });
                          }
                          document.querySelector('.ajax').onclick = function(){
                               //直接调用ajax方法,传入一个对象
                               ajax({
                                    url:'./ajax-test.php',
                                    type:'post',
                                    data:'kill=电脑&hobby=运动',
                                    callback:function (data){
                                          console.log(data);
                                    }
                               });
                          }

                       </script>
        </body>
</html>

php服务器代码:

<?php
    echo '<h2>打印get请求</h2>';
    print_r($_GET);
    echo '<h2>打印post请求</h2>';
    print_r($_POST);
?>

在测试之前，你可以先去官网 http://phpstudy.php.cn/ 下载phpstudy启动apache服务器，

然后在浏览器地址栏输入127.0.0.1找到html文件运行:

如下图片：

get请求

post请求

ajax-get请求

ajax-post请求

（有什么问题欢迎留言~~）

 

 

 

 

技术成长ing
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生js 封装get ,post, delete 请求的实例
11-30
现在的项目中都在用VUE 以及react 等MVC， MVVM 框架。...POST,GET,DELETE 的请求方式。当然根据不同的公司，不同的方式。都可以自己扩展。目前这个只是针对自己所在公司而已。 function api(url,opt,methods) {
js---封装ajax的get请求和post请求
前端与计算机相关知识的分享，博主的qq523235674
09-19 1542
1、函数接受一个对象配置信息，url为请求的地址，type为请求的类型，data为请求参数，success为请求成功的回调函数，fail为请求失败的回调函数。
使用Jest测试js代码
认定的总要想办法去完成。
02-18 2505
为什么使用Jest?  1. Jest 可以利用其特有的快照测试功能，通过比对 UI 代码生成的快照文件，实现对 React 等常见框架的自动测试。此外， Jest 的测试用例是并行执行的，而且只执行发生改变的文件所对应的测试，提升了测试速度  2.安装配置简单，非常容易上手，几乎是零配置的，通过npm 命令安装就可以直接运行了  3. Jest 内置了测试覆盖率工具istanbul，可以通过命令开启或者在 package.json 文件进行更详细的配置。运行 istanbul 除了会再终端展示测试覆盖率情
js封装ajax 实现GET请求和POST请求
最新发布
m0_49011098的博客
01-04 472
【代码】js封装ajax 实现GET请求和POST请求。
vue中，对于 axios 的封装
bug收集
09-23 210
axios需要进行一些什么配置 1. 设置请求的默认地址baseUrl 2.设置请求超时时间 3.Post请求头的设置 4.拦截器（请求拦截与响应拦截） 5.封装post, get请求 (此示例没有封装，可根据项目情况而定，因为封装后，对于一些特殊接口设置不是太灵活，需要我们项目没有选择封装，如果请求方法比较单一的，可以考虑封装) axios完整封装代码 我们可以将上面的都封装成一个文件axios.js放在util文件夹中 代码如下： import axios...
原生 JS Ajax,GET和POST 请求实例代码
10-22
主要介绍了原生 JS Ajax,GET和POST 请求实例代码的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
12-09
前言：ajax的神奇之处在于JavaScript 可在不重载页面的情况与 Web ...（1）html前端代码get请求方式创建一个ajax实例xhr open()方法传入三个参数，第一个是请求方式（一般为get和post），第二个参数是请求地址，第
浅谈JS原生Ajax,GET和POST
11-23
javascript/js的ajax的GET请求： [removed] /* 创建 XMLHttpRequest 对象 */ var xmlHttp; function GetXmlHttpObject(){ 　if (window.XMLHttpRequest){ 　// code for IE7+, Firefox, Chrome, Opera, Safari 　...
ajax.post封装,AJAX POST请求实现/AJAX封装/node/RESTful api
weixin_32029321的博客
08-05 345
AJAX POST请求实现xhr需要打开POST方式：xhr.open('POST','2.php',true);post方法需要设置请求头：xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')//content-type指定传到服务器的数据类型是哪种,提交表单常用的三种状态(可以跟后台商议确定自定义任意状...
jquery Ajax 全局调用封装实例详解
10-20
主要介绍了jquery Ajax 全局调用封装实例详解的相关资料,需要的朋友可以参考下
Ajax（get和post的请求用原生js打包封装）
qq_45155741的博客
07-04 227
html部分： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/ajax_post_ask.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript">
vue post请求返回数据部分丢失_Vue实战037：axios二次封装和使用
weixin_42592399的博客
01-26 854
什么是axiosAxios 是一个基于 promise 的 HTTP 库，用于浏览器和node.js等http客户端，主要用来向后台发送各种业务请求和特殊处理，由于axios支持后台数据交互、拦截请求和响应、取消请求、超时设定、转换json、防御XSRF攻击等特性，Vue官方已经不再维护vue-resource并且推荐使用axios。我们都知道在Vue中要频繁的和后台进行数据交互，所以对数据的处理...
vue中的接口封装
qq_44144735的博客
10-23 1075
vue中的接口封装 安装 npm install axios; // 安装axios 引入 在src目录下，新建一个request文件，包含http.js 和 api.js 文件 http.js用来封装axios api.js用来管理接口 // 在http.js中引入axios import axios from 'axios'; // 引入axios import QS from 'qs'; // 引入qs模块，用来序列化post类型的数据，后面会提到 // vant的toast提示框组件，大家
js for循环中使用$.post方法
qweqwe
01-27 1658
在项目前台中，很多情况会使用到对一个集合进行for循环，然后每一次循环，都要重新请求一次后台， 此时有可能会碰到一种问题，就是for 循环的结果可能少了或者在for循环请求的结果不是正确的结果。这种情况主要原因如下： 该技术博客属于原创文章 ，转载请注明出处：http://www.pm-road.com/index.php/2015/01/12/337/ $.post（）属于异步请求，所以...
JS请求数据(GET POST)超详细
LaoYangSaid的博客
06-21 8961
GET请求 在这里插入代码片 POST请求 在HTML中写入 let xhr=new XMLHttpRequest(); xhr.open("POST","插入要引入的PHP文件",true); // POST请求必备的一句语句 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;"); xhr.send(发送数据); xhr.onrea
Ajax发送get和post请求 及封装和回调(JS)
weixin_44544712的博客
03-06 555
发送一个Get请求 let xhr = new XMLHttpRequest() xhr.open('GET','请求的接口地址') xhr.onload = function(){ if(xhr.status == 200){ console.log(xhr.responseText) } } xhr.send() 发送一个Post请求 let xhr = new XMLHttpReq...
原声ajax发送post请求,原生JS实现ajax 发送post请求
weixin_42099755的博客
08-05 2490
1. [代码]原生JS实现ajax 发送post请求var oStr = '';var postData = {};var oAjax = null;//post提交的数据postData = {"name1":"value1","name2":"value2"};//这里需要将json数据转成post能够进行提交的字符串 name1=value1&name2=value2格式postD...
Ajax的get、post请求方式封装好的js
lili_jackson的博客
11-26 289
method 请求方式，默认是get url 地址 data 要传送的数据 success 数据下载成功以后执行的函数 error 数据下载失败以后执行的函数 function $ajax({method = "get", url, data, success, error}){ //1、创建ajax对象 ...
基于JS原生封装POST、GET请求，解决onreadystatechange=2不执行问题
choicehappyboy的博客
07-25 483
基于JS原生封装POST、GET请求，解决onreadystatechange=2不执行问题
原生js封装异步ajax请求
08-25
当封装异步Ajax请求时，可以使用原生JavaScript的XMLHttpRequest对象来实现。下面是一个简单的示例： ```javascript function ajaxRequest(method, url, data, successCallback, errorCallback) { var xhr = new XMLHttpRequest(); xhr.open(method, url, true); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onload = function() { if (xhr.status === 200) { successCallback(xhr.responseText); } else { errorCallback(xhr.statusText); } }; xhr.onerror = function() { errorCallback(xhr.statusText); }; xhr.send(JSON.stringify(data)); } ``` 上述代码中，`ajaxRequest`函数接受五个参数： - `method`：请求方法，可以是GET、POST等。 - `url`：请求的URL地址。 - `data`：要发送的数据，作为请求的主体内容。 - `successCallback`：请求成功时的回调函数。 - `errorCallback`：请求失败时的回调函数。 使用示例： ```javascript ajaxRequest('GET', 'https://api.example.com/data', null, function(response) { console.log('请求成功:', response); }, function(error) { console.error('请求失败:', error); }); ``` 以上代码演示了一个GET请求的例子，你可以根据需要进行修改和扩展，例如支持其他请求方法、处理响应数据等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值