简述ajax的重构原因,Ajax 重构的步骤
Ajax重构大致可以分为以下3三个步骤。
一 创建一个单独的JS文件,名称为AjaxRequest.js,并且在该文件中编写重构Ajax 所需的代码
具体代码如下：
var net = new Object(); // 定义一个全局的变量
// 编写构造函数
net.AjaxRequest = function(url,onload,onerror,method,params)
{
this.req = null;
this.onload = onload;
this.οnerrοr=(onerror)？onerror：this.defaultError;
this.loadDate(url,method,params);
}
// 编写用于初始化XMLHttpRequest 对象并指定处理函数,最后发送HTTP 请求的方法
net.AjaxRequest.prototype.loadDate = function(url,method,params)
{
if(！method) // 设置默认的请求方式为GET
{
method =“GET”;
}
if(window.XMLHttpRequest)
{ // 非IE 浏览器
this.req = newXMLHttpRequest(); // 创建XMLHttpRequest 对象
}
elseif(window.ActiveXObject)
{ // IE 浏览器
try
{
this.req= new ActiveXObject(“Microsoft.XMLHTTP”); // 创建XMLHttpRequest 对象
}
catch(e)
{
try
{
this.req = new ActiveXObject(“Msxml2.XMLHTTP”); // 创建XMLHttpRequest 对象
}
catch(e)
{
}
}
}
if(this.req)
{
try
{
varloader = 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.setRequestHeader(“x-requested-with”,“ajax”); // 设置请求的发出者
}
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);
}
二 在需要应用Ajax 的页面中应用以下的语句包括步骤一中创建的JS 文件
三 在应用Ajax 的页面中编写错误处理的方法,实例化Ajax 对象的方法和回调函数
具体代码如下：
/ ****************** 错误处理的方法************************************** /
function onerror()
{
alert(“ 您的操作有误！”);
}
/ ****************** 实例化Ajax 对象的方法*********************** ****** /
function getInfo()
{
var loader = newnet.AjaxRequest(“getInfo.jsp？nocache =”+ new Date().getTime(),deal_getInfo,onerror,“GET”);
}
/ ************************ 回调函数*********************** *************** /
function deal_getInfo()
{
document.getElementById(“showInfo”).innerHTML= this.req.responseText;
}
script>
总结
以上是生活随笔为你收集整理的简述ajax的重构原因,Ajax 重构的步骤的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： dhcp服务器由谁维护,DHCP服务器管
- 下一篇： redux react ajax,使用r