1. 程式人生 > >ajax入門 不要畏懼 很簡單 進了門一切都好學多了

ajax入門 不要畏懼 很簡單 進了門一切都好學多了

 以前總是聽別人說ajax是多麼的好,然後自己就去借了本書看,哇塞感覺好難哦,什麼介紹JavaScript,html,css,還有很多一些東西。看的那個難啊,然後就是硬著頭皮把它給看完了,但是就是缺少了一步最關鍵的步驟,執行它。理解它的原理。瞭解它的機制。去感覺它,觸控它。

    現在拿了一個例項自己去練習了一下,發現,嗯,可以感覺到它的存在了。可以觸控到了。好開心啊,還有那些很複雜的介紹知識我現在明白了,它們都是用來幹什麼的了。

    忽然發現原來有些東西,你是需要提前去體驗它,感知它,這樣才會有目標性,有興趣,有動力的去學習。也明白了一些語言或者技術都喜歡用hello world的例項了,就是要讓你去體驗一下。

    那麼下面就是體驗ajax的例項了,

    別急先來了解原理,不知道原理,再經典的例子也調動不了你的興奮神經

---------------------------------------------------------------------------------------------------------------------------------

什麼是Ajax:Ajax(Asynchronous Javascrpt And Xml)是一種運用於瀏覽器的技術,它可以在瀏覽器與伺服器之間使用非同步通訊機制進行資料通訊,從而允許瀏覽器向伺服器獲取少量資訊而不是重新整理整個頁面。Ajax並不是一種新的技術,或者說它不是一種技術,它只是多種技術的綜合:Javascript、Html、Css、Dom、Xml、XMLHttpRequest等技術按照一定的方式在協作中發揮各自的作用就構成了Ajax。

Javascript,Html,Css這些都是一個WEB程式設計人員必備的知識,這裡就不再介紹了,下面著重介紹一下XMLHttpRequest。可以說XMLHttpRequest是Ajax技術的一個核心,沒有它Ajax無從運作。

XMLHttpRequest:

XMLHttpRequest是XMLHttp元件的一個物件,使用XMLHttpRequest可以實現瀏覽器端與伺服器端進行非同步通訊。通過HttpRequest物件,Web應用程式無需重新整理頁面就可以向伺服器提交資訊,然後得到伺服器端的返回資訊。

如何使用XMLHttpRequest物件:使用XMLHttpRequest首先要先建立XMLHttpRequest物件。請看一個例子

<script type="text/javascript">
function createXmlHttp(){
        if(window.ActiveXObject){
                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                //alert("IE XmlHttp");
        }
        else if(window.XMLHttpRequest){
                xmlHttp=new XMLHttpRequest();
                //alert("Other XmlHttp");
        }
}
</script>



這是一個相容三大瀏覽器的建立XMLHttpRequest方法。

XMLHttpRequest的屬性介紹: (常用的屬性)

  (1). readyState:返回當前XMLHttp請求的狀態,有5種:

      狀態:0 :請求未初始化;
          狀態:1 :請求已經建立;
          狀態:2 :請求已經發送;
          狀態:3 :請求處理中;
          狀態:4 :響應已經完成。

  (2). onreadystatechange:readyState狀態改變的事件觸發器,用來指定當readyState發生變化時的處理事件。
  (3). responseText:將響應資訊以字串的形式返回。
  (4). responseXML:將響應資訊格式化為XML文件的形式返回。
  (5). status:當前Http請求的狀態,下面列幾個重要的,經常用到的狀態。

        狀態值:200 :交易成功;
        狀態值:404 :沒有發現檔案、查詢或URI;
        狀態值:500 :伺服器產生內部的錯誤;

XMLHttpRequest的方法:(常用的方法)

  (1). open(string method,string url,boolean asynch,string username,string password)方法將建立一個新的Http請求。

    method(請求方法):GET,POST和PUT(一般不用);
          url為:請求的地址
    asynch:可選引數,用來指定此請求是同步還是非同步方式,預設為trun(非同步);
        username,password:可選引數,伺服器需要驗證時用的,一般不用(插一句:俺沒用過,嘿嘿……)。

(2). send(content)方法用來向伺服器傳送具體的請求,如果沒有內容要傳送,content省略或為null。

介紹了這麼多了,有人一定會說有用嗎?到底Ajax怎麼用?這才是我們最關心的一件事?

往下看 ↓↓↓

對了,容我再說一句費話:一個不懂上面內容的程式設計師說自己是一個Ajax高手無異於打腫了臉充胖子。

     ajax+coldfusion

//as.cfm

<html>
<head>
<title>ajax例項</title>
<script type="text/javascript">
function createXmlHttp(){
    if(window.ActiveXObject){
                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        else if(window.XMLHttpRequest){
                xmlHttp=new XMLHttpRequest();
        }       
}

function sendAjax(strUrl){
        createXmlHttp();
        xmlHttp.open("GET",strUrl,true);
    xmlHttp.onreadystatechange=process;
        xmlHttp.send(null);
}

function process(){
        if (xmlHttp.readyState==4){
                if(xmlHttp.status==200){
                        alert(xmlHttp.responseText);
                }
        }
}

function call_back(){
var love=document.getElementById("love").value;
var url="aas.cfm?love="+love;
sendAjax(url);
}
</script>
</head>
<body>
<center>
<form name="f1">
愛好:<input type="text" name="love" id="love" />
<input type="button" name="submit" value="提交" onClick="call_back()" />
</form>
</center>
</body>
</html>

//aas.cfm

<html>
 <head>
 <title>ajax 2</title>
</head>
 <body>
  <cfoutput>
   #FORM.Love#
  </cfoutput>
 </body>
</html>

相關推薦

ajax入門 不要畏懼 簡單 一切好學

 以前總是聽別人說ajax是多麼的好,然後自己就去借了本書看,哇塞感覺好難哦,什麼介紹JavaScript,html,css,還有很多一些東西。看的那個難啊,然後就是硬著頭皮把它給看完了,但是就是缺少了一步最關鍵的步驟,執行它。理解它的原理。瞭解它的機制。去感覺它,觸控它

sqlite快速入門手冊-真的簡單

它的特點是:極小、資料庫、效能不錯。 適合場景:小型應用軟體,解決存檔案的不便 解壓後只有個sqlite3.exe,這就夠了。將它拷貝到第一個方便使用的地方去吧。 建立個庫: cmd視窗進入exe目錄,使用sqlite3.exe test.db建立庫,

拓撲排序入門(真的簡單

在一個有向圖中,對所有的節點進行排序,要求沒有一個節點指向它前面的節點。先統計所有節點的入度,對於入度為0的節點就可以分離出來,然後把這個節點指向的節點的入度減一。一直做改操作,直到所有的節點都被分離出來。如果最後不存在入度為0的節點,那就說明有環,不存在拓撲排序,也就是很多

webpack階用法你get到麼?

如何消除無用程式碼;打包自己的私有js庫;實現程式碼分割和動態import提升初次載入速度;配置eslint規範團隊程式碼規範;打包異常抓捕你都get到了麼? 搖樹優化:Tree Shaking webpack借鑑了rollup構建工具,從2.0就實現支援tree shaking,其中,到webpack4.0

現場直擊 | 圖靈獎得主Silvio Micali上海之行講啥?在這裡

9月12日,由CSDN和Algorand主辦,區塊鏈大本營、極客幫創投、GitChat協辦的第12期CSDN區塊鏈技術沙龍—圖靈獎得主,MIT教授見面會在上海財大豪生大酒店如期舉辦。 本次見面會邀請到了Algorand創始人SilvioMicali、Algorand首

夢醒一切結束

夢,醒了,一切,都結束了。 11月11日,濰坊,夢結束的地方。 第二天出考場之後整個人都麻木了,因為,我真的失敗了。 回到餐廳,看到同校的都在吃飯了,我剛到食堂就一屁股的坐了下來,『題難都難』,旁邊高一的教練還在安慰我。 默默地吃完了飯,坐上了車,選了一個靠

人工智慧對企業的10大影響:為何網路攻擊和新崗位

按在經歷三起三落的發展歷程之後,人工智慧終於在現在迎來了其黃金時代。對於金融、能源、醫療、交通、

《連載 | 物聯網框架ServerSuperIO教程》1.4種通訊模式機制。附小文:招.NET開發,結果他轉JAVA一切是為了生活

參考文章: 一、感慨       上大學的時候,沒有學過C#,花了5塊錢在地壇書市買了一本教程,也就算是正式入行了。後來深造,學過JAVA,後來迫於生計,打算轉JAVA了。後來考慮考慮,自己寫的框架還是有很大發展餘地,後來還是在C#的陣地上堅持了下來。從一開始的雛形,到SuperIO的

EOS賬號ram,cpu資源用盡,啥不能幹,怎麼辦

問題重現case1     比如如下賬號testtest1233,ram, cpu資源都沒有了 因此建立新賬號失敗 於是想著購買cpu,結果失敗 那購買ram,卻仍舊失敗     所以進入了一個死迴圈,沒有ram沒法購買cpu,沒有cpu沒法購買ra

情人節到,Postman 脫單,那你咧?

前言 Postman 是一款API介面除錯工具,做過 Web 介面或多或少應該接觸過。 通過它可以完成 Http 介面的除錯,測試同學也可以基於此做一些自動化測試。另外 Postman 還提供其他高階功能,不過需要另外收費,畢竟商業公司還是要恰飯啊。 剛開始小黑哥使用的 Chrome 應用版本,配合

資料庫索引的知識點,你所需要解的在這兒

資料庫索引,相信大家都不陌生吧。 索引是對資料庫表中一列或多列的值進行排序的一種結構,使用索引可快速訪問資料庫表中的特定資訊。作為輔助查詢的工具,合理的設計索引能很大程度上減輕db的查詢壓力,db我們都知道,是專案最核心也是最薄弱的地方,如果壓力太大很容易產生故障,造成難以預計的影響。所以,不管是日常開發

AngularJS單頁面路由配置恩,理解簡單

gif htm con function ner 創建 app 插入 樣式 利用route實現單頁面跳轉功能 利用angularJS開發流程 1)配置好angularJS開發環境 2)利用 yo angular projectname創建項目目錄 3)刪除

mysql零基礎入門視頻教程免費分享!簡單

mysql零基礎入門視頻教程免費分享!很簡單 MySQL是一個關系型數據庫管理系統,由瑞典MySQL AB 公司開發,目前屬於 Oracle 旗下產品。MySQL 是最流行的關系型數據庫管理系統之一,在 WEB 應用方面,MySQL是最好的 RDBMS (Relational

Redis入門簡單之四【初識Jedis】

ive 基本 common port sta ole urn 超時時間 keyword Redis入門很簡單之四【初識Jedis】 博客分類: NoSQL/Redis/MongoDB redisnosql緩存jedis 使用Jedis提供的Java API對

Redis入門簡單之二【常見操作命令】

哈希表 shu 分享 排序。 sca ann mongodb pin set Redis入門很簡單之二【常見操作命令】 博客分類: NoSQL/Redis/MongoDB redisnosql緩存 Redis提供了豐富的命令,允許我們連接客戶端對其進行直接

【轉】如何理解雲計算?簡單,就像吃貨想吃披薩

公司 如果 pan 雲技術 cit 分類 本地應用 style 分發 你一定聽說過雲計算中的三個“高大上”的概念:IaaS、PaaS和SaaS。這幾個術語並不好理解。不過,如果你是個吃貨,還喜歡披薩,這個問題就好解決了!好吧,其實你根本不是一個吃貨,之所以自我標榜為

SQL註入其實簡單,別一不留神就被利用

SQL註入 sqlmap SQL防註入 SQL註入這個詞相信大家應該都不陌生,而且每年都會有這樣子的事情發生,下面我先帶大家回憶11年兩期起比較經典的案例事件: 1、SONY索尼事件2011年4月,著名的×××組織Anonymous***SONY一個網站,一星期後才被發現7千萬的用戶個人信息,其中

爬蟲簡單麽?直到我抓取一千億個網頁後我懂!爬蟲真不簡單

服務 字體 每日 還需要 道理 但是 電子商務 發表 硬件 現在爬蟲技術似乎是很容易的事情,但這種看法是很有迷惑性的。開源的庫/框架、可視化的爬蟲工具以及數據析取工具有很多,從網站抓取數據似乎易如反掌。然而,當你成規模地在網站上抓東西時,事情很快就會變得非常

學好這4步Python入門簡單

1. 變數型別簡介及操作: 變數讓你能夠把程式中準備使用的每一段資料都賦給一個簡短、易於記憶的名字,變數型別是指賦值於變數中的資料型別。   Python變數型別(深色Mark部分變數為不可更改的變數) 2. 條件控制及迴圈語句: 條件語句是通過一條或多條語句的執