前端跨域通信

跨域

产生跨域的问题是因为存在同源策略。

同源策略：限制一个源加载的文档或脚本与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。

（1）源：包含：协议、域名、端口。如果有一个部分不同，那就是源不同，就产生了跨域。

（2）限制：这个源的文档没有权利去操作另一个源的文档。体现在：

• Cookie、LocalStorage和IndexDB无法获取。
• 无法获取和操作DOM。
• 不能发送Ajax请求。Ajax只适合同源的通信。

ajax通信方法:

1.创建一个XMLHttpRequest对象

2.使用open方法设置请求的参数，open（method，url,是否异步）

3.发送请求

4.注册onreadystatechange事件，状态改变就会调用。

5.获取返回数据，更新数据到前端页面。

onreadystatechange事件:

注册onreadstatechange事件后，当readyState属性发生改变时，这个onreadystatechange函数就会被调用。

readyState：

• 0: 请求未初始化

• 1: 服务器连接已建立

• 2: 请求已接收

• 3: 请求处理中

• 4: 请求已完成，且响应已就绪

解决ajax跨域问题：

使用jsonp

JSONP的原理：通过<script>标签的异步加载来实现的。比如说，实际开发中，我们发现，head标签里，可以通过<script>标签的src，里面放url，加载很多在线的插件。这就是用到了JSONP

jsonp只支持get请求，不支持post。

原生js中，用一个script标签：

fn是和后台约定好的函数名

客户端中：

<?php $mycallBack = $_GET['callback1']; $arr = array("zhangsan","lisi","zhaoliu"); echo $mycallBack.`(`.json_encode($arr).`)`; //字符串拼接 ?>

jQuery中：

把dataType设置为jsonp

	$("#btn").click(function(){
		$.ajax({
			url:"./data.php?callback1=fn",
			dataType:"jsonp",
			type:"get",
			//jsonp:"callback1",   //传递给B服务器的回调函数的名字（默认为 callback）
			//jsonCallBack:"fn"    //自定义的函数名称。默认为 jQuery 自动生成的随机函数名
			success:function(data){
				alert(data);
				//$("#showInfo").html(data);
			},
			error:function(e){
				console.log(e);
			}
		});
	});