Ajax和Jsonp实践
生活随笔
收集整理的這篇文章主要介紹了
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>以上只是簡單實驗，如有問題歡迎提出。
轉載于:https://www.cnblogs.com/zernmal/p/3751066.html
總結
以上是生活随笔為你收集整理的Ajax和Jsonp实践的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 网友日本偶遇鹿晗关晓彤，两人最新合照来看
- 下一篇： 学习语言贵在坚持