Ajax的封装的初步进化

秋水君y

于 2019-07-26 09:48:43 发布

阅读量207

点赞数 2

分类专栏：笔记文章标签：笔记1

本文链接：https://blog.csdn.net/qq_42418592/article/details/81749011

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一：原始状态

demo01.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Ajax第一阶段封装</title>
</head>
<body>
   <button>GET</button>
   <button>POST</button>
   <script type="text/javascript">
       window.onload = function(){
           var buttons = document.querySelectorAll('button');

           buttons[0].onclick = function(){
               var xhr = new XMLHttpRequest();
               xhr.open('GET' , ? , true);       // 1:method       2:url
               xhr.onreadystatechange = function(){
                   if(this.readyState == 4 && this.status == 200){
                       var res = this.responseText;
                       // ?                       // 4: process: callback function(回调函数)
                   }
               }
               xhr.send(null);                       // 3: parameters
           }

           buttons[1].onclick = function(){
               var xhr = new XMLHttpRequest();
               xhr.open('POST' , ? , true);
               xhr.onreadystatechange = function(){
                   if(this.readyState == 4 && this.status == 200){
                       var res = this.responseText;
                       // ?
                   }
               }
               xhr.send(?);       //?
           }

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

二：初始封装

.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Ajax第一阶段封装</title>
</head>
<body>
   <button>GET</button>
   <button>POST</button>

window.onload = function(){
var buttons = document.querySelectorAll('button');

           // ?powerId={}
           buttons[0].onclick = function(){
               // var option = {
               //    method:'GET',
               //    url : 'http://192.168.7.100/herowebapi/hero/list',
               //    parameter:'powerId=0',
               //    successCallback:getCallbackMethod
               // };

               var option = {
                   method:'GET',
                   url : 'http://192.168.7.100/herowebapi/power/list',
                   successCallback:getCallbackMethod
               };
               ajax(option);
           }
           buttons[1].onclick = function(){

               ajax({
                   method:'POST',
                   url : 'http://192.168.7.100/herowebapi/member/login',
                   parameter:'email=admin@126.com&password=admin',
                   successCallback:function(responseText){
                       console.log(responseText);
                   }
               });
           }
       }
   </script>
</body>
</html>

.ajax.js

/*
   阶段1-1:封装成一个函数
   参数：    method:请求方式(GET|POST)
           url:请求地址

*/
function ajax(option){
   var url = option.url;
   // 检查是否有参数
   if(option.method.toUpperCase() == 'GET'){
       if(option.parameter){
           url = url + '?' + option.parameter;
       }
   }

var xhr = new XMLHttpRequest();

xhr.open(option.method , url , true);

   if(option.method.toUpperCase() == 'POST'){
       xhr.setRequestHeader('content-type' , 'application/x-www-form-urlencoded');
   }

   xhr.onreadystatechange = function(){
       if(this.readyState == 4 && this.status == 200){
           if(typeof(option.successCallback) == 'function'){
               option.successCallback(this.responseText);
           }

       }
   }
   if(option.method.toUpperCase() == 'GET'){
       xhr.send(null);
   }
   else{
       xhr.send(option.parameter);
   }
}

三：封装的二阶

.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
</head>
<body>
   <button>GET</button>
   <button>POST</button>
   <script type="text/javascript" src="js/ajax-02.js"></script>
   <script type="text/javascript">
       var buttons = document.querySelectorAll('button');

       buttons[0].onclick = function(){
           var option = {
               url : 'http://192.168.7.100/herowebapi/hero/list',
               parameter:'powerId=1',
               successCallback:function(resText){
                   console.log(resText);
               }
           };

getRequest(option);

}

       buttons[1].onclick = function(){
           postRequest({
               url : 'http://192.168.7.100/herowebapi/member/login',
               parameter: 'email=admin@126.com&password=admin',
               successCallback:function(resText){
                   console.log(resText);
               }
           });
       }
   </script>
</body>
</html>

ajax-02.js

function getRequest(option){
   var url = option.url;
   if(option.parameter){
       url = url + '?' + option.parameter;
   }

四：封装的三阶

.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
</head>
<body>
   <button>GET</button>
   <button>POST</button>

       buttons[0].onclick = function(){
           var option = {
               url : 'http://192.168.7.100/herowebapi/hero/list',
               parameter:{
                   powerId:1
               },
               successCallback:function(resText){
                   console.log(resText);
               }
           };

getRequest(option);

}

       buttons[1].onclick = function(){
           postRequest({
               url : 'http://192.168.7.100/herowebapi/member/login',
               parameter: {
                   email:'admin@126.com',
                   password:'admin'
               },
               successCallback:function(resText){
                   console.log(resText);
               }
           });
       }
   </script>
</body>
</html>

ajax-03.js

//
   function buildParameter(paramObj){
       var arr = [];
       for(var key in paramObj){
           arr.push(key + '=' + paramObj[key]);
       }
       return arr.join('&');
   }

   //
   function getRequest(option){
       var url = option.url;
       if(option.parameter){
           url = url + '?' + buildParameter(option.parameter);
       }

   //
   function postRequest(option){
       var xhr = new XMLHttpRequest();
       xhr.open('POST' , option.url , true );
       xhr.onreadystatechange = function(e){
           if(this.readyState == 4 && this.status == 200){
               if(typeof(option.successCallback) == 'function'){
                   option.successCallback(this.responseText);
               }
           }
       }
       var formData = new FormData();
       for(var key in option.parameter){
           formData.append(key , option.parameter[key]);
       }
       xhr.send(formData);
   }

最后的封装

.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
</head>
<body>
   <button>GET</button>
   <button>POST</button>
   <script type="text/javascript" src="js/ajax-04.js"></script>
   <script type="text/javascript">
       var buttons = document.querySelectorAll('button');

}

buttons[1].onclick = function(){

           ajax.post({
               url : 'http://192.168.7.100/herowebapi/member/login',
               parameter: {
                   email:'admin@126.com',
                   password:'admin'
               },
               successCallback:function(resText){
                   console.log(resText);
               }
           });
       }

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

ajax-04.js

避免的全局污染

(function(){

   window.ajax = {
       get:getRequest,
       post:postRequest
   };

   //
   function buildParameter(paramObj){
       var arr = [];
       for(var key in paramObj){
           arr.push(key + '=' + paramObj[key]);
       }
       return arr.join('&');
   }

   //
   function getRequest(option){
       var url = option.url;
       if(option.parameter){
           url = url + '?' + buildParameter(option.parameter);
       }

秋水君y

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Ajax的封装的初步进化

一：原始状态demo01.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Ajax第一阶段封装</title></head><body> <button>G...
复制链接

扫一扫