Ajax和Jsonp实践

之前一直使用jQuery的ajax方法，导致自己对浏览器原生的XMLHttpRequest对象不是很熟悉，于是决定自己写下，以下是个人写的deom，发表一下，聊表纪念。

Ajax 和 jsonp 的javascript 实现：

/*! 
* ajax.js
* © auth zernmal 
* @ description XMLHttpRequest and Jsonp practice
*/function ajax(url,options ){var options = options || {} ,method = options.method || "GET",async = (typeof options.async !== "undefined") ? options.async : true ,user = (typeof options.user !== "undefined") ? options.user : "" ,pswd = (typeof options.pswd !== "undefined") ? options.pswd : "" ,reciveType = options.reciveType || "string" ,data = options.data || null ,header = options.header || [],callback = options.callback || function(){},xhr =  XMLHttpRequest ?  new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");if(method=='GET' && data){var dataStr = [];url = (url.indexOf("?")==-1) ? url + "?" : url + "&" ; for(var i in data){dataStr.push( i + "=" + data[i]) ;}url += dataStr.join("&");data = null;}else if(data){var form = new FormData();        for(var i in data){form.append( i , data[i]);    }data = form;}xhr.onreadystatechange = function() {if (xhr.readyState == 4) {// 4 = "loaded"if (xhr.status == 200) {// 200 = OKvar responseData = null ;if(reciveType==="string"){responseData = xhr.responseText;}else if(reciveType === "json"){responseData = xhr.responseText;if( false && JSON && JSON.parse) {responseData = JSON.parse(responseData);}else{responseData = eval('('+responseData+')');}}options.callback && options.callback(responseData);} else {alert("Problem retrieving XML data");}}};xhr.open(method , url , async , user ,pswd);    for(var i = header.length -1 ; i > 0 ; i--){xhr.setRequestHeader(header[i].type, header[i].content);    }xhr.send(data);
}function jsonp(url , options){var options = options || {} ,script = document.createElement('script') ,callback = options.callback || function(result){} ,callbackName = 'myjsonpcall'+ (new Date()).getTime(),data = options.data || {} ,dataStr = [];for(var i in data){dataStr.push( i + "=" + data[i]) ;}if(url.indexOf("?")==-1){url += "?"+ dataStr.join("&") +"&callback="+callbackName;}else{url += "&"+ dataStr.join("&") +"&callback="+callbackName;}script.setAttribute('src', url);    window[callbackName] = callback ;// 把script标签加入head，此时调用开始document.getElementsByTagName('head')[0].appendChild(script);
}

PHP服务端响应请求：

<?php$func = $_GET['func'];if(function_exists($func)){$func();}else{funcNotExist();}function funcNotExist(){echo "function is not exist ! ";}function returnJson(){$lastName = $_GET['lastName'];$firstName = $_GET['firstName'];echo json_encode(array('firstName'=>$firstName,'lastName'=>$lastName));}function returnString(){$lastName = $_GET['lastName'];$firstName = $_GET['firstName'];echo "the string you send is ".$lastName." ".$firstName;}function postReturn(){$lastName = $_POST['lastName'];$firstName = $_POST['firstName'];echo "the string you post is ".$lastName." ".$firstName;}function jsonP(){header('content-type: application/json; charset=utf-8');$lastName = $_GET['lastName'];$firstName = $_GET['firstName'];$callbackFunc = isset($_GET['callback'])? htmlspecialchars($_GET['callback']):"callback";$json = json_encode(array('firstName'=>$firstName,'lastName'=>$lastName));echo "$callbackFunc($json)";}

页面内调用方法：

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Ajax与Jsonp实践</title><script type="text/javascript" src="js/ajax.js"></script>
</head>
<body>
<script>jsonp("/ajax.php?func=jsonP",{callback : function(result){console.log(result);},data : {lastName : "zernmal" , firstName : "chen"} 
});ajax("/ajax.php?func=returnJson",{method : "GET",callback : function(result){console.log(result);},data : {lastName : "zernmal" , firstName : "chen"} ,reciveType : "json"
});
</script>
</body>
</html>