![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：只要能正常返回数据就可以, 至少采用哪种格式,根据需求来
Collection
Collection
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>跨域请求</title><style>p {color: lightblue;}</style></head><body><button>跨域请求</button><p></p><script>var btn = document.querySelector('button');// 绑定事件btn.addEventListener('click', get, false);function get() {// 1.创建ajax对象var xhr = new XMLHttpRequest();// 2.监听请求xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {console.log(xhr.responseText);document.querySelector('p').innerHTML = xhr.responseText;}}// 3.配置参数xhr.open("get", "http://phpio.com/0814.php", true);// 4.发送请求xhr.send(null);}</script></body></html>
php脚本
<?php// 同意其他域名发起跨域请求header('Access-Control-Allow-Origin:http://xiaoshang.com');echo '跨域脚本返回的数据';
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>跨域请求-JSONP</title></head><body><button>跨域请求</button><script>function get(deta) {var obj = deta;console.log(obj);var ul = document.createElement('ul');ul.innerHTML += '<li>' + obj.title + '</li>';ul.innerHTML += '<li>' + obj.user.name + '</li>';ul.innerHTML += '<li>' + obj.user.result + '</li>';document.body.appendChild(ul);}var btn = document.querySelector('button');btn.addEventListener('click', function () {// 动态生成script标签发起jsop请求// 1.先创建标签var scr = document.createElement("script");// 设置跨域请求scr.src = "http://phpio.com/JSONP.php?id=3&jsonp=get";// 标签类型scr.type = "text/javascript";// 插入到页面中document.body.appendChild(scr);})</script></body></html>
php脚本
<?php// 先设置编码类型header('content-type:text/html;charset=utf-8');// 获取数据$id = $_GET['id'];// 获取前端的回调函数名，这个必须是url中的最后一个$call = $_GET['jsonp'];$users = [["name" => "PHP", "result" => 80],["name" => "HTML", "result" => 75],["name" => "javascript", "result" => 70]];// 判断请求的的id作为键名是否存在数组中if (array_key_exists(($id - 1), $users)) {$user = $users[$id - 1];}// 返回前端回调函数的参数json数据$json = ["title" => "成绩表", "user" => $user];// 生成js函数调用语句echo $call . '(' . json_encode($json) . ')';
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>跨域请求</title><style>.item {width: 50px;height: 50px;border-radius: 40px;background-color: lightgreen;text-align: center;box-sizing: border-box;padding-top: 15px;margin: 10px;}.item1 {width: 50px;height: 50px;border-radius: 40px;background-color: lightseagreen;text-align: center;box-sizing: border-box;padding-top: 15px;margin: 10px;}</style></head><body><ul><li>item1</li><li>item2</li><li>item3</li></ul><div class='container'><div class='item'>PHP</div><div class='item1'>CSS</div></div><script>// 事件冒泡var lis = document.querySelectorAll("li");document.querySelector("ul").addEventListener("click", function (ev) {// 打印事件绑定者console.log(ev.currentTarget);// 打印事件触发者console.log(ev.target);});// 所以如果要给多个子元素添加事件可以直接给父元素添加同名事件即可var div = document.querySelector(".container");div.addEventListener("mouseover", function (ev) {ev.target.style = "width:200px; transition:all 0.5s ease-out";});div.addEventListener("mouseout", function (ev) {ev.target.style = null;ev.target.style = "transition:all 0.5s ease-out";});</script></body></html>
总结
1.JSONP那里数据用了数组方式书写没用JSON，看起来好像会更清晰点就是不知道这样好不好