原生Ajax 和Jq Ajax

最後更新：2014-08-25 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：style blog http color java os io strong for

　前言：這次介紹的是利用ajax與後台進行資料交換的小例子，所以demo必須通過伺服器來開啟。伺服器環境非常好搭建，從網上下載wamp或xampp，一步步安裝就ok，然後再把寫好的頁面放在伺服器中指定的位置。開啟時，在瀏覽器地址欄輸入 “localhost/指定頁面”或者“127.0.0.1/指定頁面”開啟。

　　下面列出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代碼：

<?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‘]];?>

　　原生ajax：

<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>

　　JQ ajax:

<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>

原生Ajax 和Jq Ajax

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More