大风口 » AJAX http://www.masterboke.com I want to change the world! Fri, 16 Sep 2011 09:41:27 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 使用eval生成JSON对象 http://www.masterboke.com/2009/01/21/%e4%bd%bf%e7%94%a8eval%e7%94%9f%e6%88%90json%e5%af%b9%e8%b1%a1/ http://www.masterboke.com/2009/01/21/%e4%bd%bf%e7%94%a8eval%e7%94%9f%e6%88%90json%e5%af%b9%e8%b1%a1/#comments Wed, 21 Jan 2009 07:32:37 +0000 boke http://www.masterboke.cn/?p=181 我们假设通过var ret = xmlHttp.responseText 得到服务器端已经组装好的数据，在使用eval生成JSON对象时，一定要注意添加一对圆括号，例如： var json = eval(‘(‘+ret+’)'); 假设我们在服务器端使用php的encode_json()生成需要返回的字符串 如果生成的字符串是[{"name":"boke"},{"age":"23"}]，我们可以直接使用eval([{"name":"boke"},{"age":"23"}])生成相应的JSON对象； 如果生成的字符串是{“name”:”boke”,”age”:”23″}，我们使用eval({“name”:”boke”,”age”:”23″})生成JSON对象时就会出错，我们需要这样写eval(({“name”:”boke”,”age”:”23″}))。 eval(( ))的写法同样适用于包括第一种情况在内的其它通过encode_json()函数生成的字符串。]]>

我们假设通过var ret = xmlHttp.responseText 得到服务器端已经组装好的数据，在使用eval生成JSON对象时，一定要注意添加一对圆括号，例如：
var json = eval(‘(‘+ret+’)');

假设我们在服务器端使用php的encode_json()生成需要返回的字符串

如果生成的字符串是[{"name":"boke"},{"age":"23"}]，我们可以直接使用eval([{"name":"boke"},{"age":"23"}])生成相应的JSON对象；

如果生成的字符串是{“name”:”boke”,”age”:”23″}，我们使用eval({“name”:”boke”,”age”:”23″})生成JSON对象时就会出错，我们需要这样写eval(({“name”:”boke”,”age”:”23″}))。

eval(( ))的写法同样适用于包括第一种情况在内的其它通过encode_json()函数生成的字符串。

]]> http://www.masterboke.com/2009/01/21/%e4%bd%bf%e7%94%a8eval%e7%94%9f%e6%88%90json%e5%af%b9%e8%b1%a1/feed/ 0 手机使用AJAX http://www.masterboke.com/2009/01/21/%e6%89%8b%e6%9c%ba%e4%bd%bf%e7%94%a8ajax/ http://www.masterboke.com/2009/01/21/%e6%89%8b%e6%9c%ba%e4%bd%bf%e7%94%a8ajax/#comments Wed, 21 Jan 2009 07:06:44 +0000 boke http://www.masterboke.cn/?p=177 测试一下手机浏览器对AJAX的支持： <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//OMA//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <title>title</title> </head> <body> <div id="a"></div> <div id='b'></div> <input type="button" onclick="startXMLHttp();" value="发送GET" /> <div id="a1"></div> <div id='b1'></div> <input type="button" onclick="startXMLHttp1();" value="发送POST" …

继续阅读 »

]]>

测试一下手机浏览器对AJAX的支持：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//OMA//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>title</title>
</head>
<body>
<div id="a"></div>
<div id='b'></div>
<input type="button" onclick="startXMLHttp();" value="发送GET" />
<div id="a1"></div>
<div id='b1'></div>
<input type="button" onclick="startXMLHttp1();" value="发送POST" />

<script type="text/javascript">
 //<![CDATA[
  var xmlHttp;
  function createXMLHttp()
  {
    if (window.XMLHttpRequest)
    {
      xmlHttp = new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
      try
      {
        xmlHttp = new ActiveXObject('Msxml2.XMLHTTP');
      }
      catch(e)
      {
        try
        {
          xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
        }
        catch(e) {};
      }
    }
  }
  
  function startXMLHttp()
  {
    createXMLHttp();
    var sendStr = "name=博科&age=23";
    sendStr = encodeURI(sendStr);
  var t1 = document.createTextNode(sendStr);
    document.getElementById('a').appendChild(t1);
    xmlHttp.onreadystatechange = doSomething;
    xmlHttp.open('GET','ajaxtest.php?'+sendStr,true);
    xmlHttp.send(null);
  }
  
  function doSomething()
  {
    
    if (xmlHttp.readyState == 4)
    {
      if (xmlHttp.status == 200)
      {
    var t2 = document.createTextNode(xmlHttp.responseText);
        document.getElementById('b').appendChild(t2);
    //document.getElementById('b').innerHTML = xmlHttp.responseText;
      }
    }
  }
  
  function startXMLHttp1()
  {
    createXMLHttp();
    var sendStr = "name=博科&age=23";
    sendStr = encodeURI(sendStr);
  var t3 = document.createTextNode(sendStr);
    document.getElementById('a1').appendChild(t3);
    xmlHttp.onreadystatechange = doSomething1;
    xmlHttp.open('POST','ajaxtest1.php',true);
    xmlHttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    xmlHttp.send(sendStr);
  }
  
  function doSomething1()
  {
    if (xmlHttp.readyState == 4)
    {
      if (xmlHttp.status == 200)
      {
        var ret = eval('('+xmlHttp.responseText+')');
        var t4 = document.createTextNode('你的名字是'+ret.name+'，年龄是'+ret.age); 
        document.getElementById('b1').appendChild(t4);
        //document.getElementById('b1').innerHTML = xmlHttp.responseText;
      }
    }
  }
 //]]>
</script>
</body>
</html>

由于是xhtml，如果服务器返回的数据里面有“&”，“<”等特殊字符，以及html标签等，就会提示解析错误，所以我们不能使用document.getElementById(‘b1′).innerHTML = xmlHttp.responseText了，这里需要注意。
推荐在服务器端将数据组装成JSON格式，然后在客户端使用createElement()，appendChild()等DOM方法生成所需的样式。

]]> http://www.masterboke.com/2009/01/21/%e6%89%8b%e6%9c%ba%e4%bd%bf%e7%94%a8ajax/feed/ 0 Javascritp,prototype,jquery,mootools的AJAX使用 http://www.masterboke.com/2009/01/12/javascritpprototypejquerymootools%e7%9a%84ajax%e4%bd%bf%e7%94%a8/ http://www.masterboke.com/2009/01/12/javascritpprototypejquerymootools%e7%9a%84ajax%e4%bd%bf%e7%94%a8/#comments Mon, 12 Jan 2009 08:23:53 +0000 boke http://www.masterboke.cn/?p=26 老是记不住各个框架的AJAX写法，今天总结了一下，发现了一些小不同。 Javascript及prototype写法： <div id="a"></div> <div id='b'></div> <input type="button" onclick="startXMLHttp();" value="普通GET" /> <div id="a1"></div> <div id='b1'></div> <input type="button" onclick="startXMLHttp1();" value="普通POST" /> <div id="c"></div> <div id="d"></div> <input type="button" onclick="prototypeSend();" value="prototype GET" /> <div id="c1"></div> <div id="d1"></div> <input type="button" onclick="prototypeSend1();" value="prototype POST" /> …

继续阅读 »

]]>

老是记不住各个框架的AJAX写法，今天总结了一下，发现了一些小不同。

Javascript及prototype写法：

<div id="a"></div>
<div id='b'></div>
<input type="button" onclick="startXMLHttp();" value="普通GET" />
<div id="a1"></div>
<div id='b1'></div>
<input type="button" onclick="startXMLHttp1();" value="普通POST" />
<div id="c"></div>
<div id="d"></div>
<input type="button" onclick="prototypeSend();" value="prototype GET" />
<div id="c1"></div>
<div id="d1"></div>
<input type="button" onclick="prototypeSend1();" value="prototype POST" />

<script type="text/javascript">
  var xmlHttp;
  function createXMLHttp()
  {
    if (window.XMLHttpRequest)
    {
      xmlHttp = new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
      try
      {
        xmlHttp = new ActiveXObject('Msxml2.XMLHTTP');
      }
      catch(e)
      {
        try
        {
          xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
        }
        catch(e) {};
      }
    }
  }

  function startXMLHttp()
  {
    createXMLHttp();
    var sendStr = "name=博科&age=23&en=<>@+/ ://'f#a&mn=%rt";
    sendStr = encodeURI(sendStr);
    document.getElementById('a').innerHTML = sendStr;
    xmlHttp.onreadystatechange = doSomething;
    xmlHttp.open('GET','ajaxtest.php?'+sendStr,true);
    xmlHttp.send(null);
  }

  function doSomething()
  {

    if (xmlHttp.readyState == 4)
    {
      if (xmlHttp.status == 200)
      {
        document.getElementById('b').innerHTML = xmlHttp.responseText;
      }
    }
  }

  function startXMLHttp1()
  {
    createXMLHttp();
    var sendStr = "name=博科&age=23&en=<>@+/ ://'f#a&mn=%rt";
    sendStr = encodeURI(sendStr);
    document.getElementById('a1').innerHTML = sendStr;
    xmlHttp.onreadystatechange = doSomething1;
    //xmlHttp.open('GET','ajaxtest.php?'+sendStr,true);
    //xmlHttp.send(null);
    xmlHttp.open('POST','ajaxtest.php',true);
    xmlHttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    xmlHttp.send(sendStr);
  }

  function doSomething1()
  {

    if (xmlHttp.readyState == 4)
    {
      if (xmlHttp.status == 200)
      {
        document.getElementById('b1').innerHTML = xmlHttp.responseText;
      }
    }
  }
</script>

<script type="text/javascript">
function prototypeSend()
{
  var po = new Ajax.Request('ajaxtest.php',
  {
    method:'GET',
    parameters: "name=博科&age=23&en=<>@+/ ://'f#a&mn=%rt",
    onSuccess: function(transport){
      document.getElementById('c').innerHTML = po.parameters.name+po.parameters.age+po.parameters.en;
      document.getElementById('d').innerHTML = transport.responseText;
    },
    onFailure: function(){ }
  });
}
function prototypeSend1()
{
  var po = new Ajax.Request('ajaxtest.php',
  {
    method:'POST',
    parameters: "name=博科&age=23&en=<>@+/ ://'f#a&mn=%rt",
    onSuccess: function(transport){
      document.getElementById('c1').innerHTML = po.parameters.name+po.parameters.age+po.parameters.en;
      document.getElementById('d1').innerHTML = transport.responseText;
    },
    onFailure: function(){ }
  });
}
</script>

jQuery写法：

<div id="e"></div>
<div id="f"></div>
<input type="button" onclick="jquerySend();" value="jquery GET" />
<div id="e1"></div>
<div id="f1"></div>
<input type="button" onclick="jquerySend1();" value="jquery POST" />
<script type="text/javascript">
  function jquerySend()
  {
    var po = $.ajax({
      type:'GET',
      url:'ajaxtest.php',
      data:"name=博科&age=23&en=<>@+/ ://'f#a",
      success:function(transport){
      //document.getElementById('e').innerHTML = this.data;
      document.getElementById('f').innerHTML = transport;
      }
    })
  }

  function jquerySend1()
  {
    var po = $.ajax({
      type:'POST',
      url:'ajaxtest.php',
      data:"name=博科&age=23&en=<>@+/ ://'f#a",
      success:function(transport){
      //document.getElementById('e1').innerHTML = po.data.name+po.data.age+po.data.en;
      document.getElementById('f1').innerHTML = transport;
      }
    })
  }
</script>

mootools写法：

<div id="a"></div>
<div id='b'></div>
<input type="button" onclick="startXMLHttp();" value="mootools GET" />
<div id="a1"></div>
<div id='b1'></div>
<input type="button" onclick="startXMLHttp1();" value="mootools POST" />
<script type="text/javascript">
function startXMLHttp()
{
	new Request({url: 'ajaxtest.php',
        method:'get',
        data:"name=博科&age=23&en=<>@+/ ://'f#a&mn=%rt",
        onSuccess: function(responseText) {
            document.getElementById('b').innerHTML = responseText;
        },
        onFailure: function() {

        }
    }).send();
}

function startXMLHttp1()
{
	new Request({url: 'ajaxtest.php',
        method:'post',
        data:"name=博科&age=23&en=<>@+/ ://'f#a&mn=%rt",
        onSuccess: function(responseText) {
            document.getElementById('b1').innerHTML = responseText;
        },
        onFailure: function() {

        }
    }).send();
}

</script>

以上Prototype 1.6.0.2,jQuery 1.2.6,mootools 1.2.1。
prototype自动对“+”进行了编码，所以后台用php的urldecode时能够把“+”正确解析,但是其它几种方法没有，urldecode时把“+”解析成了空格。

使用GET提交时，如果不对变量进行encodeURIComponent，此时若某个变量里带有“#”，那从这个变量的“#”字符往后的参数就不能被正确传递，但是POST可以。不过prototype的POST和GET是一样的，“#”之后的字符都不能被正确传递，而且如果使用了encodeURIComponent，prototype会报错。看了一下prototype代码对“#”进行了特殊处理。本想调试一下试试，可是我的firefox(firefox内存占用一直在涨没有尽头，唉)立马把握的老机（hp ze2202）卡死，cpu 100%，其它浏览器不知道用啥调试。

暂时就这些，以后用的时候注意，有空继续研究。

]]> http://www.masterboke.com/2009/01/12/javascritpprototypejquerymootools%e7%9a%84ajax%e4%bd%bf%e7%94%a8/feed/ 0 25个优秀的Ajax技术和实例 http://www.masterboke.com/2009/01/07/25%e4%b8%aa%e4%bc%98%e7%a7%80%e7%9a%84ajax%e6%8a%80%e6%9c%af%e5%92%8c%e5%ae%9e%e4%be%8b/ http://www.masterboke.com/2009/01/07/25%e4%b8%aa%e4%bc%98%e7%a7%80%e7%9a%84ajax%e6%8a%80%e6%9c%af%e5%92%8c%e5%ae%9e%e4%be%8b/#comments Wed, 07 Jan 2009 01:37:51 +0000 boke http://www.masterboke.cn/?p=15 继续阅读 »

]]>

1.Ajax RSS reader
一个简单的RSS reader，读取远程xml数据基于AJAX,PHP,MYSQL的RSS源，
这个例子允许用户在一个网页中查看多种源内容

2.Ajax 桌面
该指南是一个手把手教程，通过它你可以创建一个类似
于PageFlagePageFlage 和
Netvibes的桌面/网页。这个指南的目的是展示一些基于web应用程序的技巧，这些技巧也是比较常用的，比如操纵DOM，事件监听，读取远程数据.
Ajax Desktop demo

3.AJAX for chat
使用异步JS,XML,PHP创建一个简单的基于web的聊天客户端

4.使用AJAX和del.icio.us创建自己的信息空间
使用del.icic.us API，但是方法和思想可以适用与其他流行的服务，如：DIGG和Flickr

5.AJAX超轻量级图表
使用动态读取数据允许用户创建虚拟的图形(falsh with ajax)。
该方案涉及到js脚本交互，和setData和setStyle方法

6.使用ajax和PHP创建日历
使用ajax和PHP创建一个日历组件，月份转换无须刷新页面
Quick Calendar demo

7.如何在你的网站中使用ajax整合google日历
该指南展示了如何在一个网页里创建一个调用一个公共的Google日历
AJAX calendar demo

8.Edit-in-Place with jQuery
Edit In Place demo 1
Edit In Place demo 2

9.创建一个AJAX星级评定构件
评定系统，无须点击按钮或者刷新页面(那通过什么？？点击文章的链接？？？)
使用js框架/库：DOJO,JQUERY，mootools,Prototype JS

10.使用AJAX上传文件
AJAX File Uploader demo

11.使用AJAX，PHP创建mailing列表
使用MYSQL储存用户输入的数据，Prototype JS 用于简化AJAX请求和绑定时间处理

12．安全的联系人表单
Safer Form demo

13. Ajax with CAPTCHA

14.基于AJAX的登陆表单
异步验证输入的数据，使用jQuery form plugin和PHP处理请求
Ajax-based login form demo

15. AJAX效果(for message box)
在该效果图中，用户点击save按钮，提示框颜色将逐渐消退
Nice Ajax Effects for messages box demo

16. 文字自动提示
类似google的效果
AutoCompleter tutorial demo

17.自动填充选择框
使用jQuery&AJAX,无须刷新页面，自动填充内容
Auto-populating Select Boxes demo

18.ajax下拉菜单
Ajax Dropdown Menu demo

19.Ajax/PHP Shoutbox
AJAX Shoutbox demo

20. 选项卡
通过ajax填充数据, 使用PHP和Prototype JS
Building Tabbed Content demo

21.Load In and Animate Content
展示如何读取数据到一个页面，使用jQuery处理Ajax请求和处理DOM
Load In and Animate Content demo

22. The Hows and Whys of Degradable Ajax
Degradable Ajax demo

23.使用避免多余的Ajax交互
使用该方法，可以在数据没有更新的情况下，尽量减少不必要的数据库状态的改变和计算过程。

24.更好的AJAX Back Button Solution
A Better Ajax Back Button demo

25.Making Ajax Work with Screen Readers

]]> http://www.masterboke.com/2009/01/07/25%e4%b8%aa%e4%bc%98%e7%a7%80%e7%9a%84ajax%e6%8a%80%e6%9c%af%e5%92%8c%e5%ae%9e%e4%be%8b/feed/ 0