AJAX - ??? ?? ???
AJAX - ??? ?? ???
??? ??? ???? open() ???? send() ???? ???? ???.
open() ????? ? ?? ?? ??? ?????.
? ?? ?? ??? ??(GET ?? POST)? ??? ? ???? ???? ?????.
POST? ?? GET? ? ???? ??? ???? ??? ?????.
?, ??? ?? ???? POST ??? ??? ??? ????.
??? ??(??? ?? ?? ?????? ????)? ???? ??? ??? ???? ?? ? ?? ??(POST?? ??? ?? ??? ??) ??? ??? ?? ? ? ? ?? ??? ??? ?? POST? GET?? ? ????? ??????. ? ?? ????? ??? ????? URL? ?????. ??? .txt ? .xml? ?? ?? ??? ????? ?? ???? ??? ? ????. .asp ? .php(??? ?? ??? ?? ???? ??? ???? ??)).
? ?? ????? ??? ????(true(???) ?? false(??))?? ????? ?? ?????.
send() ???? ??? ??? ????. HTML ??? ASP ??? ??? ????? ??? ???? ??? ??? ????.xmlHttp. send(null);
GET ?? POST?
POST? ?? GET? ? ???? ??? ???? ??? ?????.
?, ??? ?? ???? POST ??? ??? ??? ????.
??? ??(??? ?? ?? ?????? ????)? ???? ??? ??? ???? ?? ? ?? ??(POST?? ??? ?? ??? ??) ??? ??? ?? ? ? ? ?? ??? ???? ???? POST? GET
??? GET ???? ? ????? ??? ? ????.
xmlhttp.open("GET","demo_get.html",true);
xmlhttp.send();??? ??? ?? ? ????.
?? ????? URL? ?? ID? ?????:
xmlhttp.open("GET","demo_get.html?t=" + Math.random(),true);
xmlhttp.send();GET ???? ?? ??? ???? URL? ??? ?????:
xmlhttp.open("GET","demo_get2.html?fname=Henry&lname=Ford",true);
xmlhttp.send();?? ??:
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">請求數據</button>
<div id="myDiv"></div>
</body>
</html>??? POST ??:
xmlhttp.open("POST","demo_post.html",true);
xmlhttp.send();HTML ??? ?? ???? POST?? ?? ?? setRequestHeader()? ???? HTTP ??? ?????. ?? ?? send() ???? ???? ???? ?????
xmlhttp.open("POST","ajax_test.html",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");??:
setRequestHeader(header,value) ??? HTTP ??? ?????.
header: ??? ??? ?????.
value: ??? ?? ?????.
?? ??:
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>
</body>
</html>url - ??? ?? ??
open() ???? url ?? ??? ?????. ??? ?? ??:
xmlhttp.open("GET","ajax_test.html",true);
??? .txt, .xml ?? ?? ???? ? ?? ??? ??? ? ????. .asp ? .php? ?? ??(?? ? ???? ?? ???? ??? ??? ? ??? ?)
Async - ??? ?????
AJAX? ??? JavaScript ? XML? ?????.
XMLHttpRequest ??? AJAX? ????? ?? open() ???? async ?? ??? true? ???? ???.
xmlhttp.open("GET","ajax_test.html",true);
? ??? ?? ????? ??? ??? ??? ?? ? ?????. ???? ???? ?? ???? ??? ?? ????. AJAX ???? ?? ?? ??????? ????? ??? ? ?????.
AJAX? ???? JavaScript? ??? ??? ??? ??? ???
?? ??? ???? ?? ?? ????? ?????. ??? ???? ??? ?????.
Async=true
??? ?? ? =true, onreadystatechange ???? ?? ??? ?? ???? ???? ??? ??????:
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();Async = false
async=false? ????? open() ???? ? ?? ????? false? ??????:
xmlhttp .open( "GET","test1.txt",false);
async=false? ???? ?? ???? ??? ?? ?? ??? ???? ?????.
?????. JavaScript? ??? ???? ?? ?? ??? ??? ??? ?????. ??? ???? ??? ??? ??????? ????? ?????.
??: async=false? ???? ?? onreadystatechange ??? ???? ???. send() ? ?? ??? ????.
xmlhttp.open("GET","ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;?:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>實例</title>
<script>
window.onload = function() {
var oBtn = document.getElementById('btn');
oBtn.onclick = function() {
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
xhr.open('get','new.php',true); //引入new.php文件
xhr.send();
xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
//alert( xhr.responseText ); 后端傳來的格式是一個數組里面很多條json 自己可以測試下
var data = JSON.parse( xhr.responseText ); // 將后臺獲取的內容轉為json類型 每一個json里面有兩個鍵：title和date
var oUl = document.getElementById('ul1'); //獲取顯示新聞列表的節(jié)點
var html = '';
for (var i=0; i<data.length; i++) { // 循環(huán)所有的json數據，并把每一條添加到列表中
html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>';
}
oUl.innerHTML = html; //把內容放在頁面里
} else {
alert('出錯了,Err：' + xhr.status);
}
}
}
}
}
</script>
</head>
<body>
<input type="button" value="按鈕" id="btn" />
<ul id="ul1"></ul>
</body>
</html>?.php ?? ??? :
<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);
$news = array(
array('title'=>'女總理默克爾滑雪時摔倒 骨盆斷裂','date'=>'2014-1-6'),
array('title'=>'駐英外交官撰文互稱對方國家為"伏地魔"','date'=>'2014-1-6'),
array('title'=>'安倍:望與中國領導人會面 中方:你關閉了大門','date'=>'2014-1-6'),
array('title'=>'揭秘臺灣駐港間諜網運作 湖北宜昌副市長被查','date'=>'2014-1-6'),
array('title'=>'：嫦娥三號是貨真價實的中國創(chuàng)造','date'=>'2014-1-6'),
);
echo json_encode($news);
?>
