Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
咱们的网页如果想要刷新局部内容。 那么需要重新载入整个网页。用户体验不是很好。 就是为了解决局部刷新的问题。 保持其他部分不动，只刷新某些地方。
案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> body { text-align: center; } input { border: 4px solid gray; padding: 10px; font-size: 25px; background-color: skyblue; color: white; border-radius: 10px; cursor: pointer; outline: none; } .joke-container { width: 500px; height: 500px; border: 1px solid gray; border-radius: 10px; padding-left: 10px; margin: 10px auto; font-size: 30px; text-align: left; text-indent: 60px; } </style> </head> <body> <input type="button" value="点我看笑话" class="getJoke" /> <div class="joke-container"></div> <script src="./jquery-1.12.4.js"></script> <script> /* 随机获取笑话的接口 - 请求地址：https://autumnfish.cn/api/joke - 请求方法：get - 请求参数：无 - 响应内容：随机笑话 思路步骤 1. 给按钮注册点击事件 onclick 2. 通过ajax调用 笑话接口 3. 数据返回之后 显示到div中 */ $('.getJoke').on('click',function(){ // 1.创建小黄人对象 let xhr = new XMLHttpRequest(); // 2.设置请求的方法和地址 xhr.open('get', 'https://autumnfish.cn/api/joke'); // 3.发送请求 xhr.send(); // 4.注册回调函数 xhr.onload = function () { // console.log(xhr.responseText) // 显示到div中 $('.joke-container').text(xhr.responseText); }; }); </script> </body> </html>post请求与get请求区别
传参方式不同 get请求参数直接在url后面拼接 ： url?key=valuepost请求参数不能写在url，需要在send方法中传参 xhr.send('key=value') post请求需要设置请求头（post请求才需要设置,这是固定格式语法，强烈建议大家复制粘贴） xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> .info { color: red; } </style> </head> <body> <h2>用户注册</h2> <input type="text" placeholder="请输入注册的用户名" class="username" /> <span class="info"></span> <br /> <input type="button" value="注册" class="submit" /> </body> </html> <script src="./libs/jquery-1.12.4.min.js"></script> <script> /* 请求方法get和post区别： 传参方式不同 get请求： 直接在url后面拼接参数 * 参数在url中，安全性不高 post请求： 1.需要设置请求头（固定语法）：xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded') * 注意：这是固定格式，错一个字母都不行，强烈建议复制粘贴 2.使用xhr的send方法发送参数： xhr.send('参数名=参数值'); * 注意：不要加前面的? */ /* 用户注册 - 请求地址：https://autumnfish.cn/api/user/register - 请求方法：post - 请求参数：username 1. 注册点击事件 : submit 2. 获取输入框文本：username 3. 通过ajax调用接口：参数为输入框文本 4. 数据返回之后显示到info中 */ $(function () { //1.注册点击事件 $('.submit').on('click', function () { //2.获取输入框文本 let username = $('.username').val(); //3.ajax发送请求 //(1).实例化ajax对象 let xhr = new XMLHttpRequest(); //(2).设置请求方法和地址 xhr.open('post', 'https://autumnfish.cn/api/user/register'); //(3).设置请求头（post请求才需要设置） xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded'); //(4).发送请求 ： 参数格式 'key=value' xhr.send('username=' + username); //(5).注册回调函数 xhr.onload = function () { $('.info').text(xhr.responseText); }; }); }); </script>为了方便数据的保存以及传递，就有了一些通用的数据格式（前端js和后端php、java等都支持的数据格式），常用的曾经有JSON和XML，但是现在基本上都是用JSON，XML已经退出了历史的舞台，基本看不到了
JSON是一种数据格式，本质是字符串作用： 解决跨平台的问题，一般服务器返回的数据都是json格式JSON格式特点 属性名和属性值都是字符串（需要使用双引号包括）如果属性是布尔值和数字类型，则可以省略字符串 JSON格式与JS对象互转 JOSN---->JS :JSON.parse(json数据)JS------>JSON ：JSON.stringify(js对象)案例：（lol英雄查询）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> body { background-color: black; text-align: center; } .hero { padding: 10px; font-size: 25px; border-radius: 10px; outline: none; } .bg { width: 1000px; height: 590px; margin: 10px auto; background-image: url(http://img1.dwstatic.com/lol/1512/315320556654/1451366974753.jpg); background-repeat: no-repeat; background-size: 1000px 590px; } .bg .left { height: 590px; width: 300px; background-color: rgba(0, 0, 0, 0.5); padding-left: 20px; padding-top: 30px; box-sizing: border-box; overflow-y: auto; } .left span { color: white; } .left .name { margin-top: 30px; font-size: 30px; } .left .icon { width: 120px; height: 120px; } .left .title { margin-top: 20px; font-size: 50px; display: block; font-weight: 900; } .left .story { font-weight: 700; color: skyblue; text-align: left; } </style> </head> <body> <input type="text" class="hero" placeholder="输入英雄按下回车查询" /> <div class="bg"> <div class="left"> <div> <span class="name">提莫 </span> <img class="icon" src="http://img.dwstatic.com/lol/1310/246295394773/1382341114833.png" alt="" /> </div> <span class="title">迅捷斥候</span> <p class="story">团战可以输，大龙可以丢，高地可以破，提莫必须死</p> </div> </div> <script src="jquery-1.12.4.js"></script> <script> /* 请求地址：https://autumnfish.cn/api/hero/info 示例：https://autumnfish.cn/api/hero/info?name=提莫 请求方法：get 请求参数：name */ /*思路分析 1.给输入框注册键盘按下（onkeydown）,监听enter键(e.keyCode == 13) 2.获取输入框文本 3.ajax发送请求 4.服务器响应之后渲染数据 */ //1.给输入框注册键盘按下 $('.hero').keydown(function (e) { if (e.keyCode == 13) { // 获得英雄姓名 let heroName = $(this).val(); // 实例化xhr对象 let xhr = new XMLHttpRequest(); xhr.open('get', 'https://autumnfish.cn/api/hero/info?name=' + heroName); xhr.send(); xhr.onload = function () { console.log(xhr.responseText); // 4.1先将服务器返回的json格式字符串转成js对象 let backdata = JSON.parse(xhr.responseText) console.log(backdata); // 4.2渲染页面 $('.name').text(backdata.name); $('.bg').css('background', 'url(' + backdata.bg + ')') $('.icon').css('src', backdata.icon); $('.story').text(backdata.story); $('.title').text(backdata.title); }; } }); </script> </body> </html>