7.跨域(访问非同源数据)

1.介绍

  • 由于ajax只能访问同源（同端口，同协议，同域名）的数据，如果需要访问不同源的数据，则需要用到跨域。

  • 跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。 这里说明一下，无法跨域是浏览器对于用户安全的考虑，如果自己写个没有同源策略的浏览器，完全不用考虑跨域问题了。是浏览器的锅，对。 同源策略限制了一下行为： Cookie、LocalStorage 和 IndexDB 无法读取 DOM 和 JS 对象无法获取 Ajax请求发送不出去

2.步骤

  1. 引入script文件
  2. 引入后台php文件
  3. 动态创建script
  4. 创建回调

3.获取淘宝搜索联想字案例

接口

http://suggest.taobao.com/sug?code=utf-8&q=商品关键字&callback=cb

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>跨域基本步骤</title>
	</head>
	<body>
		<div class="box">
			<input type="text" name="" id="keywords" value="" placeholder="请输入关键字" />
			<input type="button" class="btn" name="" id="" value="查询" />
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		window.onload = function() {
			var btn = document.querySelector(".btn");
			var ulbox = document.querySelector(".box ul");
			btn.onclick = function() {
				var keywordVle = document.querySelector("#keywords").value;
				// 1.动态创建script标签
				var script = document.createElement("script");
				// 2.获取地址
				script.src = "http://suggest.taobao.com/sug?code=utf-8&q=" + keywordVle + "&callback=test";
				// 3.回调
				window["test"] = function(data) {
					console.log(data);
					// 遍历二维数组并输出
					var liTag = ""; //创建存储容器
					for (var i = 0; i < data.result.length; i++) {
						var temp = data.result[i]; //存储行
						// console.log(temp);
						var tempSug = temp[0]; //存储二维数组中的一维数组第一个值

						liTag += "<li>" + tempSug + "</li>";
					}
					console.log(liTag);
					ulbox.innerHTML = liTag;

				}; 
				var head = document.querySelector("head");
				head.appendChild(script);
			}
		}
	</script>
</html>

运行效果

4.接下来进行封装

function myAjax(obj) {
	var defaults = {
		type: "get",
		url: "#",
		data: {},
		dataType: "jsonp", //jsonp表示跨域
		success: function(data) {
			console.log(data);
		},
		jsonp: "callback",
		jsonpCallback: "test" //函数名称
	};
	// obj属性覆盖defaults属性
	for (var key in obj) {
		defaults[key] = obj[key];
	}
	var params = "";

	for (var attr in defaults.data) {
		params += attr + "=" + defaults.data[attr] + "&"
	}
	if (params) {
		params = params.substring(0, params.length - 1);
		defaults.url += "?" +"code=utf-8"+"&"+ params;
	}
	defaults.url += "&" + defaults.jsonp + "=" + defaults.jsonpCallback;
	// 动态创建script
	console.log(defaults.url);
	var script = document.createElement("script");
	script.src = defaults.url;
	window[defaults.jsonpCallback] = function(data) {
		defaults.success(data);
	}
	var head = document.querySelector("head");
	head.appendChild(script);
}
posted @ 2021-10-14 00:55  禾耳  阅读(110)  评论(0)    收藏  举报