`
ccw5510
  • 浏览: 7856 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

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

阅读更多
我也来发一个自己做的 ajax 简单封装,望多提意见。

<!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
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
分享到:
评论
12 楼 luciferdevil 2011-01-25  
attol 写道
最近很多帖子都想投隐藏和新手帖

怎么投 教教
11 楼 rainsilence 2011-01-25  
zhouyrt 写道
rainsilence 写道
其实ajax框架最难得部分在于timeout。你能模拟出来嘛?多浏览器下效果不一样


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

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


又开始广告了。。。
10 楼 rainsilence 2011-01-25  
LeoChowComtop 写道
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 的选择会更多些。。
因为有时候,缓存的更好,比如图片。。


跟你说的不是一回事
9 楼 LeoChowComtop 2011-01-25  
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 的选择会更多些。。
因为有时候,缓存的更好,比如图片。。
8 楼 zhouyrt 2011-01-25  
rainsilence 写道
其实ajax框架最难得部分在于timeout。你能模拟出来嘛?多浏览器下效果不一样


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

http://snandy.iteye.com/blog/738234
http://snandy.iteye.com/blog/738420
7 楼 夜之son 2011-01-24  
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好些


加时间戳一直是推荐的方式吧。
6 楼 rainsilence 2011-01-23  
其实ajax框架最难得部分在于timeout。你能模拟出来嘛?多浏览器下效果不一样
5 楼 rainsilence 2011-01-23  
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好些
4 楼 mirinda95925 2011-01-21  
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比较懒,要是请求没有变,可能会造成不发送。
3 楼 flamesea 2011-01-20  
回楼上的,这是为了避免浏览器缓存造成的查询结果不变,而通过附加Math.random()来使得每次的请求不尽相同
2 楼 mayEyeInfo 2011-01-20  
.....
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();
求解答!!!!
1 楼 attol 2011-01-20  
最近很多帖子都想投隐藏和新手帖

相关推荐

Global site tag (gtag.js) - Google Analytics