以下爲總結，需要詳細學習ajax的同學，由於無法上傳文件，若想下載燕十八的筆記，請移步https://github.com/2997215859/AjaxLeaning/blob/master/Ajax%E5%BD%BB%E5%BA%95%E7%A0%94%E7%A9%B6%E7%AC%94%E8%AE%B0.docx
1、ajax全稱是Asynchronous javascript and xml
2、ajax實現的效果是“頁面不刷新”,比如在一個投票頁面中，點擊投票，然後投票數自動加1
3、ajax的實質是發送http請求，然後接受響應，因此在很多年前，即使沒有ajax也能 實現所謂的“僞ajax”效果，只要最後發送http的請求即可，因此使用img或者frame等其他方法 也可以實現相同的效果
4、實現ajax的過程主要是
①製造對象：由於IE6、7、8的尿性，因此製造http對象的時候要考慮到兼容性
function createXHR() {
//製造xhr
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}else{
return new ActiveXObject("Microsoft.XMLHTTP");
}
}②打開連接
xhr.open("post","./07-ajaxreg.php",true);建議在打開連接之後，同時綁定監聽狀態變化的函數
xhr.onreadystatechange = function(){
//綁定狀態變化，建議在open之後就綁定
if(this.readyState==4 && this.status==200){
//alert(this.responseText);<span style="white-space:pre"> </span>//幹你想幹的事情
}//如果是POST方式，則還需要在請求前設定Content-Type//xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");xhr.send("username="+username+"&email="+"email");<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test2</title>
<script type="text/javascript">
function createXHR() {
//製造xhr
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}else{
return new ActiveXObject();
}
}
function ajaxReg() {
/*1、收集表單的數據
2、打開連接
3、發送數據
4、監聽回調*/
//0、製造xhr
var xhr = new createXHR();
//1、打開異步連接
xhr.open("post","./07-ajaxreg.php",true);
xhr.onreadystatechange = function(){
//綁定狀態變化，建議在open之後就綁定
if(this.readyState==4 && this.status==200){
alert(this.responseText);
}
}
//2、手機表單數據
var username = document.getElementsByName("username")[0].value;
var email = document.getElementsByName("email")[0].value;
//3、發送數據
//alert("username="+username+"&email="+email);
//在發送數據之前還需要設置content-type
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
xhr.send("username="+username+"&email="+"email");
return true;
}
</script>
</head>
<body>
<div id="regres"></div>
<form action="07-ajaxreg.php" method="post" target="regzon" οnsubmit="return ajaxReg()">
<p>用戶名<input type="text" name="username"></p>
<p>郵件地址<input type="text" name="email"></p>
<p><input type="submit" name="submit"></input></p>
</form>
<iframe name="regzon"></iframe>
</body>
</html>以下是測試的後臺文件
<span style="font-family: Arial, Helvetica, sans-serif;"><?php </span><span style="font-family:Arial, Helvetica, sans-serif;">/*filename:07-ajaxreg.php*/</span>print_r($_POST);
?>