简单的Ajax封装
时间:2022-04-22
本文章向大家介绍简单的Ajax封装,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
/*
*参数说明:
*opts: {'可选参数'}
**method: 请求方式:GET/POST,默认值:'GET';
**url: 发送请求的地址, 默认值: 当前页地址;
**data: string,json;
**async: 是否异步:true/false,默认值:true;
**cache: 是否缓存:true/false,默认值:true;
**contentType: HTTP头信息,默认值:'application/x-www-form-urlencoded';
**success: 请求成功后的回调函数;
**error: 请求失败后的回调函数;
*/
function ajax(opts){
//一、设置默认参数
defaults = {
url : '',
data : '',
method : 'GET',
aysnc : 'true',
cache : 'true',
ContentType : 'application/x-www-form-urlencode',
success : function(){},
error : function(){}
};
//二、用户参数覆盖默认参数
for(var key in opts){
defaults[key] = opts[key];
}
//三、对数据进行处理
if(typeof defaults.data === 'object'){//处理data
var str = '';
for(var key in defaults.data){
str += 'key'+'='+defaults.data[key]+'&';
}
defaults.data = str.substring(0,str.length-1);
}
defaults.method = defaults.data.toupperCase();//处理method
//处理缓存
defaults.cache = defaults.cache ? '':'&' + new Date().getTime();
if(defaults.method === 'GET' && (defaults.data || defaults.cache)){//处理url
defaults.url +='?' + defaults.data + defaults.cache;
}
//四、开始编写ajax
//1、创建ajax对象
var oXhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
//2、与服务器建立联系,告诉服务器要请求什么文件
oXhr.open(defaults.method, defaults.url, defaults.async);
//3、发送请求
if(defaults.method === 'GET'){
oXhr = send(null);
}else{
oXhr.setRequestHeader("Content-type", defaults.contentType);
oXhr = send(defaults.data);
}
//4、等待服务器回应
oXhr.onreadystatechange = function(){
if(oXhr.readyState === 4){
if(oXhr.status === 200){
defaults.success.call(oXhr, oXhr.responseText);
}else{
defaults.error();
}
}
};
}
使用示例:
ajax({
url: '1.php',
data: {name: 'ivan', sex: 'male', age: '23'},
success: function (data){ alert('返回数据是:' + data); }
});
ajax({
url: '1.php',
data: 'name=ivan&sex=male&age=23',
cache: false,
success: function (data){ alert('返回数据是:' + data); }
});
关于ajax缓存 只要是URL相同的GET请求,浏览器会使用缓存(当然还要看服务器的Cache-Control/Expires/Last-Modified/ETag头的设置)。 只要是POST请求,浏览器都不会缓存。 不缓存的办法: 1、在服务端加header("Cache-Control: no-cache, must-revalidate");(如php中) 2、在ajax发送请求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0"); 3、在ajax发送请求前加上anyAjaxObj.setRequestHeader("Cache-Control","no-cache"); 4、在 Ajax 的 URL 参数后加上"?fresh=" + Math.random(); //当然这里参数 fresh 可以任意取了 5、第五种方法和第四种类似,在 URL 参数后加上"?timestamp=" + new Date().getTime(); 跨域问题:http://www.ilkhome.cn/?post=176
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 微信开发系列之五 - 将SAP UI5应用嵌入到微信中
- 微信开发系列之四 - 将SAP C4C的数据更改通知发送到微信公众号上
- 微信开发系列之三 - 在微信公众号里发起SAP C4C Account的创建
- 微信开发系列之二 - 在微信公众号里开发一个自动应答的图灵机器人
- 微信开发系列之一 - 微信公众号开发的开发环境搭建
- SAP Commerce开发之如何找到某个页面对应的JSP实现页面
- 如何用代码读取SAP CRM的Categorization Schema
- 如何使用代码创建SAP CRM Service Request subject
- 微信开发系列之八 - 微信公众号的地图集成
- vivo 悟空活动中台 - 栅格布局方案
- 使用literal或者绑定变量执行SAP HANA SQL语句
- dotnet OpenXML 如何判断是形状还是文本
- dotnet 执行 docker 容器 error MSB4018 CreateAppHost 任务意外失败可能原因
- dotnet 定制 ILogger 实现
- dotnet 在 UOS 国产系统上安装 Mono 开发工具的方法