这次给大家带来jQuery+ajax功能实现，jQuery+ajax功能实现的注意事项有哪些，下面就是实战案例，一起来看一下。
实现功能
由于jq中的ajax方法是用了内置的deferred模块，是Promise模式的一种实现，而我们这里没有讲过，所以我们就不使用这一模式啦。
我们只定义一个ajax方法，他可以简单的get，post，jsonp请求就可以啦~~
var ajax = function () {
// 做一些初始化，定义一些私有函数等
return function () {
// ajax主体代码
}
}()
ajax({
url: myUrl,
type: 'get',
dataType: 'json',
timeout: 1000,
success: function (data, status) {
console.log(data)
},
fail: function (err, status) {
console.log(err)
}
})
我们的ajax方法最后实现的功能如上所示，非常类似于jq。那我们还在等什么，开始吧。
整体思路
我们的ajax方法需要传递一个对象进去，这个对象中我们可以定义一些我们希望的属性，我们就必须初始一下各种属性
//默认请求参数
var _options = {
url: null, // 请求连接
type: 'GET', // 请求类型
data: null, // post时请求体
dataType: 'text', // 返回请求的类型，有text/json两种
jsonp: 'callback', // jsonp请求的标志，一般不改动
jsonpCallback: 'jsonpCallback', //jsonp请求的函数名
async: true, // 是否异步
cache: true, // 是否缓存
timeout:null, // 设置请求超时
contentType: 'application/x-www-form-urlencoded',
success: null, // 请求成功回调函数
fail: null // 请求失败回调
}
以上我们定义了一大串请求有关的数据，接下来我们就开始ajax主体函数的书写，现在的ajax方法是这样了
var ajax = function () {
//默认请求参数
var _options = {
url: null,
type: 'GET',
data: null,
dataType: 'text',
jsonp: 'callback',
jsonpCallback: 'jsonpCallback',
async: true,
cache: true,
timeout:null,
contentType: 'application/x-www-form-urlencoded',
success: null,
fail: null
}
// ...
return function (options) {
// ...
}
}()
我们可以想一下，ajax方法传递一个对象进来，我们是不是需要把我们设置的这个对象上的属性来覆盖掉初始化_options上面的那些属性呢，肯定需要。那下面我们先写一个简单的继承，如下：
var ajax = function () {
//默认请求参数
var _options = {
url: null,
type: 'GET',
data: null,
dataType: 'text',
jsonp: 'callback',
jsonpCallback: 'jsonpCallback',
async: true,
cache: true,
timeout:null,
contentType: 'application/x-www-form-urlencoded',
success: null,
fail: null
}
// 内部使用的继承方法
var _extend = function(target,options) {
if( typeof target !== 'object' || typeof options !== 'object' ) {
return;
}
var copy ,clone, name;
for( name in options ) {
if(options.hasOwnProperty(name) && !target.hasOwnProperty(name)) {
target[name] = options[name];
}
}
return target;
};
// ...
return function (options) {
// 没有传参或者没有url，抛出错误
if( !options || !options.url ) {
throw('参数错误！');
}
// 继承操作
options.type = options.type.toUpperCase();
_extend(options,_options);
// ...
}
}()
这个继承方法，我们是把初始化的_options继承到了options，为什么呢？因为我们这个_options对象不在ajax方法内部，我们需要使用它，但我们不能改变他，如果改变了他，下一次使用ajax方法将会崩溃。因此，我们紧紧是把配置的options对象没有的属性设置为初始值。
下面，我们就要发送请求了么？等等！好像jsonp请求不是xhr请求啊，他好像是将请求url当做script标签的src值插入到页面body中去实现的，哦，对了，我们先把jsonp请求处理一下再开始建立xhr请求的代码吧。
var ajax = function () {
//默认请求参数
var _options = {
url: null,
type: 'GET',
data: null,
dataType: 'text',
jsonp: 'callback',
jsonpCallback: 'jsonpCallback',
async: true,
cache: true,
timeout:null,
contentType: 'application/x-www-form-urlencoded',
success: null,
fail: null
}
// 内部使用的继承方法
var _extend = function(target,options) {
if( typeof target !== 'object' || typeof options !== 'object' ) {
return;
}
var copy ,clone, name;
for( name in options ) {
if(options.hasOwnProperty(name) && !target.hasOwnProperty(name)) {
target[name] = options[name];
}
}
return target;
};
// jsonp处理函数
function _sendJsonpRequest(url,callbackName,succCallback) {
var script = document.createElement('script');
script.type="text/javascript";
script.src=url;
document.body.appendChild(script);
// 如果用户自己定义了回调函数，就用自己定义的，否则，调用success函数
window[callbackName] = window[callbackName] || succCallback;
}
// ...
return function (options) {
// 没有传参或者没有url，抛出错误
if( !options || !options.url ) {
throw('参数错误！');
}
// 继承操作
options.type = options.type.toUpperCase();
_extend(options,_options);
/*jsonp部分，直接返回*/
if( options.dataType === 'jsonp' ) {
var jsonpUrl = options.url.indexOf('?') > -1 ? options.url: options.url +
'?' + options.jsonp+ '=' + options.jsonpCallback;
return _sendJsonpRequest(jsonpUrl,options.jsonpCallback,options.success);
}
// ...
}
}()
我们定义了一个_sendJsonpRequest函数，这个函数接收三个参数，第一个是jsonpUrl，第二个是jsonp的回调函数名，第三个是成功回调函数，我们在这个函数内建立一个src为jsonpUrl的script元素插入到body中，同时，确定了回调函数（如果我们定义了jsonpCallback函数就调用它，如果没有就调用success回调，一般情况我们不去定义全局的jsonpCallback函数而传递success回调来完成jsonp请求）。
好，处理好jsonp请求后，我们开始处理xhr请求了。
var ajax = function () {
//默认请求参数
var _options = {
url: null,
type: 'GET',
data: null,
dataType: 'text',
jsonp: 'callback',
jsonpCallback: 'jsonpCallback',
async: true,
cache: true,
timeout:null,
contentType: 'application/x-www-form-urlencoded',
success: null,
fail: null
}
// 内部使用的继承方法
var _extend = function(target,options) {
if( typeof target !== 'object' || typeof options !== 'object' ) {
return;
}
var copy ,clone, name;
for( name in options ) {
if(options.hasOwnProperty(name) && !target.hasOwnProperty(name)) {
target[name] = options[name];
}
}
return target;
};
// jsonp处理函数
function _sendJsonpRequest(url,callbackName,succCallback) {
var script = document.createElement('script');
script.type="text/javascript";
script.src=url;
document.body.appendChild(script);
// 如果用户自己定义了回调函数，就用自己定义的，否则，调用success函数
window[callbackName] = window[callbackName] || succCallback;
}
// json转化为字符串
var _param = function(data) {
var str = '';
if( !data || _empty(data)) {
return str;
}
for(var key in data) {
str += key + '='+ data[key]+'&'
}
str = str.slice(0,-1);
return str;
}
//判断对象是否为空
var _empty = function(obj) {
for(var key in obj) {
return false;
}
return true;
}
// ...
return function (options) {
// 没有传参或者没有url，抛出错误
if( !options || !options.url ) {
throw('参数错误！');
}
// 继承操作
options.type = options.type.toUpperCase();
_extend(options,_options);
/*jsonp部分，直接返回*/
if( options.dataType === 'jsonp' ) {
var jsonpUrl = options.url.indexOf('?') > -1 ? options.url: options.url +
'?' + options.jsonp+ '=' + options.jsonpCallback;
return _sendJsonpRequest(jsonpUrl,options.jsonpCallback,options.success);
}
//XMLHttpRequest传参无影响
var xhr = new (window.XMLHttpRequest || ActiveXObject)('Microsoft.XMLHTTP');
// get搜索字符串
var search = '';
// 将data序列化
var param= _param(options.data)
if( options.type === 'GET' ) {
search = (options.url.indexOf('?') > -1 ? '&' : '?') + param;
if(!options.cache) {
search += '&radom='+Math.random();
}
param = null;
}
// ...
}
}()
首先，兼容ie创建xhr对象，XMLHttpRequest构造函数传递参数是无影响，然后我们定义了两个辅助变量：search、param，前者用于get请求的查询字串，后者用于post请求的send内容，我们定义了一个_param方法来讲对象转换为send方法参数的模式，就如你看到的那样，下面我们做了get与post之间合理的search、param的赋值工作。接下来我们就可以发送请求书写最激动人心的内容了。
最终的代码如下
;
var ajax = function () {
//默认请求参数
var _options = {
url: null,
type: 'GET',
data: null,
dataType: 'text',
jsonp: 'callback',
jsonpCallback: 'jsonpCallback',
async: true,
cache: true,
timeout:null,
contentType: 'application/x-www-form-urlencoded',
success: null,
fail: null
}
// json转化为字符串
var _param = function(data) {
var str = '';
if( !data || _empty(data)) {
return str;
}
for(var key in data) {
str += key + '='+ data[key]+'&'
}
str = str.slice(0,-1);
return str;
}
//判断对象是否为空
var _empty = function(obj) {
for(var key in obj) {
return false;
}
return true;
}
var _extend = function(target,options) {
if( typeof target !== 'object' || typeof options !== 'object' ) {
return;
}
var copy ,clone, name;
for( name in options ) {
if(options.hasOwnProperty(name) && !target.hasOwnProperty(name)) {
target[name] = options[name];
}
}
return target;
};
// 自定义text转化json格式
var parseJSON = function(text) {
if(typeof text !== 'string') {
return;
}
if( JSON && JSON.parse ) {
return JSON.parse(text);
}
return (new Function('return '+text))();
}
// jsonp处理函数
function _sendJsonpRequest(url,callbackName,succCallback) {
var script = document.createElement('script');
script.type="text/javascript";
script.src=url;
document.body.appendChild(script);
// 如果用户自己定义了回调函数，就用自己定义的，否则，调用success函数
window[callbackName] = window[callbackName] || succCallback;
}
return function (options) {
// 没有传参或者没有url，抛出错误
if( !options || !options.url ) {
throw('参数错误！');
}
// 继承操作
options.type = options.type.toUpperCase();
_extend(options,_options);
/*jsonp部分，直接返回*/
if( options.dataType === 'jsonp' ) {
var jsonpUrl = options.url.indexOf('?') > -1 ? options.url: options.url +
'?' + options.jsonp+ '=' + options.jsonpCallback;
_sendJsonpRequest(jsonpUrl,options.jsonpCallback,options.success);
return;
}
//XMLHttpRequest传参无影响
var xhr = new (window.XMLHttpRequest || ActiveXObject)('Microsoft.XMLHTTP');
// get搜索字符串
var search = '';
// 将data序列化
var param= _param(options.data)
if( options.type === 'GET' ) {
search = (options.url.indexOf('?') > -1 ? '&' : '?') + param;
if(!options.cache) {
search += '&radom='+Math.random();
}
param = null;
}
xhr.open( options.type, options.url + search, options.async );
xhr.onreadystatechange = function() {
if( xhr.readyState == 4 ) {
if( xhr.status >= 200 && xhr.status < 300 || xhr.status == 304 ) {
var text = xhr.responseText;
// json格式转换
if(options.dataType == 'json') {
text = parseJSON(text)
}
if( typeof options.success === 'function') {
options.success(text,xhr.status)
}
}else {
if(typeof options.fail === 'function') {
options.fail('获取失败', 500)
}
}
}
}
xhr.setRequestHeader('content-type',options.contentType);
// get请求时param时null
xhr.send(param);
// 如果设置了超时，就定义
if(typeof options.timeout === 'number') {
// ie9+
if( xhr.timeout ) {
xhr.timeout = options.timeout;
}else {
setTimeout(function() {
xhr.abort();
},options.timeout)
}
}
}
}()
可以看到，我们很熟悉的xhr代码，在这里，我们需要写一个解析返回字串形成json格式对象的方法parseJSON，类似于jq中的parseJSON方法，如上所示。
我们还需要设置超时代码，如果设置了请求超时，我们就如上定义。
注意：上面代码中，由于懒，设置请求头一行并没有判断是否在post请求下，你可以自己设置~~~。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是jQuery+ajax功能实现的详细内容。更多信息请关注PHP中文网其他相关文章！
从C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。
JavaScript引擎：比较实施Apr 13, 2025 am 12:05 AM不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。
超越浏览器：现实世界中的JavaScriptApr 12, 2025 am 12:06 AMJavaScript在现实世界中的应用包括服务器端编程、移动应用开发和物联网控制：1.通过Node.js实现服务器端编程，适用于高并发请求处理。2.通过ReactNative进行移动应用开发，支持跨平台部署。3.通过Johnny-Five库用于物联网设备控制，适用于硬件交互。
使用Next.js（后端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:23 AM我使用您的日常技术工具构建了功能性的多租户SaaS应用程序（一个Edtech应用程序），您可以做同样的事情。 首先，什么是多租户SaaS应用程序？ 多租户SaaS应用程序可让您从唱歌中为多个客户提供服务
如何使用Next.js（前端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:22 AM本文展示了与许可证确保的后端的前端集成，并使用Next.js构建功能性Edtech SaaS应用程序。 前端获取用户权限以控制UI的可见性并确保API要求遵守角色库
JavaScript：探索网络语言的多功能性Apr 11, 2025 am 12:01 AMJavaScript是现代Web开发的核心语言，因其多样性和灵活性而广泛应用。1)前端开发：通过DOM操作和现代框架（如React、Vue.js、Angular）构建动态网页和单页面应用。2)服务器端开发：Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发：通过ReactNative和Electron实现跨平台开发，提高开发效率。
JavaScript的演变：当前的趋势和未来前景Apr 10, 2025 am 09:33 AMJavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。
神秘的JavaScript：它的作用以及为什么重要Apr 09, 2025 am 12:07 AMJavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
SecLists
SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合，这些列表在安全评估过程中经常使用，都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表，帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上，他就可以访问到所需的每种类型的列表。
ZendStudio 13.5.1 Mac
功能强大的PHP集成开发环境
Atom编辑器mac版下载
最流行的的开源编辑器
PhpStorm Mac 版本
最新（2018.2.1 ）专业的PHP集成开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
