标签：JQuery load script url html JSONP function 模板
跨域与同源
同源策略是浏览器的一种安全策略，所谓同源,是指该地址的协议、域名、端口都一样。默认情况下，只有同源的地址才可以通过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”); [老版本的兼容代码]
在这里只是做个演示,如有相关的建议,欢迎各位在下面提出！
标签：JQuery,load,script,url,html,JSONP,function,模板 来源： https://blog.csdn.net/weixin_43629719/article/details/98493427
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。