1. 原生的Ajax （1）原生的Ajax之GET请求
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> </html> <script type="text/javascript"> //1. 创建对象 var xmlhttp = new XMLHttpRequest(); //2. 打开后台接口，发送请求 xmlhttp.open("GET","https://autumnfish.cn/api/joke/list?num=1",true); xmlhttp.send(); //3. 接收服务器返回的消息 xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ //4. 获取服务器相应结果 var responseText = xmlhttp.responseText; var jsonObj = JSON.parse(responseText); var joke = jsonObj.jokes[0]; var msg = jsonObj.msg; alert(msg); //5. 打印至屏幕 var body = document.body; body.innerText = msg; body.innerText = joke; } } </script>（2）原生的Ajax之POST请求
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> </html> <script type="text/javascript"> //1. 创建对象 var xmlhttp = new XMLHttpRequest(); //2. 连接服务器 xmlhttp.open('POST', 'http://localhost:8080/login', true); //3. post请求要设置请求头信息 xmlhttp.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); //4. 发送请求，post请求的请求参数要写在send()方法里面 xmlhttp.send("username=zhangsan&password=12345"); //5. 接收后台响应 xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var c = xmlhttp.responseText; alert(c); } } </script>2. jQuery封装后的Ajax （1）键值对形式
1. $ .ajax() 语法：$ .ajax({键值对}); <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button type="button">jQuery封装后的get请求</button> </body> </html> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $('button').click(function(){ //发送ajax $.ajax({ type:'get', url:'https://autumnfish.cn/api/joke/list', data:{ //请求参数 'num':2 }, success:function(res){ //请求成功后回调 //res返回的结果，jquery已经把返回的json字符串转换为了json对象 alert(res.msg); alert(res.jokes[0]); }, error:function(error){ alert(error.status); alert(error.statusText); }, dataType:'json' //接收后台返回的数据类型 }) }) </script> =============================================================================================== <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button type="button">jQuery封装后的post请求</button> </body> </html> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $('button').click(function(){ $.ajax({ type:'post', url:'http://localhost:8080/login', data:{ //请求参数 'username':'zhangsan', 'password':'12345' }, success:function(res){ //请求成功后回调 //res返回的结果，jquery已经把返回的json字符串转换为了json对象 alert(res.username); alert(res.password); }, error:function(error){ alert(error.status); alert(error.statusText); }, dataType:'json' //接收后台返回的数据类型 }) }) </script>（2）get请求
2. $ .get()：发送get请求 语法：$ .get(url,[data],[callback],[type]) url：请求路径 data：请求参数 callback：回调函数 type：响应结果的类型 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button type="button">get请求</button> </body> </html> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $('button').click(function(){ /** * $.get()：发送get请求 * 语法：$.get(url, [data], [callback], [type]) * 参数： * url：请求路径 * data：请求参数 * callback：回调函数 * type：响应结果的类型 */ $.get('https://autumnfish.cn/api/joke/list?num=1',function(res){ alert(res.msg); },'json'); }) </script>（3）post请求
3. $ .post()：发送post请求 语法：$ .post(url,[data],[callback],[type]) url：请求路径 data：请求参数 callback：回调函数 type：响应结果的类型 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button type="button">post请求</button> </body> </html> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $('button').click(function(){ /* 3. $.post()：发送post请求 * 语法：$.post(url, [data], [callback], [type]) * 参数： * url：请求路径 * data：请求参数 * callback：回调函数 * type：响应结果的类型 */ $.post('http://localhost:8080/login',{ 'username':'wangwu', 'password':'123456' },function(res){ alert(res.username); alert(res.password); },'json'); }) </script>（4）getJSON请求
4. 直接请求JSON数据，post/get都可以：$ .getJSON(url,[data],[callback]) url：请求路径 data：请求参数 callback：回调函数 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button type="button">getJson请求</button> </body> </html> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $('button').click(function(){ /** * 4.直接请求JSON数据,post,get请求都可以 $.getJSON(url, [data], [callback]) * url：请求路径 * data：请求参数 * callback：回调函数 */ $.getJSON('https://autumnfish.cn/api/joke/list?num=1',function(res){ alert(res.msg); }); }) </script>1. 概念 （1）同源策略：浏览器处于安全考虑的一个机制 （2）跨域请求：会受到同源策略的限制，导致后台返回的数据会被浏览器劫持
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button type="button" onclick="send()">跨域请求</button> </body> </html> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> function send() { //1.创建对象 var xmlhttp = new XMLHttpRequest(); //2.打开后台接口，发送请求 //get请求，请求参数是拼接在url后面的。 xmlhttp.open("GET", "https://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=15594990730", true); //3.发送请求 xmlhttp.send(); //4.接收服务端的响应 xmlhttp.onreadystatechange = function() { //判断readyState就绪状态是否为4，判断status响应状态码是否为200 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { //获取服务器的响应结果 var responseText = xmlhttp.responseText; alert(responseText); //已拦截跨源请求：同源策略禁止读取位于 https://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=15594990730 的远程资源。 //（原因：CORS 头缺少 'Access-Control-Allow-Origin'） } } } </script>2. 跨域请求的解决方式 （1）jsonp
1. jsonp只支持get请求的跨域解决 2. jsonp解决跨域请求的原理：利用了某些html标签，在进行跨域请求时，不受同源策略的限制（img,script）（2）cors（推荐）
当前浏览器发现这次Ajax请求时跨域请时， 浏览器会通过一个请求头Origin 告诉服务器这次请求是一个跨域请求，期待你的回答。 服务器默认都会处理，跨域请求。并且给出响应，但是默认服务器默认没有对于跨域给出一个明确的表示。 也就是服务器没有设置 Access-Control-Allow-Origin 导致浏览器，不知道服务器的明确表态，所以就拦截了。 默认浏览器就会把服务返回的数据劫持了。3. JSONP跨域请求 （1）原生方式的jsonp
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> </html> <script type="text/javascript"> //在url后面加上callback //callback：这个名称是大家约定俗称的 /* __GetZoneResult_ = { mts:'1325914', province:'陕西', catName:'中国联通', telString:'13259141515', areaVid:'30503', ispVid:'137815084', carrier:'陕西联通' } */ //原生jsonp写法 function getData(res){ alert(res.province); } </script> <script src="https://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=13259141515&callback=getData"></script>（2）jQuery方式的jsonp
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> </html> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> /* jQuery111308155352926962021_1603010735068({ mts:'1325914', province:'陕西', catName:'中国联通', telString:'13259141515', areaVid:'30503', ispVid:'137815084', carrier:'陕西联通' }) */ $.ajax({ type:'get', url:"https://tcc.taobao.com/cc/json/mobile_tel_segment.htm", data:{ 'tel':'15594990730' }, jsonp:'callback', //多了这个，jsonp请求的回调函数名jquery会自动生成 success:function(res){ alert(res.catName); }, dataType:'jsonp' //数据类型jsonp }) </script>