前端干货：JS常用函数与Ajax、Jsonp封装实践

"这篇资源是关于JavaScript编程中的常用函数、技巧和实践经验的总结，特别提到了Ajax请求的实现，包括jQuery的ajax函数封装以及JSONP的处理方式。此外，还涵盖了git的相关笔记，适合初学者作为参考和查询资料。" 在JavaScript的世界里，掌握一些常用的函数和技巧对于提升开发效率至关重要。这里我们主要关注两个方面：Ajax请求和JSONP。 首先，Ajax（Asynchronous JavaScript and XML）是一种在不刷新整个页面的情况下与服务器交换数据并更新部分网页的技术。在jQuery中，`$.ajax()` 是一个强大的函数，用于发起Ajax请求。下面是一个自定义的Ajax函数示例： ```javascript var Ajax = function(url, type, success, error) { $.ajax({ url: url, type: type, dataType: 'json', timeout: 10000, // 设置超时时间 success: function(d) { var data = d.data; success && success(data); // 如果success回调存在，则执行它 }, error: function(e) { error && error(e); // 如果error回调存在，则执行它 } }); }; ``` 这个函数接收URL、请求类型（如'GET'或'POST'）、成功回调函数和错误回调函数作为参数。当请求成功时，会将服务器返回的数据传递给success回调；如果发生错误，error回调会被调用。 其次，JSONP（JSON with Padding）是一种跨域数据交互协议，它的基本思想是利用`<script>`标签可以跨域加载的特点。以下是一个封装的JSONP函数： ```javascript function jsonp(config) { var options = config || {}; // 需要配置url, success, time, fail四个属性 var callbackName = ('jsonp_' + Math.random()).replace(".", ""); var oHead = document.getElementsByTagName('head')[0]; var oScript = document.createElement('script'); oHead.appendChild(oScript); window[callbackName] = function(json) { // 创建jsonp回调函数 oHead.removeChild(oScript); clearTimeout(oScript.timer); window[callbackName] = null; options.success && options.success(json); // 先删除script标签，执行success函数 }; oScript.src = options.url + '?' + callbackName; // 发送请求 if (options.time) { // 设置超时 oScript.timer = setTimeout(function() { oHead.removeChild(oScript); window[callbackName] = null; options.fail && options.fail(); }, options.time); } } ``` 这个函数允许用户传递配置对象，包括URL、成功回调、超时时间和失败回调。当JSONP请求完成后，会自动清理添加到页面的`<script>`标签，以防止内存泄漏。 此外，资源中还提到了`git`笔记，虽然具体内容未给出，但通常会涵盖版本控制、分支管理、合并冲突解决等基础和进阶知识。对于前端开发者来说，了解并熟练运用这些工具和技术是非常重要的。 这篇资源提供了JavaScript开发中的一些实用技巧，对于前端初学者来说，是巩固基础知识和提高实践能力的好资料。通过学习和应用这些内容，可以帮助开发者更高效地编写代码，解决实际问题。