javascript Ajax 类实现代码
javascript Ajax 类实现代码
发布时间:2016-12-29 来源:查字典编辑
摘要:与现在那些Ajax框架比较,优劣之处?看完再说吧:1、Ajax.js复制代码代码如下:/*AJAXv1.4HJF2009-7-5*/func...

与现在那些Ajax框架比较,优劣之处?看完再说吧:

1、Ajax.js

复制代码 代码如下:

/*

AJAX v1.4

HJF 2009-7-5

*/

function AjaxDO(){

this.HttpRequest = null;

this.openMethod = null; //HTTP请求的方法,为Get、Post 或者Head

this.openURL = null; //是目标URL。基于安全考虑,这个URL 只能是同网域的,否则会提示“没有权限”的错误。

this.openAsync = null; //是指定在等待服务器返回信息的时间内是否继续执行下面的代码。如果为False,则不会继续执行,直到服务器返回信息。默认为True。

this.ProcessRequestFunction = function(_HttpRequest) {return;} //处理返回信息的函数入口

this.ProcessRequestParam = null; //处理访问信息时的附加参数

this.LoadingImg = null; //正在载入的图片,一般为.gif动画

//初始化HttpRequest

this.InitHttpRequest = function(){

var http;

//try {

//http = new ActiveXObject("Msxml2.XMLHTTP");

//} catch(e) {

//try {

//http = new ActiveXObject("Microsoft.XMLHTTP");

//} catch(e) {

//http = false;

//}

//}

try{

if(window.ActiveXObject){

for(var i=5; i; i--){

try{

if(i==2){

http = new ActiveXObject("Microsoft.XMLHTTP");

}else{

http = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );

}

break;

}catch(e){

//alert(i);

http = false;

}

}

}else if(window.XMLHttpRequest){

http = new XMLHttpRequest();

if(http.overrideMimeType){

http.overrideMimeType("text/xml");

}

}

}catch(e){

http = false;

}

if(!http){

Alert("不能创建XMLHttpRequest对象实例");

return http;

}

this.HttpRequest = http;

return http;

}

//检测 this.HttpRequest

this.checkHttpRequest = function(){

if(!this.HttpRequest){

return this.InitHttpRequest();

}

return this.HttpRequest;

}

//修改MIME类别

//http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //如果要传文件或者Post 内容给服务器

//http.setRequestHeader("Content-Type","text/xml");

//http.setRequestHeader("Content-Type","gb2312");

this.setRequestHeader = function(mime){

if(!this.checkHttpRequest()){

return false;

}

try{

this.HttpRequest.setRequestHeader("Content-Type", mime);

return true;

}catch(e){

if(e instanceof Error){

Alert("修改MIME类别错误");

return false;

}

}

}

//设置状态改变的事件触发器

this.setOnReadyStateChange = function(funHandle, Param){

if(!this.checkHttpRequest()){

return false;

}

this.ProcessRequestFunction = funHandle;

this.ProcessRequestParam = Param;

return true;

}

this.setLoadingImg = function(ImgID){

this.LoadingImg = ImgID;

}

//建立HTTP连接

//open("method","URL"[,asyncFlag[,"userName"[, "password"]]])

this.Open = function(method, url, async, username, psw){

if(!this.checkHttpRequest()){

return false;

}

this.openMethod = method;

this.openURL = url;

this.openAsync = async;

if((this.openMethod==null) || ((this.openMethod.toUpperCase()!="GET")&&(this.openMethod.toUpperCase()!="POST")&&(this.openMethod.toUpperCase()!="HEAD"))){

Alert("请指定HTTP请求的方法,为Get、Post 或者Head");

return false;

}

if((this.openURL==null)||(this.openURL=="")){

Alert("请指定目标URL");

return false;

}

try{

this.HttpRequest.open(this.openMethod, this.openURL, this.openAsync, username, psw);

}catch(e){

if(e instanceof Error){

Alert("无法建立HTTP连接");

return false;

}

}

if(this.openMethod.toUpperCase()=="POST"){

if(!this.setRequestHeader("application/x-www-form-urlencoded")){

Alert("修改MIME类别失败");

return false;

}

}

if(this.openAsync){ //异步模式,程序继续执行

if(this.ProcessRequestFunction==null){

Alert("请指定处理返回信息的函数");

return false;

}

var _http_request_ajax = this.HttpRequest;

var _this_ajax = this;

this.HttpRequest.onreadystatechange = function(){

if(_http_request_ajax.readyState==4) {

if(_http_request_ajax.status==200) {

_this_ajax.ProcessRequestFunction(_http_request_ajax, _this_ajax.ProcessRequestParam, _this_ajax.LoadingImg);

}else{

Alert("您所请求的页面有异常。");

return false;

}

}

}

}

if(this.LoadingImg!=null){

funShow(this.LoadingImg);

}

return true;

}

//向服务器发出HTTP请求

//格式:name=value&anothername=othervalue&so=on

this.Send = function(idata){

if(!this.checkHttpRequest()){

return false;

}

var data = null;

if(this.openMethod.toUpperCase()=="POST"){

data = funEscapeAll(idata);

}

try{

this.HttpRequest.send(data);

return true;

}catch(e){

if(e instanceof Error){

Alert("向服务器发出HTTP请求失败");

return false;

}

}

}

//处理服务器返回的信息

this.getResponseText = function(type){

if(!this.checkHttpRequest()){

return false;

}

if(this.HttpRequest.readyState==4) {

if(this.HttpRequest.status==200) {

if((type!=null) && (type.toUpperCase()=="XML")){

return this.HttpRequest.responseXML;

}

return this.HttpRequest.responseText;

}else{

Alert("您所请求的页面有异常。");

return false;

}

}

}

//停止当前请求

this.abort = function(){

if(!this.checkHttpRequest()){

return false;

}

if(this.LoadingImg!=null){

funHide(this.LoadingImg);

}

if(this.HttpRequest.readyState>0 && this.HttpRequest.readyState<4){

this.HttpRequest.abort();

}

}

}

//=====================================================================================

//公共函数

//=====================================================================================

function $(_obj){

var o;

if (typeof(_obj)!="string")

return _obj;

else{

try{

document.all;

try{

o=document.all(_obj);

}catch(e){

return null;

}

}catch(ee){

try{

o=document.getElementById(_obj);

}catch(e){

return null;

}

}

return o;

}

}

function funEscapeAll(str){

var t = "&";

var s = str.split(t);

if(s.length<=0)return str;

for(var i=0; i<s.length; i++){

s[i] = funEscapeOne(s[i]);

}

return s.join(t);

}

function funEscapeOne(str){

var i = str.indexOf("=");

if(i==-1) return str;

var t = URLEncode(str.substr(i+1));

return str.substring(0, i+1)+t;

}

function URLEncode(str){

return encodeURIComponent(str);

/*

return escape(str).replace(/+/g, "%2B").

replace(/"/g,"%22").

replace(/'/g, "%27").

replace(///g,"%2F");

*/

}

function funEscapeXML(content) {

if (content == undefined)

return "";

if (!content.length || !content.charAt)

content = new String(content);

var result = "";

var length = content.length;

for (var i = 0; i < length; i++) {

var ch = content.charAt(i);

switch (ch) {

case '&':

result += "&";

break;

case '<':

result += "<";

break;

case '>':

result += ">";

break;

case '"':

result += """;

break;

case ''':

result += "'";

break;

default:

result += ch;

}

}

return result;

}

function funShow(_obj){

if(typeof(_obj)=="object")

_obj.style.visibility = "inherit";

else

$(_obj).style.visibility = "inherit";

}

function funHide(_obj){

if(typeof(_obj)=="object")

_obj.style.visibility = "hidden";

else

$(_obj).style.visibility = "hidden";

}

function Alert(str){

alert(str);

//window.status = str;

}

/*

使用例子:

function processRequest(http_request, _val, _loading_img){

if(http_request.responseXML.documentElement){

//alert(decodeURIComponent(http_request.responseXML.documentElement.xml));

}else{

//alert(decodeURIComponent(http_request.responseText));

}

alert(_val);

funHide(_loading_img);

}

1、GET

var ajax = new AjaxDO();

ajax.setLoadingImg(_loading_img);

ajax.setOnReadyStateChange(processRequest, _val);

ajax.Open("GET", url, true); //异步模式,程序继续执行

ajax.Send("");

ajax.Open("GET", url, false); //非异步模式,程序等待

ajax.Send("");

var xml_doc = ajax.getResponseText("XML");

var text_doc = ajax.getResponseText("TEXT");

2、POST

var ajax = new AjaxDO();

ajax.setLoadingImg(_loading_img);

ajax.setOnReadyStateChange(processRequest, _val);

ajax.Open("POST", url, true); //异步模式,程序继续执行

ajax.Send(data);

ajax.Open("POST", url, false); //非异步模式,程序等待

ajax.Send(data);

var xml_doc = ajax.getResponseText("XML");

var text_doc = ajax.getResponseText("TEXT");

注,客户端发送带有中文或HTML脚本的信息时,发送的信息必须调用:encodeURIComponent函数,例如:

var data = encodeURIComponent($('message').value);

实际是调用了两次,Ajax类内部又调用一次。

服务端(Java版)需要做下转码:

String message = request.getParameter("message");

message = URLDecoder.decode(message, "UTF-8");

*/

注,客户端发送带有中文或HTML脚本的信息时,发送的信息必须调用:encodeURIComponent函数,例如:

var data = encodeURIComponent($('message').value);

实际是调用了两次,Ajax类内部又调用一次。

服务端(Java版)需要做下转码:

String message = request.getParameter("message");

message = URLDecoder.decode(message, "UTF-8");

2、Demo.html

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>Ajax类</title>

<script src="Ajax.js" src="Ajax.js"></script>

<style type="text/css"><></style><style type="text/css" bogus="1">#Layer1 {

position:absolute;

left:670px;

top:11px;

width:15px;

height:15px;

z-index:10000;

background-color:#FF0000;

font-size:13;

border:none;

visibility:hidden;

}</style>

</head>

<body>

<div id="Layer1"><img src="indicator_flower.gif" src="indicator_flower.gif" width="15" /></div>

<script type="text/javascript" language="javascript"><></script>

<script type="text/javascript" language="javascript"><></script>

<button>异步模式</button>

<button>非异步模式</button>

</body>

</html>

3、图片

javascript Ajax 类实现代码1

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新AJAX相关学习
热门AJAX相关学习
编程开发子分类