http與ajax入門筆記

時間  2019-11-15
標籤 http ajax 入門 筆記 欄目 HTTP/TCP 简体版
原文   原文鏈接

1 HTPP

1.1 前端和後端如何通信

前端:客戶端 後端:服務端javascript

職業規劃建議php

培養本身的人脈圈，以及創建本身的影響力html

  • 狀態本身的總和能力
  • 常常參加一些活動
  • 開放分享(作講師分享本身的智慧、寫組件的我的博客作技術分享)

當咱們在瀏覽器地址中輸入URL地址，到最後看到頁面，中間經歷了哪些事情？
假設咱們訪問的是 www.baidu.com這個地址，按下enter建後，咱們能夠看到百度首頁前端

  • 百度頁面並無在咱們本身的客服端本地，咱們是輸入地址後，才請求過來的
  • 輸入不一樣的域名能夠看到不一樣的頁面
  • 有的網頁是https，有的是http(也有的是ftp)
  • 須要客戶端聯網才能完成這些事情

image.png

1.1.1 DNS服務器 域名解析服務

1.www.baidu.com  220.163.18.24
域名和服務器關聯在一塊兒，是經過DNS解析完成，所謂的DNS解析就是在dns服務上生成一條解析記錄，標註了域名和對應的外網ip地址java

1.1.2 都經歷了哪些事情？

  • 首先根據客戶端輸入的域名，到DNS服務器上進行反解析(經過域名找到對應服務器的外網ip)
  • 經過找到外網的ip，找到對應的服務器
  • 經過地址欄中輸入的端口號(沒輸入是由於不一樣協議有本身默認的端口號)找到服務器上發佈的對應項目
  • 服務器獲取請求資源的地址，例如/stu/index.html，把資源文件中的原代碼找到
    • response 響應階段
  • 服務器端會把找的原代碼返回給客戶端(經過http等傳輸協議返回)
  • 客戶端接收到原代碼後，會交給瀏覽器的內核(渲染引擎)進行渲染，最後由瀏覽器繪製出對應的頁面
    • 服務器自主渲染

1.1.3 客戶端和服務端交互(通信)模型

image.png

1.2 第一部分 傳輸協議

1.2.1 URL、URI、URN

  • URI : 統一資源標識符
  • URL: 統一資源路徑地址
  • URN：統一資源名稱
  • URI=URL+URN

一個完整的url包含不少部分 www.yuque.com/as-giant/dz…?name=wang&age=2node

1.2.2 第一部分:傳輸協議

傳輸協議是用來完成客戶端和服務端的數據(內存)傳輸的，相似於快遞小哥、負責把客戶和商家的物品來回牀底web

  • 客戶端不只能夠向服務器發送請求，並且還能夠吧一些內容傳遞給服務器
  • 服務器端也能夠把內容返回給客戶端
    • 客戶端和服務端傳輸的內容總稱:http報文RequestResponse) , request+response兩個階段統稱爲一個HTTP事務(事務:一個完整的事情)
HTTP事務:
  • 當客戶端想服務器端發送請求，此時客戶端和服務器端會簡歷一個傳輸通道(連接通道)，傳輸協議就是基於這個通道吧信息進行傳輸的
  • 當服務器端接受到請求信息，把內容返回給客戶端後，傳輸通道會自動銷燬關閉

傳輸協議分類
  • http:超文本傳輸協議(客戶端和服務器端傳輸的內容除了文本之外)，還能夠傳輸圖片，音視頻等文件流[二進制編碼/base64],以及傳輸xml格式的數據等，是目前市場上應用最普遍的傳輸協議
  • https:http ssl,它比http更加安全，要往數據內容的傳輸通道是通過ssl加密的(它須要在服務器端驚醒特殊的處理)，因此涉及資金類的網站通常都是https協議的
  • ftp:資源文件傳輸協議，通常用客戶端把資源文件(不是代碼)上傳到服務端，或者從服務器端下載一些資源文件（ftp傳輸的內容會http這類傳輸協議傳輸的內容多)

http報文

一、起始行面試

  • 請求起始行
  • 響應起始行

二、首部(頭)ajax

  • 請求頭：內置請求頭、自定義請求頭
  • 響應式：內置響應頭、自定義響應頭
  • 通用頭：請求和響應都有的

三、主體編程

  • 請求主體
  • 響應主體

請求xxx都是客戶端設置的信息，服務器獲取這些信息
響應xxx都是服務器端設置的信息，客戶端用來接受這些信息

1.3 第二部分 域名

設置域名其實就給很差記憶的服務器外網ip設置了一個好記憶的名字
頂級域名(一級域名):qq.com
二級域名:www.qq.com、v.qq.com、sports.qq.com
三級域名:kbs.sports.qq.com

1.4 第三部分 端口號

在服務器發佈項目的時候，咱們能夠經過端口號區分當前服務器上不一樣的項目
一臺服務器的端口號取值範圍:0~65535之間，若是電腦上安裝了不少程序，有一些端口號是被佔用了

HTTP:默認端口號80
HTTP:默認端口號443
FTP:默認端口號21

對於上述三個端口號實際上是很重要的，若是被其它程序佔用的，咱們則不能使用了，因此服務器上通常是禁止安裝其它程序的

1.5 第四部分 請求資源文件的路徑名稱

/stu/index.html
在服務器中發佈項目的時候，咱們通常都會配置一些默認文檔:用戶即便不輸入請求文件的名稱，服務器也會找到默認文檔(通常默認文檔都是index/default...)
咱們一般爲了作seo優化，會把一些動態頁面的地址(xxx.php、xxx.aspx、xxx.asp、xxx.jsp...)進行僞URL重寫(須要服務器處理的)
item.jd.com/432527.html
不多是有一個商品，本身就單獨寫一個詳情頁面，確定是同一個詳情頁作的不一樣處理

1.5.1 第一種方案

由後臺語言好久詳情頁模板動態生成具體的詳情頁面

1.5.2 第二種方案

當前頁面就是一個頁面，例如:detail.html/detail.php...,咱們作詳情頁面的時候，開發是按照detail.html?id=432527 來開發的，可是這種頁面不方便作seo優化，此時咱們把真實的地址進行重寫，重寫爲了讓咱們看到的是4325427.html

1.6 第五部分 問號傳承

?name=zf&age=9
把一些經過xxx=xxx的方式，放在一個url的末尾，經過問號傳遞

【做用】
1.在ajax請求中，咱們能夠經過問號傳遞參數的方式，客戶端吧一些信息傳遞給服務器，服務器更具傳遞信息的不同，返回不一樣的數據

// $.ajax(url,{});
// $.get(url,function(){});
// 對於ajax請求的特殊寫法，原理仍是基於ajax方法實現 $.post $.script

$.ajax({
    url:'getPersonInfo?id=12'
    ...
})

// 當前案例，咱們傳遞給服務器的編號是多少，服務器端就會把對應編號人員信息給返回
複製代碼

2.消除ajax請求中get方式緩存

$.ajax({
	url:'xxx?_=0.123456'
	method:'get'
})
// 咱們會在請求url的末尾最佳一個隨機數_=隨機數，保證每一次請求的url都是不同的，以此來消除get請求一流的緩存問題
複製代碼

3.經過url傳遞傳輸的方式，能夠實現頁面之間信息的通信，例如:咱們有兩個頁面A/B,A是列表頁面、B是詳情頁，點擊A中的某一條信息，進入到惟一的詳情頁B，若是展現不一樣的信息，這種操做就能夠基於URL問號傳遞參數來實現了

例如:
sports.qq.com/kbsweb/game…
sports.qq.com/kbsweb/game…
在進入game.htm頁面的時候，咱們能夠獲取URL傳遞的參數值，更具傳遞參數值的不同從服務器端獲取不一樣的數據展現

在列表頁面進行頁面跳轉的時候，咱們須要記住的是跳轉的同事傳遞不一樣的參數值

1.7 第六部分 HASH值

#xxx
URL末尾傳遞的井號什麼，就是HASH值(哈希值)

[做用]
一、頁面中錨點定位
二、前端路由(SPA單頁面開發)

2 AJAX

2.1 什麼是ajax？

async javastctip and xml,異步的js和xml

2.2 xml:可擴展的標記語言

做用是經過存儲數據的(經過本身擴展的標記名稱清晰的展現出來數據結構)

ajax值因此稱爲異步的js和xml,主要緣由是:當初最開始用ajax實現客戶端和服務器端數據通訊的時候，傳輸的數據格式通常都是xml格式的數據，咱們把他們稱爲異步js和xml(如今通常都是基於json格式進行數據傳輸)

<?xml version='1.0' encoding='UTF-8'?>
<root>
    <student>
        <name>張三</name>
        <age>25</age>
        <score>
            <english>90</english>
            <math>90</math>
            <chinese>90</chinese>
        </score>
    </student>
</root>
複製代碼

2.3 異步的js

這裏的異步不是ajax只能基於異步進行請求(雖然建議都是使用異步變成)，這裏的異步特指的是局部刷新

2.3.1 局部刷新 vs 全局刷新

在非徹底先後端分離項目中，前端開發只須要完成頁面的製做，而且把一些基礎的人機交互效果使用js完成便可，頁面中須要動態呈現內容的部分，都是交給後臺開發工程師作數據綁定和基於服務器進行渲染的(服務器端渲染)

[優點]

  • 動態展現的數據在頁面的原代碼中能夠看見，有利於seo優化推廣(有利於搜索引擎的收錄和抓取)
  • 從服務器獲取的結構就已是最後要呈現的結果了，不須要客戶端作額外的事情，因此也沒加速快(前提是服務器端處理的速度夠快，可以處理過來)，因此相似於京東、淘寶這些網站，首屏數據通常都是由服務器渲染的

[弊端]

  • 實時更新的數據，每一次想要展現最新的數據，頁面都要從新的刷新一次，這樣確定不行
  • 都交給服務器端作數據渲染，服務器端的壓力太大，若是服務器處理不過來，頁面呈現的速度更慢(因此京東、淘寶這類網站,除了首屏是服務器端渲染的，其餘屏通常都是客戶端作數據渲染綁定)
  • 這種模式不利於開發(開發效率低)

image.png

目前市場上大部分項目都是先後端徹底分離的項目(也有非徹底先後端分離的)

2.3.2 先後端徹底分離

先後端徹底分離的項目，頁面中須要動態綁定的數據是交給客戶端徹底渲染的

  • 想服務器端發送ajax請求
  • 把從服務器端獲取的數據解析處理，拼接成爲咱們須要展現的html字符串
  • 把拼接好的字符串替換頁面中某一部分的內容(局部刷新),頁面總體不須要從新加載，局部渲染極客

[優點]

  • 咱們能夠根據需求，任意修改頁面中某一部分的內容(例如實時刷新),總體頁面不刷新，性能好，體驗好(全部表單驗證，須要實時刷新的等需求都要基於ajax實現)
  • 有利於開發，提升開發的效率
    • 先後端的徹底分離，後臺不須要考慮前端如何實現，前端也不須要考慮後臺用什麼技術，真正意義上實現了技術的劃分
    • 能夠同時進行開發:項目開發開始，首先制定先後端數據交互的結構文檔(文檔中包含了，調用哪一個接口或者那些數據等協議規範),後臺吧接口線寫好(目前不少公司也須要前端本身拿node來模擬這些接口)，客戶端按照接口調取極客，後端再去實現接口功能極客

[弊端]

  • 不利於seo優化:第一次從服務器端獲取的內容不包含須要動態綁定的數據，因此也沒的原代碼中沒有這些內容，不利於seo收錄，後期聽過js添加到頁面中的內容，並不會寫在頁面的源代碼中(是源代碼不是頁面結構)
  • 交由客戶端渲染，首先須要把頁面呈現，而後經過js的異步ajax請求獲取數據，而後數據綁定，瀏覽器在動態增長部分從新渲染，無形中浪費了一些時間，沒有服務器端渲染頁面呈現速度快

image.png

2.4 ajax請求

let xhr = new XMLHttpRequest();
// 不兼容ie6以及更低版本的瀏覽器(ie6 activeXobject)

// 打開請求地址(能夠理解爲一些基礎配置，可是並無發送請求呢)
xhr.open([method],[url],[async],[username],[user password]);

// 監聽ajax改變，獲取響應信息(獲取響應頭信息，獲取響應主體信息)
xhr.onreadystatechange=()=>{
	if(xhr.readyState===4 && xhr.readyState===200){
  	let result = xhr.responseText;// 獲取響應主體中的內容
  }
}

// 發送ajax請求(括號中傳遞的信息內容是請求主體的內容)

xhr.send(null)
複製代碼


分析第二部分的細節點

xhr.open([method],[url],[async],[username],[user password]);
複製代碼

2.4.1 ajax請求方式（method）

get系列的請求

  • get
  • delete
  • head
  • ...

post系列的請求(推送)

  • post
  • put:想服務器中增長指定的資源文件
  • ...

無論哪種請求方式,客戶端能夠吧信息傳遞給服務器，服務器也能夠吧信息返回給客戶端，只要get系列通常以獲取爲主(給的少)

  1. 咱們想獲取一些動態展現的信息，通常使用GET請求，由於只須要向服務器發送請求，告訴服務器端想要什麼，服務器端就會把須要的數據返回
  2. 在實現註冊功的時候，咱們須要把客戶端輸入信息發送給服務器進行存儲，服務器通常返回成功是成功等狀態，此時咱們通常都基於post請求完成
  3. ....

get系列請求和post系列請求，在項目是在中存在不少的區別

  1. get請求傳遞給服務器的內容通常貿易post請求傳遞給服務器的內容多
  2. 緣由:get請求傳遞給服務器內容通常都是基於url地址問號傳遞參數設置請求主體**來實現的。瀏覽器都已本身的關於url的最大長度限制(谷歌:8kb、火狐:7kb、ie:2kb)超過限制長度的部分，瀏覽器會自動截取掉，致使傳遞給服務器的數據缺失
  3. 理論上post請求經過主體傳遞是沒有大小限制，真實項目中爲了保證傳輸的速度，咱們會限制大小(例如:上傳的資料或者圖片咱們會作大小的限制)
  4. get請求容易出現緩存(這個緩存不可控:通常咱們都不須要)，而post不會出現緩存(除非本身作特殊處理)
  5. 緣由:get是經過url問號傳參傳遞給服務器信息，二post是設置請求主體
  6. 設置請求主體不會出現緩存，可是url傳遞參數就會了

setTimeout(()=>{
	$.ajax({
  	url:'getList?lx=news',
    success:result=>{
    	// 第一次請求數據回來，間隔一分鐘後，瀏覽器又發送一次請求，
      // 可是新發送，無論是地址仍是傳遞的參數都和第一次不同，
      // 瀏覽器頗有可能會把上一次數據獲取，而不是獲取新的數據
    }
  });
},60000)

// 解決方案:每一次從新請求的時候，在URL的末尾追加一個隨機數，保證每一次請求的地址不徹底一直
// 就能夠避免是從緩存中讀取的數據

setTimeout(()=>{
	url:'getList?lx=news_='+Math.random()
	success:result=>{
  
  }
})
複製代碼

3.GET請求沒有post請求安全(post也並非十分安全，只是相對安全)
緣由:仍是由於get是url傳遞給服務器有一種比較簡單的黑客技術:url劫持，也就是能夠客戶端傳遞給服務器劫持掉，致使信息泄露

2.4.2 url

請求數據的地址(api地址)，真實項目中，後臺開發工程師會編寫一個api文檔，在api文檔中彙總了獲取那些數據須要使用哪些地址，咱們按照文檔操做便可

2.4.3 async

異步(sync同步)，設置當前ajax請求是異步仍是同步的，不寫默認是異步(true)，若是設置false，則表明當前請求是同步的

用戶名和密碼這兩個參數通常不用，若是你請求的url地址所在服務器設定了訪問權限，則須要咱們提供通行的用戶名和密碼才能夠(通常服務器均可以容許匿名訪問的)

2.5 AJAX狀態碼

xhr.readyState

  1. unsent 未發送，只要建立一個ajax對象，默認值是零
  2. opened 咱們已經執行了xhr,open這個操做
  3. headers_resceived 當前ajax的請求已經發送，而且已經接收到服務器端返回的響應頭信息了
  4. loading 響應主體內容正在返回的路上
  5. done 響應主體內容已經返回到客戶端

2.6 HTTP網絡狀態碼

記錄了當前服務器返回信息的狀態

xhr.status

  • 200成功，一個完整的http事務完成了(以2開頭的狀態碼通常性都是成功)
  • 3開頭通常也是成功，只不過是服務器作了特殊的處理
    • 301 moved permanently 永久轉移(永久重定向)
    • 302 move temporarily 臨時轉移(臨時重定向，新的http版本中任務307是臨時重定向)
      • 通常用於服務器的負載均衡:當前服務器處理不了，我把當前請求臨時交給其餘的服務器處理(通常圖片請求常常出現302,不少公司都有單獨的圖片服務器)
    • 304 not modified 從瀏覽器緩存中獲取數據
      • 把一些不常常更新的文件或者內容緩存到瀏覽器中，下一次從緩存中獲取，減輕服務器壓力，也提升頁面加載的速度
  • 4開頭的，通常性都是失敗的，並且客戶端的問題偏大
    • 400:請求參數錯誤
    • 401:無權限訪問
    • 404:訪問地址不存在
  • 5開頭的，通常都是失敗，並且服務器的問題偏大
    • 500:internal Server Error 未知的服務器錯誤
    • 503:Service Unavailable 服務器超負債
    • ...

面試題 ajax中總共支持幾個方法
let xhr = new xmlHttpReques();
console.dir(xhr);

[屬性]
readyState:存儲的是當前ajax的狀態
response/responseText/responseXML : 都是用來接收服務器返回的響應主體的內容，只是更具服務器返回內容的格式不同，咱們使用不一樣的屬性接收便可
responseText是最多見的，接收到結果是字符串格式的(通常服務器返回的數據都是json格式字符串)
responXML:偶爾會用到，若是服務器返回的是xml文檔數據，咱們須要使用這個屬性接收
status:記錄了服務器返回的http狀態碼
statusText:對返回狀態碼的描述
timeout:設置當前ajax請求的超時時間，假設咱們設置時間爲3000(MS)，從AJAX請求發送開始，3秒後響應主體內容尚未返回，瀏覽器會把當前ajax請求強行斷開

[方法]
abor():強行終端ajax請求
getAllResponseHeaders():獲取所有的響應頭信息(獲取的結果是一丟字符串文本)
getResponseHeader(key):獲取指定屬性名的響應頭部信息，例如:xhr.getResponseHeader('data')獲取響應頭中存儲的服務的時間
open():打開一個url地址
overridMimeType():重寫數據的MIME類型
send():發送ajax請求(括號中書寫的內容是客戶端請求主體吧信息傳遞給服務器)
setRequestHeader(key,value):設置請求頭信息(能夠是設置自定義請求信息)

[事件]
onabort:當ajax被終端請求觸發這個時間
onreadstatechange:ajax狀態發燒改變，會觸發這個事件
ontimeout:當AJAX請求超時，會觸發這個事件
...

let xhr = new XMLHttpRequest(();
xhr.open('get','temp.json?_='+Math.random(),true);
xhr.setRequesHeader('cookie','xxx'); // => 設置請求內容不能出現中文漢字
xhr.timeout = 10;
xhr.ontimeout=()=>{
	console.log('當前請求已經超時');
  xhr.abort();
}

xhr.onreadystatechange = () =>{
		let {readyState:state,status} = xhr;
    
    // 說明請求數據成功了
    if(!/^(2|3)\d{2}$/.test(status)) return
    
    // 在狀態爲2的時候就獲取響應頭信息
    if(state === 2){
    	let headerAll = xhr.getAllResponseHeaders(),
      		serverDate = xhr.getResponseHeader('date');// 獲取的服務時間是格林尼治時間(相比北京時間差很少差8小時)
          console.log(headerAll,new Date(serverDate));
      		return;
    }
  
  // 在狀態爲4的時候就獲取響應頭信息已經回來了
    if(state === 4){
    	let valueText = xhr.responseText,// 獲取到的結果通常都是json字符串(能夠時間json.parse把其轉換成json對象) 
          valueXML = xhr.responseXML; // 獲取到的結果是xml格式的數據，(能夠經過xml的一些常規操做獲取存儲的指定信息)
      // 若是服務器返回的是xml文檔，responseText獲取的結果是字符串，而responseXML獲取的是標準xml文檔
      console.log(valueText,valueXML);
    }

}

xhr.send('name=wjw&age=23&sex=man')
複製代碼

2.7 AJAX中的同步和異步編程

let xhr = new XMLHttpRequest();
xhr.open('get','temp.json',false);
xhr.onredystatechange=()=>{
	console.log(xhr.readySate);
}
xhr.send();
// 只輸出一次結果4
複製代碼

image.png 

let xhr = new XMLHttpRequest();
xhr.open('get','temp.json',false);
xhr.send();// => 同步開始發送ajax請求，開啓ajax任務，在任務沒有完成以前，什麼事情都作不了
// 下面綁定時間也作不了 => loading => 當readyState ===4 的是ajax任務完成，開始執行下面的操做
xhr.onreadystatechange=()=>{
	console.log(xhr.readySate);
}
// 綁定方法以前狀態已經爲4了，此時ajax的狀態不會再改吧其餘值，因此事件永遠不會被處罰
// 一次都沒有執行方法(使用ajax同步編程，不要把send放在事件監聽前
// 這樣咱們沒法在綁定方法中獲取響應主體的內容)

複製代碼

image.png 

let xhr = new XMLHttpRequest();

// 下面綁定時間也作不了 => loading => 當readyState ===4 的是ajax任務完成，開始執行下面的操做
xhr.onreadystatechange=()=>{
	console.log(xhr.readySate);
  if(xhr.readySate===1) {
  	xhr.setRequestHeader('aaa','bbb');
  }
}

xhr.open('get','temp.json',false);
// xhr.readyState === 1 AJAX特殊處理的一件事:執行OPEN狀態變爲1,會主動把以前監聽的方法執行一次
// 而後再去執行SEND

xhr.send();
// xhr.redayState === 4 AJAX任務借宿，主任務隊列完成

複製代碼

2.8 AJAX類庫的封裝

JQ中的AJAX

$.ajax({
	url:'xxx.txt',
  method:'get',
  dataType:'json',
	cache:false,
  data:null,
  async:true,
  success:function(result){
  
  },
  error:funciton(msg){
	
	},
  complate:function(msg){
	
	}
})
複製代碼

2.8.1 url

請求api地址

2.8.2 method

請求方法get/post..在老闆的jq中使用是type，使用type和method相同效果

2.8.3 dataType

dataType只是咱們預設獲取結果的類型不會影響服務器的返回(服務器端通常給咱們返回的都是json格式的字符串),若是咱們預設是json,那麼類庫中將吧服務器返回的字符串轉換爲json對象，若是咱們預設是text(默認值)，咱們把服務器獲取的結果直接拿過來操做便可，咱們預設的值還能夠xml等

2.8.4 cache

設置是否清楚緩存，只對get系列請求有做用，默認是true不清除緩存，手動設置false，jq類庫在請求url的末尾最佳一個隨機數來清楚緩存

2.8.5 data

咱們經過data能夠把一些信息傳遞給服務器，get系列請求會把data中的內容拼接在url的末尾經過問號傳參的方式給服務器，post系列請求會把內容請求放在主題傳遞給服務器;data的值能夠設置爲兩種格式，字符串、對象，若是是字符串，設置的值是傳遞給服務器的就是什麼，若是設置成對象，jq會把對象變爲xxx=xxx&xx=xx,這樣來數據傳遞

13.8.6 async

設置同步或者異步，默認是true表明異步，false表明同步

2.8.7 success

dangajax請求成功後redayState===4&&statue是以2或者3開頭的 請求成功後jq會把傳遞的回調函數執行，而且獲取的結果當作實參傳遞給回調函數(result就是咱們從服務器獲取的結果)

2.8.8 error

請求錯誤觸發回調函數

2.8.9 complate

無論請求仍是錯誤的仍是正確的都會觸發這個回調函數(他就是完成的意思)

....

2.9 封裝本身的AJAX庫

  • url
  • method/type
  • data
  • dataType
  • async
  • cache
  • success

~funcction(){

    class ajaxClass {
        // send ajax
        init() {
            let xhr = new XMLHttpRequest();
            xhr.onreadustatechange = () => {
                if (!/^[23]\d{2}$/.test(xhr.status)) return;
                if (xhr.redayState === 4) {
                    let result = xhr.responseText;
                    // DATA-TYPE
                    switch (this.dataType.toUpperCase()) {
                        case 'TEXT':
                            break;
                        case 'JSON':
                            result = JSON.parese(result);
                            break;
                        case 'XML':
                            result = xhr.responseXML;
                            break;
                    }
                    this.success(result);
                }
            }
            // DATA
            if (this.data !==null) {
                this.formatData();
                if (this.idGET) {
                    this.url +=this.querySymbol()+this.data;
                    this.data = null;
                }
            }


            // CACHE
            this.isGET ? this.cache();
            xhr.open(this.method, this.url, this.async);
            xhr.send();
        }

        cacheFn() {
            // THIS:EXAMPLE
            !this.cache ? this.url += `${this.querySymbol()}_=${Math.random()}` : null;
        }

        querySymbol() {
            // THIS:EXAMPLE
            return this.url.indexOf('?') > -1 ? '&' : '?';
        }

        formatData(){
             // THIS:EXAMPLE
             if(Object.prototype.toString.call(this.data)==='[Object Object]'){
                 let obj = this.data,
                     str = ``;
                     for (const key in obj) {
                         if (object.hasOwnProperty(key)) {
                          str +=`${key}=${obj[key]}`; 
                         }
                     }
                str = str.replace(/&$/g,'');
                this.data = str;
             }
        }

    }

    let ajax = function () {

    };

    // init parameters

    window.ajax = function ({ url = null, method = 'GET', type = 'GET', data = null, dataType = 'JSON', cache = true, async = ture, suceess = null } = {}) {
        let _this = new ajaxClass(); // 建立實例
        ['url', 'method','data','dataType','cache','async','success'].forEach((item)=>{
            if (item === 'method') {
                _this.method = type === null ? method : type;
                return;
            }
            if (item==='success') {
                 _this.suceess = typeof success === 'function' ? success : new Function();
            }
            _this[item] = eval(item);

        })
        _this.isGET = /^(GET|DELETE|HEAD)$/i.test(example.method);
        _this.init();
        return _this;
    };
}();

ajax({})
複製代碼

3 內容編碼和加密解密方法

3.1 正常的編碼解碼(非加密)

3.1.1 escape/uescape

主要就是把中文漢字進行編碼的(通常只有js語言支持,也常常應用於前端頁面通信時間的中文漢字編碼)

3.1.2 encodeURL/decodeURL

基本上全部的編碼語言都支持

3.1.3 encodeURlComponent/decodeURIComponent

和第二種方法很是的累死，區別在於

需求:咱們url問號傳遞參數的時候，咱們傳遞的參數值仍是一個url或者包含不少特殊字符，此時爲了避免影響住要的url，咱們須要把傳遞的參數值進行編碼，使用encodeURLComponent處理

let str = 'http://www.baidu.com/?',
    obj={
    	name:'wjw',
      age:9,
      url:'http://www.sogou.com/?x=1'
    }
// => 把obj中的每一項屬性名和屬性值拼接到url的末尾(問號傳參的方式)

for(let key in obj){
	str +=`${key}=${obj[key]}`;
  // => 不能使用encodeURL必須使用encodeURlComponent,緣由是encodeURL不能編碼
}
console.log(str.replace(/&$/g,''));

複製代碼

3.1.4 也能夠經過加密的方法進行編碼解碼

一、可逆轉加密(通常都是團隊本身玩的規則)
二、不可逆加密(通常都是基於MD5加密完成的，可能會把md5加密後的結果二次加密)

<script src='js/md5.min.js'></script>
<script>
	hex_md5('0000')
  // "c6f057b86584942e415435ffb1fa93d4"
</script>
複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程