원생 Ajax와 jQuery Ajax의 차이점 예시 분석
다음은 demo의 HTML, PHP, 원생 ajax, jq ajax 코드를 열거합니다.
HTML 코드:
<!doctype html>
<html>
<head>
<title>ajax </title>
<meta charset='utf-8' />
<link rel="stylesheet" type="text/css" href="css/common.css" />
<style type="text/css">
.main{height:400px;width:800px;margin:100px auto 0;border:1px solid #000;}
.list{height:400px;width:200px;float:left;background:#ddd;}
.inf{height:400px;width:600px;float:right;background:#ccc;text-align:center;}
.list li{width:200px;text-align:center;margin:50px 0 0;font-size:24px;cursor: pointer;
}
.inf img{width:360px;height:270px;margin:15px auto;}
.inf p{width:580px;text-align:left;text-indent:2em;font-size:14px;margin:0 10px;}
</style>
</head>
<body>
<div class='main'>
<div class='list' id='list'>
<ul>
<li name='spring' id='spring'> </li>
<li name='summer' id='summer'> </li>
<li name='fall' id='fall'> </li>
<li name='winter' id='winter'> </li>
</ul>
</div>
<div class='inf' id='inf'>
<!-- -->
</div>
</div>
</body>
<script type="text/javascript" charset="utf-8" src="js/jQuery.js"></script>
</html>
<?php
$details = array (
'spring' => "<img src='images/spring.jpg' alt='' /><p> ， </p>",
'summer' => "<img src='images/summer.jpg' alt='' /><p> ， </p>",
'fall' => "<img src='images/fall.jpg' alt='' /><p> ， </p>",
'winter' => "<img src='images/winter.jpg' alt='' /><p> ， </p>"
);
echo $details[$_REQUEST['LiName']];
?>
<script type="text/javascript">
var lis = document.getElementById('list').getElementsByTagName('li');
window.onload = initPage;
function initPage() {
for (var i=0; i<lis.length; i++) {
txt = lis[i];
txt.onclick = function () {
getDetails(this.id);
}
}
}
function creatRequest() {
try {
request = new XMLHttpRequest();
}
catch (tryMS) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (otherMS) {
try {
request = new ActiveXObject("Miscrosoft.XMLHTTP");
}
catch (failed) {
request = null;
}
}
}
return request;
}
function getDetails(itemName) {
request = creatRequest();
if (request == null) {
alert(' ')
return;
}
var url = "getDetails.php?LiName="+escape(itemName);
request.open("GET",url,true);
request.onreadystatechange = displayDetails;
request.send(null);
}
function displayDetails() {
if (request.readyState == 4) {
if (request.status == 200) {
detailDiv = document.getElementById("inf");
detailDiv.innerHTML = request.responseText;
}
}
}
</script>
<script type="text/javascript">
$('#list li').click ( function () {
$.ajax({
type:'GET',
data:'',
url:"getDetails.php?LiName="+this.id,
success:function(data){
$('#inf').html(data);
},
dataType:'text',
error:function (){
alert(" ！");
}
})
});
</script>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jquery가 사용되는 루트 디렉토리 이하, 모든 파일을 표시하는 명령운영중인 웹 사이트에서 JQuery 버전을 업데이트하기 위해 영향 범위를 확인하는 작업이 있으며 jQuery 코드가 작성된 파일을 모두 파악해야 했으므로 여기에 메모를 둡니다. jQuery의 코드는 $( 와 jQue...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
