一.Ajax小練習
a.php
<?php
//1.定義字典保存商品信息 key=>value
$products=array("nz"=>array("title"=>"甜美女裝","des"=>"甜美系列","image"=>"images/1.jpg"),
"bb"=>array("title"=>"奢華女包","des"=>"送女友","image"=>"images/2.jpg"),
"tx"=>array("title"=>"鍵盤拖鞋","des"=>"程序員專屬拖鞋","image"=>"images/3.jpg")
);
//2.獲取前端傳遞的參數
$name=$_GET["name"];
//echo $name;
//3.根據前端傳入的key,獲取對應的字典
$product=$products[$name];//取出name對應的字典
//print_r($product);
//4.將小字典中的內容取出來返回給前端
echo $product["title"];
echo "|";//如果標題也有豎線，會引起誤解，前端和後臺交互數據一般用XML或JSON
echo $product["des"];
echo "|";
echo $product["image"];
b.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 300px;
height: 300px;
border: 1px solid #000;
margin: 50px auto;
text-align: center;
background: #ccc;
}
img{
width: 200px;
height: 200px;
display: block;
margin: 10px auto 10px;
border: 1px solid #000;
}
p{
text-align: center;
background: pink;
}
</style>
<script src="d.js"></script>
<script>
window.onload=function(ev){
//1.獲取需要設置的元素
var oTitle=document.querySelector("#title");
var oDes=document.querySelector("#des");
var oImg=document.querySelector("img");//這裏不加#，找這個bug找了好久
//2.獲取所有按鈕
var oBtns=document.querySelectorAll("button");
//3.給所有按鈕添加點擊事件
oBtns[0].onclick=function(){
//4.發送Ajax請求到服務器
Ajax({
type:"get",
url:"a.php",
data:{"name":this.getAttribute("name")},//假如點擊的是第0個按鈕，就把第0個按鈕的名字“女裝”取出來發送給服務器，根據傳過來的name,就可以從大的字典（PHP代碼的前幾行）當中，根據key取到value
timeout:3000,
success:function(xhr){
// alert(xhr.responseText);
var res=xhr.responseText.split("|");//豎線隔開
// console.log(res);
oTitle.innerHTML=res[0];
oDes.innerHTML=res[1];
oImg.setAttribute("src",res[2]);
},
error:function(xhr){
alert(xhr.status);
}
});
}
oBtns[1].onclick=function(){
//
}
oBtns[2].onclick=function(){
//
}
}
</script>
</head>
<body>
<div>
<p id="title">商品標題名稱</p>
<img src="" alt="" >
<p id="des">商品描述信息</p>
<button name="nz">女裝</button>
<button name="bb">包包</button>
<button name="tx">拖鞋</button>
</div>
</body>
</html>
d.js
function obj2str(data) {
/*
{
"userName":"lnj",
"userPwd":"123456",
"t":"3712i9471329876498132"
}
*/
data = data || {}; // 如果沒有傳參, 爲了添加隨機因子,必須自己創建一個對象
data.t = new Date().getTime();
var res = [];
for(var key in data){
// 在URL中是不可以出現中文的, 如果出現了中文需要轉碼
// 可以調用encodeURIComponent方法
// URL中只可以出現字母/數字/下劃線/ASCII碼
res.push(encodeURIComponent(key)+"="+encodeURIComponent(data[key])); // [userName=lnj, userPwd=123456];
}
return res.join("&"); // userName=lnj&userPwd=123456
}
function Ajax(option) {
// 0.將對象轉換爲字符串
var str = obj2str(option.data); // key=value&key=value;
// 1.創建一個異步對象
var xmlhttp, timer;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
// 2.設置請求方式和請求地址
/*
method：請求的類型；GET 或 POST
url：文件在服務器上的位置
async：true（異步）或 false（同步）
*/
if(option.type.toLowerCase() === "get"){
xmlhttp.open(option.type, option.url+"?"+str, true);
// 3.發送請求
xmlhttp.send();
}else{
xmlhttp.open(option.type, option.url,true);
// 注意點: 以下代碼必須放到open和send之間
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(str);
}
// 4.監聽狀態的變化
xmlhttp.onreadystatechange = function (ev2) {
/*
0: 請求未初始化
1: 服務器連接已建立
2: 請求已接收
3: 請求處理中
4: 請求已完成，且響應已就緒
*/
if(xmlhttp.readyState === 4){
clearInterval(timer);
// 判斷是否請求成功
if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
xmlhttp.status === 304){
// 5.處理返回的結果
// console.log("接收到服務器返回的數據");
option.success(xmlhttp);
}else{
// console.log("沒有接收到服務器返回的數據");
option.error(xmlhttp);
}
}
}
// 判斷外界是否傳入了超時時間
if(option.timeout){
timer = setInterval(function () {
console.log("中斷請求");
xmlhttp.abort();
clearInterval(timer);
}, option.timeout);
}
}
二.XML
XML的格式，後端如何返回一個XML的數據給前端，前端接受XML如何處理XML,XML和HTML都是可擴展性語言，但是XML的標籤是可以隨便寫的
1.XML必須有根節點，根標籤是可以隨便寫的，所有的數據都必須寫到根標籤當中
2.如果服務器返回的是xml數據，那在前端不要通過responseText來獲取，要通過responseXML來獲取
3.