经常使用jQuery的ajax 不明白里头大概的原理怎么行呢?
下面我们一起来简单的封装一些jq里的ajax 吧
//简易AJAx 封装
var $ = {
params:function(params){
var data="";
for(key in params){
data += key + '='+params[key]+'&';
}
// 将最后一个&字符截掉
return data.slice(0,-1);
},
//AJax 实例
ajax:function(options){
//实例化xmlhttpRequest,
var xhr = new XMLHttpRequest(),
//默认为get 方式
type = options.type ||'get',
// 默认请求路径
url = options.url || location.pathname,
// 格式化数据key=value&key=value
data = this.params(options.data),
callback = options.success;
if(type == 'get' ){
url = url +'?' +data;
data = null;
}
xhr.open(type ,url);
//当请求方式为get 情况,需要设置一个content-type
if(type =='post'){
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
}
// 发送请求主体
xhr.send(data);
//监听响应
xhr.onreadystatechange = function(){
if(xhr.readyState ==4 && xhr.status ==200 ){
//获取响应类型
var contentType = xhr.getResponseHeader('Content-Type');
var data = xhr.responseText;
//解析json 检测ct里是否包含json 字样
if(contentType.indexOf('json') != -1){
// 解析json字符串
data = JSON.parse(data);
}
// 将数据传给回调回去
callback(data);
}else{
options.error('请求失败');
}
}
}
};
// 使用方式
// 调用工具函数
$.ajax({
type: 'post',
url: 'stars.php',
// 以对象形式传递数据会更加方便
data: {name: 'itcast', age: 10},
success: function (data) {
console.log(data);
},
error: function (err) {
console.log(err);
}
});
// 虽然和真正jq的源码还有很大的差距,不过能大概明白原理
// ,对真正理解ajax是有好处的。
下面我们一起来简单的封装一些jq里的ajax 吧
//简易AJAx 封装
var $ = {
params:function(params){
var data="";
for(key in params){
data += key + '='+params[key]+'&';
}
// 将最后一个&字符截掉
return data.slice(0,-1);
},
//AJax 实例
ajax:function(options){
//实例化xmlhttpRequest,
var xhr = new XMLHttpRequest(),
//默认为get 方式
type = options.type ||'get',
// 默认请求路径
url = options.url || location.pathname,
// 格式化数据key=value&key=value
data = this.params(options.data),
callback = options.success;
if(type == 'get' ){
url = url +'?' +data;
data = null;
}
xhr.open(type ,url);
//当请求方式为get 情况,需要设置一个content-type
if(type =='post'){
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
}
// 发送请求主体
xhr.send(data);
//监听响应
xhr.onreadystatechange = function(){
if(xhr.readyState ==4 && xhr.status ==200 ){
//获取响应类型
var contentType = xhr.getResponseHeader('Content-Type');
var data = xhr.responseText;
//解析json 检测ct里是否包含json 字样
if(contentType.indexOf('json') != -1){
// 解析json字符串
data = JSON.parse(data);
}
// 将数据传给回调回去
callback(data);
}else{
options.error('请求失败');
}
}
}
};
// 使用方式
// 调用工具函数
$.ajax({
type: 'post',
url: 'stars.php',
// 以对象形式传递数据会更加方便
data: {name: 'itcast', age: 10},
success: function (data) {
console.log(data);
},
error: function (err) {
console.log(err);
}
});
// 虽然和真正jq的源码还有很大的差距,不过能大概明白原理
// ,对真正理解ajax是有好处的。