前端知識點總結——AJAX

前端知識點總結——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:查詢字符串，要傳遞給服務器的數據
  http://127.0.0.1/login.php?uname=dangdang&upwd=12345
  frag:錨點
  http://127.0.0.1/a.html#NO1

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.地址欄輸入網址訪問頁面（www.baidu.com）
 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;