相信Ajax是很多开发人员会使用。自己最开始是使用挺多的后来换使用jQuery了,就很少再使用,不过,最近自己对JavaScript挺上心的,自己也想多研究更深入的知识。就把之前是Ajax从新拿出来练习了下,并进行了下改进。
代码如下:
function Ajax(method,url,flag,content,type,charset){
this.method = method;
this.url = url;
this.flag = flag;
this.content = content;
this.type = type;
this.charset = charset;
this.header = null;
this.value = null;
var xmlHttp = null;
{
try{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
if (xmlHttp.overrideMimeType) {
xmlHttp.overrideMimeType(type);
}
}catch (e){
// Internet Explorer
try{
for( var i = 5; i; i-- ){
try{
if( i != 2 ){
xmlHttp = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );
}
xmlHttp.setRequestHeader("Content-Type",type);
xmlHttp.setRequestHeader("Content-Type",charset);
break;
}catch(e){
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
}
}catch(e2){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e3){
alert("您的浏览器不支持AJAX!");
xmlHttp = null;
}
}
}
this.xmlHttp = xmlHttp;
}
this.onReady = function(xmlHttp){
xmlHttp.onreadystatechange=function(){
//alert(xmlHttp.readyState);
if(xmlHttp.readyState==0){
//请求未初始化(在调用 open() 之前)
//alert("请求未初始化(在调用 open() 之前)");
}else if(xmlHttp.readyState==1){
//请求已提出(调用 send() 之前)
//alert("请求已提出(调用 send() 之前)");
}else if(xmlHttp.readyState==2){
// 请求已发送(这里通常可以从响应得到内容头部)
//alert("请求已发送(这里通常可以从响应得到内容头部)");
}else if(xmlHttp.readyState==3){
// 请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应)
//alert("请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应)");
}else if(xmlHttp.readyState==4){
// 请求已完成(可以访问服务器响应并使用它)
//alert("请求已完成(可以访问服务器响应并使用它)");
if (xmlHttp.status == 200){
alert(xmlHttp.responseText);
}
}
}
}
//终止当前请求;
this.sTop =function(){
xmlHttp.abort();
}
//把HTTP所以响应首部作为键/值对返回;
this.getAllResponseHeaders=function(){
return xmlHttp.getAllResponseHeaders();
}
//返回指定首部的串值;
this.getResponseHeader=function (header){
return xmlHttp.getResponseHeader(header);
}
//把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()
this.setRequestHeader = function(header,value){
xmlHttp.setRequestHeader(header,value);
}
//处理下默认参数不存在的情况
this.process = function(){
if(this.flag==null||this.flag=="undefined"||this.flag==""){
this.flag = true;
}
if(this.content==null||this.content=="undefined"||this.content==""){
this.content = null;
}
if(this.type==null||this.type=="undefined"||this.type==""){
this.type = "text/xml";
}
if(this.charset==null||this.charset=="undifind"||this.charset==""){
this.charset = "utf-8";
}
if(this.method==null||this.method=="undefined"||this.method==""){
this.method = "POST";
}
}
//一个是指示所用方法(通常是GET或POST,PUT很少用)的串,另一个是表示目标资源URL的串,
//还有一个Boolean值,指示请求是否是异步的。
this.processRequest = function(){
this.process();
if(xmlHttp!=null){
this.onReady(xmlHttp);
xmlHttp.open(this.method,this.url,this.flag);
xmlHttp.send(this.content);
}else{
alert("您的浏览器不支持ajax!");
}
}
//------------无参数-----------------------
this.request=function(){
this.processRequest();
}
//------------有参数-----------------------
this.requestWithParams=function(method,url,flag,content,type,charset){
this.method = method;
this.url = url;
this.flag = flag;
this.content = content;
this.type = type;
this.charset = charset;
this.processRequest();
}
}
不再是像以前那样直接的把各个函数(function )写成同一级别的代码段相互调用,而是类似于Java的对象形式;
有了上面的js,就可以在页面简单的进行调用了;
首先当然是导入js文件了:
<script type="text/javascript" language="javascript" src="ajax.js"></script>
然后就是来使用了,为了灵活化,我写了两种方式;
第一种:
<script type="text/javascript">
var url = "areq.xml";
var content = "";
var ajax = new Ajax("POST",url,true,content,'text/xml',"utf-8");
ajax.request();
</script>
第二种:
<script type="text/javascript">
var url = "areq.xml";
var content = "";
var ajax = new Ajax();
ajax.requestWithParams("POST",url,true,content,'text/xml',"utf-8");
</script>
同样也可以从ajax里面取得一些属性自己进行实现,比如:
<script type="text/javascript">
var url = "areq.xml";
var content = "";
var ajax = new Ajax("POST",url,true,content,'text/xml',"utf-8");
ajax.request();
//var ajax = new Ajax();
//ajax.requestWithParams("POST",url,true,content,'text/xml',"utf-8");
alert(ajax.xmlHttp);
var headers = ajax.xmlHttp.getAllResponseHeaders();
alert(headers.length);
</script>
因为我不知道自己最终将会做一个什么样的效果,可能会加上请求过程中给用户展示一些页面效果,也可能会屏蔽屏幕。
所以如果你要借鉴上面的js你必须实现你自己的处理,即对js进行完善:
完善js中的下面代码段:
this.onReady = function(xmlHttp){
xmlHttp.onreadystatechange=function(){
//alert(xmlHttp.readyState);
if(xmlHttp.readyState==0){
//请求未初始化(在调用 open() 之前)
//alert("请求未初始化(在调用 open() 之前)");
}else if(xmlHttp.readyState==1){
//请求已提出(调用 send() 之前)
//alert("请求已提出(调用 send() 之前)");
}else if(xmlHttp.readyState==2){
// 请求已发送(这里通常可以从响应得到内容头部)
//alert("请求已发送(这里通常可以从响应得到内容头部)");
}else if(xmlHttp.readyState==3){
// 请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应)
//alert("请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应)");
}else if(xmlHttp.readyState==4){
// 请求已完成(可以访问服务器响应并使用它)
//alert("请求已完成(可以访问服务器响应并使用它)");
if (xmlHttp.status == 200){
alert(xmlHttp.responseText);
}
}
}
}