Ajax学习第三天

跨域请求资源

同源：同源策略是一种安全策略要求域名以及端口完全相同

不是同源的则须要跨域请求资源

注意：跨域并不是请求发不出去，请求能发出去，服务器端能收到请求并正常返回结果，值时结果被浏览器拦截了

实现跨域的2种方法

1. 服务器端设置CORS跨域

   <?php
   	// 设置跨域请求
   	header("Access-Control-Allow-Origin:*"); // * 允许代表所有域来请求
   	header("Access-Control-Allow-Origin:http://day09.com");
   
   	echo file_get_contens("nav.json");
   ?>

   ​

2. 通过jQuery中的jsonp实现跨域

   步骤1： 发送请求的时候设置dataType的类型

   $.ajax({
     	type: "get",
     	url: "http://day8.com/getnav.php",
     	dataType: "jsonp",
     	success: function(res) {
         	var html = template("navTemp", {"items": res})
           document.querySelector("ul").innerHTML = html
     	}
   })

   步骤2： 查看jsonp请求

   

   ​ 拿到了数据但是没有调用，所以渲染不成功

   步骤3：服务器端的配合

   <?php
     	// 这就是客户端请求时传递过来的函数名称
     	$callback = $_GET["callback"];
   	// 读取数据
   	$data = file_get_contens("nav.json");
   	// 返回调用函数的形式，只不过要传递前端需要的数据
   	echo $callback."('.$data.')"; // acb()
   ?>

jsonp 的实现过程

​ 如果要追究他的过程，那么要知道的是，这里发起的请求并不是由异步对象完成的，而是由jQuery动态创建的script标签，并且设置了地址和随机生成的回调函数的名称数据成功返回后，会把这个标签销毁，那么此时信息提供方返回的调用和数据将会在success函数中接收

​ 原生的请求过程

​ 须要手动创建script标签，然后设置src属性，拼接地址和一个callback= 函数名，发起请求后，通过在另外一个script标签中创建一个函数，名称与请求的函数名称相同，然后以形参作为最终的数据

客户端	服务器端
步骤1：请求发起，配置了dataType为jsonp，由jQuery自动的完成一个请求的发送，并创建一个随机的方法名称	步骤1：根据前端发起的get请求，获取到$callback,这里的 \$callback是jQuery发起请求自动生成的一个随机名称避免
步骤2：接收响应回来的数据，‘随机方法的名称(res)’	步骤2：获取数据，读取数据$res
步骤3：在客户端中创建对应的函数声明取去接收服务器端返回的数据，那么就应该在当前的函数的内部完成最后的功能function 随机函数名称(result) {//这里就是最终接收到的数据}	步骤3：返回一个方法的调用，但是是以字符串的方式 >要把这个方法的调用给客户端 “$callback(\$res)” >如果不写成字符串，那么就会在当前文件