JQuery中的Ajax请求

一、 原生Ajax请求

• get与post请求的区别
  get请求js代码如下： get请求，请求参数是拼接在url后面的。 ?num=1&name=abc

	//1.创建对象
	var xmlhttp = new XMLHttpRequest();
	//2.打开后台接口，发送请求
	//get请求，请求参数是拼接在url后面的。 ?num=1&name=abc
	xmlhttp.open("GET", "https://autumnfish.cn/api/joke/list?num=1", 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);
			var obj=JSON.parse(responseText);
			var text=obj.jokes[0]
			var bd=document.body;
			bd.innerText=text;
		}
	}

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封装的Ajax请求

• 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' //接收后台返回的数据类型
		});
	})

三、JQuery中的get请求与post请求

• 为了更加简便，JQuery提供了get方法与post方法，就省略了写type的内容。

$ .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");
	})

四、JQuery中的getJSON方法与postJSON方法

比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);
		});
	})

五、Ajax跨域请求问题

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。
跨域是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: