|
以前沒(méi)怎么仔細(xì)的研究過(guò)ajax,只是用到了就直接拿過(guò)來(lái)用,發(fā)現(xiàn)了問(wèn)題再找解決方法.以下是我在找解決問(wèn)題的過(guò)程中的一點(diǎn)小小的總結(jié). 一.談Ajax的Get和Post的區(qū)別 Get方式: 用get方式可傳送簡(jiǎn)單數(shù)據(jù),，但大小一般限制在1KB下，數(shù)據(jù)追加到url中發(fā)送（http的header傳送）,，也就是說(shuō),，瀏覽器將各個(gè)表單字段元素及其數(shù)據(jù)按照URL參數(shù)的格式附加在請(qǐng)求行中的資源路徑后面,。另外最重要的一點(diǎn)是，它會(huì)被客戶端的瀏覽器緩存起來(lái),，那么,，別人就可以從瀏覽器的歷史記錄中，讀取到此客戶的數(shù)據(jù),，比如賬號(hào)和密碼等,。因此，在某些情況下，get方法會(huì)帶來(lái)嚴(yán)重的安全性問(wèn)題,。 Post方式: 當(dāng)使用POST方式時(shí),，瀏覽器把各表單字段元素及其數(shù)據(jù)作為HTTP消息的實(shí)體內(nèi)容發(fā)送給Web服務(wù)器，而不是作為URL地址的參數(shù)進(jìn)行傳遞,，使用POST方式傳遞的數(shù)據(jù)量要比使用GET方式傳送的數(shù)據(jù)量大的多,。 總之，GET方式傳送數(shù)據(jù)量小,，處理效率高,，安全性低，會(huì)被緩存,，而POST反之,。 使用get方式需要注意： 1 對(duì)于get請(qǐng)求（或凡涉及到url傳遞參數(shù)的），被傳遞的參數(shù)都要先經(jīng)encodeURIComponent方法處理.例：var url = "update.php?username=" +encodeURIComponent(username) + "&content=" +encodeURIComponent (content)+"&id=1" ; 使用Post方式需注意： 1.設(shè)置header的Context-Type為application/x-www-form-urlencode確保服務(wù)器知道實(shí)體中有參數(shù)變量.通常使用XmlHttpRequest對(duì)象的SetRequestHeader("Context-Type","application/x-www-form-urlencoded;"),。例： xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 2.參數(shù)是名/值一一對(duì)應(yīng)的鍵值對(duì),每對(duì)值用&號(hào)隔開(kāi).如 var name=abc&sex=man&age=18,，注意var name=update.php? abc&sex=man&age=18以及var name=?abc&sex=man&age=18的寫(xiě)法都是錯(cuò)誤的; 3.參數(shù)在Send(參數(shù))方法中發(fā)送,例： xmlHttp.send(name); 如果是get方式，直接 xmlHttp.send(null); 4.服務(wù)器端請(qǐng)求參數(shù)區(qū)分Get與Post,。如果是get方式則$username = $_GET["username"]; 如果是post方式,，則$username = $_POST["username"]; Post和Get 方法有如下區(qū)別: 1.Post傳輸數(shù)據(jù)時(shí)，不需要在URL中顯示出來(lái),，而Get方法要在URL中顯示,。 2.Post傳輸?shù)臄?shù)據(jù)量大，可以達(dá)到2M,，而Get方法由于受到URL長(zhǎng)度的限制,只能傳遞大約1024字節(jié). 3.Post顧名思義,就是為了將數(shù)據(jù)傳送到服務(wù)器段,Get就是為了從服務(wù)器段取得數(shù)據(jù).而Get之所以也能傳送數(shù)據(jù),只是用來(lái)設(shè)計(jì)告訴服務(wù)器,你到底需要什么樣的數(shù)據(jù).Post的信息作為http請(qǐng)求的內(nèi)容,，而Get是在Http頭部傳輸?shù)摹? get 方法用Request.QueryString["strName"]接收 post 方法用Request.Form["strName"] 接收 注意： 雖然兩種提交方式可以統(tǒng)一用Request("strName")來(lái)獲取提交數(shù)據(jù)，但是這樣對(duì)程序效率有影響,，不推薦使用,。 一般來(lái)說(shuō)，盡量避免使用Get方式提交表單,，因?yàn)橛锌赡軙?huì)導(dǎo)致安全問(wèn)題 AJAX亂碼問(wèn)題 產(chǎn)生亂碼的原因: 1,、xtmlhttp 返回的數(shù)據(jù)默認(rèn)的字符編碼是utf-8，如果客戶端頁(yè)面是gb2312或者其它編碼數(shù)據(jù)就會(huì)產(chǎn)生亂碼 2,、post方法提交數(shù)據(jù)默認(rèn)的字符編碼是utf-8,，如果服務(wù)器端是gb2312或其他編碼數(shù)據(jù)就會(huì)產(chǎn)生亂碼 解決辦法有： 1、若客戶端是gb2312編碼,，則在服務(wù)器指定輸出流編碼 2,、服務(wù)器端和客戶端都使用utf-8編碼 gb2312:header('Content-Type:text/html;charset=GB2312'); utf8:header('Content-Type:text/html;charset=utf-8'); 注意:如果你已經(jīng)按上面的方法做了，還是返回亂碼的話,檢查你的方式是否為get,對(duì)于get請(qǐng)求（或凡涉及到url傳遞參數(shù)的）,，被傳遞的參數(shù)都要先經(jīng)encodeURIComponent方法處理.如果沒(méi)有用encodeURIComponent處理的話,也會(huì)產(chǎn)生亂碼. 下邊是我找到的一個(gè)例子,，因?yàn)閷?xiě)的不錯(cuò)就貼在這里了,，自己寫(xiě)的比較簡(jiǎn)單，也不是很規(guī)范還是參考人家寫(xiě)的好了,，呵呵,！ 復(fù)制代碼 代碼如下:
var http_request = false; function makePOSTRequest(url, parameters) { http_request = false; if (window.XMLHttpRequest) { // Mozilla, Safari,... http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) { // set type accordingly to anticipated content type //http_request.overrideMimeType('text/xml'); http_request.overrideMimeType('text/html'); } } else if (window.ActiveXObject) { // IE try { http_request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } } if (!http_request) { alert('Cannot create XMLHTTP instance'); return false; } http_request.onreadystatechange = alertContents; http_request.open('POST', url, true); http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); http_request.setRequestHeader("Content-length", parameters.length); http_request.setRequestHeader("Connection", "close"); http_request.send(parameters); } function alertContents() { if (http_request.readyState == 4) { if (http_request.status == 200) { //alert(http_request.responseText); result = http_request.responseText; document.getElementById('myspan').innerHTML = result; } else { alert('There was a problem with the request.'); } } } function get(obj) { var poststr = "mytextarea1=" + encodeURI( document.getElementById("mytextarea1").value ) + "&mytextarea2=" + encodeURI( document.getElementById("mytextarea2").value ); makePOSTRequest('post.php', poststr); } post.php <?print_r($_POST);?>一個(gè)超大文本框textarea里面有大量數(shù)據(jù)，ajax通過(guò)URL請(qǐng)求service返回結(jié)果,，URL里面包含了各種參數(shù),，當(dāng)然也包含之前的超大文本框的內(nèi)容。 之前開(kāi)發(fā)的時(shí)候一直用Firefox在調(diào)試,，4000長(zhǎng)度的字符串在textarea里面通過(guò)URL請(qǐng)求都是沒(méi)有問(wèn)題,。 提交給測(cè)試的時(shí)候問(wèn)題來(lái)了，測(cè)試人員在IE下面發(fā)現(xiàn)問(wèn)題,，textarea里面字符長(zhǎng)度超過(guò)2000（大概數(shù)據(jù)）時(shí),，會(huì)報(bào)JS錯(cuò)誤，ajax沒(méi)有返回值給前臺(tái),。 看原先代碼： 復(fù)制代碼 代碼如下:
function getJsonData(url) { var ajax = Common.createXMLHttpRequest(); ajax.open("GET",url,false); ajax.send(null); try { eval("var s = "+ajax.responseText); return s; } catch(e) { return null; } } function getData(){ var url="BlacklistService.do?datas="+datasvalue; var result = getJsonData(url); } 網(wǎng)上google發(fā)現(xiàn)解決辦法： 修改使用的XMLHttp的請(qǐng)求為POST,，并且把參數(shù)和URL分離出來(lái)提交。 修改后代碼如下： 復(fù)制代碼 代碼如下:
function getJsonData(url,para) { var ajax = Common.createXMLHttpRequest(); ajax.open("POST",url,false); ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); ajax.send(para); try { eval("var s = "+ajax.responseText); return s; } catch(e) { return null; } } function getData(){ var url="BlacklistService.do"; var para="datas="+datasvalue; var result = getJsonData(url,para); } ================================ Ajax中的get和post兩種請(qǐng)求方式的異同2008年10月04日 星期六 下午 02:37分析兩種提交方式的異同Ajax中我們經(jīng)常用到get和post請(qǐng)求.那么什么時(shí)候用get請(qǐng)求,什么時(shí)候用post方式請(qǐng)求呢? 在做回答前我們首先要了解get和post的區(qū)別. 1,、 get是把參數(shù)數(shù)據(jù)隊(duì)列加到提交表單的ACTION屬性所指的URL中,，值和表單內(nèi)各個(gè)字段一一對(duì)應(yīng)，在URL中可以看到,。post是通過(guò)HTTP post機(jī)制,，將表單內(nèi)各個(gè)字段與其內(nèi)容放置在HTML HEADER內(nèi)一起傳送到ACTION屬性所指的URL地址,。用戶看不到這個(gè)過(guò)程,。 2、 對(duì)于get方式,，服務(wù)器端用Request.QueryString獲取變量的值,，對(duì)于post方式，服務(wù)器端用Request.Form獲取提交的數(shù)據(jù),。兩種方式的參數(shù)都可以用Request來(lái)獲得,。 3、get傳送的數(shù)據(jù)量較小,，不能大于2KB,。post傳送的數(shù)據(jù)量較大，一般被默認(rèn)為不受限制,。但理論上,，因服務(wù)器的不同而異. 4、get安全性非常低,，post安全性較高,。 5,、 <form method="get" action="a.asp?b=b">跟<form method="get" action="a.asp">是一樣的，也就是說(shuō),，method為get時(shí)action頁(yè)面后邊帶的參數(shù)列表會(huì)被忽視,；而<form method="post" action="a.asp?b=b">跟<form method="post" action="a.asp">是不一樣的。另外 Get請(qǐng)求有如下特性：它會(huì)將數(shù)據(jù)添加到URL中,，通過(guò)這種方式傳遞到服務(wù)器,，通常利用一個(gè)問(wèn)號(hào)？代表URL地址的結(jié)尾與數(shù)據(jù)參數(shù)的開(kāi)端,，后面的參數(shù)每一個(gè)數(shù)據(jù)參數(shù)以“名稱=值”的形式出現(xiàn),，參數(shù)與參數(shù)之間利用一個(gè)連接符&來(lái)區(qū)分。 Post請(qǐng)求有如下特性：數(shù)據(jù)是放在HTTP主體中的,，其組織方式不只一種,，有&連接方式，也有分割符方式,，可隱藏參數(shù),，傳遞大批數(shù)據(jù)，比較方便,。通過(guò)以上的說(shuō)明,現(xiàn)在我們大致了解了什么時(shí)候用get什么時(shí)候用post方式了吧,對(duì)!當(dāng)我們?cè)谔峤槐韱蔚臅r(shí)候我們通常用post方式,當(dāng)我們要傳送一個(gè)較大的數(shù)據(jù)文件時(shí),需要用post,。當(dāng)傳遞的值只需用參數(shù)方式(這個(gè)值不大于2KB)的時(shí)候,用get方式即可。現(xiàn)在我們?cè)倏纯赐ㄟ^(guò)URL發(fā)送請(qǐng)求時(shí),，get方式和post方式的區(qū)別,。用下面的例子可以很容易的看到同樣的數(shù)據(jù)通過(guò)GET和POST來(lái)發(fā)送的區(qū)別, 發(fā)送的數(shù)據(jù)是 username=張三 : 復(fù)制代碼 代碼如下:
GET /?username=%E5%BC%A0%E4%B8%89 HTTP/1.1 Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-powerpoint, application/vnd.ms-excel, application/msword, */* Accept-Language: zh-cn Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.1.4322) Host: localhost Connection: Keep-Alive POST 方式: POST / HTTP/1.1 Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-powerpoint, application/vnd.ms-excel, application/msword, */* Accept-Language: zh-cn Content-Type: application/x-www-form-urlencoded Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.1.4322) Host: localhost Content-Length: 28 Connection: Keep-Alive username=%E5%BC%A0%E4%B8%89 區(qū)別就是一個(gè)在 URL 請(qǐng)求里面附帶了表單參數(shù)和值, 一個(gè)是在 HTTP 請(qǐng)求的消息實(shí)體中。比較一下上面的兩段文字, 我們會(huì)發(fā)現(xiàn) GET 方式把表單內(nèi)容放在前面的請(qǐng)求頭中, 而 POST 則把這些內(nèi)容放在請(qǐng)求的主體中了, 同時(shí) POST 中把請(qǐng)求的 Content-Type 頭設(shè)置為 application/x-www-form-urlencoded. 而發(fā)送的正文都是一樣的, 可以這樣來(lái)構(gòu)造一個(gè)表單提交正文: encodeURIComponent(arg1)=encodeURIComponent(value1)&encodeURIComponent(arg2)=encodeURIComponent(value2)&.....注: encodeURIComponent 返回一個(gè)包含了 charstring 內(nèi)容的新的 String 對(duì)象（Unicode 格式）,， 所有空格,、標(biāo)點(diǎn)、重音符號(hào)以及其他非 ASCII 字符都用 %xx 編碼代替,，其中 xx 等于表示該字符的十六進(jìn)制數(shù),。 例如，空格返回的是 "%20" ,。 字符的值大于 255 的用 %uxxxx 格式存儲(chǔ),。參見(jiàn) JavaScript 的 encodeURIComponent() 方法.在了解了上面的內(nèi)容后我們現(xiàn)在用ajax的XMLHttpRequest對(duì)象向服務(wù)器分別用GET和POST方式發(fā)送一些數(shù)據(jù)。 GET 方式 復(fù)制代碼 代碼如下:
var postContent ="name=" + encodeURIComponent("xiaocheng") + "&email=" + encodeURIComponent("[email protected]"); xmlhttp.open("GET", "somepage" + "?" + postContent, true); xmlhttp.send(null); POST 方式 復(fù)制代碼 代碼如下:
var postContent ="name=" + encodeURIComponent("xiaocheng") + "&email=" + encodeURIComponent("[email protected]"); xmlhttp.open("POST", "somepage", true); xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //xmlhttp.setRequestHeader("Content-Type", "text/xml"); //如果發(fā)送的是一個(gè)xml文件 xmlhttp.send(postContent); Ajax的post方法的使用. 剛開(kāi)始學(xué)Ajax,，看到很多網(wǎng)上的代碼都用Get方法提交參數(shù),，Tomcat默認(rèn)ISO編碼實(shí)在是讓人頭痛 ，對(duì)付亂碼我都是用過(guò)濾器做字符編碼過(guò)濾的,，Get方法過(guò)濾器監(jiān)聽(tīng)不到,，所以我一直喜歡使用Post方法，下面對(duì)Ajax Get和Post方法做一對(duì)比 GET： 復(fù)制代碼 代碼如下:
<mce:script type="text/javascript"><!-- var xmlHttpRequest; function createXMLHttpRequest(){ try { // Firefox, Opera 8.0+, Safari xmlHttpRequest=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttpRequest=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("您的瀏覽器不支持AJAX,！"); return false; } } } } //發(fā)送請(qǐng)求函數(shù) function sendRequestPost(url,param){ createXMLHttpRequest(); xmlHttpRequest.open("GET",url+"?"+param,true); xmlHttpRequest.onreadystatechange = processResponse; } //處理返回信息函數(shù) function processResponse(){ if(xmlHttpRequest.readyState == 4){ if(xmlHttpRequest.status == 200){ var res = xmlHttpRequest.responseText; window.alert(res); }else{ window.alert("請(qǐng)求頁(yè)面異常"); } } } //身份驗(yàn)證函數(shù) function userCheck(){ var userName = document.loginForm.username.value; var psw = document.loginForm.password.value; if(userName == ""){ window.alert("用戶名不能為空"); document.loginForm.username.focus(); return false; } else{ var url = "Servlet/userLogin_do"; var param = "userName="+userName+"&psw="+psw; sendRequestPost(url,param); } } // --></mce:script> <mce:script type="text/javascript"><!-- var xmlHttpRequest; function createXMLHttpRequest(){ try { // Firefox, Opera 8.0+, Safari xmlHttpRequest=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttpRequest=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("您的瀏覽器不支持AJAX,！"); return false; } } } } //發(fā)送請(qǐng)求函數(shù) function sendRequestPost(url,param){ createXMLHttpRequest(); xmlHttpRequest.open("GET",url+"?"+param,true); xmlHttpRequest.onreadystatechange = processResponse; } //處理返回信息函數(shù) function processResponse(){ if(xmlHttpRequest.readyState == 4){ if(xmlHttpRequest.status == 200){ var res = xmlHttpRequest.responseText; window.alert(res); }else{ window.alert("請(qǐng)求頁(yè)面異常"); } } } //身份驗(yàn)證函數(shù) function userCheck(){ var userName = document.loginForm.username.value; var psw = document.loginForm.password.value; if(userName == ""){ window.alert("用戶名不能為空"); document.loginForm.username.focus(); return false; } else{ var url = "Servlet/userLogin_do"; var param = "userName="+userName+"&psw="+psw; sendRequestPost(url,param); } } // --></mce:script> POST： 復(fù)制代碼 代碼如下:
<mce:script type="text/javascript"><!-- var xmlHttpRequest; function createXMLHttpRequest(){ try { // Firefox, Opera 8.0+, Safari xmlHttpRequest=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttpRequest=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("您的瀏覽器不支持AJAX,！"); return false; } } } } //發(fā)送請(qǐng)求函數(shù) function sendRequestPost(url,param){ createXMLHttpRequest(); xmlHttpRequest.open("POST",url,true); xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form- urlencoded"); xmlHttpRequest.onreadystatechange = processResponse; xmlHttpRequest.send(param); } //處理返回信息函數(shù) function processResponse(){ if(xmlHttpRequest.readyState == 4){ if(xmlHttpRequest.status == 200){ var res = xmlHttpRequest.responseText; window.alert(res); }else{ window.alert("請(qǐng)求頁(yè)面異常"); } } } //身份驗(yàn)證函數(shù) function userCheck(){ var userName = document.loginForm.username.value; var psw = document.loginForm.password.value; if(userName == ""){ window.alert("用戶名不能為空"); document.loginForm.username.focus(); return false; } else{ //var url = "Servlet/userLogin_do?userName="+userName+"&psw="+psw; var url = "Servlet/userLogin_do"; var param = "userName="+userName+"&psw="+psw; sendRequestPost(url,param); } } // --></mce:script> <mce:script type="text/javascript"><!-- var xmlHttpRequest; function createXMLHttpRequest(){ try { // Firefox, Opera 8.0+, Safari xmlHttpRequest=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttpRequest=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("您的瀏覽器不支持AJAX！"); return false; } } } } //發(fā)送請(qǐng)求函數(shù) function sendRequestPost(url,param){ createXMLHttpRequest(); xmlHttpRequest.open("POST",url,true); xmlHttpRequest.setRequestHeader("Content-Type","application/x-www- form-urlencoded"); xmlHttpRequest.onreadystatechange = processResponse; xmlHttpRequest.send(param); } //處理返回信息函數(shù) function processResponse(){ if(xmlHttpRequest.readyState == 4){ if(xmlHttpRequest.status == 200){ var res = xmlHttpRequest.responseText; window.alert(res); }else{ window.alert("請(qǐng)求頁(yè)面異常"); } } } //身份驗(yàn)證函數(shù) function userCheck(){ var userName = document.loginForm.username.value; var psw = document.loginForm.password.value; if(userName == ""){ window.alert("用戶名不能為空"); document.loginForm.username.focus(); return false; } else{ //var url = "Servlet/userLogin_do? userName="+userName+"&psw="+psw; var url = "Servlet/userLogin_do"; var param = "userName="+userName+"&psw="+psw; sendRequestPost(url,param); } } // --></mce:script> 可以發(fā)現(xiàn),，GET方法根據(jù)地址欄解析參數(shù),，post根據(jù)sendRequestPost(url,param);中的param字符串解析參數(shù)，重要的是POST方法中需要添加在open(),；方法后需要添加xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");這句代碼,，不知道為什么，初學(xué),，加了就能傳遞參數(shù)了,，日后研究。 您可能感興趣的文章:
|
|
|
來(lái)自： 風(fēng)之飛雪 > 《Ajax》
