ajax的作用： ajax可以让js代替浏览器向后端程序发送http请求，与后端通信，在用户不知道的情况下操作数据和信息，从而实现页面局部刷新数据/无刷新更新数据。
所以开发中ajax是很常用的技术，主要用于操作后端提供的数据接口，从而实现网站的前后端分离。
ajax技术的原理是实例化js的XMLHttpRequest对象，使用此对象提供的内置方法就可以与后端进行数据通信。
1.2.1 数据接口
数据接口，也叫api接口，表示后端提供操作数据/功能的url地址给客户端使用。
客户端通过发起请求向服务端提供的url地址申请操作数据【操作一般：增删查改】
同时在工作中，大部分数据接口都不是手写，而是通过函数库/框架来生成。
1.2.3 ajax的使用
ajax的使用必须与服务端程序配合使用，但是目前我们先学习ajax的使用，所以暂时先不涉及到服务端python代码的编写。因此，我们可以使用别人写好的数据接口进行调用。
jQuery将ajax封装成了一个函数$.ajax()，我们可以直接用这个函数来执行ajax请求。
接口
地址
天气接口
?city=城市名称
音乐接口搜索
?method=baidu.ting.search.catalogSug&query=歌曲标题
音乐信息接口
?method=baidu.ting.song.play&songid=音乐ID
编写代码获取接口提供的数据：
jQ版本
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://www.jb51.net/js/jquery-1.12.4.js"></script> <script> $(function(){ $("#btn").on("click",function(){ $.ajax({ // 后端程序的url地址 url: 'http://wthrcdn.etouch.cn/weather_mini', // 也可以使用method，提交数据的方式，默认是'GET'，常用的还有'POST' type: 'get', dataType: 'json', // 返回的数据格式，常用的有是'json','html',"jsonp" data:{ // 设置发送给服务器的数据，如果是get请求，也可以写在url地址的?后面 "city":'北京' } }) .done(function(resp) { // 请求成功以后的操作 console.log(resp); }) .fail(function(error) { // 请求失败以后的操作 console.log(error); }); }); }) </script> </head> <body> <button>点击获取数据</button> </body> </html>
vue版本：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://www.jb51.net/js/vue.js"></script> <script src="https://www.jb51.net/js/axios.js"></script> </head> <body> <div> <input type="text" v-model="city"> <button @click="get_weather">点击获取天气</button> </div> <script> let vm = new Vue({ el:"#app", data:{ city:"", }, methods:{ get_weather(){ // ?city=城市名称 axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city) .then(response=>{ console.log(response); }).catch(error=>{ console.log(error.response) }); } } }) </script> </body> </html>
总结：
1. 发送ajax请求，要通过$.ajax()，参数是对象，里面有固定的参数名称。
$.ajax({ "url":"数据接口url地址", "method":"http请求方式，前端只支持get和post", "dataType":"设置服务器返回的数据格式，常用的json，html，jsonp，默认值就是json", // 要发送给后端的数据参数，post时，数据必须写在data，get可以写在data,也可以跟在地址栏?号后面 "data":{ "数据名称":"数据值", } }).then(function(resp){ // ajax请求数据成功时会自动调用then方法的匿名函数 console.log( resp ); // 服务端返回的数据 }).fail(function(error){ // ajax请求数据失败时会自动调用fail方法的匿名函数 console.log( error ); });
2. ajax的使用往往配合事件/钩子操作进行调用。
jQuery还提供了$.get 和 $post简写$.ajax的操作。
// 发送get请求 // 参数1：数据接口的请求地址 // 参数2：发送给接口地址的数据参数 // 参数3：ajax请求成功以后，调用的匿名函数，匿名函数的第一个参数还是服务端返回的数据 // 参数4：设置服务端返回的数据格式，告诉给jQuery $.get("test.php", { "func": "getNameAndTime" }, function(data){ alert(data.name); // John console.log(data.time); // 2pm }, "json"); // 发送post请求 // 参数1：数据接口的请求地址 // 参数2：发送给接口地址的数据参数 // 参数3：ajax请求成功以后，调用的匿名函数，匿名函数的第一个参数还是服务端返回的数据 // 参数4：设置服务端返回的数据格式，告诉给jQuery $.post("test.php", { "func": "getNameAndTime" }, function(data){ alert(data.name); // John console.log(data.time); // 2pm }, "json");
1.2.4 同源策略