原生JAVASCRIPT 用Ajax 跨域传值
<script>
var xhr = new XMLHttpRequest()
function sear(){
var cont = document.getElementsByTagName('input')[0].value;
var url = 'http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q='+ cont +'&callback=list';
var scr = document.createElement('script');
scr.setAttribute('src',url) //访问google 这个地址时 返回一个js代码 是一个回调函数 然后参数是查询出来的json 格式对象 引用
scr.setAttribute('type','text/javascript');//引用这个js地址就相当于把该js代码 放到本地 然后我们调用它 一调用它就相当于执行该函数
document.getElementsByTagName('head')[0].appendChild(scr)
/*xhr.open('get',url);
xhr.onreadystatechange = function (){
if(xhr.readyState == 4){
alert(xhr.responseText)
}
}
xhr.send(null)*/ //这里的ajax需要用 如果在jquery里面就直接有dataType:JSONP 可以直接返回jsonp
}
function list(res){ //回调函数
var data = res.responseData.results
var len = data.length
var ulobj = document.getElementsByTagName('ul')[0]
for(var i=0;i<len;i++){
var liobj = document.createElement('li')
var pobj = document.createElement('p')
var aobj = document.createElement('a')
aobj.textContent = data[i].title
aobj.href=data[i].url
pobj.textContent = data[i].content
liobj.appendChild(aobj)
ulobj.appendChild(liobj)
ulobj.appendChild(pobj)
}
}
</script>
</head>
<body>
<h1>jsonp完成跨域请求,调用google的搜索结果</h1>
<h1>百狗度超级搜索引擎</h1>
<input type="text" name="wd" />
<input type="submit" value="搜索" οnclick="sear();" />
<ul>
</ul>
</body>
利用jquery 相比
短短几行就可以
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function sear(){
var cont = $('input:text:first').val();
var url = 'http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=' + cont;
$('ul').empty();
$.ajax({dataType:'jsonp',url:url,success:function (data){
//console.log(data) //很好用的一个记录数据的代码
var rs = data.responseData.results;
var len = rs.length
for(var i =0;i<len;i++){
var aobj = $('<a>'+ rs[i].title +'</a>').attr('href',rs[i].url)
var pobj = $('<p>'+ rs[i].content +'</p>')
$('<li></li>').append($(aobj)).appendTo($('ul'))
$(pobj).appendTo($('ul'))
}
}})
}
</script>
</head>
<body>
<h1>jsonp完成跨域请求,调用google的搜索结果</h1>
<h1>百狗度超级搜索引擎</h1>
<input type="text" name="wd" />
<input type="submit" value="搜索" οnclick="sear();" />
<ul>
</ul>
</body>