所属分类：web前端开发
ajax重构指的是在不改变软件现有功能的基础上，通过调整程序代码改善软件的质量、性能，使其程序的设计模式和架构更合理，提高软件的扩展性和维护性；Ajax的实现主要依赖于XMLHttpRequest对象，由于该对象的实例在处理事件完成后就会被销毁，所以在需要调用它的时候就要重新构建。
前端（vue）入门到精通课程：进入学习
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具：点击使用
本文操作环境：windows10系统、javascript1.8.5&&html5版、Dell G3电脑。
重构（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所需要的代码。
微博登录
QQ登录 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重构的详细内容，更多请关注zzsucai.com其它相关文章！
