请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

模板之家 首页 教程频道 查看内容

什么是ajax重构

模板之家 2022-7-1 21:35

分享至 : QQ空间
收藏

ajax重构指的是在不改变软件现有功能的基础上,通过调整程序代码改善软件的质量、性能,使其程序的设计模式和架构更合理,提高软件的扩展性和维护性;Ajax的实现主要依赖于XMLHttpRequest对象,由于该对象的实例在处 ...

ajax重构指的是在不改变软件现有功能的基础上,通过调整程序代码改善软件的质量、性能,使其程序的设计模式和架构更合理,提高软件的扩展性和维护性;Ajax的实现主要依赖于XMLHttpRequest对象,由于该对象的实例在处理事件完成后就会被销毁,所以在需要调用它的时候就要重新构建。

本文操作环境:windows10系统、javascript1.8.5&&html5版、Dell G3电脑。

什么是ajax重构

重构(Refactoring)就是在不改变软件现有功能的基础上,通过调整程序代码改善软件的质量、性能,使其程序的设计模式和架构更趋合理,提高软件的扩展性和维护性。

Ajax的核心对象是XMLHttpReguest,也就是说我们通过Ajax与服务器进行交互,就必须要构建XMLHttpRequest这个对象。

但是在页面之中通过Ajax与服务器进行交互,在交互之后XMLHttpReguest这个对象就会被销毁。

所以我们页面再次通过Ajax与服务器进行交互,还需要重新的构建XMLHttpRequest这个对象。

那么XMLHttpReguest这个对象的创建,我们需要考虑到浏览器的兼容性,所以说XMLHttpReguest的创建也是非常繁琐的,需要根据不同浏览器的类型,来进行不同方式的创建。

那么如果说我们在很多的页面都应用到了Ajax这种技术,我们在很多的页面当中都要来创建这个对象,这就体现不出OO(面向对象这种风格,代码的重复利用),面向对象中提倡代码的重用,所以说我们通常情况下都会通过Ajax重构,来封装XMLHttpReguest这个对象以及封装一些对Ajax请求进行处理的通用方法,那么我们在编写代码的时候就可以直接来引用这个对象,从而来达到代码的重用,也节省了这个对象的创建时间

Ajax重构步骤

1)创建一个单独的JS文件,名字为AjaxRequest.js ,并且在该文件中编写重构Ajax所需的代码

2)在 需要应用Ajax的页面中包括刚刚创建的AjaxRequest.js文件

3)在应用Ajax的页面中编写错误处理的方法,实例化Ajax对象的方法和回调函数

在jsp或html页面之中我们编写一段JavaScript的脚本代码,那么可以在当前的页面当中直接编写JavaScript脚本代码。也可以使用另外一种方式:创建js文件,然后将这个js文件引入到我们所编写的jsp或者是html页面当中

示例如下:

(1)创建一个单独的JS文件,命名为AjaxRequest.js,并且在该文件中编写重构Ajax所需要的代码。

 var net = new Object();    //创建一个全局变量net
 //编写构造函数
 net.AjaxRequest = function(url,onload,onerror,method,params){
     this.req = null;
     this.onload = onload;
     this.onerror = (onerror) ? onerror : this.defaultError;
     this.loadDate(url,method,params);
 }
 //编写用于初始化XMLHttpRequest对象并指定处理函数,最后发送HTTP请求的方法
 net.AjaxRequest.prototype.loadDate = function(url,method,params){
     if(!method){
         method = "GET";
     }
     if(window.XMLHttpRequest){
         this.req = new XMLHttpRequest();
     }else if(window.ActiveXObject){
         this.req = new ActiveXObject("Microsoft.XMLHTTP");
     }
     if(this.req){
         try{
             var loader = this;
             this.req.onreadystatechange = function(){
                 net.AjaxRequest.onReadyState.call(loader);
             }
             this.req.open(method,url,true);    //建立对服务器的调用
             if(method == "POST"){              //如果提交方式为POST
                 this.req.setRequestHeader("Content-Type",
                     "application/x-www-form-urlencoded");   //设置请求头
             }
             this.req.send(params);    //发送请求
         }catch(err){
             this.onerror.call(this);
         }
     }
 
 }
 //重构回调函数
 net.AjaxRequest.onReadyState = function(){
     var req = this.req;
     var ready = req.readyState;
     if(ready == 4){               //请求完成
         if(req.status == 200){    //请求成功
             this.onload.call(this);
         }else{
             this.onerror.call(this);
         }
     }
 }
 //重构默认的错误处理函数
 net.AjaxRequest.prototype.defaultError = function(){
     alert("错误数据\n\n回调状态:"+this.req.readyState+"\n状态:"+this.req.status);
 }

(2)在需要应用的Ajax的页面中应用一下的语句包括(1)中创建的JS文件

<script language="javascript" src="AjaxRequest.js"></script>

(3)在应用Ajax的页面中编写错误处理的方法、实例化Ajax对象的方法和回调函数。

 <script language="javascript">
 /*********************错误处理的方法******************/
     function onerror(){
         alert("您的操作有误!");
     }
 /*********************实例化Ajax对象的方法************/
     function getInfo(){
         var loader = new net.AjaxRequest("getInfo.jsp?nocache="+new Date().getTime(),
             deal_getInfo,onerror,"GET");
     }
 /*********************回调函数************************/
     function deal_getInfo(){
         document.getElementById("showInfo").innerHTML=this.req.responseText;
     }
 </script>

【相关教程推荐:AJAX视频教程】

以上就是什么是ajax重构的详细内容,更多请关注模板之家(www.mb5.com.cn)其它相关文章!


路过

雷人

握手

鲜花

鸡蛋
来自: 网络收集
文章评论0人参与
热门频道
  • 【可选购小程序】ecshop医药品保健药房网站
  • ecshop成人用品商城网站源源码模板 微信小
  • ecshop微信小程序代生成服务 可选购小程序
  • 【可选购小程序】ecshop生鲜食品蔬菜水果特
  • ecshop百货超市日用品网站 免费生成微信小
  • ecshop办公用品文具耗材设备 免费生成微信
  • 【可选购小程序】ecshop家居家纺床上用品源
  • 【可选购小程序】ecshop户外运动体育用品健
  • ecshop整站数据打包 带数据 适合申请支付、
  • ecshop跨境购海淘微信分销商城网站源码模板
返回顶部