ajax:
function ajax(opt) {
//求情路径
var url;
if(opt.url){
url = opt.url;
}else{
console.log('请输入请求路径');
}
//请求类型
var type = opt.type || 'GET';
//回调函数
var callback = opt.callback || function (msg) { };
//请求数据
var data = opt.data || [];
//拼接求情数据
var str = '';
for(var k in data){
str += k + '=' + data[k] + '&';
}
str = str.slice(0,str.length-1);
console.log(str);
// 1.创建对象
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp = new XMLHttpRequest();
} else {
// IE6, IE5 浏览器执行代码
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// 2.发送请求
// get请求和post请求
if(type == 'GET'){
//有请求数据时
if(data.length > 0){
var nowUrl = url + '?' + str;
xmlhttp.open(type,url,true);
xmlhttp.send();
}else{
xmlhttp.open(type,url,true);
xmlhttp.send();
}
}else{
//有请求数据时
if(data.length > 0){
xmlhttp.open(type,url,true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(str);
}else{
xmlhttp.open(type,url,true);
xmlhttp.send();
}
}
// 3.服务器响应
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
callback(xmlhttp.responseText);
}
}
}
使用方法:
ajax({
type:'POST',
data:{
name:'zhangsan',
age:20
},
url:'zz.text',
callback:function(opt){
console.log(opt)
}
})
jsonp:
jsonp简单版:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONP 实例</title>
<style>
.jsonp{
display: inline-block;
padding: 5px 10px;
background-color: aqua;
border-radius: 6px;
cursor: pointer;
}
</style>
</head>
<body>
<span class="jsonp">jsonp</span>
<div id="divCustomers"></div>
<script type="text/javascript">
function jsonp1(result) {
console.log(result);
}
function beginJsonp(req) {
var script = document.createElement('script');
var url = req.url + '?jsonpCallback=' + req.callback;
script.src = url;
document.querySelector('head').appendChild(script);
document.querySelector('head').removeChild(script);
}
document.querySelector('.jsonp').onclick = function () {
beginJsonp({
url:'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg',
callback:'jsonp1'
});
};
</script>
</body>
</html>
本质就是创建一个script标签,src地址为请求地址,(原理就是利用script可以跨域访问,想知道的人可以百度)
jsonp加强版:
(function (globalObj) {
function jsonp(opt) {
var head = document.querySelector('head');
var url = opt.url || '';
// 拼接data,如果有的话
var data = opt.data || {};
//如果data有内容
var dataStr = '';
if(commonFun.isEmptyObj(data)){
for(var k in data){
dataStr += encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) + '&';
}
//去掉自最后一个&
dataStr = dataStr.slice(0,str.length - 1);
}
//全局临时jsonpCallback,调用回填函数
var callback = opt.callback || function (transaction) { };
globalObj.jsonpCallback = function (res) {
callback(res);
delete globalObj.jsonpCallback;
};
// globalObj.jsonpCallback = callback || function (transaction) { };
// 最终的url拼接
url += '?' + dataStr + 'jsonpCallback=jsonpCallback';
//生成script
var script = document.createElement('script');
script.src = url;
head.appendChild(script);
head.removeChild(script);
}
globalObj.jsonp = jsonp;
})(window)
使用时调用下面方法
jsonp({
url:'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg',
data:{
g_tk:5381,
uin:0,
format:'json'
},
callback:function (res) {
console.log(res)
}
});
jsonp中,script最后带的函数只是一个函数名,那个函数一定要是全局函数,全局函数多了不好,所以这里定义了一个临时的jsonpCallback函数,在临时函数里调用callback函数,之后在去掉这个全局临时函数,不会造成污染。
jsonp智能get请求,一般不用,直接后端写好,前端直接用ajax就可以了。 cors这个东西可以看看