AJAX下的請(qǐng)求方式以及同步異步的區(qū)別小結(jié)
更新時(shí)間：2010年08月07日 20:07:19 作者：
AJAX中的請(qǐng)求方式以及同步異步的區(qū)別小結(jié)，學(xué)習(xí)ajax處理請(qǐng)求的朋友可以參考下。
請(qǐng)求方式，分為GET與POST：
GET
最為常見的HTTP請(qǐng)求，普通上網(wǎng)瀏覽頁(yè)面就是GET。GET方式的參數(shù)請(qǐng)求直接跟在URL后，以問(wèn)號(hào)開始。（JS中用window.location.search獲得）。參數(shù)可以用encodeURIComponent進(jìn)行編碼，使用方式:
var EnParam = encodeURIComponent(param);
URL只支持大約2K的長(zhǎng)度，即2048字符數(shù)；使用GET進(jìn)行AJAX請(qǐng)求時(shí)候會(huì)緩存導(dǎo)致出現(xiàn)的頁(yè)面不是正確的，一般方法加random參數(shù)值；ajax.send(null)。
POST
向服務(wù)器提交數(shù)據(jù)用到。
需要將form表單中的值先取出轉(zhuǎn)換成字符串，用&符號(hào)連接，（同GET傳參數(shù)一樣）；提交數(shù)據(jù)量2GB ；使用ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')，處理提交的字符串;ajax.send(strings)，這個(gè)strings表示form中需要提交的內(nèi)容，例如a=1&b=2類似這樣的字符串。
同步與異步：
ajax.open方法中，第3個(gè)參數(shù)是設(shè)同步或者異步。prototype等js類庫(kù)一般都默認(rèn)為異步，即設(shè)為true。先說(shuō)下同步的情況下，js會(huì)等待請(qǐng)求返回，獲取status。不需要onreadystatechange事件處理函數(shù)。而異步則需要onreadystatechange事件處理，且值為4再正確處理下面的內(nèi)容。
（注：文中的 ajax 表示XMLHTTP請(qǐng)求對(duì)象。）
//同步傳輸模式
function RequestByGet(nProducttemp,nCountrytemp)
{
var xmlhttp
if (window.XMLHttpRequest)
{
//isIE = false;
xmlhttp = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
//isIE = true;
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//Web page location.
var URL="http://www.baidu.com/;
xmlhttp.open("GET",URL, false);
//xmlhttp.SetRequestHeader("Content-Type","text/html; charset=Shift_JIS")
xmlhttp.send(null);
var result = xmlhttp.status;
//OK
if(result==200)
{
document.getElementById("div_RightBarBody").innerHTML=xmlhttp.responseText;
}
xmlhttp = null;
}
//異步傳輸模式
var xmlhttp
function RequestByGet(nProducttemp,nCountrytemp)
{
if (window.XMLHttpRequest)
{
//isIE = false;
xmlhttp = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
//isIE = true;
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//Web page location.
var URL="http://www.baidu.com/";
xmlhttp.open("GET",URL, true);
xmlhttp.onreadystatechange = handleResponse;
//xmlhttp.SetRequestHeader("Content-Type","text/html; charset=UTF-8")
xmlhttp.send(null);
}
function handleResponse()
{
if(xmlhttp.readyState == 4 && xmlhttp.status==200)
{
document.getElementById("div_RightBarBody").innerHTML=xmlhttp.responseText;
xmlhttp = null;
}
}
GET
最為常見的HTTP請(qǐng)求，普通上網(wǎng)瀏覽頁(yè)面就是GET。GET方式的參數(shù)請(qǐng)求直接跟在URL后，以問(wèn)號(hào)開始。（JS中用window.location.search獲得）。參數(shù)可以用encodeURIComponent進(jìn)行編碼，使用方式:
var EnParam = encodeURIComponent(param);
URL只支持大約2K的長(zhǎng)度，即2048字符數(shù)；使用GET進(jìn)行AJAX請(qǐng)求時(shí)候會(huì)緩存導(dǎo)致出現(xiàn)的頁(yè)面不是正確的，一般方法加random參數(shù)值；ajax.send(null)。
POST
向服務(wù)器提交數(shù)據(jù)用到。
需要將form表單中的值先取出轉(zhuǎn)換成字符串，用&符號(hào)連接，（同GET傳參數(shù)一樣）；提交數(shù)據(jù)量2GB ；使用ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')，處理提交的字符串;ajax.send(strings)，這個(gè)strings表示form中需要提交的內(nèi)容，例如a=1&b=2類似這樣的字符串。
同步與異步：
ajax.open方法中，第3個(gè)參數(shù)是設(shè)同步或者異步。prototype等js類庫(kù)一般都默認(rèn)為異步，即設(shè)為true。先說(shuō)下同步的情況下，js會(huì)等待請(qǐng)求返回，獲取status。不需要onreadystatechange事件處理函數(shù)。而異步則需要onreadystatechange事件處理，且值為4再正確處理下面的內(nèi)容。
（注：文中的 ajax 表示XMLHTTP請(qǐng)求對(duì)象。）
復(fù)制代碼 代碼如下:
//同步傳輸模式
function RequestByGet(nProducttemp,nCountrytemp)
{
var xmlhttp
if (window.XMLHttpRequest)
{
//isIE = false;
xmlhttp = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
//isIE = true;
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//Web page location.
var URL="http://www.baidu.com/;
xmlhttp.open("GET",URL, false);
//xmlhttp.SetRequestHeader("Content-Type","text/html; charset=Shift_JIS")
xmlhttp.send(null);
var result = xmlhttp.status;
//OK
if(result==200)
{
document.getElementById("div_RightBarBody").innerHTML=xmlhttp.responseText;
}
xmlhttp = null;
}
//異步傳輸模式
var xmlhttp
function RequestByGet(nProducttemp,nCountrytemp)
{
if (window.XMLHttpRequest)
{
//isIE = false;
xmlhttp = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
//isIE = true;
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//Web page location.
var URL="http://www.baidu.com/";
xmlhttp.open("GET",URL, true);
xmlhttp.onreadystatechange = handleResponse;
//xmlhttp.SetRequestHeader("Content-Type","text/html; charset=UTF-8")
xmlhttp.send(null);
}
function handleResponse()
{
if(xmlhttp.readyState == 4 && xmlhttp.status==200)
{
document.getElementById("div_RightBarBody").innerHTML=xmlhttp.responseText;
xmlhttp = null;
}
}
相關(guān)文章
這篇文章主要介紹了Ajax返回值類型與用法,結(jié)合實(shí)例形式分析了ajax返回值的xml類型與文本類型詳細(xì)分類、用法與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-07-07
jQuery Ajax的readyState和status的區(qū)別和使用詳解
在前幾篇分析了jquery的ajax異步和同步，以及異常的一些處理，感覺還沒有把a(bǔ)jax的readyState和status說(shuō)清楚.今天就來(lái)說(shuō)說(shuō)ajax狀態(tài)的那點(diǎn)事,非常不錯(cuò)，對(duì)ajax readystate和status區(qū)別和使用感興趣的朋友一起學(xué)習(xí)吧2017-03-03
Ajax在請(qǐng)求過(guò)程中顯示進(jìn)度的簡(jiǎn)單實(shí)現(xiàn)
ajax技術(shù)在web應(yīng)用中使用非常頻繁，本文以asp.net MVC為示例，提供一種簡(jiǎn)單的實(shí)現(xiàn)方式。ajax在請(qǐng)求過(guò)程中顯示進(jìn)度條，是怎么實(shí)現(xiàn)的呢？本文通過(guò)代碼和文字說(shuō)明相結(jié)合的方式分享給大家。2015-09-09
AJAX 是一種與服務(wù)器交換數(shù)據(jù)的技術(shù)，可以在補(bǔ)充在整個(gè)頁(yè)面的情況下更新網(wǎng)頁(yè)的一部分。接下來(lái)通過(guò)本文給大家介紹ajax一些常用方法，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-07-07
Ajax 高級(jí)功能之a(chǎn)jax向服務(wù)器發(fā)送數(shù)據(jù)
這篇文章主要介紹了Ajax 高級(jí)功能之a(chǎn)jax向服務(wù)器發(fā)送數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2016-08-08
這篇文章主要為大家詳細(xì)介紹了ajax上傳多圖到php服務(wù)器的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-05-05
菜鳥蔡之Ajax復(fù)習(xí)第三篇(Ajax之無(wú)刷新登錄)
無(wú)刷新登錄大家也許沒寫過(guò)，但是一定都是聽說(shuō)過(guò)的，很早以前就想用這個(gè)小技術(shù)在自己做的小項(xiàng)目中用一把了，但都沒有付出過(guò)實(shí)踐，在網(wǎng)上查也沒有查到具體完整的代碼，在這里，今天菜鳥蔡也來(lái)試了一把，獻(xiàn)丑了，希望對(duì)初學(xué)的童鞋有點(diǎn)幫助2012-11-11
這篇文章主要介紹了Ajax上傳文件進(jìn)度條Codular的相關(guān)資料,需要的朋友可以參考下2017-05-05
基于Ajax和forms組件實(shí)現(xiàn)注冊(cè)功能的實(shí)例代碼
本文通過(guò)實(shí)例代碼給大家分享了基于Ajax和forms組件實(shí)現(xiàn)注冊(cè)功能,需要的朋友可以參考下2018-02-02
前端ajax請(qǐng)求+后端java實(shí)現(xiàn)的下載zip壓縮包功能示例
這篇文章主要介紹了前端ajax請(qǐng)求+后端java實(shí)現(xiàn)的下載zip壓縮包功能,結(jié)合實(shí)例形式分析了ajax請(qǐng)求交互與后端圖片zip格式壓縮并下載功能相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2023-05-05