post请求：open函数只写url，不写参数；post请求要设置请求头信息；send函数写请求的参数；
//1.创建ajax对象 var ajax = new XMLHttpRequest(); //2.连接服务器 ajax.open('post', 'http://localhost:8080/login', true); //3.post请求要设置请求头信息 ajax.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); //4.发送请求,post请求的请求参数要写到send()方法里面 ajax.send("username=张三&password=123456"); //接收后台的响应 ajax.onreadystatechange = function() { if (ajax.readyState == 4 && ajax.status == 200) { var c = ajax.responseText; alert(c); } }JQUERY把原生提供为方法，不需要将JSON字符串转换为JSON对象；get与post方法的区别在于只需要修改type即可。
设置console.log(error)，通过检查元素—>控制台—>点击发送ajax请求—>查看错误信息的代码来查看后台返回的信息
get请求代码如下：
$('button').click(function() { //发送Ajax $.ajax({ type: 'get', url: 'https://autumnfish.cn/api/joke/list555', //请求参数 data: { 'num': '2' }, //请求成功之后的回调 success: function(res) { //res 返回的结果，JQuery 已经把返回的JSON字符串，已经转换成了JSON对象。 alert(res.msg); alert(res.jokes[0]); }, //请求失败之后的回调 error: function(error) { //console.log(error); //console.log(error.status); alert(error.status); alert(error.statusText); }, dataType: 'json' //接收后台返回的数据类型 }); })post请求代码如下：此处后台为自己写的后台
$('button').click(function() { //发送Ajax $.ajax({ type: 'post', url: 'http://localhost:8080/login', //请求参数 data: { 'username': '王五', 'password': '888888' }, //请求成功之后的回调 success: function(res) { //res 返回的结果，JQuery 已经把返回的JSON字符串，已经转换成了JSON对象。 alert(res.username); alert(res.password); }, //请求失败之后的回调 error: function(error) { alert(error.status); alert(error.statusText); }, dataType: 'json' //接收后台返回的数据类型 }); })$ .get()：发送get请求
语法：$.get(url, [data], [callback], [type])
参数：
url：请求路径 data：请求参数(参数在url中已经写了可以不用写) callback：回调函数 type：响应结果的类型post方法与get方法语法相同。data处不可省略。
$.post()：发送post请求
语法：$.post(url, [data], [callback], [type])
参数：
url：请求路径 data：请求参数 callback：回调函数 type：响应结果的类型
get方法代码如下：
$('button').click(function(){ $.get('https://autumnfish.cn/api/joke/list?num=1',function(res){ alert(res.msg); },"json"); })post方法代码如下：
$('button').click(function() { $.post('http://localhost:8080/login', { 'username': '王五', 'password': '888888' }, function(res) { alert(res.username); alert(res.password); }, "json"); })比get方法与post方法更加简洁，返回JSON数据类型不需要再写返回数据类型。 直接请求JSON数据,post,get请求都可以 $.getJSON(url, [data], [callback]) $postJSON(url, [data], [callback]) url：请求路径 data：请求参数 callback：回调函数
$('button').click(function() { $.getJSON('https://autumnfish.cn/api/joke/list?num=1',function(res){ alert(res.msg); }); })跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。 跨域是a页面想要获取b页面资源，如果a,b页面的协议、域名、端口号、子域名不同，所进行的访问都是跨域的，而浏览器一般为了安全都限制了跨域访问，也就是不允许跨域访问资源 1.同源策略含义 1995年，同源政策由 Netscape 公司引入浏览器。目前，所有浏览器都实行这个政策。 最初，它的含义是指，A网页设置的 Cookie，B网页不能打开，除非这两个网页"同源"。所谓"同源"指的是"三个相同"。 ！协议相同 ！域名相同 ！端口相同
http://www.123.com/index.html 调用 http://www.123.com/server.php （非跨域） http://www.123.com/index.html 调用 http://www.456.com/server.php （主域名不同:123/456，跨域） http://abc.123.com/index.html 调用 http://def.123.com/server.php （子域名不同:abc/def，跨域） http://www.123.com:8080/index.html 调用http://www.123.com:8081/server.php （端口不同:8080/8081，跨域） http://www.123.com/index.html 调用 https://www.123.com/server.php （协议不同:http/https，跨域） 请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。2.同源策略目的 是为了保证用户信息的安全，防止恶意的网站窃取数据
设想这样一种情况：A网站是一家银行，用户登录以后，又去浏览其他网站。如果其他网站可以读取A网站的 Cookie，会发生什么？ 很显然，如果 Cookie 包含隐私（比如存款总额），这些信息就会泄漏。更可怕的是，Cookie 往往用来保存用户的登录状态，如果用户没有退出登录，其他网站就可以冒充用户，为所欲为。因为浏览器同时还规定，提交表单不受同源政策的限制。 "同源政策"是必需的，否则 Cookie 可以共享，互联网就毫无安全可言
3.同源策略限制范围 跨域会阻止什么操作？ 浏览器是从两个方面去做这个同源策略的，一是针对接口的请求，二是针对Dom的查询 如果非同源，共有三种行为受到限制 （1） Cookie、LocalStorage 和 IndexDB 无法读取 （2） DOM 无法获得 （3） AJAX 请求不能发送 跨域的解决的方式：
1.jsonp 只支持get请求的跨域解决 jsonp：解决跨域的原理是什么？ jsonp，就是利用了某些html标签，在进行跨域请求时，不受同源策略的限制。 例如 img script;
JSONP是一个非官方协议，它允许在服务器端集成script tags返回至客户端，通过javascript callback的形式实现跨域访问。
基本思想：网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同源策略限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来
JSONP是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，老式浏览器全部支持，服务器改造非常小，需要目标服务器配合一个callback函数
原生实现: 现在访问一个后台接口为:https://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=13259141515 其中后台返回的数据形式如下： { mts:‘1325914’, province:‘陕西’, catName:‘中国联通’, telString:‘13259141515’, areaVid:‘30503’, ispVid:‘137815084’, carrier:‘陕西联通’ } 前台需要写一个回调函数来处理后太返回的数据，回调函数名需要与访问后台接口的参数callback对应的参数名一致。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button type="button" onclick="send()">jsonp请求</button> </body> </html> <script type="text/javascript"> // 回调函数 击出省市名 function getData(res){ alert(res.province); } </script> <script src="https://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=13259141515&callback=getData"></script>JQuery通过ajax实现的方式如下：
Jsonp会自动生成默认回调函数，也可以指定JSONP回调的函数名，服务器收到请求后，将数据放在一个指定名字的回调函数里传回来，如果回调函数不指定名字，数据就放到默认的回调函数中此代码先执行指定自定义的回调函数"getJsonData"，跨域成功后再执行alert(res.catName);如果没有指定回调函数名，数据就放到默认的回调函数中，跨域成功就执行alert(res.catName); //服务器收到请求后，将数据放在一个指定名字的回调函数里传回来 function getJsonData(res) { alert(res.province); } $('button').click(function() { $.ajax({ type: "GET", url: "https://tcc.taobao.com/cc/json/mobile_tel_segment.htm", data: { tel: "13259141515" }, //多了这个 jsonp: "callback", //发送jsonp 请求 回调函数名Jqurey会自动生成 //指定jsonp的回调函数 jsonpCallback:"getJsonData",//可以指定JSONP回调的函数名 success: function(res) { alert(res.catName); }, //数据类型jsonp dataType: "jsonp" });JSONP类型访问getJSON实现方法如下：没有指定回调函数名，数据就放到默认的回调函数中，跨域成功就执行alert(res.catName);
$.getJSON("https://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=13259141515&callback=?", function(res) { alert(res.catName); });2.cors 解决，推荐的解决方式 当前浏览器发现这次Ajax请求是跨域请求时， 浏览器会通过一个请求头Origin 告诉服务器这次请求是一个跨域请求，期待你的回答。 服务器默认都会处理，跨域请求。并且给出响应，但是默认服务器默认没有对于跨域给出一个明确的表示。 也就是服务器没有设置 Access-Control-Allow-Origin 导致浏览器，不知道服务器的明确表态，所以就拦截了。 默认浏览器就会把服务返回的数据劫持了。
Origin:http://127.0.0.1:8848 Access-Control-Allow-Origin:
