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 应用 ...
随机推荐
- Etcd+Confd实现Nginx配置文件自动管理
一.需求 我们使用Nginx做七层负载均衡,后端是Tomcat.项目采用灰度发布方式,每次项目升级,都要手动先从Nginx下摘掉一组,然后再升级这组,当项目快速迭代时,手动做这些操作显然会增加部署时间 ...
- JS图片水印
attendanceClick(userID,headImg,userName,company,scoreNmu) { let base64Image = 'assets/imagesaring.pn ...
- [Day4]Switch语句、数组、二维数组
1.选择结构switch (1)格式 switch (表达式){ case 目标值1: 执行语句1; break; case 目标值2: 执行语句2; break; ...... case 目标值n: ...
- [knowledge] netmap
900MHz的单核处理10GB的包收/发. netmap has been implemented in FreeBSD and Linux and Gbit/s network adapters. ...
- sqlserver2014两台不同服务器上数据库同步
sqlserver2014两台不同服务器上数据库同步 同步了快一个月了,哈哈,因为途中比较麻烦,第一次,遇到烦的地方就停下了,今天终于同步成功了,哈哈,下面我就来介绍一下我实现两台数据库同步的过程 ...
- 20165336 2017-2018-2 《Java程序设计》第8周学习总结
20165336 2017-2018-2 <Java程序设计>第8周学习总结 教材学习内容总结 第十二章 1.程序:一段静态的代码.进程:程序的一次动态执行过程,它对应了从代码加载.执行至 ...
- 洛谷P1966 火柴排队 贪心+离散化+逆序对(待补充QAQ
正解: 贪心+离散化+逆序对 解题报告: 链接在这儿呢quq 这题其实主要难在想方法吧我觉得?学长提点了下说用贪心之后就大概明白了,感觉没有很难 但是离散化这里还是挺有趣的,因为并不是能很熟练地掌握离 ...
- Maven项目Update Project后JRE System Library自动变回1.5解决办法
最近在搭建Spring Boot项目<一步步搭建 Spring Boot maven 框架的工程>的时候,虽然设置JRE System Library为1.8,但是,当我 用 Maven ...
- zabbix准备:mysql安装
php在编译时需要mysql的配置,这样PHP远程连接mysql才有用.1.创建mysql用户和相关目录(配置文件里设置的目录) groupadd mysql useradd -g mysql -M ...
- 【JMeter】【微信好文收藏】Jmeter接口测试实战-有趣的cookie
场景: 接口测试时常都需要登录,请求方式(post), 登录常用的方法有通过获取token, 获取session, 获取cookie, 等等. 这几种都有一个共同的特点, 有效期(expires). ...