Ajax的重构方法:

(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的重构的更多相关文章

  1. Ajax重构

    Ajax重构简介 Ajax的实现主要依赖于XMLHttpRequest对象,但是在调用其进行异步数据传输时,由于XMLHttpRequest对象的实例在处理事件完成后就会被销毁,所以如果不对该对象进行 ...

  2. JavaScript从入门到精通(附光盘1张):作者:明日科技出版社:清华大学出版社出版时间:2012年09月

    本书介绍 一:本书 pdf 获取信息 本书下载:请申请加入本群 (QQ群:668345923),   并联系群主. 本群主有:本书pdf 全文教材 及附带的 光盘内容 二:本书目录介绍 第1篇  基 ...

  3. Ajax 重构的步骤

    Ajax重构大致可以分为以下3三个步骤. 一 创建一个单独的JS文件,名称为AjaxRequest.js,并且在该文件中编写重构Ajax 所需的代码具体代码如下:var net = new Objec ...

  4. ajax重构XMLHttpRequest

    //重构XMLHttpRequestvar net = new Object(); //名字空間對象 net.READY_STATE_UNINITIALIZED = 0; net.READY_STAT ...

  5. 网站重构-你了解AJAX吗?

    AJAX是时下最流行的一种WEB端开发技术,而你真正了解它的一些特性吗?--IT北北报 XMLHTTPRequest(XHR)是目前最常用的技术,它允许异步接收和发送数据,所有的主流浏览器都对它有不错 ...

  6. 记一次.NET代码重构

    好久没写代码了,终于好不容易接到了开发任务,一看时间还挺充足的,我就慢慢整吧,若是遇上赶进度,基本上直接是功能优先,完全不考虑设计.你可以认为我完全没有追求,当身后有鞭子使劲赶的时候,神马设计都是浮云 ...

  7. 产品前端重构(TypeScript、MVC框架设计)

    最近两周完成了对公司某一产品的前端重构,本文记录重构的主要思路及相关的设计内容. 公司期望把某一管理类信息系统从项目代码中抽取.重构为一个可复用的产品.该系统的前端是基于 ExtJs 5 进行构造的, ...

  8. Ajax基础

    1 概要 异步JavaScript和XML(Asynchronous Javascript And XML,Ajax)就是使用js来收发来自web服务器的数据,且无需重载整个页面的技术. 注 :xml ...

  9. Ajax完整篇(转载)

    Ajax 完整教程 第 1 页 Ajax 简介Ajax 由 HTML.JavaScript™ 技术.DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用 ...

随机推荐

  1. babel-preset-env使用介绍

    声明:文章转自https://www.cnblogs.com/ye-hcj/p/7070084.html 本文介绍一个babel转码神器babel-preset-env 简介 现如今不同的浏览器和平台 ...

  2. MySQL transaction

    MySQL transaction(数据库的事务) 数据库事务(Database Transaction),是指作为单个逻辑工作单元执行的一系列操作. 要么完全执行,要么完全地不执行. ACID 事务 ...

  3. Xcode工程编译之duplicate symbol问题引发的一些知识

    概括: 文件中重复定义了一个函数.变量(比如全局变量) 工程中包含同名的文件. 一般的解决方法 1 在使用import 引入头文件时,由于疏忽,误引入.m 文件. 2 同名文件放在不同的文件夹下. 3 ...

  4. 转:Java 异常结构体系

    原文地址:Java 异常结构体系 保存一份资料 前几天在参加网易和360公司的在线考试的时候,都出了一道关于java中异常类的多项选择题.这几天翻看了相关书籍和网上一些资料,结合自己的理解与思考,将自 ...

  5. HBase系列文章(转)

    HBase概念学习(一)基本架构 HBase概念学习(二)JAVA API操作概览 HBase概念学习(三)Java API之CRUD(增查改删) HBase概念学习(四)Java API之扫描和过滤 ...

  6. JavaScript学习(四)

  7. ubuntu上make menuconfig出错

    如果使用make menuconfig的方式配置内核,又碰巧系统没有安装ncurses库(ubuntu系统默认就没有安装此库),就会出现错误,错误信息大体上如下: *** Unable to find ...

  8. logback logback.xml常用配置详解(二)<appender>

    转自:http://aub.iteye.com/blog/1101260 logback 常用配置详解(二) <appender> <appender>: <append ...

  9. 前端 HTML body标签相关内容 常用标签 标题标签 h1-h6

    标题标签 h1~h6 <h1> - <h6> 标签可定义标题.<h1> 定义最大的标题.<h6> 定义最小的标题. 由于 h 元素拥有确切的语义,因此请 ...

  10. dedecms如何去除后台登陆验证码

    用dedecms批量建站一般直接把文件打包复制,然后导入数据库,一个新网站就好了,但有时后台一直无法登录,提示验证码错误.那我们就想怎么把验证码关闭,现在就给大家解决织梦去掉后台登陆验证码.我们知道d ...