这次是我第四次参加《web标准交流会》,因为最近工作挺忙，所以没能及时关注WEB标准交流会网站,当我看到本期话题《前端工程师应该如何学习javascript》时，眼前一亮。由于前几次话题大多是分享工作中部门之间配合,而很少有这种纯技术的话题(也可能是我参加的次数不多，错过了以前的技术讨论).

这次交流会解决了我最近工作中遇到的一个JavaScript跨域调用数据的问题。就我个人来说，平时工作中使用Ajax无非以下几种:

1.基本调用(代码片段):

var request=new XMLHttpRequest(); //仅作参考

request.open(“GET”,url,true);

request.onreadystatechange=function(){…};

request.send(”);

2.使用jQuery框架(代码片段):

$.ajax({

type:”GET”,

url:”",

data:{},

beforeSend:function(){…},

success:function(){….},

error:function(){…}

})

3.jQuery的$.getJSON(url,data,callback)，即JSONP技术;

和上面2相比差异如下:

优点 ：跨域；

缺点：不提供错误处理，如果动态插入的代码正常运行，你可以得到返回，但是如果失败了，那么什么都不会发生。你无法获得一个404的错误，也不能取消这个请求。我处理的方式可见$.getJSON的错误处理(原创)

虽然上面这些方法在处理常规的交互已经足够了,不过我有个需求:不使用jQuery框架实现JSONP功能。其实这个从原理上来讲写起来并不难,

下面是我的最初版:

定义函数:

function getJSON ( url , func ){

}

回调函数:

}

页面调用:

}

虽然可以实现效果,但是代码凌乱，不便重用。

定义函数:

function getJSON(url, func){

if (!document.getElementById) {

return false;

}

if (document.getElementById(“jsonscript”)) {

var oldscript = document.getElementsByTagName(“script”);

for (var i = 0; i < oldscript.length; i++) {

if (oldscript[i].getAttribute(“src”) == url) {

oldscript.parentNode.removeChild(oldscript);

}

}

}

var script = document.createElement(“script”);

var rnd=parseInt(Math.random()*1e8);

url+=”?jsoncallback=callback”+rnd;

script.setAttribute(“src”, url);

window["callback"+rnd]=func;

script.setAttribute(“id”, “jsonscript”);

document.getElementsByTagName(“head”)[0].appendChild(script);

}

回调函数:

function parseDZList(json){

var show = document.getElementById(“show”);

var Status = json.StatusInfo.Status;

var items = json.Items;

for (var i = 0; i < items.length; i++) {

var ZIMG=items[i].ZIMG

ZIMG=ZIMG.replace(“{0}”,”64×64″)

show.innerHTML += ”

“+items[i].ZName+”

“;

}

}

页面调用:

window.onload = function(){

getJSON(“http://api.zhui.cn/content/ZIDList.json”,parseDZList);

}

后来在群里分享时Along对var rnd=parseInt(Math.random()*1e8)提出自己的观点，并提示可以用生成数组的方式来处理,更大程度上避免了碰撞.不过还好这个只是为了避免缓存，不用太花心思.为了方便我还是使用了数组。

然后小肥猪(冯恒)，在群里发了一段代码：

$getJSON = function(url,fun){

var s  = document.createElement(‘script’);

s.src = url;

var callback = ‘callback’+ (+new Date());

window[callback] = fun;

document.body.appendChild(s);

}

这个主要是改良了随机数(小小提示下哦,这个代码没有实现JSONP的功能哦);

于是融合上面的代码后最终代码如下:

定义函数:

function getJSON(url, func){

if (!document.getElementById) {

重点在于：暂停时记录一下当前的动作，留着点击继续用

DEMO：http://showfan.cn/demo/moveElement2.html

难点:计算运动过程中的位移

function moveElement(elementID,final_x,final_y,interval){
if(!document.getElementById) return false;
if(!document.getElementById(elementID)) return false;
var elem=document.getElementById(elementID);
var xpos=parseInt(elem.style.left);
var ypos=parseInt(elem.style.top);
if(xpos==final_x&&ypos==final_y){
return false;
}
if(xpos
var dist=Math.ceil((final_x-xpos)/10)
xpos=xpos+dist;
}
if(xpos>final_x){
var dist=Math.ceil((xpos-final_x)/10)
xpos=xpos-dist;
}
if(ypos
var dist=Math.ceil((final_y-ypos)/10)
ypos=ypos+dist;
}
if(ypos>final_y){
var dist=Math.ceil((ypos-final_y)/10)
ypos=ypos-dist;
}

elem.style.left=xpos+”px”;
elem.style.top=ypos+”px”;
var repeat=”moveElement(‘”+elementID+”‘,”+final_x+”,”+final_y+”,”+interval+”)”;
timer=setTimeout(repeat,interval);
}

当用正常方法安装失败的情况下情使用下面的方法：

第一步:

打开aptana->help->Install New Software

第二步:

在Work with处输入:http://www.showfan.cn/com.nokia.wrt.2.1.0.v20090707223056

第三步:

取消选中”Group items by catagory”这一项,这时会列出可用的插件，

第四步:

然后选中”Nokia Web Runtime plug-in…..”这一项,继续”下一步”

第五步，默认安装直到完成

~~~估计是三等奖~~~

好了废话不多说，进入正文:

1.设置加载图片<div id=”loading”><img src=”m/loading.gif”/></div>

2.调用数据前

3.载入数据后

$.getJSON(url, function(msg){

$(“#loading”).hide();

…..

})

原理:

在载入数据前加个标记，我这里用的是一个loading图片，其实也可以用变量来代替，然后执行$.getJSON，这里分两种情况:一种是加载成功，正常执行$.getJSON里面的代码；第二个是加载失败，不返回任何信息。所以，我把设置loading图片隐藏的代码放在加载成功时执行。当加载失败时，loading图片是不会被隐藏的(废话~)。后面的我们就可以做主了，任意设置一个超时时间，用settimeout来检查有没有执行隐藏loading的代码，具体方式是：图片是否隐藏。若图片没有隐藏，OK，我们的目的达到了，可以给用户一个提示,比如重试啊之类的!

后话:

$.getJSON很傻很天真，所以它忽略了错误，当你用它来获取一个404页面的时候，你会发现它不会返回信息(

其实经过测试发现，有返回值的

  var url="";

var x=$.getJSON(url, function(msg){

     alert(msg);

})

alert(x.readyState)

待测试…

),

是这样，由于本博客的虚拟主机不稳定，在之前查PR的时候一直是0，就没怎么管，没想PR会增加。

无论如何，自我恭喜一下

$.ajax({

type:”GET”,

url:”http://10.10.10.1″,

dataType:”JSON”,

beforeSend:function(){},

success:function(msg){alert(msg)},

error:function(){}

})

上面的error是处理错误的常用方法，但是当URL无法连接时，error就 不能正常处理了，用firebug调试的时候发现当Ajax请求超时时会报msg is null，于是在这个时候可以用msg-即返回的内容判断，试着修改一下代码:

success:function(msg){

if(!msg){
alert(“未知错误!”)
$(“.pop_inner h3″).html(“连接数据库失败!”);//例子
return false;

}

可以正常处理错误

var request;//定义Ajax执行标记

request=$.ajax({

type:”GET”,url:”http://test.com/test.php”,…

})

用户取消时: if(request) { request.abort();}

demo:http://www.izmax.cn/demo/form_focus.html

可应用在: