欢迎来到Doc100.Net免费学习资源知识分享平台!
您的位置:首页 > 程序异常 >

<六>鑴氭湰鍖杊ttp( xmlhttprequest)

更新时间: 2014-01-05 02:01:04 责任编辑: Author_N1

 

<6>鑴氭湰鍖杊ttp( XMLHttpRequest)
鍏€佽剼鏈寲http( XMLHttpRequest)
瓒呮枃鏈紶杈撳崗璁瀹歸eb娴忚鍣ㄥ浣曚粠web鏈嶅姟鍣ㄨ幏鍙栨枃妗e拰鍚憌eb鏈嶅姟鍣ㄦ彁浜よ〃鍗曞唴瀹癸紝浠ュ強web鏈嶅姟鍣ㄥ浣曞簲濡備綍鍝嶅簲杩欎簺璇锋眰鍜屾彁浜ゃ€?strong>Web娴忚鍣ㄤ細澶勭悊澶ч噺http銆?/strong>閫氬父锛宧ttp骞朵笉鍦ㄨ剼鏈殑鎺у埗涓嬶紝鍙槸褰撶敤鎴峰崟鍑婚摼鎺ワ紝鎻愪氦琛ㄥ崟鍜岃緭鍏rl鏃舵墠鍙戠敓銆?

Ajax鎻忚堪浜嗕竴绉嶄富瑕佷娇鐢ㄨ剼鏈搷绾礹ttp鍜寃eb鏈嶅姟鍣ㄨ繘琛屾暟鎹氦鎹紝涓嶄細瀵艰嚧椤甸潰閲嶈浇銆傞伩鍏嶉〉闈㈤噸杞界殑鑳藉姏浣垮緱web搴旂敤鎰熻鏇村儚浼犵粺鐨勬闈㈠簲鐢ㄣ€俉eb搴旂敤鍙互浣跨敤Ajax鎶€鏈妸鐢ㄦ埛鐨勪氦浜掓暟鎹褰曞埌鏈嶅姟鍣ㄤ腑锛屼篃鍙互寮€濮嬪彧鏄剧ず绠€鍗曢〉闈紝涔嬪悗鎸夐渶瑕佸姞杞介澶栫殑鏁版嵁鍜岄〉闈㈢粍浠舵潵鎻愬崌搴旂敤鐨勫惎鍔ㄦ椂闂淬€?

Comet鏄娇鐢ㄨ剼鏈搷绾礹ttp鐨剋eb搴旂敤鏋舵瀯鐩稿叧鐨勬湳璇€傛煇绉嶆剰涔変笂锛宑omet鍜宎jax鐩稿弽銆傚湪Comet涓紝web鏈嶅姟鍣ㄥ彂璧烽€氫俊骞跺紓姝ュ彂閫佹秷鎭埌瀹㈡埛绔€?strong>鍦ˋjax涓紝瀹㈡埛绔粠鏈嶅姟鍣ㄦ媺鏁版嵁锛岃€屽湪Comet涓紝鏈嶅姟鍣ㄥ悜瀹㈡埛绔帹鏁版嵁銆?/strong>

<script>鍏冪礌鐨剆rc灞炴€ц兘璁剧疆url骞跺彂璧穐ttp get璇锋眰銆?/strong>浣跨敤<script>鍏冪礌瀹炵幇鑴氭湰鎿嶇旱http鏄潪甯稿惛寮曚汉鐨勶紝鍥犱负浠栦滑鍙互璺ㄥ煙閫氫俊浜屼笉鍙楅檺鍒朵簬鍚屾簮绛栫暐銆傞€氬父锛屼娇鐢ㄥ熀浜?lt;script>鐨刟jax浼犺緭鍗忚鏃讹紝鏈嶅姟鍣ㄧ殑鍝嶅簲閲囩敤json缂栫爜鐨勬暟鎹牸寮忥紝褰撴墽琛岃剼鏈椂锛宩avascript瑙f瀽鍣ㄨ兘鑷姩灏嗗叾瑙g爜銆傜敱浜庡畠浣跨敤JSON鏁版嵁鏍煎紡锛屽洜姝よ繖绉岮jax浼犺緭鍗忚涔熷彨鍋?span style="color: red;">鈥淛SONP鈥?/strong>.
铏界劧鍦?lt;iframe>鍜?lt;script>浼犺緭鍗忚涔嬩笂鑳藉疄鐜癆jax鎶€鏈紝浣嗛€氬父杩樻湁鏇寸畝鍗曠殑鏂瑰紡銆備竴娈垫椂闂翠互鏉ワ紝鎵€鏈夋祻瑙堝櫒閮芥敮鎸?strong>XMLHttpRequest
瀵硅薄锛屽畠瀹氫箟浜嗙敤鑴氭湰鎿嶇旱HTTP鐨凙PI銆傞櫎浜嗗父鐢ㄧ殑GET璇锋眰锛岃繕鍖呭惈瀹炵幇POST,HEAD绛夎姹傜殑鑳藉姏锛屽悓鏃朵粬鑳界敤鏂囨湰鎴朌ocument瀵硅薄鐨勫舰寮忚繑鍥炴湇鍔″櫒鐨勫搷搴斻€傝櫧鐒跺畠鍚嶅瓧鍙玐MLHttpRequest API锛屼絾骞舵病鏈夐檺鍒跺彧鑳戒娇鐢▁ml鏂囨。锛屽畠鑳借幏鍙栦换浣曠被鍨嬬殑鏂囨湰鏂囨。銆?

浣跨敤XMLHttpRequest

1. 鎸囧畾璇锋眰
娴忚鍣ㄥ湪XMLHttpRequest绫讳笂瀹氫箟浜嗕粬浠殑HTTP API銆傝繖涓被鐨勬瘡涓疄渚嬮兘琛ㄧず涓€涓嫭绔嬬殑璇锋眰/鍝嶅簲瀵癸紝骞朵笖杩欎釜瀵硅薄鐨勫睘鎬у拰鏂规硶鍏佽鎸囧畾璇锋眰缁嗚妭鍜屾彁鍙栧搷搴旀暟鎹€?

Step0:鍒涘缓瀵硅薄 request
浣跨敤杩欎釜HTTP API蹇呴』鍋氱殑绗竴浠朵簨灏辨槸瀹炰緥鍖朮MLHttpRequest瀵硅薄锛?
Var request = new XMLHttpRequest();

璁颁綇锛?strong>姣忎釜瀹炰緥琛ㄧず涓€涓嫭绔嬬殑璇锋眰鍝嶅簲瀵?/strong>锛屽鏋滈噸鐢ㄥ凡瀛樺湪鐨刋MLHttpRequest锛屽皢浼氱粓姝箣鍓嶈繖涓璞′箣鍓嶇殑浠讳綍璇锋眰銆?

Step1锛氭寚瀹氳姹?open()
鍒涘缓XMLHttpRequest瀵硅薄涔嬪悗锛屽彂璧稨TTP璇锋眰鐨勪笅涓€姝ユ槸璋冪敤XMLHttpRequest瀵硅薄鐨刼pen()鏂规硶鍘绘寚瀹氳繖涓姹傜殑涓や釜蹇呴』閮ㄥ垎锛氭柟娉曞拰url銆?
Request.open(鈥淕ET鈥?       // 寮€濮嬩竴涓猦ttp get璇锋眰
鈥渄ata.csv鈥?;   // url,璇锋眰鐨勫湴鍧€

Open()鐨?strong>绗竴涓弬鏁?/strong>鏄寚瀹歨ttp鏂规硶浼氭垨鍔ㄤ綔銆傝繖涓瓧绗︿覆涓嶅尯鍒嗗ぇ灏忓啓锛屼絾閫氬父鐢ㄥぇ鍐欏瓧姣嶅尮閰峢ttp鍗忚銆傗€済et鈥濆拰鈥減ost鈥濇柟娉曟槸寰楀埌骞挎硾鏀寔鐨勩€侴et鐢ㄤ簬甯歌璇锋眰锛岄€傚悎浜庡綋url瀹屽叏鎸囧畾璇锋眰璧勬簮锛屽綋璇锋眰瀵规湇鍔″櫒娌℃湁浠讳綍鍓綔鐢?/strong>浠ュ強褰撴湇鍔″櫒鐨勫搷搴旀槸鍙紦瀛樼殑銆侾OST鏂规硶甯哥敤璇環tml琛ㄥ崟锛屽畠鍦ㄨ姹備富浣撲腑鍖呭惈棰濆鐨勬暟鎹紙琛ㄥ崟鏁版嵁锛夛紝涓旇繖浜涙暟鎹父瀛樺偍鍒版湇鍔″櫒涓紙鍓綔鐢?/strong>锛夈€傜浉鍚寀rl鐨勯噸澶峱ost璇锋眰浠庢湇鍔″櫒寰楀埌鐨勫搷搴斿彲鑳戒笉鍚岋紝鍚屾椂涓嶅簲璇ョ紦瀛樹娇鐢ㄨ繖涓柟娉曠殑缂撳瓨銆?
闄や簡get鍜宲ost涔嬪锛孹MLHttpRequest瑙勮寖涔熷厑璁告妸delete锛宧ead,options鍜宲ut浣滀负open()鐨勭涓€涓弬鏁般€?

Open鐨?strong>绗簩涓弬鏁?/strong>鏄痷rl锛屽畠鏄姹傜殑涓讳綋銆傝繖鏄浉瀵逛簬鍖呭惈open()鑴氭湰鐨刣ocument鐨剈rl銆傚鏋滄寚瀹氱粷瀵箄rl,鍗忚锛屼富鏈哄拰绔彛鍙烽€氬父蹇呴』鍖归厤鎵€鍦ㄦ枃妗g殑瀵瑰簲鍐呭锛?strong>璺ㄥ煙鐨勮姹傞€氬父浼氭姤閿欍€?/strong>

Open鐨?strong>绗笁涓弬鏁?/strong>鏄竷灏斿€硷紝浠h〃璇锋眰鏄悓姝ヨ繕鏄紓姝ワ紝榛樿涓簍rue锛屾槸寮傛鐨勶紝璁句负false浠h〃鍚屾鐨勩€傝鎴愬紓姝ョ殑灏变笉瑕佺粰XMLHttpRequest璁剧疆readystatechange浜嬩欢鍝嶅簲鍑芥暟浜?鐩存帴鍙互鍙栧緱鍝嶅簲娑堟伅銆備絾鏄紝瀹㈡埛绔痡avascript鏄崟绾跨▼鐨勶紝杩欐牱浼氬鑷撮樆濉烇紝鏁翠釜娴忚鍣║I鍐荤粨锛岃皑鎱庝娇鐢ㄣ€?


Step3:璁剧疆璇锋眰澶?锛宻etRequestHeader()
濡傛灉鏈夎姹傚ご鐨勮瘽锛岃姹傝繘绋嬬殑涓嬩竴姝ュ氨鏄缃畠锛屽post璇锋眰闇€瑕佲€淐ontent-Type鈥濇寚瀹氳姹備富浣撶殑MIME绫诲瀷锛?
Request.setRequestHeader(鈥淐ontent-Type鈥? 鈥渢ext/plain鈥?;
濡傛灉瀵圭浉鍚岀殑澶磋皟鐢╯etRequestHeader()澶氭锛屾柊鍊间笉浼氬彇浠d箣鍓嶆寚瀹氱殑鍊硷紝鐩稿弽锛宧ttp璇锋眰灏嗗寘鍚繖涓ご鐨勫涓壇鏈垨杩欎釜澶村皢鎸囧畾澶氫釜鍊笺€?

涓嶈兘鑷繁鎸囧畾鈥淐ontent-Length鈥?鈥滵ate鈥?鈥漅efer鈥濇垨鈥漊ser-Agent鈥濆ご锛孹MLHttpRequest灏嗚嚜宸辨坊鍔犺繖浜涘ご闃叉浼€犱粬浠€傜被浼煎湴锛孹MLHttpRequest瀵硅薄鑷姩澶勭悊cookie,杩炴帴鏃堕棿锛屽瓧绗﹂泦鍜岀紪鐮佸垽鏂紝绋嬪簭鍛樻棤娉曞悜setRequestHeader()浼犻€掕繖浜涘ご锛?



濡傛灉璇锋眰涓€涓彈瀵嗙爜淇濇姢鐨剈rl锛屾妸鐢ㄦ埛鍚嶅拰瀵嗙爜浣滀负绗洓涓拰绗簲涓弬鏁?/strong>浼犻€掔粰open銆?

Step4: 鍙戦€佽姹?send()
浣跨敤XMLHttpRequest鍙戣捣http璇锋眰鐨勬渶鍚庝竴姝ユ槸鎸囧畾鍙€夌殑璇锋眰涓讳綋骞跺悜鏈嶅姟鍣ㄥ彂閫佸畠銆?
Request.send(null);
Get璇锋眰缁濆娌℃湁涓讳綋銆傛墍浠ュ簲璇ヤ紶閫抧ull鎴栫渷鐣ヨ繖涓弬鏁般€?
POST璇锋眰閫氬父鎷ユ湁涓讳綋锛屽悓鏃跺畠搴旇鍖归厤鐢╯etRequestHeader鎸囧畾鐨勨€淐ontent-Type鈥濆ご銆?

椤哄簭闂锛?/strong>
http璇锋眰鐨勫悇閮ㄥ垎鏈夋寚瀹氶『搴忥紝璇锋眰鏂规硶鍜寀rl鍏堝埌杈撅紝鐒跺悗鏄姹傚ご锛屾渶鍚庢槸璇锋眰涓讳綋銆俋MLHttpRequest瀹炵幇閫氬父鐩村埌璋冪敤send()鏂规硶鎵嶅紑濮嬪惎鍔ㄧ綉缁滐紝浣嗛『搴忓繀椤诲尮閰嶏紝濡俿etRequestHeader蹇呴』鍦╫pen涔嬪悗鍜宻end涔嬪墠锛屽惁鍒欏皢鎶涘嚭寮傚父銆?/u>

2. 鍙栧緱鍝嶅簲
涓€涓畬鏁寸殑http鍝嶅簲鐢辩姸鎬佺爜锛屽搷搴斿ご闆嗗悎鍜屽搷搴斾富浣撹矗鎴愶紝杩欎簺閮藉彲浠ラ€氳繃XMLHttpRequest瀵硅薄鐨勫睘鎬у拰鏂规硶鑾峰緱銆?
1锛?status鍜宻tatusText灞炴€т互鏁板瓧鍜屾枃鏈殑褰㈠紡杩斿洖http鐘舵€佺爜銆?
2锛?浣跨敤getResponseHeader()鍜実etAllResponseHeaders()鑳芥煡璇㈠搷搴斿ご銆?
3锛?鍝嶅簲涓讳綋鍙互浠巖esponseText灞炴€т腑寰楀埌鏂囨湰褰㈠紡鐨勶紝浠巖esponseXML灞炴€т腑寰楀埌Document褰㈠紡鐨勶紙瀹冨疄闄呭XHtml鍜寈ml鏂囨。閮芥湁鏁堬級銆?

XMLHttpRequest閫氬父寮傛浣跨敤锛屽彂閫佽姹傚悗锛宻end()鏂规硶绔嬪嵆杩斿洖锛岀煡閬撳搷搴旇繑鍥炲嫟鍕夊垪鍑虹殑鍝嶅簲鏂规硶鍜屽睘鎬ф墠鏈夋晥銆備负浜嗗湪鍝嶅簲鍑嗗灏辩华鏃跺緱鍒伴€氱煡锛屽繀椤荤洃鍚琗MLHttpRequest瀵硅薄涓婄殑readystatechange浜嬩欢锛屽搴攔eadyState灞炴€х殑鍙樺寲銆?
readyState鏄竴涓暣鏁帮紝鎸囧畾浜唄ttp璇锋眰鐨勭姸鎬侊紝涓?鏃朵唬琛ㄥ搷搴斿畬鍏ㄨ繑鍥炪€?

涓轰簡鐩戝惉readystatechange浜嬩欢锛屾妸浜嬩欢澶勭悊鍑芥暟璁剧疆涓篨MLHttpRequest瀵硅薄鐨?strong>onreadystatechange
灞炴€с€?



1. 鍝嶅簲瑙g爜
鍓嶉潰鎴戜滑鍋囪鏈嶅姟鍣ㄤ娇鐢ㄥ儚鈥渢ext/plain鈥?鈥漷ext/html鈥濇垨鈥渢ext/css鈥濊繖鏍风殑MIME绫诲瀷鍙戦€佹枃鏈搷搴旓紝鐒跺悗鎴戜滑浣跨敤XMLHttpRequest瀵硅薄鐨剅esponseText灞炴€?/strong>寰楀埌瀹冦€?

浣嗘槸杩樻湁鍏朵粬鏂瑰紡鏉ュ鐞嗘湇鍔″櫒鍝嶅簲銆傚鏋滄湇鍔″櫒鍙戦€亁ml鎴杧html鏂囨。浣滀负鍝嶅簲锛岃兘閫氳繃responseXml灞炴€?/strong>鑾峰緱涓€涓В鏋愬舰寮忕殑xml鏂囨。銆傝繖涓睘鎬х殑鍊兼槸涓€涓猟ocument瀵硅薄锛屽彲浠ヤ娇鐢ㄥ墠闈粙缁嶇殑鎶€鏈悳绱㈠拰閬嶅巻鎿嶄綔銆?

濡傛灉鏈嶅姟鍣ㄦ兂鍙戦€佽濡傚璞℃垨鏁扮粍杩欐牱鐨勭粨鏋勫寲鏁版嵁浣滀负鍝嶅簲锛屽簲璇ヤ紶杈?strong>JSON缂栫爜
锛堚€渁pplication/json鈥濓級鐨勫瓧绗︿覆鏁版嵁銆傛帴鏀跺畠鏃讹紝鍙互鎶妑esponseText灞炴€т紶閫掔粰JSON.parse()銆?

濡傛灉鏈熸湜鍝嶅簲鐨勭被鍨嬫槸鈥漚pplication/javascript鈥濇垨鈥漷ext/javascript鈥?杩欑鎯呭喌涓嬩笉闇€瑕佷娇鐢╔MLHttpRequest瀵硅薄锛屽洜涓?lt;script>鏈韩瀹屽叏鍙互瀹炵幇鍔犺浇骞舵墽琛岃剼鏈€傝€屼笖锛?strong><script>鍙互鍙戣捣璺ㄥ煙http璇锋眰锛岃€孹MLHttpRequest API鍒欑姝€?/strong>

Web鏈嶅姟鍣ㄧ閫氬父浣跨敤浜岃繘鍒舵暟鎹紙濡傚浘鐗囷紝鏂囦欢锛夊搷搴攈ttp璇锋眰锛宺esponseText灞炴€у彧鑳界敤浜庢枃鏈€傜洰鍓嶈繕娌℃湁涓€涓粺涓€鍚勬祻瑙堝櫒澶勭悊鐨勬垚鐔熸柟娉曪紝鍙互鍙傝€冿細http://stackoverflow.com/questions/4376657/is-there-any-way-to-send-binary-data-with-xmlhttprequest-object

鏈嶅姟鍣ㄥ搷搴旂殑姝e父瑙g爜鏄亣璁炬湇鍔″櫒涓鸿繖涓搷搴斿彂閫佷簡鈥淐ontent-Type鈥濆ご鍜屾纭殑MIME绫诲瀷銆?

2. 缂栫爜璇锋眰涓讳綋
HTTP POST璇锋眰鍖呮嫭涓€涓姹備富浣擄紝瀹冨寘鍚鎴风浼犻€掔粰鏈嶅姟鍣ㄧ殑鏁版嵁銆?

3.1 琛ㄥ崟缂栫爜鐨勮姹?/strong>
褰撶敤鎴锋彁浜tml琛ㄥ崟鏃讹紝琛ㄥ崟涓殑鏁版嵁锛堟瘡涓〃鍗曞厓绱犵殑鍚嶅瓧鍜屽€硷紝鍥犳涔熻姹傝〃鍗曞厓绱犲繀椤绘湁name鍜寁alue灞炴€э級缂栫爜鍒颁竴涓瓧绗︿覆涓苟闅忚姹傚彂閫併€傞粯璁ゆ儏鍐典笅锛宧tml琛ㄥ崟閫氳繃post鏂规硶鍙戦€佺粰鏈嶅姟鍣紝鑰岀紪鐮佸悗鐨勮〃鍗曟暟鎹垯鐢ㄤ綔璇锋眰涓讳綋銆傜紪鐮佹柟娉曟槸锛氬姣忎釜琛ㄥ崟鍏冪礌鐨勫悕瀛楀拰鍊兼墽琛屾櫘閫氱殑url缂栫爜锛堜娇鐢ㄥ崄鍏繘鍒惰浆绉荤爜鏇挎崲鐗规畩瀛楃锛夛紝浣跨敤绛夊彿鎶婄紪鐮佸悗鐨勫悕瀛楀拰鍊煎垎寮€锛屽苟浣跨敤鈥?amp;鈥濆垎寮€鍚?鍊煎銆傚锛?
Find=pizza&zipcode=2323&radius=1km

琛ㄥ崟缂栫爜鏍煎紡鏈変竴涓寮忕殑MIME绫诲瀷锛?
application/x-www-form-urlencoded
褰撲娇鐢╬ost鏂规硶鎻愪氦杩欑椤哄簭鐨勮〃鍗曟暟鎹椂锛屽繀椤昏缃€淐ontent-Type鈥濅负杩欎釜鍊笺€?

琛ㄥ崟鏁版嵁鍚屾牱鍙互閫氳繃GET璇锋眰鏉ユ彁浜わ紝褰撶煡璇嗕负浜嗘墽琛屽彧璇绘煡璇紝get璇锋眰姣攑ost璇锋眰鏇村悎閫傘€?

3.2 JSON缂栫爜鐨勮姹?/strong>
Html form骞朵笉鏄痟ttp鎻愪氦鐨勫繀椤荤被鍨嬶紝鐜板湪浣滀负web浜ゆ崲鏍煎紡鐨凧SON宸茬粡寰楀埌鏅強锛屽彲浠ヤ娇鐢↗SON.stringify()瀵硅姹備富浣撶紪鐮併€?



3.3 Multipart/form-data璇锋眰
褰揾tml琛ㄥ崟鍚屾椂鍖呭惈鏂囦欢涓婁紶鍏冪礌鍜屽叾浠栧厓绱犳椂锛屾祻瑙堝櫒涓嶈兘浣跨敤鏅€氱殑琛ㄥ崟缂栫爜鑰屽繀椤讳娇鐢ㄧО涓衡€漨ultipart/form-data鈥濈殑鐗规畩content-Type鏉ョ敤post鏂规硶鎻愪氦銆傝繖绉嶇紪鐮佷娇鐢ㄩ暱杈圭晫瀛楃涓叉妸璇锋眰涓讳綋鍒嗙鎴愬涓儴鍒嗭紝瀵逛簬鏂囨湰鏁版嵁锛屾墜鍔ㄥ垱寤衡€漨ultipart/form-data鈥濊姹備富浣撴槸鍙兘鐨勶紝浣嗗緢澶嶆潅銆?

XHR2瀹氫箟浜嗘柊鐨凢ormData api锛屽鏄撳疄鐜板閮ㄥ垎璇锋眰涓讳綋銆傞鍏堬紝浣跨敤鏋勯€犲嚱鏁板垱寤篎ormData瀵硅薄锛岀劧鍚庢寜闇€澶氭璋冪敤瀵硅薄鐨刟ppend()鏂规硶鎶婂悇閮ㄥ垎娣诲姞鍒拌姹備腑锛屾渶鍚庯紝鎶奆ormData瀵硅薄浼犻€掔粰send()鏂规硶銆?
3. 涓璇锋眰鍜岃秴鏃禷bort
鍙互閫氳繃璋冪敤XMLHttpRequest瀵硅薄鐨刟bort()鏂规硶鏉ュ彇娑堟鍦ㄨ繘琛岀殑http璇锋眰銆侫bort()鏂规硶鍦ㄦ墍鏈夌殑XMLHttpRequest鐗堟湰鍜孹HR2涓彲鐢紝璋冪敤鏂规硶鏃惰Е鍙慳bort浜嬩欢銆?


4. 璺ㄥ煙http璇锋眰
浣滀负鍚屾簮绛栫暐鐨勪竴閮ㄥ垎锛孹MLHttpRequest瀵硅薄閫氬父浠呭彲浠ュ彂璧峰拰鏂囨。鍏锋湁鐩稿悓鏈嶅姟鍣ㄧ殑http璇锋眰銆傝繖涓檺鍒跺叧闂簡瀹夊叏婕忔礊锛屼絾闃绘浜嗗ぇ閲忓悎閫備娇鐢ㄧ殑璺ㄥ煙璇锋眰銆傚彲浠ュ湪<form>鍜?lt;iframe>涓娇鐢ㄨ法鍩焨rl锛岃€屾祻瑙堝櫒鏄剧ず鏈€缁堢殑璺ㄥ煙鏂囨。锛屼絾娴忚鍣ㄤ笉鍏佽鍘熷鑴氭湰鏌ユ壘璺ㄥ煙鏂囨。鐨勫唴瀹广€備娇鐢╔MLHttpRequest锛屾枃妗e唴瀹归兘鏄€氳繃responseText灞炴€ф毚闇诧紝鎵€浠ュ悓婧愮瓥鐣ヤ笉鍏佽XMLHttpRequest杩涜璺ㄥ煙璇锋眰銆傚洜姝わ紝<script>涔熷彇浠d簡XMLHttpRequest鎴愪负涓绘祦Ajax浼犺緭鍗忚銆?

鍊熷姪<script>鍙戦€乭ttp璇锋眰锛欽SONP
鍙渶璁剧疆<script>鍏冪礌鐨剆rc灞炴€э紙鍔犲叆瀹冭繕娌℃彃鍏ュ埌document涓紝闇€瑕佹彃鍏ヨ繘鍘伙級锛岀劧鍚庢祻瑙堝櫒浼氬彂閫佷竴涓姹備互涓嬭浇src灞炴€ф墍鎸囧悜鐨剈rl銆備娇鐢?lt;script>鍏冪礌杩涜Ajax浼犺緭鐨勪竴涓富瑕佸師鍥犳槸锛屽畠涓嶅彈鍚屾簮绛栫暐鐨勫奖鍝嶏紝鍥犳鍙互浣跨敤瀹冧滑浠庡叾浠栫殑鏈嶅姟鍣ㄨ姹傛暟鎹紝绗簩涓師鍥犳槸鍖呭惈JSON缂栫爜鏁版嵁鐨勫搷搴斾綋浼氳嚜鍔ㄨВ鐮侊紙鍗虫墽琛岋級銆?

杩欑浣跨敤<script>鍏冪礌浣滀负Ajax浼犺緭鐨勬妧鏈О涓篔SONP,鑻ttp璇锋眰鎵€寰楀埌鐨勫搷搴旀暟鎹椂缁忚繃json缂栫爜鐨勶紝鍒欓€傚悎浣跨敤璇ユ妧鏈€?

褰撻€氳繃<script>鍏冪礌璋冪敤鏁版嵁鏃讹紝鍝嶅簲鍐呭蹇呴』鐢╦avascript鍑芥暟鍚嶅拰鍦嗘嫭鍙峰寘瑁硅捣鏉?/strong>锛岃€屼笉鏄彂閫佽繖鏍蜂竴娈礘SON鏁版嵁锛?
[1, 2, {鈥渂uckle鈥?鈥漨y shoe鈥潁]
搴旇鍙戦€佽繖鏍蜂竴涓寘瑁瑰悗鐨凧SON鍝嶅簲锛?
handleResponse(
[1, 2, {鈥渂uckle鈥?鈥漨y shoe鈥潁]
)

鍖呰9鍚庣殑鍝嶅簲浼氭垚涓?lt;script>鍏冪礌鐨勫唴瀹癸紝瀹冨厛鍒ゆ柇JSON缂栫爜鍚庣殑鏁版嵁锛堟瘯绔熸槸涓€涓猨avascript琛ㄨ揪寮忥級锛岀劧鍚庢妸瀹冧紶閫掔粰handleResponse()鍑芥暟銆?

涓轰簡鍙璧疯锛屾垜浠繀椤婚€氳繃鏌愮鏂瑰紡鍛婅瘔鏈嶅姟锛屽畠姝e湪浠庝竴涓?lt;script>鍏冪礌璋冪敤锛屽繀椤昏繑鍥炰竴涓狫SONP鍝嶅簲锛岃€屼笉鏄櫘閫氱殑JSON鍝嶅簲銆傝繖涓彲浠ラ€氳繃鍦║RL涓坊鍔犱竴涓煡璇㈠弬鏁板疄鐜帮紝渚嬪杩解€?jsonp鈥?鎴栤€?amp;jsonp鈥?銆?

鍦ㄥ疄璺典腑锛屾敮鎸丣SONP鐨勬湇鍔′笉浼氬己鍒舵寚瀹氬鎴风蹇呴』瀹炵幇鐨勫洖璋冨嚱鏁板悕绉帮紝姣斿handleResponse銆傜浉鍙嶏紝浠栦滑浣跨敤鏌ヨ鍙傛暟鐨勫€硷紝鍏佽瀹㈡埛绔寚瀹氫竴涓嚱鏁板悕锛堝锛?jsonp=callback锛夈€?
杩樺彲浠ュ弬鑰冿細
http://www.w3cmm.com/ajax/jsonp.html
http://www.cnblogs.com/jkswjw/p/3173758.html
上一篇:上一篇
下一篇:下一篇

 

随机推荐程序问答结果

 

 

如对文章有任何疑问请提交到问题反馈,或者您对内容不满意,请您反馈给我们DOC100.NET论坛发贴求解。
DOC100.NET资源网,机器学习分类整理更新日期::2014-01-05 02:01:04
如需转载,请注明文章出处和来源网址:http://www.doc100.net/bugs/t/4551/
本文WWW.DOC100.NET DOC100.NET版权所有。