Ajax的重构
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的重构的更多相关文章
- Ajax重构
Ajax重构简介 Ajax的实现主要依赖于XMLHttpRequest对象,但是在调用其进行异步数据传输时,由于XMLHttpRequest对象的实例在处理事件完成后就会被销毁,所以如果不对该对象进行 ...
- JavaScript从入门到精通(附光盘1张):作者:明日科技出版社:清华大学出版社出版时间:2012年09月
本书介绍 一:本书 pdf 获取信息 本书下载:请申请加入本群 (QQ群:668345923), 并联系群主. 本群主有:本书pdf 全文教材 及附带的 光盘内容 二:本书目录介绍 第1篇 基 ...
- Ajax 重构的步骤
Ajax重构大致可以分为以下3三个步骤. 一 创建一个单独的JS文件,名称为AjaxRequest.js,并且在该文件中编写重构Ajax 所需的代码具体代码如下:var net = new Objec ...
- ajax重构XMLHttpRequest
//重构XMLHttpRequestvar net = new Object(); //名字空間對象 net.READY_STATE_UNINITIALIZED = 0; net.READY_STAT ...
- 网站重构-你了解AJAX吗?
AJAX是时下最流行的一种WEB端开发技术,而你真正了解它的一些特性吗?--IT北北报 XMLHTTPRequest(XHR)是目前最常用的技术,它允许异步接收和发送数据,所有的主流浏览器都对它有不错 ...
- 记一次.NET代码重构
好久没写代码了,终于好不容易接到了开发任务,一看时间还挺充足的,我就慢慢整吧,若是遇上赶进度,基本上直接是功能优先,完全不考虑设计.你可以认为我完全没有追求,当身后有鞭子使劲赶的时候,神马设计都是浮云 ...
- 产品前端重构(TypeScript、MVC框架设计)
最近两周完成了对公司某一产品的前端重构,本文记录重构的主要思路及相关的设计内容. 公司期望把某一管理类信息系统从项目代码中抽取.重构为一个可复用的产品.该系统的前端是基于 ExtJs 5 进行构造的, ...
- Ajax基础
1 概要 异步JavaScript和XML(Asynchronous Javascript And XML,Ajax)就是使用js来收发来自web服务器的数据,且无需重载整个页面的技术. 注 :xml ...
- Ajax完整篇(转载)
Ajax 完整教程 第 1 页 Ajax 简介Ajax 由 HTML.JavaScript™ 技术.DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用 ...
随机推荐
- linux:nano 、cat和file
nano 在 Linux 下面编辑文件通常我们会直接使用专门的命令行编辑器比如(emacs,vim,nano),涉及 Linux 上的编辑器的内容比较多,且非常重要. nano 是 linux 的一款 ...
- centos6.5设置key登录
1.ssh-keygen -t rsa 一路回车,当然可以设置key密码 2.cat /root/.ssh/id_rsa.pub >> /root/.ssh/authorized_key ...
- mysql缓存分析流程
- Oracle 分区表 收集统计信息 参数granularity
GRANULARITY Determines the granularity of statistics to collect. This value is only relevant for par ...
- 20165336 实验二 Java面向对象程序设计
20165336 实验二 Java面向对象程序设计 一.实验报告封面 课程:Java程序设计 班级:1653班 姓名:康志强 学号:20165336 指导教师:娄嘉鹏 实验日期:2018年4月16日 ...
- Git 常用命令和统计代码量
摘要 分享Git日常操作中常用的命令,分享如何统计在项目中贡献的代码量. 下面列出Git bash常用命令. 1. git clone **(项目地址) 克隆一个git项目到本地,将git项目拉取到本 ...
- sql生成数据库的序列号
-- ============================================= -- Author: <Author,yaoyao,Name> -- Create dat ...
- JavaWeb学习总结——文件上传和下载
在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用 ...
- MySQL crash-safe replication【转载】
本文来自david大神的博客,innodb技术内幕的作者. http://insidemysql.blog.163.com/blog/static/202834042201385190333/ MyS ...
- linux md5sum命令
md5sum命令用于生成和校验文件的md5值 生成文件md5值 [root@cdncenter ~]# ll total -rw-r--r-- root root Oct : .txt -rw-r-- ...