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 应用 ...
随机推荐
- GlusterFS分布式存储系统中更换故障Brick的操作记录1
前面已经介绍了GlusterFS分布式存储集群环境部署记录,现在模拟下更换故障Brick的操作: 1)GlusterFS集群系统一共有4个节点,集群信息如下: 分别在各个节点上配置hosts.同步好系 ...
- 几个linux内核参数
raid=noautodetec libata.force=3.0G mem=1G 不检测raid, sata限制3.0G 内存限制1G https://serverfault.com/questio ...
- yum下载rpm包
方法一:downloadonly插件 1.安装插件 yum -y install yum-download 2.下载httpd软件包到当前文件夹内 yum -y install httpd -dow ...
- book_lsit
@ 学习go的轮廓.核心.难点 必看 <代码的未来> 3.2 Go ~page 123~ @ 学习内存架构.内存管理的入门.原理 必看 <操作系统之哲学原理>邹恒明 @ ...
- [hyperscan] hyperscan 1到1.5 --!!
[hyperscan][pkg-config] hyperscan 从0到1路线图 接续前文,继续深入理解: 概述: 1. 自动机理论,是hyperscan的理论基础. https://zh.wik ...
- Java8 CompletableFuture
http://colobu.com/2016/02/29/Java-CompletableFuture/ http://www.deadcoderising.com/java8-writing-asy ...
- LeetCode 762 Prime Number of Set Bits in Binary Representation 解题报告
题目要求 Given two integers L and R, find the count of numbers in the range [L, R] (inclusive) having a ...
- qt设计器中使用自定义控件
当qt设计器中的控件不能满足需要时,这时就要自定义控件.然后再在qt设计器中使用. 在qt设计器中使用自定义控件时,可以用提升. 从控件派生出新的类: 然后在qt设计器中右键需要提升的控件: 填入提升 ...
- html5页面与android页面之间通过url传递参数
html5页面与android页面之间可以通过url传递参数,android将参数放在htm5的url ?后面,js获取url ?号后面的参数. 方法一: <scrīpt> /* 用途 ...
- 洛谷P3234 抄卡组 [HNOI2014] 字符串hash
正解:字符串hash 解题报告: 传送门! 字符串hash是字符串匹配中很常见的一个方法,原理也很好懂,这里就不做太多阐述辣有时间放到hash笔记里面去QAQ 题意不说了挺好理解的,自带一句话概括好评 ...