**今天，我就帶你來了解一下ajax吧！**
首先我們得明白什么是ajax？那到底什么才是ajax呢？
AJAX = “Asynchronous Javascript And XML”（==異步 JavaScript 和 XML==）直譯出來就是異步的JavaScript和資料傳輸技術，國內常翻譯為**==“阿賈克斯”==**是指一種無需重新加載整個網頁的情況下，能夠更新部分網頁的技術，直白的說，ajax就是js通過一個網址去加載資料，用戶是看不見的，可以通過瀏覽器控制臺中的網路查看，
上面說到，xml，我們就結合json來給你介紹~~~
==xml（可擴展標記語言）、json（輕量級資料格式）都是字串的格式，都用于資料傳輸==
兩者之間有什么區別呢？
**xml：**
優點：
1、傳輸的資料種類特別豐富
2、傳輸的資料量非常大
缺點：
決議起來比較麻煩
【注】用于大型門戶網站，今日頭條、騰訊新聞、網易新聞，
**json：**
優點：
1、決議起來非常方便
2、適合輕量級的資料
缺點：
1、種類比較少
【注】基本上90%以上應用用的都是json格式字串傳輸，
同時說到異步，有的小伙伴就懵逼了，心想異步是啥，有什么作用呢？
了解異步之前，我們首先看看javas中的同步是什么吧！
==同步==：阻塞，當前程式必須等前面的程式執行完畢以后，才能運行，
舉個例子：就好比我們做飯，飯做好了，才去做菜，
在JavaScript中，異步與同步是相反的存在，所以說異步就是什么呢？
==異步==：非阻塞，當前程式的執行和前面程式是否執行完畢沒有關系，
舉個例子：做飯的同時，我可以洗菜，切菜，
**總結著來說**：同步必須按照順序一步一步執行，而異步就是不按順序不管前面執不執行或者執行完不完畢我都執行！
ajax有什么好處？有什么缺點呢？
**AJAX的優點：**
1）頁面無重繪更新資料：AJAX最大優點就是能在不重繪整個頁面的前提下與服務器通信維護資料；
2）異步與服務器通信：AJAX使用異步方式與服務器通信，不需要打斷用戶的操作，具有更加迅速的回應能力；
3）前端和后端負載平衡：AJAX可以把以前一些服務端負擔的作業轉嫁到客戶端，減輕服務器和帶寬的負擔，節約空間和寬帶租用成本；
4）基于標準被廣泛支持：AJAX基于標準化的并被廣泛支持的技術，不需要下載瀏覽器插件；
5）界面與應用分離：Ajax使WEB中的資料與呈現分離，有利于分工合作，提高效率，
**AJAX的缺點：**
1）AJAX干掉了Back和History功能：即對瀏覽器機制的破壞，在動態更新頁面的情況下，用戶無法回到前一個頁面狀態；
2）AJAX有安全問題：AJAX技術給用戶帶來很好的用戶體驗的同時也帶來了新的安全威脅，Ajax技術就如同對企業資料建立了一個直接通道；
3）對搜索引擎支持較弱：對搜索引擎優化不太友好；
4）破壞程式的例外處理機制：像Ajax.dll，Ajaxpro.dll這些Ajax框架是會破壞程式的例外機制；
5）AJAX不能很好支持移動設備：一些手持設備（如手機、PDA等）不能很好的支持Ajax，
**了解這些之后，我們接下來看看ajax是怎樣操作的，具體步驟有哪些呢**？
總結為如下四步：
1.宣告一個ajax物件
2.輸入請求資訊（三個引數）
第一個引數：請求的方式
get post
第二個引數：請求的url
第三個引數：是否異步
true（異步） false(同步)
3.發送
4.等待資料回應
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> window.onload = function(){ var oBtn = document.getElementById('btn1'); oBtn.onclick = function(){ //1、宣告一個ajax物件 var xhr = new XMLHttpRequest(); //2、輸入請求的資訊 /* 第一個引數：請求的方式 get post 第二個引數：請求的url 第三個引數：是否異步 true (異步) false (同步) */ xhr.open("get", "1.txt", true); //3、發送 xhr.send(); //4、等待資料回應 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ alert(xhr.responseText); } } } } </script> </head> <body> <button id = 'btn1'>下載資料</button> </body> </html>
有一種瀏覽器兼容的寫法：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> window.onload = function(){ var oBtn = document.getElementById('btn1'); oBtn.onclick = function(){ //1、宣告一個ajax物件 /* XMLHttpRequest 在低版本的IE瀏覽器下并不兼容 */ var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject("Microsoft.XMLHTTP"); //2、輸入請求的資訊 /* 第一個引數：請求的方式 get post 第二個引數：請求的url 第三個引數：是否異步 true (異步) false (同步) */ xhr.open("get", "1.txt", true); //3、發送 xhr.send(); //4、等待資料回應 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ alert(xhr.responseText); } } } } </script> </head> <body> <button id = 'btn1'>下載資料</button> </body> </html>
**明白了嘛？明白了接下來我們在了解一個很有用又有趣的東西：try-throw-catch**
格式：
try{
我們要去執行的代碼;
throw new Error("錯誤文本");
}catch(error){ 補救代碼; }
執行：
1、先去執行try中的代碼
2、如果try中的代碼執行正常，catch中的代碼就不執行了
3、如果try中的代碼執行例外(包括throw手動拋出例外)，執行catch中的代碼進行補救，
【注】同時，error是try中例外資訊，
【注】最大用處的，用于代碼除錯，
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
<script>
try{
alert("認識成果");
alert("追到手");
alert("娶成果");
throw new Error("追到手代碼執行正常");
}catch(error){
alert("我是補救代碼：" + error);
//我是補救代碼：ReferenceError: num is not defined
}
alert("我是最后的代碼")
</script>
</head>
<body>
</body>
</html>
好玩吧！
上面ajax中出現的get和post不陌生吧！是不是似曾相識，在那見過吧~~~那呢，對了！表單！那接下來我們就看看ajax中的get與post有什么區別， get引數通過url傳遞，post放在請求體（request body）中；
get請求在url傳遞的引數有長度限制，而post沒有；
get比post更不安全，因為引數直接顯示在url地址中，所以不能傳遞敏感資料；
get請求瀏覽器會主動快取，而post不會；
get請求引數會保存在瀏覽歷史記錄，而post請求不會；
get和post本質上都是tcp連接，
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> window.onload = function(){ var aBtns = document.getElementsByTagName("button"); aBtns[0].onclick = function(){ var xhr = null; try{ xhr = new XMLHttpRequest(); }catch(error){ xhr = new ActiveXObject("Microsoft.XMLHTTP") } var str = "username=tian&age=18&password=123abc"; xhr.open("get", "code14/1.get.php?" + str, true); xhr.send(); xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ alert(xhr.responseText); }else{ alert("Error：" + xhr.status); } } } } aBtns[1].onclick = function(){ var xhr = null; try{ xhr = new XMLHttpRequest(); }catch(error){ xhr = new ActiveXObject("Microsoft.XMLHTTP") } var str = "username=tian&age=18&password=123abc"; xhr.open("post", "code14/1.post.php", true); //設定提交資料格式 xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded"); //post提交的資料是通過send方法進行傳參的，注意post提交的資料不加xhr.send(str); xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ alert(xhr.responseText); }else{ alert("Error：" + xhr.status) } } } } } </script> </head> <body> <button>GET請求</button> <button>POST請求</button> </body> </html>
**readystatechange事件**
xhr.readyState 值發生變化的時候，會觸發上述的這個事件
0 (初始化)沒有呼叫open方法的時候
1 (載入)已經呼叫send方法，發送請求
2 (載入完成)send方法已經發送完畢，接受到了所有的回應
3 (決議)正在決議回應內容
4 (完成)內容決議完成，可以在客戶端呼叫了
responseText 回應文本，以字串的形式回傳我們請求的資料，
**常見的status（狀態碼）：**
200：請求成功
301：網頁被重定向到其他url
304：檔案未被修改，使用快取資源
404：找不到此網頁（指定的資源）
500：服務器內部錯誤
......
當然想知道更多狀態可以去自己找！下面提供一個可跳轉的超鏈接頁面：
[更多狀態碼](https://www.runoob.com/http/http-status-codes.html) **查詢字串形式：**
search(查詢字串)：?name1=value1&name2=value2
querystring(查詢字串): name1=value1&name2=value2
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
<script>
//傳入物件，拼接成querystring
function querystring(obj){
var str = '';
for(var attr in obj){
str += attr + "=" + obj[attr] + "&";
}
return str.substring(0, str.length - 1);
}
//username=tian&age=20&sex=男
alert(querystring({
username: "tian",
age: 20,
sex: "男"
}))
</script>
</head>
<body>
</body>
</html>
**最后封裝一個ajax函式，記得收藏哦！**
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> /* type 代表 請求方式 url 代表 請求url路徑 data 代表 發送資料 */ function $ajax(type, url, objData){ var xhr = null; try{ xhr = new XMLHttpRequest(); }catch(error){ xhr = new ActiveXObject("Microsoft.XMLHTTP") } if(type == "get" && objData){ url += "?" + querystring(objData); } xhr.open(type, url, true); if(type == "get"){ xhr.send(); }else{ //設定提交資料格式 xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded"); objData ? xhr.send(querystring(objData)) : xhr.send(); } xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ alert(xhr.responseText); }else{ alert("Error：" + xhr.status); } } } } function querystring(obj){ var str = ''; for(var attr in obj){ str += attr + "=" + obj[attr] + "&"; } return str.substring(0, str.length - 1); } window.onload = function(){ var aBtns = document.getElementsByTagName("button"); aBtns[0].onclick = function(){ $ajax("get", "code14/1.get.php", { username: "小明", age: 40, password: "123abc" }); } aBtns[1].onclick = function(){ $ajax("post", "code14/1.post.php", { username: "小花", age: 18, password: "123abc" }); } } </script> </head> <body> <button>GET請求</button> <button>POST請求</button> </body> </html>
==記得一定要用控制臺網路查看請求資料形態哦！==
最后，希望我的文章能給你帶來微妙的幫助，一起奧利給！！！當然如果你對前端開發的學習有興趣，可以在B站上找尋碼農雨飛的免費前端學習視頻，代碼免費送，http://www.bilibili.com/video/av77505416.當然也可以留言評論加關注與我暢所欲談共同漫步于知識的海洋，，，，
```
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/143973.html
標籤：JavaScript