异步ajax jsonp,为什么说Jsonp不是Ajax的特例

我们通常在网页里用ajax做异步请求通信的时候，会发现一个问题，我们要请求的文件和当前网页并不在同一个域名下，这就出现的ajax的跨域问题。查了很多资料，其实ajax在设计之初为了保证数据通讯安全，是不允许跨域请求json类型的数据的。那么怎么来解决这个问题呢？

聪明的人类想到了通过事先在服务器端程序约定的一个callback(回调函数)，在客户端请求的时候往这个回调函数里传入一个参数，假定叫做abc,然后对方将用这个abc作为名称，包住需要响应的json文件，形如abc(...)，这里...是指json数据类型的数据，这样服务器返回的是一个用abc套子包住的json数据，伪装成javascript文件的模样返回到客户端。

客户端拿到这个javascript文件后打开一看，我擦，直接是带json参数的的abc函数的调用，直接运行客户端之前已经在html中写好的abc(data)函数，进行前端的渲染。

至此，终于解决了跨域问题，这就是jsonp技术的妙处，理论上用这种方式同样能解决同一域名下的请求噢。或许以后把他们封装起来，更好用呢。所以说jsonp技术不仅仅是ajax的一个特例，反而是ajax的一种高级形式呢。

不知道同学们有没有看懂呢？，呵呵，第一次写笔记，日后定当斧正！

附上案例代码，这是一个从本地跨域异步请求天气预报api服务的案例噢。界面太丑了~

获取第三方天气数据

#div1{

position:relative;

left: 50%;

background: lightGreen;

width: 300px;

height: 500px;

overflow-y: scroll;

overflow-x: hidden;

margin-left: -150px;

padding-bottom: 20px;

}

#div1 select{

margin-left : 80px;

margin-top : 10px;

height: 30px;

}

#div1 input{

height: 30px;

}

#div1 div{

width: 300px;

background: lightBlue;

border-bottom: red solid 1px;

}

#div1 div ul li{

list-style-type: none;

padding-left: 10px;

}

function abc(data){

var d = data.weather;

var info = document.getElementById('info');

info.innerHTML = '';

for(var i=0;i

var date = d[i].date;

var day = d[i].info.day;

var night = d[i].info.night;

var tag = '';

tag += '日期：'+date+'

• ';

tag += '

白天天气：'+day[1]+'';

tag += '

白天温度：'+day[2]+'';

tag += '

白天风向：'+day[3]+'';

tag += '

白天风速：'+day[4]+'';

tag += '';

tag += '

• ';

tag += '

夜间天气：'+night[1]+'';

tag += '

夜间温度：'+night[2]+'';

tag += '

夜间风向：'+night[3]+'';

tag += '

夜间风速：'+night[4]+'';

tag += '

';

var div = document.createElement('div');

div.innerHTML = tag;

info.appendChild(div);

}

}

window.onload = function(){

var city = document.getElementById('city');

city.onchange = function(){

document.getElementById('info').innerHTML = '';

}

var btn = document.getElementById('btn');

btn.onclick = function(){

var cityCode = city.value;

var url = 'http://cdn.weather.hao.360.cn/api_weather_info.php?app=hao360&_jsonp=abc&code='+city.value;

var script = document.createElement('script');

script.src = url;

document.body.appendChild(script);

}

}

北京

上海

广州

深圳