前端知識點總結——Ajax

1.ajax

1.URL的作用
  用於表示任意一個資源的位置（網際網路上）
2.詳解
  格式：
  <scheme>://<user>:<pwd>@<host>:<port>/<path>;<params>?<query>#<frag>
  scheme:方案\協議，以哪種方式到服務獲取資源，協議不區分大小寫，
  常見的協議：http,https,ftp
  ssh:安全的遠端登入
  SMTP:郵件傳輸
  POP3：郵件接收
  DNS：域名解析
  TELNET:遠端登入
  host:主機名，伺服器主機名或IP地址或域名（由DNS轉換為IP地址） 127.0.0.1=localhost 
  port:埠號 80 443
  user:使用者名稱，訪問某些特定資源時需要用到的資訊
  pwd:密碼，訪問某些特定資源時需要用到的密碼
  path:路徑，資源在伺服器上具體存放位置
  params:引數（跟伺服器有關）
  query:查詢字串，要傳遞給伺服器的資料
  
  frag:錨點
  

2.HTTP協議

1.什麼是HTTP 
  Hyper Text Transfer Protocol:超文字傳輸協議
  規範了資料如何打包以及傳遞
2.詳解
  1.請求（request）訊息
    客戶端帶給伺服器的資料都有哪些，由三部分組成
  1.請求的起始行
    1.請求方法
      1.GET
        表示客戶端向伺服器獲取資源時使用
        特點：
       1.無請求主體
       2.靠位址列傳遞查詢字串
      2.POST
        表示想傳遞資料給伺服器時使用
    特點：
       1.有請求主體
      3.PUT
        表示客戶端想放置檔案到伺服器（禁用）
      4.DELETE
        表示客戶端要刪除伺服器端的資料（禁用）
      5.HEAD
        表示客戶端只想獲取指定的響應頭
      6.CONNECT
        測試連線
      7.TRACE
        追蹤請求路徑
      8.OPTIONS
        選項，保留以後使用
    2.請求URL
    3.協議版本：HTTP/1.1

2.1請求頭

    1.Host:localhost/127.0.0.1
      作用：告訴瀏覽器請求哪一個主機
    2.Connection:keep-alive
      作用：告訴伺服器要進行持久連線
    3.User-Agent:
      作用：告訴伺服器自己（瀏覽器）的型別
    4.Accept-Language:zh-cn
      作用：告訴伺服器自己能接納的自然語言
    5.Accept-Encoding:gzip
      作用：告訴伺服器自己能接收的資料壓縮型別是什麼
    6.Referer:http:localhost/Day01/login.html
      作用：告訴伺服器請求來自哪個頁面
      3.請求主體
    Form  Data

2.2響應（response）訊息

    1.響應起始行
  1.協議版本號：HTTP/1.1
  2.響應狀態碼
    作用：告訴瀏覽器，伺服器的響應狀態是什麼問題（有問題，沒有問題，有問題\問題大概是什麼）
    1xx:100-199 提示資訊
    2xx:成功響應
        200:ok
    3xx：需要進行重定向
        301：永久性重定向
    302：臨時重定向
    304：Not Modified
    4xx:客戶端請求錯誤
        404：Not Found 請求資源不存在
    403：Forbidden 許可權不夠
    405：Method Not Allowed 請求方法不被允許
    5xx:伺服器執行錯誤
        500：伺服器內部錯誤

2.3原因短句

    對狀態碼的簡單解釋
    2.響應頭
     1.Date
    作用：告訴瀏覽器，伺服器的響應時間
          格林尼治時間（+8h）
  2.Connection
    作用：告訴瀏覽器已經啟動持久連線
  3.Content-Type
    作用：響應主體的型別是什麼，告訴瀏覽器，用什麼樣的方式解析響應主體
       1.text/html:響應回來的資料是html文字
       2.text/plain:響應回來的資料是普通文字
       3.text/css:響應回來的資料是css樣式
       4.application/xml:響應回來的資料是xml格式
       5.application/javascript:響應回來的資料是js指令碼程式碼
       6.application/json:響應回來的資料是json格式的字串
       7.images/jegp:響應回來的資料是圖片
    3.響應主體
  Response

3.快取

1.什麼是快取 & 工作原理

  客戶端將伺服器響應回來的資料進行自動儲存，當再次訪問時，直接使用儲存的資料。
2.快取的優點
  1.減少了冗餘資料的傳輸，節省客戶端流量
  2.可以節省伺服器頻寬
  3.降低對伺服器資源的消耗和執行要求
  4.降低了由於遠距離而造成的延時載入
3.與快取相關的訊息頭
  1.Cache-Control訊息頭
    作用：從伺服器將文件傳到客戶端時起，可以認為此文件處於新鮮的秒數
語法：
   Cache-Control:max-age=處於新鮮的秒數
   ex:
     Cache-Control:max-age=3600;
     Cache-Control:max-age=0;每次都從伺服器下載新資源
  2.Expires訊息頭
    作用：指定快取過期的確切時間（格林尼治時間）
語法：Expires:Thu,23 Nov 2017    GMT
如果希望客戶端不快取，可以給一個過期的時間
Expires:Wed,22 Nov 2017 00:00:00 GMT
Expires:0;---此方法不標準，執行性不是特別好
4.在網頁上設定訊息頭
  1.更改伺服器配置
  2.網頁上增加訊息
  <meta http-equiv="訊息頭" content="值">
    ex:
  <meta http-equiv="Cache-Control" content="max-age=3600">
或
  <meta http-equiv="Expires" content="0">
  php:
    header("Expires:0");
  Response.AddHeader("Expires","0");

4.AJAX

1.名詞解釋

1.同步（Synchronous）
  在一個任務進行中時，不能開啟其它的任務
  同步訪問：瀏覽器在向伺服器傳送請求的時候，瀏覽器只能等待伺服器的響應，不能做其它的事情。
  出現場合：
     1.位址列輸入網址訪問頁面（）
 2.a標記預設跳轉
 3.submit按鈕的表單提交
2.非同步（Asynchronous）
  在一個任務進行中時，可以開啟其它的任務
  非同步訪問：瀏覽器在向伺服器傳送請求時，不耽誤使用者在網頁上做其它的操作
  使用場合：
     1.使用者名稱的重複驗證
     2.聊天室
 3.股票走勢圖
 4.搜尋框建議（百度，京東）

2.AJAX

1.Asynchronous Javascript And Xml
  非同步的      js         和 xml
2.本質:
   使用js提供的非同步物件（XMLHttpRequest）,非同步的向伺服器傳送請求，
   並接受響應資料（資料格式是Xml）
   AJAX請求中，伺服器響應回來的資料部分資料而不是完整的頁面，
   並且可以以無重新整理的效果來更改頁面的區域性內容。
3.建立XMLHttpRequest物件-非同步物件（xhr）
  標準建立：
      var xhr=new XMLHttpRequest();
  IE8以下：
      var xhr=new ActiveXObject("Microsoft.XMLHttp");
  允許透過window.XMLHttpRequest 來判斷瀏覽器是否支援標準建立，
  如果瀏覽器不支援標準建立，那麼window.XMLHttpRequest的值就是null
      if(window.XMLHttpRequest){
     var xhr=new XMLHttpRequest();
  }else{
     var xhr=new ActiveXObject("Microsoft.XMLHttp");
  }
4.XHR常用方法和屬性（重點）
  1.open()
    作用：建立請求
語法：xhr.open(method,url,isAsyn);
   1.method
     string型別
     請求方式：get/post
   2.url
     string型別
     請求地址
   3.isAsyn
     boolean型別
     指定採用同步（false）還是非同步(true)的方式傳送請求
  2.readyState 屬性
    作用：表示xhr物件的請求狀態
值：0-4表示5個狀態
   0：請求尚未初始化
   1：已經開啟到伺服器的連結，正在傳送請求中
   2：請求完成
   3.正在接收伺服器端的響應
   4.接收響應資料成功
 注意：當readyState的值為4的時候，才表示所有的響應都已經接收完畢。
  3.status 屬性
    作用：表示的是伺服器的響應狀態碼
值：
  記住一個值 ：200
  當status的值是200的時候，表示伺服器已經正確的處理請求以及給出響應。
  4.onreadystatechange事件
    作用：當xhr的readyState屬性值發生改變的時候，要自動激發的操作
(xhr物件的狀態在做一些改變時，這個事件會一直監視著它)
語法：
   onreadystatechange=function(){
//判斷xhr的readyState為4並且xhr的status值為200，就可以獲取/響應資料了
  if(xhr.readyState==4&&xhr.status==200){
      //接收響應回來的結果
      var resText=xhr.responseText;  
      console.log(resText);
  }
   }
  5.send()
    作用：傳送請求
語法：xhr.send(body)
 body:請求主體
 如果沒有請求主體，body位置處為null(get)
 如果有請求主體，則放請求主體資料到body位置(post)
 5.傳送非同步請求的步驟
   1.建立xhr物件
   2.建立請求
   3.設定xhr的onreadystatechange(回撥函式)
      判斷狀態，並接收響應回來的資料
   4.傳送請求

5.使用ajax傳送post請求

注意兩點：

 1.post的請求將資料放在請求主體中
   xhr.send(body);
   ex:
   xhr.send("uname=value1&upwd=value2");
 2.在傳送請求之前，需要手動修改請求訊息頭
   xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

6.js物件資料格式

1.js物件的資料格式

var lindaiyu=[];
    lindaiyu[0]="林黛玉";
lindaiyu[1]="1990";
lindaiyu[2]="160cm";
lindaiyu[3]="50kg";
改版：
var lindaiyu=[];
    lindaiyu["name"]="林黛玉";
lindaiyu["birth"]="1990";
lindaiyu["height"]="160cm";
lindaiyu["weight"]="50kg";
ex:取值
  lindaiyu["name"]
陣列描述的是林黛玉的個人資訊，如果你把林黛玉看成是一個物件，

那麼她的個人資訊就是她這個物件的屬性。

js物件的語法：
    var 物件名={
   屬性：值,
   屬性：值,
   屬性：值,
   屬性：值
};
ex:林黛玉這個物件所對應的屬性如下
var lindaiyu={
   name:"林黛玉",
   birth:"1990",
   height:"160cm",
   weight:"50kg",
}
  如果物件取值的時候，直接物件.屬性 名稱就可以
   ex:lindaiyu.name --->林黛玉

7.JSON

1.什麼是JSON
  JavaScript  Object Notation
     js         物件 表現方式
  js物件表示法，即以js物件的格式表現出來的字串。
2.JSON語法
  1.JSON物件
    1.用一對{}來表示一個物件
2.物件的屬性名稱，必須用""引起來（單引號不可以），值如果是字串的話，必須也用""引起來。
ex:
var computer='{
    "name":"電腦",
    "price":5600
    }'
  2.JSON陣列
    1.普通陣列
   '["小喬","大喬","貂蟬"]'
2.物件陣列
  '[
      {
        "name":"小喬",
    "height":"160cm",
    "age":18
      },
       {
        "name":"大喬",
    "height":"163cm",
    "age":20
      },
      {
        "name":"貂蟬",
    "height":"165cm",
    "age":21
      }
  ]'
3.JSON檔案建立
  以.json為字尾的檔案，裡面包含的是符合json格式的資料
4.將JSON字串，轉換成js物件/陣列
  var mperson='{"name":"TOM","age":18}';
  //json物件
   var arr='["小喬","大喬","貂蟬"]';
   //json陣列
   var arr1='[
       {"name":"Lucy","age":19},
   {"name":"Lily","age":19}
   ]';  //json陣列
如何把上面的資料轉換成js物件/陣列格式
   1.使用eval()將資料轉換成js物件陣列（不推薦）
   2.使用JSON.parse()來將JSON字串解析為js物件
     var obj=JSON.parse(mperson); //js物件
 var obj=JSON.parse(arr);//js陣列
 var obj=JSON.parse(arr1);//js陣列

2.JS物件資料格式
var 物件名={

 屬性：值,
 屬性：值,
 屬性：值

}
取值：物件名稱.屬性
3.JSON資料格式
var person='{

 "name":"TOM",
 "age":12

}'

4.將JSON格式的資料轉換js物件/陣列
1.eval()
2.JSON.parse

4.1在php中，可以直接將陣列轉換成json格式的字串
語法：

 透過json_encode()將陣列轉換為JSON字串，並返回轉換後的結果
 ex:
   在php中
   $array=["釘釘","噹噹","冰冰"];
   $str=json_encode($array);

8.XML

AJAX:Asynchronous Javascript And Xml
1.什麼是XML

 eXtensible Markup Language
  可擴充套件的  標記    語言
 XML的標記沒有被預定義過，需要自定義
 XML的宗旨是做資料傳遞的，而非顯示資料

2.XML的語法結構

 XML可以獨立儲存為***.xml的檔案，也可以以字串的形式出現
   1.XML的最頂端是XML的宣告
     <?xml version="1.0" encoding="utf-8"?>
   2.XML標記的語法
     1.XML標記必須成對出現
   <person> 錯誤
 2.XML嚴格區分大小寫，開始和結束必須一致
   <person></person> 正確
   <Person></person> 錯誤
 3.XML的標記允許被巢狀，注意巢狀順序
   <person>
      <name>
         <FirstName></FirstName>
     <LastName></LastName>
      </name>
   </person>
  4.每個標記都允許自定義屬性，格式與html一致，但屬性值，必須用""括起來
    <person no="1001"></person>
  5.每個XML文件，必須有一個根元素

3.解析XML文件物件的內容

 1.核心方法
   elem.getElementsByTagName("標籤名稱");
   返回值：返回一個包含指定元素們的“類陣列” （用for迴圈遍歷）
   ex:var xmlDoc=xhr.responseXML;
     xmlDoc.getElementsByTagName("Student");

4.在PHP中返回XML格式的字串

 1.必須增加響應訊息頭
   header("Content-Type:application/xml");
 2.按照XML的語法結構，拼xml字串，再響應給前端

 $xml="<?xml version='1.0' encoding='utf-8'?>";
  $xml.="<StudentList>";
  ...
  $xml.="</StudentList>";
  echo $xml;