<!-- 使用原生Ajax 和 $.ajax 實現局部刷新的過程 -->
<!-- 封裝通用XMLHttpRequest對象 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>創建XMLHttpRequest</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 80vw;
height: 75vh;
margin: auto;
background: #4785ab;
overflow: hidden;
position: relative;
}
div a{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}
div a img{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
display: block;
width: 98%;
height: 96%;
}
</style>
<script type='text/javascript' src="js/jquery.js"></script>
</head>
<body>
<div class="banner"></div>
<div class="container"></div>
<script type="text/javascript">
// 如何使用Ajax?
// 要完整實現一個AJAX異步調用和局部刷新，通常需要三個步驟：
// 一，創建XMLHttpRequest對象，也就是創建一個異步調用對象。
// 二，創建一個新的HTTP請求，並指定該HTTP請求的方法，URL。
// 三，設置響應HTTP請求狀態變化的函數。
// 四，發送HTTP請求
// 請求發往服務器--> 服務器根據請求生成響應--> 傳回給xhr對象
// 語法：send(string) 將請求發送到服務器端，string僅用於POST請求
// 注意事項：僅POST請求時可以傳入參數，不需要則發送null,調用send方法，請求被發往服務器。
// 五，獲取異步調用返回的數據
// 在收到相應后相應數據會填充到xhr對象的屬性，有四個相關屬性會被填充：
// 1，responseText 從服務器進程返回數據的字符串形式
// 2，responseXML 從服務請進程返回的DOM兼容的文檔數據對象
// 3，status 從服務器返回數字代碼，如：404(未找到)，200(已就緒)
// 4，status Text 伴隨狀態碼的字符串信息
// 六，使用JavaScript和DOM實現局部刷新
//創建一個新的HTTP請求
// 語法：open(method,url,async);
// 功能：創建HTTP請求，規定請求的類型，URL及是否異步處理請求
// method: 請求類型 GET 或者 POST，不指定時默認GET。
// GET：更簡單，更快，大部分情況下可以使用，有數據量限制，不用考慮安全性，不傳參數。
// POST: 可以傳string參數，以下情況必須使用POST
// 1，無法使用緩存文件(更新服務器上的文件或數據庫)
// 2，向服務器發送大量數據(POST沒有數據量限制)
// 3，發送包含未知字符的用戶輸入時，POST比GET更穩定更可靠。(考慮安全性問題)
// url: 文件在服務器上的位置，必須指定的參數，該文件可以是任何類型的文件,
// 如：.txt .xml 服務器腳本(.asp .php),在傳回相應之前，在服務器上執行任務。
// async: true(異步)或false(同步)
// 同步處理：提交請求--> 等待服務器處理--> 處理完畢返回(期間客戶端瀏覽器不能做任何事情)
// 說白了就是要排隊等候，一個一個處理。
// false: 客戶端要等待服務器返回消息后才能執行其他操作。
// 異步處理：請求通過事件處理--> 服務器處理(瀏覽器可以做其他事情)--> 處理完畢(不用返回)
// true: 默認值，客戶端不用等待服務器的響應，可以直接做其他事情。
//
// xmlhttp就是XMLHttpRequest的實例
// 使用POST請求時需要做的一個動作：
// 如果需要像HTML表單那樣POST數據，需要使用setRequestHeader()來添加HTTP頭，
// 然后在send()方法規定希望發送的數據。
// 語法：xmlhttp.setRequestHeader(header,value);
// 使用： xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
//注意事項：
//open不會向服務器發送真正請求，它相當於初始化請求並准備發送，
//只能向同一個域中使用相同協議和端口的URL發送請求，否則會因為安全原因報錯。
// 一，創建XMLHttpRequest對象
//--------兩種方式封裝通用的XMLHttpRequest對象-----------
//第一種，比較全面點，也復雜點。
//封裝通用的xhr對象，兼容各個版本
/*function createXHR(){
//判斷瀏覽器是否將XMLHttpRequest作為本地對象實現，針對IE7,chrome,firefox,opera等等
if (typeof XMLHttpRequest!='undefined') {
return new XMLHttpRequest();//返回XMLHttpRequest對象
}else if(typeof ActiveXObject!='undefined'){
//將所有可能出現的版本都放在數組中進行遍歷
var xhrArr=['Mrcrosoft.XMLHTTP','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP.2.0'];
//遍歷XMLHttpRequest對象
var len=xhr.length,xhr;
for (var i = 0; i < len; i++) {
try{
//創建XMLHttpRequest對象
xhr=new ActiveXObject(xhrArr[i]);
break;
}catch(e){
//如果拋出錯誤，那么說明不支持該版本，則不進行任何操作，直到找到合適版本即可。
}
}
return xhr;
}else{
throw new Error("您的瀏覽器不支持XMLHttpRequest！");
}
}
var xhr=createXHR();
console.log(xhr);//輸出XMLHttpRequest，則創建成功，否則失敗*/
//第二種，相對簡單，但是也可以滿足主流瀏覽器的使用。
//封裝通用的XMLHttpRequest對象
function createXHR(){
var xhr;
if (window.XMLHttpRequest) {
//如果支持XMLHttpRequest，則實例化對象
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}
//創建XMLHttpRequest實例
var xhr=createXHR();
var data=null;//用於接收服務器返回的數據
//console.log(xhr);//輸出XMLHttpRequest則創建成功，否則失敗
//響應XMLHttpRequest對象狀態變化的函數。
//onreadystatechange 在 readystatechange屬性值發生改變時觸發事件
xhr.onreadystatechange=function(){
//xhr.readyState 不同值的意思：
// 0 沒有初始化，沒有用send方法
// 1 已經調用send方法正在發送請求
// 2 send方法執行完成，
// 3 正在解析響應的內容
// 4 異步調用成功，響應內容解析完成
//異步調用成功，響應內容解析完成，意為着可以在客戶端調用
if (xhr.readyState===4) {
// xhr.status<=200 && xhr.status<300 表示異步調用成功，即數據交換是成功的
// xhr.status===304 表示請求資源沒有被修改，可以使用瀏覽器緩存(說明之前已經請求成功過，且請求資源沒有改變過)
if ((xhr.status>=200 && xhr.status<300) || xhr.status===304) {
//獲取服務器返回的數據
// console.log(xhr.responseText);
//eval()是原生javascript代碼進行string轉換成 object對象
//而這里是對JSON數據進行轉換
//eval()用於把string(json數據)字符串轉化為對象，
//就可以使用 obj.屬性 進行取值了。
//在轉化時，一定要在json數據前后加上小括號，這樣轉化成一個對象，否則報錯。
/*data=eval("("+xhr.responseText+")");
console.log(data.code);
console.log(data.people);//返回的是一個數組對象，通過遍歷和index來訪問其中的值
console.log(data.people[3]);//返回數組第四個值：{name: "weidejun", age: "31"}*/
//以下是JSON的兩個互轉的方法：JSON.parse(),JSON.stringify() 這兩個方法互為逆轉。
data=JSON.parse(xhr.responseText);
// console.log(data);//返回JSON數據的一個數組[...]
// console.log(data.people);//返回people屬性值的一個數組
//將JSON.parse(xhr.responeText)返回的原生javascript值
//逆轉會JSON字符串，即序列化為JSON字符串。
// console.log(JSON.stringify(data));
//把返回的服務器數據渲染到DOM對象中
renderDataToDom();
}
}
}
//以下是使用GET方法進行發送請求
//創建HTTP請求，用get方法傳參數直接寫在url后面，?name=zs&psd=1234 如下：
xhr.open('get','./js/slider.json',true);
//發送請求，使用get()方法不需要在send中傳遞參數，那么直接給一個null即可。
xhr.send(null);//如果，使用get方法，嘗試使用xhr.send()看看能不能成功執行。
//把返回的服務器JSON數據渲染到DOM對象中
function renderDataToDom(){
var pictures=data.picture;
var len=pictures.length;
var str="";
var div=document.getElementsByTagName('div')[0];
for (var i = 0; i < len; i++) {
// console.log(pictures[i]);
console.log(pictures[i].linkUrl);
console.log(pictures[i].picUrl);
str+="<a href='"+pictures[i].linkUrl+"'><img src='"+pictures[i].picUrl+"'></a>";
div.innerHTML=str;
}
}
/*//以下是使用POST方法進行發送數據
//創建HTTP請求，用post方法傳參數時，把參數寫到send({name:'zhangsan',psd:'123456'})方法中的，
//如果不需要傳參數，那么在直接：xhr.send(null)，即可。如下：
xhr.open('get','./js/slider.json?name=zhangsan&psd=1234567',true);
//發送請求
xhr.send({name:'zhangsan',psd:'123456'});
//設置http頭部信息
xhr.setRequestHeader('Content-type','application/x-www.x-www-form-urlencoded');*/
//以下是jquery封裝好的$.ajax方法，簡單好用，嘗試用自己封裝。
$.ajax({
url:"./js/slider.json", //請求地址
type:"get", //請求方式
async:true, //異步同步
dataType:"json", //獲取數據格式
success:function(imgData){ //請求成功后的回調函數
JSrenderDataToDom(imgData)
// console.log(imgData.picture);
}
})
function JSrenderDataToDom(data){
var str="";
$.each(data.picture, function(index,obj) {
str="<a href='"+obj.linkUrl+"'><img src='"
+obj.picUrl+"'/></a>";
$(".container").html(str);
});
}
</script>
</body>
</html>
<!--
1，在使用Ajax時，必須先安裝MAMP(即：Apache Server 和 MySQL Server)
2，配置Web Server 網頁的默認訪問路徑，同時配置本地端口號：80
3，編寫Ajax頁面時，頁面必須放在該默認路徑下面文件夾里面才可以正常訪問
4，且訪問時，不能直接點擊文件打開，而是通過MAMP軟件頁面的---》
Open WerStart page 來打開 如：http://localhost:81 等價於：http://localhost:81/index.html
訪問其他頁面：http://localhost:81/xxx.html
5，打開頁面后，可以使用開發者工具---Network---All---刷新頁面
---點擊localhost---查看各種參數 如；
Request URL: http://localhost:81/ 請求地址
Request Method: GET 請求的方法
Status Code: 200 OK 請求的狀態
Remote Address: 127.0.0.1:81 遠程訪問地址
xmlhttprequst有以下兩個方法：
1.open() 方法：open() 有三個參數。第一個參數定義發送請求所使用的方法,第二個參數規定服務器端腳本的URL，第三個參數規定應當對請求進行異步地處理。xmlHttp.open("GET","test.php",true);
2.send() 方法：send() 方法將請求送往服務器。如果我們假設 HTML 文件和 PHP 文件位於相同的目錄，那么代碼是這樣的：xmlHttp.send(null);
服務器返回狀態和狀態碼：
200 OK
請求正常處理完畢
204 No Content
請求成功處理，沒有實體的主體返回
206 Partial Content
GET范圍請求已成功處理
301 Moved Permanently
永久重定向，資源已永久分配新URI
302 Found
臨時重定向，資源已臨時分配新URI
303 See Other
臨時重定向，期望使用GET定向獲取
304 Not Modified
發送的附帶條件請求未滿足
307 Temporary Redirect
臨時重定向，POST不會變成GET
400 Bad Request
請求報文語法錯誤或參數錯誤
401 Unauthorized
需要通過HTTP認證，或認證失敗
403 Forbidden
請求資源被拒絕
404 Not Found
無法找到請求資源（服務器無理由拒絕）
500 Internal Server Error
服務器故障或Web應用故障
503 Service Unavailable
服務器超負載或停機維護 -->
還差兩個問題沒解決：
1，自己封裝$.ajax方法
2，跨域
<!-- 什么是JSON?
1，JSON： JavaScript Object Nonation 全稱：JavaScript對象表示法
2，是一種數據交換格式，不是編程語言，用於讀取結構化數據
3，2001年提出，目的是取代繁瑣笨重的XML格式
JSON語法可以表示以下三種類型的值：
一，簡單值：
1，用法與JavaScript用法相同，可以是：字符串，數值，布爾值，null
字符串必須使用雙引號，不能使用單引號，數值必須是十進制，
不能使用NaN和Infinify，還有undefined值。
二，對象：
1，對象是一種復雜的數據類型，表示一組有序的鍵值對，而每個鍵值對中的值
可以是簡單值，也可以是復雜數據類型的值。
2，JSON中對象的鍵名必須放在雙引號里面，因為JSON不是javascript語句，
所以沒有末尾的分號。
3，對於同一個對象中不應該出現兩個同名屬性
三，數組：
1，數組是一種復雜數據類型，表示一組有序的值的列表，
可以通過數值索引來訪問其中的值。
2，數組或對象最后一個成員的后面，不能加逗號。 -->
<!-- ajax返回的JSON數據轉化為object對象進行數據操作的方法：
1，JSON.parse(服務器返回的數據) 將JSON字符串轉化為Object對象
2，JSON.stringify(服務器返回的數據) 將一個值轉換為字符串，該字符串符合JSON格式，
並且可以被JSON.parse(服務器返回的數據)方法還原。
JSON總結：
1，JSON之所以流行，因為可以把JSON數據結構解析為有用的javascript對象。
2，JSON對象的兩個方法：JSON.stringify(服務器返回的數據) 和 JSON.parse(服務器返回的數據) 分別用於：
JSON.stringify(服務器返回的數據) 把javascript對象序列化為JSON字符串
JSON.parse(服務器返回的數據) 把JSON字符串解析為原生的javascript值
3，javascript的eval(服務器返回的數據)類似於JSON.parse(服務器返回的數據),可以將JSON字符串轉換為JSON對象，
但是，eval()可以執行不符合JSON格式的代碼，有可能包含惡意代碼，所以少用。
// 如何使用Ajax?
// 要完整實現一個AJAX異步調用和局部刷新，通常需要三個步驟：
// 一，創建XMLHttpRequest對象，也就是創建一個異步調用對象。
// 二，創建一個新的HTTP請求，並指定該HTTP請求的方法，URL。
// 三，設置響應HTTP請求狀態變化的函數。
// 四，發送HTTP請求
// 請求發往服務器 服務器根據請求生成響應 傳回給xhr對象
// 語法：send(string) 將請求發送到服務器端，string僅用於POST請求
// 注意事項：僅POST請求時可以傳入參數，不需要則發送null,調用send方法，請求被發往服務器。
// 五，獲取異步調用返回的數據
// 在收到相應后相應數據會填充到xhr對象的屬性，有四個相關屬性會被填充：
// 1，responseText 從服務器進程返回數據的字符串形式
// 2，responseXML 從服務請進程返回的DOM兼容的文檔數據對象
// 3，status 從服務器返回數字代碼，如：404(未找到)，200(已就緒)
// 4，status Text 伴隨狀態碼的字符串信息
// 六，使用JavaScript和DOM實現局部刷新
=============以下六個步驟就是使用原生的javascript編寫的ajax過程=============
一：//封裝通用的XMLHttpRequest對象
function createXHR(){
var xhr;
if (window.XMLHttpRequest) {
//如果支持XMLHttpRequest，則實例化對象
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}
三：xhr.onreadystatechange=function(){
//異步調用成功，響應內容解析完成，意為着可以在客戶端調用
if (xhr.readyState===4) {
// xhr.status<=200 && xhr.status<300 表示異步調用成功，即數據交換是成功的
// xhr.status===304 表示請求資源沒有被修改，可以使用瀏覽器緩存(說明之前已經請求成功過，且請求資源沒有改變過)
if ((xhr.status>=200 && xhr.status<300) || xhr.status===304) {
五，獲取異步調用返回的數據
//以下是JSON的兩個互轉的方法：JSON.parse(),JSON.stringify() 這兩個方法互為逆轉。
data=JSON.parse(xhr.responseText);
六： //封裝渲染函數，把返回的服務器數據渲染到DOM對象中
renderDataToDom();
}
}
}
習慣把 二 和 四 寫在一起
二：//以下是使用GET方法進行發送請求
//創建HTTP請求，用get方法傳參數直接寫在url后面，?name=zs&psd=1234 如下：
xhr.open('get','./js/slider.json',true);
四：//發送請求，使用get()方法不需要在send中傳遞參數，那么直接給一個null即可。
xhr.send(null);//如果，使用get方法，嘗試使用xhr.send()看看能不能成功執行。
六：//把返回的服務器JSON數據渲染到DOM對象中
function renderDataToDom(){
var pictures=data.picture;
var len=pictures.length;
var str="";
var div=document.getElementsByTagName('div')[0];
for (var i = 0; i < len; i++) {
// console.log(pictures[i]);
console.log(pictures[i].linkUrl);
console.log(pictures[i].picUrl);
str+="<a href='"+pictures[i].linkUrl+"'><img src='"+pictures[i].picUrl+"'></a>";
div.innerHTML=str;
}
}
===========以下是jquery封裝好的$.ajax方法，簡單好用，嘗試自己封裝=============
//以下是jquery封裝好的$.ajax方法，簡單好用，嘗試用自己封裝。
$.ajax({
url:"./js/slider.json", //請求地址
type:"get", //請求方式
async:true, //異步同步
dataType:"json", //獲取數據格式
success:function(imgData){ //請求成功后的回調函數
JSrenderDataToDom(imgData)
// console.log(imgData.picture);
}
})
function JSrenderDataToDom(data){
var str="";
$.each(data.picture, function(index,obj) {
str="<a href='"+obj.linkUrl+"'><img src='"
+obj.picUrl+"'/></a>";
$(".container").html(str);
});
} -->
========以下是xxx.json實例==========
{
"code":0,
"picture":[
{
"linkUrl":"https://www.baiud.com",
"picUrl":"images/1.jpg"
},
{
"linkUrl":"https://www.baiud.com",
"picUrl":"images/2.jpg"
},
{
"linkUrl":"https://www.baiud.com",
"picUrl":"images/3.jpg"
},
{
"linkUrl":"https://www.baiud.com",
"picUrl":"images/4.jpg"
},
{
"linkUrl":"https://www.baiud.com",
"picUrl":"images/5.jpg"
},
{
"linkUrl":"https://www.baiud.com",
"picUrl":"images/6.jpg"
},
{
"linkUrl":"https://www.baiud.com",
"picUrl":"images/7.jpg"
}
]
}
==========================
