寫在前面:      之前的學習總是很鬆散,沒有去做總結,也沒有對所學的知識點進行梳理,這就造成了學習效率偏低的情況,對知識點的掌握總是很淺層次的瞭解而已,所以接下來的學習我想我可以通過部落格記錄的學習方式,完善自身,對知識點加深理解.

• 對ajax的簡單認識

  早期的web應用程式的主要目的是為了可以讓伺服器的資訊在網頁上得以呈現. 一般常用的方式就是使用瀏覽器在位址列輸入地址,然後建立與伺服器的連線,獲取伺服器的資料.

  這種互動方式就意味著如果使用者需要對頁面的部分資料進行重新整理時, 亦或者進行一些表單處理時,需要重新整理整個頁面, web開發人員也無法直接使用程式設計的方式對這種互動(瀏覽器客戶端與服務端的請求與響應).

  AJAX就是為了解決上述問題而面世的,開發人員可以呼叫瀏覽器提供的API, 對伺服器發起請求,並且獲取資料,而不是去重新整理整個頁面.

• AJAX的簡單使用

  通常使用ajax進行網路程式設計包括下面四個步驟

  • 建立一個代理請求物件(XMLHttpRequest物件),即需要一個媒介去訪問伺服器

  • 代理請求物件建立與伺服器的連線

  • 通過連線向伺服器發出請求

  • 對代理請求的狀態變化進行處理

       //建立一個代理請求物件
       var obj=new XMLHttpRequest()
       //與伺服器建立連線通道
       obj.open("GET","http://jsonplaceholder.typicode.com/users")
       //向伺服器發出請求
       obj.send();
       //根據代理物件的狀態響應進行相應的處理
       obj.onreadystatechange=function(){
       if(obj.readyState==4){
         var res=obj.responseText;
         console.log(res);
           }
       }
   
  

• 代理物件的五個狀態(readystate) onreadychange事件的觸發是因為代理物件的readystate的變化而產生,所以我將梳理一下代理物件進行資料交換時的五個狀態值

  readystate	說明
  0	代理已經被建立,但是沒有建立連線(open)
  1	代理已經通過open方法建立了連線
  2	send()方法已經被呼叫,並且返回了狀態行和響應頭
  3	響應體正在下載中,即響應體中包含了部分資料
  4	響應體已經下載完畢

  上述的狀態如果發生變化將會觸發onreadystate事件,我們通常在readyState=4的時候,去獲取響應體,此時響應體已經下載完畢.

• GET請求與POST請求

  GET傳遞引數時可以使用url直接傳遞引數 obj.open("GET","http://jsonplaceholder.typicode.com/users?id=1")

  POST傳遞引數時,不能直接使用url傳遞引數,需要把想傳遞的引數作為send()方法的引數. 並且如果傳遞的引數的格式不同,也需要設定不同的請求頭,以便於伺服器去解析. 比如 1.使用post請求且傳遞引數為urlencoded格式 obj.open("POST","http://jsonplaceholder.typicode.com/users") obj.setRequestHeader("conten-Type","application/x-www-form-urlencoded") obj.send("id=1")

              2.使用post請求且傳遞引數為json格式
          `obj.open("POST","http://jsonplaceholder.typicode.com/users")
           obj.setRequestHeader("conten-Type","application/json)
           obj.send('"id"=1')`
  

  測試網址好像不支援post方式