Posts Tagged ‘AJAX’

21
一

使用eval生成JSON对象

作者： boke ，分类： JSON, JavaScript

我们假设通过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()函数生成的字符串。

21
一

手机使用AJAX

作者： boke ，分类： JavaScript, markup language, mobile web

没有评论

测试一下手机浏览器对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方法生成所需的样式。

12
一

Javascritp,prototype,jquery,mootools的AJAX使用

作者： boke ，分类： JavaScript

没有评论

老是记不住各个框架的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%，其它浏览器不知道用啥调试。

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

7
一