1、Ajax原理
1）創建XMLHttpRequest/ActiveObject對象
2）註冊回調函數
3）配置請求參數
4）發送請求
5）創建回調
2、動手實現AJAX
1）XMLHttpRequest的幾種狀態
_0_對象沒有完成初始化
_1_對象開始發送請求
_2_對象的請求發送完成
_3_對象開始讀取服務器響應
_4_對象讀取服務器響應結束
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> </head> <body> <script type='text/javascript'> // 創建XMLHttpRequest/ActiveObject對象 var xmlhttp = null; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else if (window.ActiveXObject) { xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); } else { alert('瀏覽器不支持'); } // 註冊回調函數 if (xmlhttp != null) { xmlhttp.onreadystatechange = callback; } // 配置請求參數 var url = 'https://www.imooc.com:8001'; //發送請求 xmlhttp.open('GET', url, true); // (true，異步) xmlhttp.send(null); // 創建回調 function callback() { if (xmlhttp.readyState === 4) { console.log(xmlhttp.status); } } </script> </body> </html>
3、.ajax(options)函數
_1_url——請求地址
_2_method——請求類型
_3_data——請求參數
_4_dataType——返回的數據類型（xml/html/json等）
_5_headers——請求頭信息
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery 中使用ajax</title> <script src="/static/js/jquery-3.5.1min.js"></script> </head> <body> <p>jquery 中使用ajax</p> <script> $(() => { $.ajax({ url: 'http://127.0.0.1:8082/ajax/js/', method: 'POST', data: { 'username': 'admin', 'password': '111' }, success: (data, status) => { console.log('data:', data, 'status:', status) }, error: (data, status) => { console.log('error:', data, 'status:', status) }, complete: (data, status) => { console.log('complete:', data, 'status:', status) } }) }) </script> </body> </html>
4、AJAX快捷函數
1）參數模板
_1_url——請求地址
_1_1_.post()——post請求
_1_2_.get()——get請求
_1_3_.getJSON()——get請求json數據
_2_data——請求參數
_3_callback——請求完成後的回調函數
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery 中使用ajax</title> <script src="/static/js/jquery-3.5.1min.js"></script> </head> <body> <p>jquery 中使用ajax</p> <a href="javascript:void(0);">提交</a> <script> /** $('a').click(() => { {#$.post('http://127.0.0.1:8082/ajax/js/', {#} $.get('http://127.0.0.1:8082/ajax/js/', { }, (rest) => { console.log(rest) }) }) */ $('a').click(() => { {#$.get('http://127.0.0.1:8082/ajax/json/', {#} $.getJSON('http://127.0.0.1:8082/ajax/json/', { }, (rest) => { /** let username = JSON.parse(rest).username console.log(username) */ console.log(rest.username) }) }) </script> </body> </html>
5、AJAX全局設置
1)ajaxSetup()全局設置使用場景
_1_請求響應攔截，如：http狀態碼爲401跳轉到登錄界面
_2_添加全局參數
_3_添加請求頭信息
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery 中使用ajax</title> <script src="/static/js/jquery-3.5.1min.js"></script> </head> <body> <p>jquery 中使用ajax</p> <a href="javascript:void(0);">提交</a> <script> $.ajaxSetup({ headers: { 'appfrom': 'web', }, statusCode: { 401: () => { alert("沒有登錄"); } } }) $('a').click(() => { {#$.get('http://127.0.0.1:8082/ajax/json/', {#} $.getJSON('http://127.0.0.1:8082/ajax/json/', { }, (rest) => { /** let username = JSON.parse(rest).username console.log(username) */ console.log(rest.username) }) }) </script> </body> </html>