ajax01.html
用戶端
<pre name="code" class="html"><!DOCTYPE html><!--用戶端--><!--課時46初探瀏覽器原生Ajax介面(1)--><!--使用get方式拿到伺服器資料--><html id="html"><head> <meta charset="utf-8" /> <title>demo</title> <script type="text/javascript" src="jquery-2.1.4.min.js"></script> <script type="text/javascript"> $(function(){ $('button').click(function(){ //建立XHR對象,後面的Ajax操作都是基於這個對象的。 var xhr=new XMLHttpRequest(); xhr.addEventListener('readystatechange',function(){ if (xhr.readyState==4) { //請求完成，將伺服器返回的資料，輸出來。 console.log(xhr.responseText); $('body').append(xhr.responseText); } }); //啟用一個http請求，以備發送,true表示發送非同步（預設），flase發同步請求// xhr.open('get','ajxaa01.html',true);//請求的是靜態檔案，則會講這個檔案內的內容直接返回給用戶端 xhr.open('get','ajax01.php');//在伺服器端執行這個PHP檔案，然後將輸出的內容返回給用戶端。// 發送剛剛設定好的請求 xhr.send(null);// 如果時間超過3秒，則取消請求// setTimeout(function(){// xhr.abort();//取消請求。// },3000); }); }); </script></head><body><button>開始</button></body></html>
ajax01.php
伺服器端
<?php//伺服器端//可以執行各種PHP代碼，各種判斷，以及從資料庫中擷取到資料,返回給用戶端//sleep(5);echo "嘿嘿，這個資料返回給你";?>
ajxaa01.html
伺服器端
<!--伺服器端-->我是一個html檔案!<div>我是div</div>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
