簡介javascript
AJAX 是一種在無需從新加載整個網頁的狀況下，可以更新部分網頁的技術 應用場景： 無刷新分頁 短信無刷新獲取 無刷新搜索 ...
不用刷新整個頁面即可以與服務器通信的方法php
1. Flash 2. Java applet 3. 框架：若是使用一組框架構造一個網頁，能夠只更新其中的一個框架，而沒必要驚動整個頁面 4. 隱藏的frame 5. XMLHttpRequest：該對象是JavaScript的一個擴展，可以使網頁與服務器進行通訊。是建立AJAX應用的最佳選擇
全局刷新和局部刷新前端
全局刷新：瀏覽器在獲得服務器端返回的數據後，只能展現獲得的數據，不能同時展現瀏覽器以前的內容 局部刷新：瀏覽器在獲得服務端返回的數據後，同時展現原有的數據和獲得的新數據 全局刷新的工做原理： 1. 必須由瀏覽器負責將請求協議包推送到服務端 2. 致使服務端將響應協議包直接推送到瀏覽器的內存 3. 致使瀏覽器內存中原有的數據被覆蓋 4. 致使此時瀏覽器在展現數據時，只能展現獲得的響應數據，沒法展現原有的數據 局部刷新的工做原理： 1. 必須禁止由瀏覽器向服務端發送請求（此時不能用超連接，from，window.location） 2. 由瀏覽器內存中一個腳本對象代替瀏覽器將請求協議包發送到服務端 3. 致使服務端返回的響應包直接推送到這個腳本對象上 4. 致使腳本對象內容被覆蓋，但此時瀏覽器內存中絕大多數內容沒有受到影響 5. 開發人員從腳本對象上取出響應數據並更新到瀏覽器中的指定標籤上 6. 此時瀏覽器展現數據時，既能夠展現響應結果，又能夠展現原有的內容
AJAX的優缺點java
優勢： 1）頁面無刷新更新數據 2）異步與服務器通訊 3）前端和後端負載平衡 4）基於標準被普遍支持，不須要下載插件或者小程序 5）界面與應用分離 缺點： 1. 由JavaScript和AJAX引擎致使的瀏覽器的兼容（可以使用JQuery封裝的AJAX） 2. 頁面局部刷新，致使後退等功能失效 3. 對流媒體的支持沒有Flash，Java applet好 4. 一些手持設備的支持性差 5. 一些安全問題，AJAX暴露了與服務器交互的細節 6. 破壞了程序的異常機制,不容易調試
AJAX的工做原理node
發起請求 --> AJAX處理 --> 接收結果
AJAX工具包python
AJAX並非一項新技術，它其實是幾種技術以一種全新的方式聚合在一塊兒： 1. 服務器端語言：服務器須要具有向瀏覽器發送特定信息的能力（AJAX與服務器端語言無關）（語言能夠是node，php，python等） 2. XML是一種描述數據的格式（AJAX程序須要某種格式化的格式來在服務器和客戶端之間傳遞信息。XML是其中的一種，一樣還能夠選擇JSON，文本等） 3. XHTML和CSS：標準化呈現 4. DOM：實現動態顯示和交互 5. 使用XMLHTTP組件中的XMLHttpRequest對象對服務器進行異步數據讀取 6. 使用JavaScript綁定和處理全部數據
AJAX的開發步驟nginx
1. 在瀏覽器內存中建立一個腳本對象（異步請求對象）
2. 爲異步請求對象添加工做狀態監聽器，來幫助開發人員確認什麼時候從異步請求對象身上獲得服務器端返回響應數據
3. 初始化異步請求對象
1) 通知異步請求對象採用何種方式發送請求協議包（get/post）
2) 通知異步請求對象本次要訪問的資源文件地址
3) 通知異步請求對象在其工做期間，瀏覽器是否會等他
4. 命令通知異步請求對象代替瀏覽器發送請求
1. 建立一個異步對象
var xhr=new XMLHttpRequest();
2. 設置請求方式和請求地址
xhr.open('get',url)
3. 發送請求
xhr.send()
4. 監聽狀態的變化
xhr.onreadystatechange=function(){
if(xhr.readyState===4 && xhr.status==200){
...
}
}
5. 處理返回結果（在監聽狀態變化中處理）
AJAX對象的建立web
原生JS建立AJAX對象：
對於高版本瀏覽器：（除IE5，IE6）
var xx=new XMLHttpRequest();
對於低版本瀏覽器（IE5,IE6）：
var xx=new ActiveXObject('Microsoft.XMLHTTP'); //ActiveXObject()只有IE支持
兼容寫法：
function getHttpObject(){
var xhr=false;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}
else if(window.ActiveXObject){
xhr=new ActiveXObject('Microsoft.XMLHTTP');
}
return xhr;
}
關於XMLHttpRequest對象（方法，屬性，事件）ajax
一些相關方法：
一些相關屬性：
一些相關事件：
（詳細的方法，屬性，事件可查看網址：https://blog.csdn.net/huang100qi/article/details/104125906）
AJAX發送請求spring
XMLHttpRequest實例與服務器進行通訊包含3個關鍵部分：
1. onreadystatechange事件（由服務器觸發的，每次readyState屬性改變時都會觸發此事件）
2. open方法：創建與服務器的鏈接
3. send方法：向服務器發送請求
若發送請求的方式爲post，則還須要設置請求頭：setRequestHeader(header,value);（不然默認的方式爲options，會沒法進行正常的網絡請求）
要在open方法和send方法之間調用
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded'); //post請求時發送請求頭
而且send()中要傳遞參數
AJAX接收響應
如下屬性可被服務器更改： 1. readyState：表示ajax請求當前的狀態 2. status：服務器發送的狀態碼都保存在這個屬性中 3. responseText：包含了從服務器發送的非XML數據（當readyState屬性爲4時，此屬性纔可用，代表ajax請求結束） 4. responseXML：若服務器返回的是XML數據，那麼數據將存儲在此屬性中（只有服務器發送了帶有正確首部信息的數據時，此屬性纔可用，MINE類型必須爲text/xml）
AJAX清除緩存（針對IE）
可在請求地址後面加一個時間戳（或一串隨機數） 如：在發送請求的函數中加上：this.href（對應地址屬性）=this.href+'?date='+new Date()
JS封裝ajax
調用時，傳入一個相關的參數對象就能夠了
關於XML
可擴展的標記語言
被用來傳輸和存儲數據
而HTML是被用來顯示數據
XML經常使用於簡化數據的存儲和共享，簡化平臺變動，可用於建立新的互聯網語言
編寫xml文件的基本格式：
<?xml version="1.0" encoding="UTF-8"?> //XML 聲明。它定義 XML 的版本（1.0）和所使用的編碼（UTF-8 : 萬國碼, 可顯示各類語言）
<note> //描述文檔的根元素（或者其餘（可自定義））
//一些子元素（均可自定義）
<to>...</to>
<from>...</from>
<heading>...</heading>
<body>...</body>
</note>
xml中的一些注意事項：
1. 必定要有xml聲明
2. 全部的 XML 元素都必須有一個關閉標籤
3. XML 標籤對大小寫敏感
4. XML 標籤必須正確嵌套
5. XML 屬性值必須加引號
6. 在 XML 中，空格會被保留（不會有空白摺疊）
7. XML 以 LF 存儲換行
8. XML 元素必須遵循如下命名規則：
1) 名稱能夠包含字母、數字以及其餘的字符
2) 名稱不能以數字或者標點符號開始
3) 名稱不能以字母 xml（或者 XML、Xml 等等）開始
4) 名稱不能包含空格
5) 可以使用任何名稱，沒有保留的字詞。
若服務器返回的是xml數據，則ajax請求中可用responseXML()來接收數據
若PHP中須要返回xml數據，必須在PHP文件的頂部設置：header('content-type:text/xml;charset=utf-8')
接收xml數據後，提取元素裏面的數據：
xx.querySelector(對應的xml元素).innerHTML;
關於JSON
JSON是一種簡單的數據格式，比xml更輕巧，是JavaScript原生格式。意味着處理JSON數據不須要任何特殊的API或工具包
JSON格式：
{
"名稱":"值",
...
}
或
[
{
'名稱':'值',
...
},
...
]
在ajax請求中，JSON會被存儲在responseText屬性中
爲了讀取存儲在responseText屬性中的JSON數據，能夠用到JavaScript的eval語句或其餘方法
將字符串轉換成json的三種方式：
1. eval()
如：
function strToJson(str){
var json = eval('(' + str + ')');
return json;
}
2. new Function()
如：
function strToJson(str){
var json = (new Function("return " + str))();
return json;
}
3. JSON.parse()
如：
JSON.parse(JsonStr,[callback]);
參數1：必選，須要轉換的對象
參數2：可選，對須要轉換的對象過濾，但是數組和function。function提供key，value兩個參數
將JSON對象轉換爲字符串：JSON.stringify(ojbect,filter/(array,function),indent)
參數1：必選，須要轉換的對象
參數2：可選，對須要轉換的對象過濾，但是數組和function。function提供key，value兩個參數
參數3：可選，縮進
JQuery中的AJAX
JQuery對AJAX操做進行了封裝（共三層）
在JQuery中最底層的方法是：$.ajax({})
第二層是load(),$.get()和$.post()
第三層是$.getScript()和$.getJSON()
$.ajax()：經過 HTTP 請求加載遠程數據
可有參數（一個JSON對象），可無參數
經常使用的幾個參數：type，url，data，async，dataType，success，error
相關參數：
load()：是JQuery中最簡單和最經常使用的AJAX方法，能載入遠程的HTML代碼並插入到DOM中 load(url,[,data][,callback]) url：請求的URL地址 data：發送到服務器的key/value數據 callback：請求完成時的回調函數，不管請求失敗或成功 使用：DOM（要插入數據的DOM元素）.load(...) $.get()：使用get方式來進行異步請求 $.get(url,[,data][,callback][,type]) url：請求的URL地址 data：發送到服務器的key/value數據會做爲QueryString附加到請求URL中 callback：載入成功時的回調函數（自動將請求結果和狀態傳遞給此方法）（有三個參數：data（返回的數據內容），textstatus（請求狀態），xhr（包含 XMLHttpRequest 對象）） type：服務器返回的內容格式 $.post()：經過 HTTP POST 請求向服務器提交數據 $.post(URL[,data][,callback]) URL：規定您但願請求的 URL data：規定連同請求發送的數據（有三個參數：data（返回的數據內容），textstatus（請求狀態），xhr（包含 XMLHttpRequest 對象） callback：請求成功後所執行的函數名 $.getScript()：使用AJAX的HTTP GET請求，獲取和運行 JavaScript $(selector).getScript(url,success(response,status)) url：必需。規定將請求發送到哪一個 URL。 success(response,status)：可選。規定當請求成功時運行的函數。 額外的參數： response：包含來自請求的結果數據 status：包含請求的狀態 （"success"、"notmodified"、"error"、"timeout"、"parsererror"） $.getJSON()：使用AJAX的HTTP GET請求獲取JSON數據（須要以JSON返回數據） $(selector).getJSON(url,data,success(data,status,xhr)) url：必需。規定將請求發送到哪一個 URL。 data：可選。規定發送到服務器的數據。 success(data,status,xhr)：可選。規定當請求成功時運行的函數。 額外的參數： data：包含從服務器返回的數據 status：包含請求的狀態（"success"、"notmodified"、"error"、"timeout"、"parsererror"） xhr：包含XMLHttpRequest對象
服務器的準備
可安裝Web服務相關軟件：Apache，IIS，Tomcat，Nginx，NodeJs等 綜合性的軟件：WAMPServer W：windows操做系統 A：Apache 世界排名第一的服務器軟件（簡單，速度快，性能穩定） M：MySQL 開源免費的數據庫軟件（體積小，速度快，使用成本低） P：PHP 超文本預處理器，直接將代碼嵌入HTML文檔中執行（簡單易學，容易上手）
get請求和post請求
相同點：
都是將數據提交到遠程服務器
不一樣點：
1. 提交數據存儲的位置不一樣
get請求將數據放到URL後面
post請求將數據放到請求頭中
2. 提交的數據大小限制不一樣
get請求對數據有大小限制（通常不超過2kb，不過每一個瀏覽器有每一個的限制長度）（get的最大長度限制是由於瀏覽器和web服務器限制了URL的長度，而http協議並未規定限制其長度）
每一個瀏覽器對get請求限制的字符長度：
1) Microsoft Internet Explorer (Browser)：
IE瀏覽器對URL的最大限制爲2083個字符，若是超過這個數字，提交按鈕沒有任何反應。
2) Firefox (Browser)
對於Firefox瀏覽器URL的長度限制爲65,536個字符。
3) Safari (Browser)
URL最大長度限制爲 80,000個字符。
4) Opera (Browser)
URL最大長度限制爲190,000個字符。
5) Google (chrome)
URL最大長度限制爲8182個字符。
6) Apache (Server)
能接受最大url長度爲8,192個字符。
7) Microsoft Internet Information Server(IIS)
能接受最大url的長度爲16,384個字符。
post請求對數據沒有大小限制
3. 應用場景不一樣
get請求用於提交非敏感數據和小數據
post請求用於提交敏感數據和大數據
4. 速度不一樣
post請求比get請求慢
5. 發送的數據類型
post請求比get請求能發送更多的數據類型（GET只接受ASCII字符的參數的數據類型，而POST沒有限制）
中斷ajax的方法
若一個ajax請求長時間得不到響應，則須要中斷這次ajax請求
方法：可加上一個定時器，並在規定的時間利用abort方法中斷請求
if(規定的時間)
{
timer（定時器名）=setInterval(function(){
xhr（異步對象）.abort(); //中斷ajax請求
clearInterval(timer);
}, 規定的時間)
}
解決url尾部不能拼接中文的問題
可利用方法：encodeURIComponent(uri) 參數：uri：一個字符串，含有 URI 組件或其餘要編碼的文本 該方法可把字符串做爲 URI 組件進行編碼，可對中文進行相應的編碼，隨後拼接到URL中 該方法不會對 ASCII 字母和數字進行編碼，也不會對這些 ASCII 標點符號進行編碼： - _ . ! ~ * ' ( )
關於AJAX的跨域問題
只有協議+主機名+端口號 (如存在)相同，則容許相互訪問。也就是說JavaScript只能訪問和操做本身域下的資源，不能訪問和操做其餘域下的資源 跨域問題是針對JS和ajax的 不能跨域時，控制檯會有這樣的報錯：
會發生跨域和不會發生跨域的狀況：
4種解決方法： 1. 響應頭添加Header容許訪問 2. jsonp 只支持get請求不支持post請求 3. httpClient內部轉發 4. 使用接口網關——nginx、springcloud zuul (互聯網公司常規解決方案) 詳細方法可查看網址： https://blog.csdn.net/itcats_cn/article/details/82318092
AJAX---解決中文亂碼的問題
出現亂碼的緣由：
1) 請求數據中包含中文，服務器端程序接受錯誤致使亂碼
2) 響應數據中包含中文，編碼設置錯誤致使瀏覽器中看到的結果是亂碼
解決第一種緣由：
保證頁面端定義的charset和http響應頭的Content-Type中定義的charset一致便可。
特例：IE6中XMLHttpRequest對象在頁面端和http響應頭的Content-Type中定義的charset都爲GB2312時，中文響應數據出現亂碼。解決辦法：
1) http響應頭的Content-Type中charset設置爲utf-8
2) 僅僅使用」MSXML2.XMLHTTP」,」Microsoft.XMLHTTP」這兩個中的一個來建立XMLHttpRequest對象
解決第二種緣由：
分別從頁面端和服務器端着手：
1) 頁面端：利用javascript中的encodeURI進行兩次編碼處理
2) 服務器端：獲取到的請求數據經過URLDecode類的decode方法按照utf-8的方式進行decode解碼處理。
服務器傳送給瀏覽器數據發生亂碼：response設置編碼的時候和瀏覽器頁面的編碼一致即可以解決
瀏覽器傳送給服務器數據發生亂碼：若是是post方式，request設置編碼即可以解決。
若是是get方式，Tomcat下，使用ISO8859-1編碼獲得本來的二進制數組，再使用UTF-8編碼即可以解決
以上處理都在XMLHttpRequest對象中編寫解決