ホームページ > 記事 > ウェブフロントエンド > Js を使用して遅延読み込みとクロスドメインを実装するための実装手順
Js を使用して遅延読み込みとクロスドメインを実装するための実装手順
- php中世界最好的语言オリジナル
- 2017-12-02 10:04:121859ブラウズ
今日は、javascriptを使用して遅延読み込みとクロスドメインを実装する方法を説明します。遅延読み込みとクロスドメインとは何ですか?遅延読み込みとクロスドメインを実装する際に注意すべき点は何ですか?次に、Js を使用して遅延読み込みとクロスドメインを実装する手順を紹介します
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>跨域</title>
<script src="ajax.js"></script>
<script>
getAJAX(function(data){
console.log(data);
},"http://10.9.156.51:8086/API/article/add.aspx");
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>查询数据</title>
<style>
#container{
width: 992px;
margin: 20px auto;
}
th,td{
background:#fff;
font-size:14px;
height: 30px;
text-align: center;
"微软雅黑";
}
a{
color:#00468C;
text-decoration: none;
}
a:hover{
color:#00468C;
text-decoration: underline;
}
.even{
background:#ff6600;
}
#cover{
position: absolute;
left: 0;
top: 0;
width:100%;
height: 100%;
background: #000;
opacity:0.6;
filter:alpha(opacity=60);
display: none;
}
#updateform{
width:300px;
height: 300px;
border:solid 1px #CCC;
position: absolute;
left:50%;
margin-left: -150px;
top:50%;
margin-top: -200px;
display: none;
background: #fff;
}
#updateform h3{
display: block;
border-bottom:solid 1px #CCC;
border-bottom:solid 1px #CCC;
height: 38px;
line-height: 38px;
background: #ff6600;
margin: 0;
"">微软雅黑;
color:#fff;
font-size: 16px;
}
#updateform form div{
padding-top: 10px;
}
</style>
<script src="ajax.js"></script>
<script>
function createData(b){
var str = "";
for(var i = 2; i < b.length; i++){
var css = "";
if(i % 2 == 0){
css = "even"
}
str += "<tr>"
+ "<td class='"+css+"'>"+b[i].ID+"</td>"
+ "<td class='"+css+"'>"+b[i].ATitle+"</td>"
+ "<td class='"+css+"'>"+b[i].AClickCount+"</td>"
+ "<td class='"+css+"'>"+b[i].ATime+"</td>"
+ "<td class='"+css+"'>"
+ "<a href=\"javascript:;\" onclick='updateData(this)'>修改</a> | <a href=\"javascript:;\" onclick='delDOM(this)'>删除</a>"
+ "</td>"
+ "</tr>";
}
var html = "<table id=\"tb1\" cellspacing=\"1\" style=\"width:990px; background:#000;\">"
+ "<tr>"
+ "<th>编号</th>"
+ "<th>标题</th>"
+ "<th>点击量</th>"
+ "<th>发布时间</th>"
+ "<th>操作</th>"
+ "</tr>"
+ str
+ "</table>";
container.innerHTML = html;
}
window.onload = function(){
var url = "../../API/article/get.aspx";
getAJAX(function(data){
createData(data);
},url);
}
function delDOM(obj){
var tb1 = document.getElementById("tb1");
var id = obj.parentNode.parentNode.children[0].innerHTML;
getAJAX(function(data){
if(data.result == "ok"){
tb1.children[0].removeChild(obj.parentNode.parentNode);
}
},"../../API/article/del.aspx?id="+id+"");
}
function updateData(obj){
var cover = document.getElementById("cover");
var updateform = document.getElementById("updateform");
console.log(cover);
cover.style.display = "block";
updateform.style.display = "block";
var atitle = obj.parentNode.parentNode.children[1].innerHTML;
var clickcount = obj.parentNode.parentNode.children[2].innerHTML;
var id = obj.parentNode.parentNode.children[0].innerHTML;
var form = document.forms[0];
form.elements[0].value = atitle;
form.elements[1].value = clickcount;
form.elements[2].onclick = function(){
var xhr = createXHR();
xhr.open("POST","../../API/article/update.aspx",true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
var data = eval("("+xhr.responseText+")");
if(data.result == "ok"){
updateform.style.display = "none";
cover.style.display = "none";
obj.parentNode.parentNode.children[1].innerHTML = form.elements[0].value;
obj.parentNode.parentNode.children[2].innerHTML = form.elements[1].value;
// var url = "../../API/article/get.aspx";
// getAJAX(function(data){
// createData(data);
// },url);
}
}
}
}
xhr.send("atitle="+form.elements[0].value+"&aclickcount="+form.elements[1].value+"&id="+id+"");
}
}
</script>
</head>
<body>
<div id="cover"></div>
<div id="updateform">
<h3>修改数据</h3>
<form>
<div>标 题：<input type="text"></div>
<div>点击量：<input type="text"></div>
<div><input type="button" value="保存数据"></div>
</form>
</div>
<div id="container">
</div>
</body>
</html>これらの事例を読んだ後は、方法を習得したと思います。さらに興味深い情報については、の他の関連記事に注目してください。 PHP中国語ウェブサイトです！
関連書籍:
HTML Web ページのレイアウトにおける div と span の違いは何ですか
以上がJs を使用して遅延読み込みとクロスドメインを実装するための実装手順の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：AJAXの一般的な構文は何ですか次の記事：AJAXの一般的な構文は何ですか