Ajax 跨域传值之 jsonp

原生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="搜索" onclick="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="搜索" onclick="sear();" />
        <ul>

        </ul>
        </body>

Ajax 跨域传值之 jsonp

相关文章