设为首页收藏本站

职业IT人-IT人生活圈

 找回密码
 成为会员
搜索
职业IT人-IT人生活圈»IT生活 › 软件工程师 › Java › 我也来发一个自己做的 ajax 简单封装
返回列表 发新帖
查看: 552|回复: 15

我也来发一个自己做的 ajax 简单封装

  [复制链接]
feiguo 发表于 2011-7-27 09:08 | 显示全部楼层 |阅读模式
我也来发一个自己做的 ajax 简单封装，望多提意见。

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>  
<title>ajax</title>  
<script type="text/javascript"><!--   
function Ajax() {   
var xmlHttpReq = null;   
if (window.XMLHttpRequest) {   
  xmlHttpReq = new XMLHttpRequest();   
} else {   
  if (window.ActiveXObject) {   
    var versions = ['Microsoft.XMLHTTP', 'MSXML.XMLHTTP', 'Microsoft.XMLHTTP',   
'Msxml2.XMLHTTP.7.0', 'Msxml2.XMLHTTP.6.0',   
'Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0',   
'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];   
    for(var i=0; i<versions.length; i++) {   
      try {   
        xmlHttpReq = new ActiveXObject(versions[i]);   
        if(xmlHttpReq) {   
          break;   
        }   
      } catch(e) {}   
    }   
  }   
}   
      
var handler = null;   
      
this.invoke = function (mode, url, value, _handler) {   
  handler = _handler;   
  if(mode == 'get') {   
    var querystring = url+'?'+value+'&'+Math.random();   
    if(window.XMLHttpRequest) {   
      xmlHttpReq.open('GET', querystring);   
      xmlHttpReq.onreadystatechange = this.callback;   
      xmlHttpReq.send(null);   
    } else {   
      xmlHttpReq.open('GET', querystring, true);   
      xmlHttpReq.onreadystatechange = this.callback;   
      xmlHttpReq.send();   
    }   
  }   
  else if(mode == 'post') {   
    xmlHttpReq.open('POST', url);   
    xmlHttpReq.onreadystatechange = this.callback;   
    xmlHttpReq.setRequestHeader('Content-Type',   
'application/x-www-form-urlencoded');   
    xmlHttpReq.send(value);   
  }   
};   
      
this.callback = function () {   
  if (xmlHttpReq.readyState == 4) {   
    if (xmlHttpReq.status == 200) {   
      handler(xmlHttpReq.responseText);   
    } else {   
      alert("请刷新页面！");   
    }   
  }   
};   
}   
  
// 调用示例   
new Ajax().invoke(   
  "get",   
  "/index.php",   
  'name=hello',   
  run   
);   
  
function run(response) {   
  alert(response);   
}   
// --></script>  
</head>  
  
<body>  
</body>  
</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>
<title>ajax</title>
<script type="text/javascript"><!--
function Ajax() {
var xmlHttpReq = null;
if (window.XMLHttpRequest) {
  xmlHttpReq = new XMLHttpRequest();
} else {
  if (window.ActiveXObject) {
    var versions = ['Microsoft.XMLHTTP', 'MSXML.XMLHTTP', 'Microsoft.XMLHTTP',
'Msxml2.XMLHTTP.7.0', 'Msxml2.XMLHTTP.6.0',
'Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0',
'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];
    for(var i=0; i<versions.length; i++) {
      try {
        xmlHttpReq = new ActiveXObject(versions[i]);
        if(xmlHttpReq) {
          break;
        }
      } catch(e) {}
    }
  }
}
       
var handler = null;
       
this.invoke = function (mode, url, value, _handler) {
  handler = _handler;
  if(mode == 'get') {
    var querystring = url+'?'+value+'&'+Math.random();
    if(window.XMLHttpRequest) {
      xmlHttpReq.open('GET', querystring);
      xmlHttpReq.onreadystatechange = this.callback;
      xmlHttpReq.send(null);
    } else {
      xmlHttpReq.open('GET', querystring, true);
      xmlHttpReq.onreadystatechange = this.callback;
      xmlHttpReq.send();
    }
  }
  else if(mode == 'post') {
    xmlHttpReq.open('POST', url);
    xmlHttpReq.onreadystatechange = this.callback;
    xmlHttpReq.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded');
    xmlHttpReq.send(value);
  }
};
       
this.callback = function () {
  if (xmlHttpReq.readyState == 4) {
    if (xmlHttpReq.status == 200) {
      handler(xmlHttpReq.responseText);
    } else {
      alert("请刷新页面！");
    }
  }
};
}

// 调用示例
new Ajax().invoke(
  "get",
  "/index.php",
  'name=hello',
  run
);

function run(response) {
  alert(response);
}
// --></script>
</head>

<body>
</body>
</html>

服务端数据返回脚本：index.php

Php代码  
<?php   
echo $_GET['name'];   
  
// echo $_POST['name'];   
?>  

<?php
echo $_GET['name'];

// echo $_POST['name'];
?>

　　兼容 IE、firefox、chrome 等浏览器。

　　var querystring = url+'?'+value+'&'+Math.random();，Math.random() 主要是进行 GET 请求时为了防止缓存。

　　发送请求时，对数据最好进行 urlencode 编码。

转载地址：http://www.xhttp.cn/2010/06/18

回复

使用道具 举报

紫衿 发表于 2011-7-27 09:09 | 显示全部楼层
最近很多帖子都想投隐藏和新手帖

回复 支持 反对

使用道具 举报

broken 发表于 2011-7-27 09:09 | 显示全部楼层
.....
this.invoke = function (mode, url, value, _handler) {   
31.  handler = _handler;   
32.  if(mode == 'get') {   
33.    var querystring = url+'?'+value+'&'+Math.random();   
34.    if(window.XMLHttpRequest) {   
......
为什么要用Math.random();
求解答！！！！

回复 支持 反对

使用道具 举报

话说我当年 发表于 2011-7-27 09:09 | 显示全部楼层
回楼上的，这是为了避免浏览器缓存造成的查询结果不变，而通过附加Math.random()来使得每次的请求不尽相同

回复 支持 反对

使用道具 举报

Jethro 发表于 2011-7-27 09:09 | 显示全部楼层
mayEyeInfo
.....
this.invoke = function (mode, url, value, _handler) {   
31.  handler = _handler;   
32.  if(mode == 'get') {   
33.    var querystring = url+'?'+value+'&'+Math.random();   
34.    if(window.XMLHttpRequest) {   
......
为什么要用Math.random();
求解答！！！！

因为ie6比较懒，要是请求没有变，可能会造成不发送。


回复 支持 反对

使用道具 举报

fl 发表于 2011-7-27 09:09 | 显示全部楼层
mirinda95925
mayEyeInfo
.....
this.invoke = function (mode, url, value, _handler) {   
31.  handler = _handler;   
32.  if(mode == 'get') {   
33.    var querystring = url+'?'+value+'&'+Math.random();   
34.    if(window.XMLHttpRequest) {   
......
为什么要用Math.random();
求解答！！！！

因为ie6比较懒，要是请求没有变，可能会造成不发送。


随机数还是会造成重复，还是用+new Date好些

回复 支持 反对

使用道具 举报

走失的猫咪 发表于 2011-7-27 09:09 | 显示全部楼层
其实ajax框架最难得部分在于timeout。你能模拟出来嘛？多浏览器下效果不一样

回复 支持 反对

使用道具 举报

找不到我 发表于 2011-7-27 09:10 | 显示全部楼层
rainsilence
mirinda95925
mayEyeInfo
.....
this.invoke = function (mode, url, value, _handler) {   
31.  handler = _handler;   
32.  if(mode == 'get') {   
33.    var querystring = url+'?'+value+'&'+Math.random();   
34.    if(window.XMLHttpRequest) {   
......
为什么要用Math.random();
求解答！！！！

因为ie6比较懒，要是请求没有变，可能会造成不发送。


随机数还是会造成重复，还是用+new Date好些


加时间戳一直是推荐的方式吧。


回复 支持 反对

使用道具 举报

钰云 发表于 2011-7-27 09:10 | 显示全部楼层
rainsilence
其实ajax框架最难得部分在于timeout。你能模拟出来嘛？多浏览器下效果不一样


最难的的确是timeout。我在ajax系列之四，之五按检查超时，超时处理两部分来处理。

http://snandy.iteye.com/blog/738234
http://snandy.iteye.com/blog/738420


回复 支持 反对

使用道具 举报

只学java 发表于 2011-7-27 09:10 | 显示全部楼层
rainsilence
mirinda95925
mayEyeInfo
.....
this.invoke = function (mode, url, value, _handler) {   
31.  handler = _handler;   
32.  if(mode == 'get') {   
33.    var querystring = url+'?'+value+'&'+Math.random();   
34.    if(window.XMLHttpRequest) {   
......
为什么要用Math.random();
求解答！！！！

因为ie6比较懒，要是请求没有变，可能会造成不发送。


随机数还是会造成重复，还是用+new Date好些

，是否取缓存数据，作为参数传入如何？
client 的选择会更多些。。
因为有时候，缓存的更好，比如图片。。


回复 支持 反对

使用道具 举报

走失的猫咪 发表于 2011-7-28 10:55 | 显示全部楼层
相比他连说拜拜的 想法都没了 哈哈
回复 支持 反对

使用道具 举报

爱车车 发表于 2011-7-29 10:54 | 显示全部楼层
我是来收集资料滴...
回复 支持 反对

使用道具 举报

已经来了吗 发表于 2011-8-9 10:52 | 显示全部楼层
朕在自己的寝宫~~~~
回复 支持 反对

使用道具 举报

北大青鸟 发表于 2011-8-12 10:17 | 显示全部楼层
楼主身体健康，万事如意！
回复 支持 反对

使用道具 举报

天上智喜 发表于 2011-8-16 10:07 | 显示全部楼层
看起来好~~像啊~~~~~
回复 支持 反对

使用道具 举报

yoyo 发表于 2011-8-16 10:08 | 显示全部楼层
我头有点疼
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 成为会员

本版积分规则

QQ|手机版|小黑屋|网站帮助|职业IT人-IT人生活圈 ( 粤ICP备12053935号-1 )|网站地图
本站文章版权归原发布者及原出处所有。内容为作者个人观点，并不代表本站赞同其观点和对其真实性负责，本站只提供参考并不构成任何投资及应用建议。本站是信息平台，网站上部分文章为转载，并不用于任何商业目的，我们已经尽可能的对作者和来源进行了通告，但是能力有限或疏忽造成漏登，请及时联系我们，我们将根据著作权人的要求立即更正或者删除有关内容。

GMT+8, 2024-4-28 18:35 , Processed in 0.150191 second(s), 20 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表