具体就是区别get和post请求的区别，get请求的传参是直接拼接在url结尾，而post请求需要在send()里面传递，并且post请求还要设置请求头setRequestHeader("content-type", "application/x-www-form-urlencoded")

请求后对json或者text或者xml的数据进行处理就可以渲染到页面了

提到Ajax就不得不提到跨域了

跨域简单的来说限制了非同源（ip/域名/端口/协议）的数据交互，当然这肯定是极好的，因为如果不限制那么你的网页别人也可以操作是不是很恐怖

但是有些情况下我们需要调用别人的服务器数据，而且别人也愿意怎么办呢，程序员是很聪明的，html标签中img，script，link等一些带有src属性的标签是可以请求外部资源的，img和link得到的数据是不可用的，只有script标签请求的数据我们可以通过函数来接收，函数的参数传递可以是任何类型，所以创建一个函数，来接收，参数就是请求到的数据，而对方的数据也要用该函数来调用就可以实现跨域了

简单封装jsonp实现

// url是请求的接口// params是传递的参数// fn是回调函数function jsonp(url, params, fn){ // cbName实现给url加上哈希，防止同一个地址请求出现缓存 var cbName = `jsonp_${(Math.random() * Math.random()).toString().substr(2)}`; window[cbName] = function (data) { fn(data); // 获取数据后移除script标签 window.document.body.removeChild(scriptElement); }; // 组合最终请求的url地址 var querystring = ''; for (var key in params) { querystring += `${key}=${params[key]}&`; } // 告诉服务端我的回调叫什么 querystring += `callback=${cbName}`; url = `${url}?${querystring}`; // 创建一个script标签，并将src设置为url地址 var scriptElement = window.document.createElement('script'); scriptElement.src = url; // appendChild(执行) window.document.body.appendChild(scriptElement); }

Animate

封装的代码

// element设置动画的DOM对象// attrs设置动画的属性object// fn是回调函数function animate(element, attrs, fn) { //清除定时器 if(element.timerId) { clearInterval(element.timerId); } element.timerId = setInterval(function () { //设置开关 var stop = true; //遍历attrs对象，获取所有属性 for(var k in attrs) { //获取样式属性 对应的目标值 var target = parseInt(attrs[k]); var current = 0; var step = 0; //判断是否是要修改透明度的属性 if(k === "opacity") { current = parseFloat( getStyle(element, k)) * 100 || 0; target = target * 100; step = (target - current) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); current += step; element.style[k] = current / 100; //兼容ie element.style["filter"] = "alpha(opacity="+ current +")"; }else if(k === "zIndex") { element.style[k] = target; } else { //获取任意样式属性的值，如果转换数字失败，返回为0 current = parseInt(getStyle(element, k)) || 0; step = (target - current) / 10; console.log("current:" + current + " step:" + step); step = step > 0 ? Math.ceil(step) : Math.floor(step); current += step; //设置任意样式属性的值 element.style[k] = current + "px"; } if(step !== 0) { //如果有一个属性的值没有到达target ，设置为false stop = false; } } //如果所有属性值都到达target 停止定时器 if(stop) { clearInterval(element.timerId); //动画执行完毕 回调函数 if(fn) { fn(); } } },30); } //获取计算后的样式的值 function getStyle(element, attr) { //能力检测 if(window.getComputedStyle) { return window.getComputedStyle(element, null)[attr]; }else{ return element.currentStyle[attr]; } }

以上讲述这么多来分析jQuery，我相信大家也一定对jQuery有了新的认识和认知，希望大家能有收获。

相关推荐：

中级独孤九贱(6)_jQuery视频教程

jQuery是一个快速、简洁的JavaScript框架。设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等,是全球最流行的前端开发框架之一。PHP中文网根据最新版本,独家录制jQuery最新视频教程,回馈PHP中文网的新老用户。

我们在之前的文章中我们给大家介绍了JavaScript中setInterval的使用详解，对于setInterval的认识相信小伙伴们都有自己的了解，那么我们今天继续给大家介绍下JavaScript使用setInterval实现天数倒计时以及本地时间的案例！

JavaScript使用setInterval实现天数倒计时以及本地时间

今天是<script type="text/javascript">var d = new Date(); document.write('<input type=\"hidden\" name=\"wd\" type=\"text\" value=\"'+ (d.getMonth()+1)+'月'+d.getDate()+'日'+ '\">'); document.write(d.getFullYear()+'年'+(d.getMonth()+1)+'月'+d.getDate()+'日'+' 星期'+'日一二三四五六'.charAt(new Date().getDay()));</script>。 2018年高考时间：2018-06-07 9:00:00，距离考试还有<script type="text/javascript" language="javascript" > var bsDate=new Date('4/19/2018'); function getchaTime() { var date = new Date(); var start =bsDate.getTime() - date.getTime(); var startday = Math.floor(start/(1000 * 60 * 60 * 24)); if(startday > 0){ document.write("<span class='danger'>"+startday+"</span>天"); }else{ } } getchaTime(); window.setInterval('getchaTime()',3600000);

今天是2017年11月24日 星期五。
2018年高考时间：2018-06-07 9:00:00，距离考试还有194天

总结：

通过对本文的详细学习，相信很多小伙伴们对JavaScript中setInterval的使用有了进一步的认识和了解，希望对你的工作有所帮助！
相关推荐：