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.onerror=(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 文件
<script language =“javascript”src =“AjaxRequest.js”> </script>
三 在应用Ajax 的页面中编写错误处理的方法,实例化Ajax 对象的方法和回调函数
具体代码如下:
<script language =“javascript”>
/ ****************** 错误处理的方法************************************** /
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重构
Ajax重构简介 Ajax的实现主要依赖于XMLHttpRequest对象,但是在调用其进行异步数据传输时,由于XMLHttpRequest对象的实例在处理事件完成后就会被销毁,所以如果不对该对象进行 ...
- 实现AJAX的基本步骤
实现AJAX的基本步骤 要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤: (1)创建XMLHttpRequest对象,也就是创建一个异步调用对象. (2)创建一个新的HTTP请求,并指 ...
- 实现AJAX的基本步骤 。。转
要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤: (1)创建XMLHttpRequest对象,也就是创建一个异步调用对象. (2)创建一个新的HTTP请求,并指定该HTTP请求的方法. ...
- ajax的请求步骤!每个状态值表示什么?
什么是是ajax ! AJAX即"Asynchronous JavaScript and XML"(异步的JavaScript与XML技术),指的是一套综合了多项技术的浏览器端网页 ...
- 简述 AJAX 及基本步骤
简述 AJAX:AJAX即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术.通过在后台与服务器进行 ...
- ajax重构XMLHttpRequest
//重构XMLHttpRequestvar net = new Object(); //名字空間對象 net.READY_STATE_UNINITIALIZED = 0; net.READY_STAT ...
- $.getJSON 返回值、AJAX异步调用步骤
//首先要判断用户录入的手机号是不是中国移动的,不是直接给出提示,并终止登录 if($("#cmUsername1").val().isMobile())//手机号码 { jQue ...
- javascript中ajax的四大步骤
原生js中ajax写法一: function ajaxys(){ //1. 创建xhr对象 var xhr = new XMLHttpRequest();//XMLHttpRequest() // 2 ...
- ajax的五大步骤
什么是Ajax? AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. var btn = document.getElementsByTagName('button')[ ...
随机推荐
- MVC JSON JavaScriptSerializer 进行序列化或反序列化时出错
MVC control中返回json格式数据一般都是如下格式 [HttpPost] public ActionResult CaseAudit(string name) { var data =&qu ...
- linux 下安装 mysql 并配置 python 开发环境
1.安装 mysql ,安装过程中将提示设置 root 用户的密码,默认可以设置为 rootadmin . $ sudo apt-get install mysql-server 2.安装 mysql ...
- 通过c++ 读写文本文件的中文乱码的解决方法
前提:VS2010 ,MFC ,文本文件为ANSI格式. 读文件: CString str,fileContent;CStdioFile myFile, File;if(myFile.Open(Gen ...
- TOJ 2641 Gene
描述 How can millions of different and complex structures be built using only a few simple building bl ...
- QQ会员2018春节红包抵扣券项目背后的故事
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 1. 活动数据 截止3月1日手Q运动红包会员礼包发放核销数据 参与红包活动用户数:2亿+ 发券峰值:52w/min 2. 需求背景 2.1 ...
- HTTP和HTTPS的区别?
HTTP1.1(Hypertext Transfer Protocol Vertion 1.1)超文本传输协议-版本1.1它是用来在Internet上传送超文本的传送协议.它是运行在Tcp/Ip协议族 ...
- 什么是PV,什么是UV,什么是IP. 流量统计的各种数据!
pv流量 什么是PV? 解答:PV是指页面刷新的次数,每一次页面刷新,就算做一次pv流量. PV高一定代表来访者多吗? 解答:不一定如此,一般来说,PV与来访者的数量成正比,但是PV并不直接决定页面的 ...
- 《C#高效编程》读书笔记02-用运行时常量(readonly)而不是编译期常量(const)
C#有两种类型的常量:编译期常量和运行时常量.两者有截然不同的行为,使用不当的话,会造成性能问题,如果没法确定,则使用慢点,但能保证正确的运行时常量. 运行时常量使用readonly关键字声明,编译期 ...
- jquery 获取easyui combobox选中的值、赋值
jquery easyui combobox 控件支持单选和多选 1.获取选中的值 $('#comboboxlist').combobox('getValue'); //单选时 $('#combob ...
- oracle UDT 有关数据字典的研究
1.数据及类型准备 创建了一个自定义类型 create or replace type addr_type as object( street varchar2(30); city varchar2( ...