Ajax跨域与使用jQuery方法通过Ajax调用第三方接口(智能搜索提示)案例

跨域

一、同源策略

    同源策略是浏览器的一种安全策略,所谓同源地址指的是请求URL地址中的
协议、域名和端口都相同,只要其中之一不同就是跨域;
    同源策略主要是为了保证浏览器的安全性,在同源策略下浏览器不允许ajax
跨域获取服务器数据;

二、跨域

    跨域指从一个域名网页去请求另一个域名的资源;
    跨域可以实现同一个团体内,不同子域间相互访问;

三、百度智能搜索提示案例

案例截图
Ajax跨域与使用jQuery方法通过Ajax调用第三方接口(智能搜索提示)案例_第1张图片
代码所用到的是百度智能搜索提示时的第三方接口


<body>
		<div id="container">
			<input type="text" name="keyword" id="keyword">
			<input type="button" value="搜索" id="query">
			<div id="info">div>
		div>
body>
<script src="jquery-1.12.2.js"></script>
<script>
	$(function(){
     
		$("#keyword").keyup(function(){
     
			var kw = $(this).val();
			$.ajax({
     
				url:'https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=30963,1453,31169,21114,31186,31228,30824,31163,22158&wd=',
				jsonp:'cb',
				data:{
     wd:kw},
				dataType:'jsonp',
				success:function(data){
     
					var sug = data.s;
					var tag = '
    '; $.each(sug,function(i,e){ tag += '
  • '+e+'
  • '
    ; }); tag += '
'
; $("#info").html(tag); $("#info").find('li').hover(function(){ $(this).css('backgroundColor','lightgray'); },function(){ $(this).css('backgroundColor','white'); }); } }); }); }); </script>

你可能感兴趣的:(jquery,ajax,jsonp)