jq封装post请求数据_js源码模仿jquery的ajax的获取数据
(get,post)。。。
function ajax(obj){
// 默认参数
var defaults = {
type : 'get',
data : {},
url : '#',
dataType : 'text',
async : true,
success : function(data){console.log(data)}
}
// 处理形参,传递参数的时候就覆盖默认参数,不传递就使⽤默认参数
for(var key in obj){//把输⼊的参数与设置的默认数据进⾏覆盖更新
defaults[key] = obj[key];
}
// 1、创建XMLHttpRequest对象
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');// 兼容ie的早期版本
}
// 把对象形式的参数转化为字符串形式的参数
/* {username:'zhangsan','password':123} 转换为 username=zhangsan&password=123 */
var param = '';
for(var attr in obj.data){
param += attr + '=' + obj.data[attr] + '&';
}
if(param){//substring(start, end)截取字符串去掉最后的&符号
param = param.substring(0,param.length - 1);
}
// 处理get请求参数并且处理中⽂乱码问题
jquery源码在线pe == 'get'){
defaults.url += '?' + encodeURI(param);
}
// 2、准备发送(设置发送的参数)
xhr.pe,defaults.url,defaults.async); // 处理post请求参数并且设置请求头信息(必须设置) var data = null;
pe == 'post'){
data = param;
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//post模式下必须加的请求头,这个请求头是告诉服务器怎么去解析请求的正⽂部分。
}
// 3、执⾏发送动作
xhr.send(data);
// 处理同步请求,不会调⽤回调函数
if(!defaults.async){
if(defaults.dataType == 'json'){
return JSON.sponseText);
}else{
sponseText;
}
}
// 4、指定回调函数(处理服务器响应数据)
adyState == 4){
//4 获取数据成功
if(xhr.status == 200){
//200 获取的数据格式正确
var data = sponseText;
if(defaults.dataType == 'json'){
// data = eval("("+ data +")");
data = JSON.parse(data);
//JSON.parse把获取带的json格式的数据转化为js的对象形式可以使⽤
}
defaults.success(data);//回调函数
} } } }
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论