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>