JSONP解决跨域请求和JQuery中load()方法介绍

2024-04-08 18:26:22

跨域与同源

同源策略是浏览器的一种安全策略，所谓同源,是指该地址的协议、域名、端口都一样。默认情况下，只有同源的地址才可以通过AJAX方式请求。
不同源之间的请求我们称为跨域请求。
由于XMLHttpRequest无法发送不同源地址之间的请求。所以为了解决跨域请求的问题。我们使用JSONP这种方式来进行请求。

JSONP介绍与实现

原理分析: JSON with Padding，是一种借助于 < script >标签来发送跨域请求的方法。
首先，客户端通过创建一个 script 标签用来请求服务端的动态页面或者是接口,服务端返回一个带有函数调用功能的js脚本。传送的数据写在这个js脚本的参数上。客户端只需要提前设置好这个函数[包括这个函数内部的逻辑]即可。//这个只能发送GET请求。

代码实现:

 	script=document.createElement("script");  //创建一个script 对象。
    Fn="jsonP"+Date.now()+Math.random().toString().substr(3,4); //回调函数名称随机化。
    script.src="http://localhost:8080/Ajax/JsonP?callback="+Fn; 
    document.body.appendChild(script);            //这步骤不可以忽略了
    window[Fn]=function(res){
        // 这里面用于处理函数逻辑。
        console.log(res);
        document.body.removeChild(script); //删除script
        if(script){
            delete script;  //删除script
        }
    };
   // 服务端发送过来的数据应该是:  Fn(data); 其中Fn 就是发过去的随机函数名。data就是服务端产生的数据。

JQuery也有对jsonp的封装。


    $.ajax(
        {
            url: "http://localhost:8080/Ajax/JsonP?callback=JsonP1545152121",
            type: "get",        
            dataType: "jsonp",   // 设置为jsonP 类型。
            success: function (res) {
                console.log(res)
            }
        }
    )

当然跨域解决的方式还有在服务端加上 "Access-Control-Allow-Origin: * "

模板引擎

为什么使用模板引擎？
前端从后端提取数据，如果需要渲染的数据量大，渲染的html结构复杂,使用模板引擎将大大降低工作任务量。我们为了更好地、更容易地渲染数据到html中。我们使用模板引擎。

模板引擎有很多种,这里我以 art-template 来举例。使用模板引擎的步骤:
1,选择一个自己的模板下载并放置在项目中。
2,将这个模板导入至需要渲染的html文件中。
3,书写模板 // 核心步骤
4,发送ajax请求,获取服务端提供的数据 // 核心步骤
5,使用模板将数据和模板整合生成html。
6,创建一个标签将这个标签的innerHtml设置为html,并把这个标签添加到页面某个标签下。

demo:

<table id="test" border="0" cellpadding="0" cellspacing="0  ">
            </table>
            
<script id="module" type="text/x-art-template">   //书写模板,这个写在script标签上因为innerHtml不会渲染出来。type类型不能写 text/javascript.
    {{each item}}
    <tr>
        <td>{{$value.author}}</td>
        <td>{{$value.time}}</td>
        <td>{{$value.amounts}}</td>
        <td>{{$value.rate}}</td>
    </tr>
    {{/each}}
</script>
<script src="../js/template-web.js"></script>
<script src="../js/jquery.js"></script>

<script>

    $.get("http://localhost:8080/Ajax/JsonP", {}, function (res) {
        var context = {item:  res.data};   //数据
        var html = template("module", context); 
        var tbody = document.createElement("tbody");
        tbody.innerHTML = html;
        document.getElementById("test").appendChild(tbody);
    });
    </script>

结果如下：这个下面的数据是我自己随便造的。

load方法介绍

$(selector).load(url,data,function(response,status,xhr)) 方法通过 AJAX 请求从服务器加载数据，并把返回的数据放置到指定的元素中。后面两个参数可以选择性传入。

$(selector).load(function)； //这个是事件方法。
该事件适用于任何带有 URL 的元素（比如图像、脚本、框架、内联框架）。
根据不同的浏览器（Firefox 和 IE），如果图像已被缓存，则也许不会触发 load 事件。

所以具体调用那个方法？取决于参数的传入。

这里主要介绍第一种。使用load方法实现加载页面片段的过程。

$(selector).load(url,data,function(response,status,xhr)) 介绍

该方法是最简单的从服务器获取数据的方法。它几乎与 $.get(url, data, success)
等价，不同的是它不是全局函数，并且它拥有隐式的回调函数。当侦测到成功的响应时（比如，当 textStatus 为 “success” 或"notmodified" 时），.load() 将匹配元素的 HTML 内容设置为返回的数据。这意味着该方法的大多数使用会非常简单。

$("#result").load("ajax/test.html", function() {
  alert("Load was performed.");
});

上面的两个例子中，如果当前文档不包含 “result” ID，则不会执行 .load() 方法。
如果提供的数据是对象，则使用 POST 方法；否则使用 GET 方法。

使用.load()实现加载页面片段。

.load() 方法，与 $.get() 不同，允许我们规定要插入的远程文档的某个部分。这一点是通过 url 参数的特殊语法实现的。如果该字符串中包含一个或多个空格，紧接第一个空格的字符串则是决定所加载内容的 jQuery 选择器。

demo：

	$("#first").on("click",function () {          //其中注册点击事件的对象时 我的个人资料的a标签。
        var url=$(this).attributes["href"];			// 在a标签的href 属性获取url。
        $("#test").load(url+" #test");    // 将这个页面的#test的内容替换为 url 中的 #test 的内容。实现加载页面片段。
        return false;          //阻止跳转。
   });

通过点击"我的个人资料"来实现页面绿色部分的内容的替换。
var xhr=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject(“Microsoft.XMLHTTP”); [老版本的兼容代码]

在这里只是做个演示,如有相关的建议,欢迎各位在下面提出！

码农公寓

跨域与同源

JSONP介绍与实现

模板引擎

load方法介绍

相关文章