摘要:入門之建立對象今天幫朋友寫了一個簡單的的發現了一些東西,決定寫一篇文章記錄一下,避免以后挖坑。函數會啟動一個請求但并不是發送,可以看作辦事之前的準備。小結這是一個手動創建對象并使用最簡單的方法。
ajax入門之建立XHR對象
今天幫朋友寫了一個簡單的ajax的demo,發現了一些東西,決定寫一篇文章記錄一下,避免以后挖坑。
function createXHR(){ if(XMLHttpRequest){ return new XMLHttpRequest(); }else{ return new ActiveXObject("Microsoft.XMLHTTP") } }
這一段js代碼來源自w3school,用于創建兼容各瀏覽器的XMLHttpRequest對象的含義:
檢測客戶端是否有XMLHttpRequest,否則使用ActiveXObject
關于XMLHttpRequest對象,IE5是第一個引入XHR對象的瀏覽器,在IE5中,XHR是通過activeX對象實現的.因此在IE中可能遇到三種不同版本的XHR對象,MXSML2.XMLHTTP,MXSML2.XMLHttp.3.0和MXSML2.XMLHttp.6.0。
為了向我們偉大的IE瀏覽器“致敬”,我們必須添加額外的代碼進行創建
以下代碼適用與IE7以下的情況:
function createXHR(){ if(typeof argument.callee.activeXString != "string"){ var versions = ["MXSML2.XMLHTTP","MXSML2.XMLHttp.3.0","MXSML2.XMLHttp.6.0"]; var i len; for(i = 0;len=versions.length;i} } } return new ActiveXObject(argument.callee.activeXString); }
但往往我不會考慮這么多,能看懂前面的函數也是很不容易了,再讓我寫出來,我的天!當大家和我這么懶的時候,可以直接使用第一份代碼,也就是w3school那一套代碼,我們使用原生的XHR對象進行創建。
當然,我們這里也給出完整的代碼。
function createXHR(){ if(typeof XMLHttpRequest != "undefined"){ return new XMLHttpRequest(); }else if(typeof argument.callee.activeXString != "string"){ var versions = ["MXSML2.XMLHTTP","MXSML2.XMLHttp.3.0","MXSML2.XMLHttp.6.0"]; var i len; for(i = 0;len=versions.length;i} } return new ActiveXObject(argument.callee.activeXString); }else{ throw new Error("沒有XHR對象存在"); } }
demo
創建好XHR對象只是第一步,才是我們各種操作的開始。
open()函數會啟動一個請求,但并不是發送,可以看作辦事之前的準備。
它接受三個函數:
open(get/post,url,false/true)
請求類型:最常用的就是get和post
路徑:就是要請求的操作的文件的url
是否異步
我們這是使用的是get方式,因為我們并沒有要發送的數據。
異步我們選擇了true,無意中發現在使用false時候,火狐出現了警告:
主線程中同步的 XMLHttpRequest 已不推薦使用,因其對終端用戶的用戶體驗存在負面影響。
具體需要再了解。
自然而然,準備好了就要發送,send()只接受一個參數,那就是要發送的數據。我們使用的是get,沒有數據,那就null好了。
因為這篇文章主要是講ajax,所以php部分我只用了最簡單的echo
這樣就能在接受到請求后返回一個字符串。
我們怎么樣才能直到php文件將數據處理完,返回給客戶端了呢?
這時候我們就需要監測XHR的readyState屬性。先介紹以下readyState屬性:
0:初始化未完成,未調用open()
1: 啟動調永了open()函數,但是還沒有send
2:發送,調永了send()函數,還沒有接收到響應
3:開始接收,接收到部分的數據
4:完成,接收到了全部數據。
所以在上面的函數中我們可以看到,我們去監測readyState屬性,等到等于4的時候,也就是數據接收完成之后,我們開始對數據進行處理。
這是一個手動創建XHR對象并使用最簡單的方法。以后回繼續進行更新。介紹其更詳細的用法。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/86460.html
摘要:設置一個定時器,定時詢問服務器是否有信息,每次建立連接傳輸數據之后,鏈接會關閉。通過調用此程序提供的套接口接口與服務器端的套接口進行通信。 本文同步自我的博客園:http://hustskyking.cnblogs.com P.S: 各個平臺中就 segmentFault 寫博客體驗最好了! web通信,一個特別大的topic,涉及面也是很廣的。因最近學習了 javascript 中...
摘要:表單提交在中提供了表單提交的功能,我們可以通過表單把數據從前臺提交到后臺,通過設置事件,可以為按鈕或其它元素同樣可以觸發表單提交的事件賬號請輸入賬號密碼請輸入密碼重置重置提交表示獲取頁面中所有的表單,返回一個數組提交成功通過表單提交數據不需 表單提交 在HTML中提供了表單提交的功能,我們可以通過表單把數據從前臺提交到后臺,通過設置submit事件,可以為按鈕或其它元素同樣可以觸發表單...
閱讀 1536·2023-04-26 02:08
閱讀 3128·2021-10-14 09:42
閱讀 7177·2021-09-22 15:34
閱讀 3236·2019-08-30 13:16
閱讀 2719·2019-08-26 13:49
閱讀 1342·2019-08-26 11:59
閱讀 1252·2019-08-26 10:31
閱讀 2170·2019-08-23 17:19