以下是正文。
同步和異步
同步和異步的概念
-
同步：必須等待前面的任務完成，才能繼續后面的任務。
-
異步：不受當前任務的影響。
拿排隊舉例：
-
同步：在銀行排隊時，只有等到你了，才能夠去處理業務。
-
異步：在排隊的時候，可以玩手機。
異步更新網站
我們在訪問一個普通的網站時，當瀏覽器加載完HTML、CSS、JS以后，網站的內容就固定了。如果想讓網站內容發生更改，就必須刷新頁面才能夠看到更新的內容。
可如果用到異步更新，情況就大為改觀了。比如，我們在訪問新浪微博時，看到一大半了，點擊底部的加載更多，會自動幫我們加載更多的微博，同時頁面並沒有刷新。
試想一下，如果沒有異步刷新的話，每次點擊“加載更多”，網頁都要刷新，體驗就太不好了。
web前端里的異步更新，就要用到 Ajax。
Ajax
Ajax 的概念
在瀏覽器中，我們可以在不刷新頁面的情況下，通過ajax的方式去獲取一些新的內容。
Ajax：Asynchronous Javascript And XML（異步 JavaScript 和 XML）。它並不是憑空出現的新技術，而是對於現有技術的結合。Ajax 的核心是 js 對象：XMLHttpRequest。
發送 Ajax 請求的五個步驟
其實也就是 使用 XMLHttpRequest 對象的五個步驟。
我們先回憶一下，一個完整的HTTP請求需要的是：
-
請求的網址、請求方法get/post。
-
提交請求的內容數據、請求主體等。
-
接收響應回來的內容。
發送 Ajax 請求的五個步驟：
（1）創建異步對象。即 XMLHttpRequest 對象。
（2）設置請求的參數。包括：請求的方法、請求的url。
（3）發送請求。
（4）注冊事件。 onreadystatechange事件，狀態改變時就會調用。
如果要在數據完整請求回來的時候才調用，我們需要手動寫一些判斷的邏輯。
（5）獲取返回的數據。
Ajax 請求：get 請求舉例
（1）index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Ajax 發送 get 請求</h1>
<input type="button" value="發送get_ajax請求" id='btnAjax'>
<script type="text/javascript">
// 綁定點擊事件
document.querySelector('#btnAjax').onclick = function () {
// 發送ajax 請求 需要 五步
// （1）創建異步對象
var ajaxObj = new XMLHttpRequest();
// （2）設置請求的參數。包括：請求的方法、請求的url。
ajaxObj.open('get', '02-ajax.php');
// （3）發送請求
ajaxObj.send();
//（4）注冊事件。 onreadystatechange事件，狀態改變時就會調用。
//如果要在數據完整請求回來的時候才調用，我們需要手動寫一些判斷的邏輯。
ajaxObj.onreadystatechange = function () {
// 為了保證 數據 完整返回，我們一般會判斷 兩個值
if (ajaxObj.readyState == 4 && ajaxObj.status == 200) {
// 如果能夠進到這個判斷 說明 數據 完美的回來了,並且請求的頁面是存在的
// 5.在注冊的事件中 獲取 返回的 內容 並修改頁面的顯示
console.log('數據返回成功');
// 數據是保存在 異步對象的 屬性中
console.log(ajaxObj.responseText);
// 修改頁面的顯示
document.querySelector('h1').innerHTML = ajaxObj.responseText;
}
}
}
</script>
</body>
</html>
（2）02-ajax.php：
<?php
echo 'smyhvae';
?>
效果如下：
Ajax 請求：post 請求舉例
index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Ajax 發送 get 請求</h1>
<input type="button" value="發送put_ajax請求" id='btnAjax'>
<script type="text/javascript">
// 異步對象
var xhr = new XMLHttpRequest();
// 設置屬性
xhr.open('post', '02.post.php');
// 如果想要使用post提交數據,必須添加此行
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// 將數據通過send方法傳遞
xhr.send('name=fox&age=18');
// 發送並接受返回值
xhr.onreadystatechange = function () {
// 這步為判斷服務器是否正確響應
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
};
</script>
</body>
</html>
XMLHttpRequest 對象詳解
我們在上一段講解了使用 XMLHttpRequest 對象的五個步驟。本段，我們講一下注意事項。
發送請求
發送請求的方法：
open(method, url, async);
參數解釋：
-
method：請求的類型；GET 或 POST
-
url：文件在服務器上的位置
-
async：true（異步）或 false（同步）
另外還有個方法：（僅用於 POST 請求）
send(string);
POST請求時注意
如果想讓 像form 表單提交數據那樣使用POST請求，就需要使用 XMLHttpRequest 對象的 setRequestHeader()方法 來添加 HTTP 頭。然后在 send() 方法中添加想要發送的數據：
xmlhttp.open("POST","ajax_test.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("name=smyhvae&age=27");
onreadystatechange 事件
注冊 onreadystatechange 事件后，每當 readyState 屬性改變時，就會調用 onreadystatechange 函數。
readyState：（存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化）
-
0: 請求未初始化
-
1: 服務器連接已建立
-
2: 請求已接收
-
3: 請求處理中
-
4: 請求已完成，且響應已就緒
status：
-
200: "OK"。
-
404: 未找到頁面。
在 onreadystatechange 事件中，當 readyState 等於 4，且狀態碼為200時，表示響應已就緒。
服務器響應的內容
-
responseText：獲得字符串形式的響應數據。
-
responseXML：獲得 XML 形式的響應數據。
如果響應的是普通字符串，就使用responseText；如果響應的是XML，使用responseXML。
Ajax 傳輸 XML
XML 語法
XML（Extensible Markup Language）：可擴展標記語言。詳細語法可以查看：#。
1、XML聲明：
<?xml version="1.0" encoding="UTF-8"?>
第一行的聲明，指定了XML版本(1.0)以及使用的編碼。
2、自定義標簽：
XML中沒有默認的標簽，所有的標簽都是我們自己已定義的。例如：
<fox></fox>
<name></name>
XML中沒有單標簽，都是雙標簽。
3、根節點：
XML中必須要有一個根節點，所有的子節點都放置在根節點下。例如：
<root1>
<name></name>
</root1>
XML 解析
因為 XML 就是標簽，所以我們可以直接用解析Dom元素的方法解析 XML。
解析過程：
（1）html 部分：（包含 xml ）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<person id='personXML'>
<name>fox</name>
<age>18</age>
<skill>小花花</skill>
</person>
</body>
</html>
（2）解析 xml：
<script type="text/javascript">
var xmlObj = document.getElementById("personXML");
var name = xmlObj.getElementsByTagName('name')[0].innerHTML;
console.log(name);
</script>
ajax 請求解析xml（舉例）
（1）get_xml.php：（里面包含了xml文件）
<?php
// 設置 返回的為 xml
header('content-type:text/xml; charset= utf-8');
// 讀取xml文件 並返回
echo file_get_contents('info/star.xml');
?>
上方代碼解釋：
-
php 自帶了 讀取 xml 文件的方法。
-
在 php 中，如果要使用xml傳輸數據，則需要使用header()設置返回的內容為xml。
（2）get_xml.html：（Ajax 請求，獲取並解析xml）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="獲取XMl數據" id='getXML'>
</body>
</html>
<script type="text/javascript">
document.querySelector('#getXML').onclick = function () {
var ajax = new XMLHttpRequest();
ajax.open('get','get_XMl.php');
ajax.send();
ajax.onreadystatechange = function () {
if (ajax.readyState == 4 && ajax.status==200) {
// 如果 返回的是 xml文件
console.log(ajax.responseText);
// 異步 對象中 有另外一個屬性 用來專門獲取 xml
// xml對象 在瀏覽器段 就是一個 document對象
// 解析時 可以直接使用 querySelector 或者 getElementById等等 document對象 有的語法
console.log(ajax.responseXML);
console.log(ajax.responseXML.querySelector('kuzi').innerHTML);
// 下面這個 頁面文檔對象 如果要獲取某個標簽
console.log(window.document);
}
}
}
</script>
Ajax 傳輸 JSON
JSON 的語法
JSON(JavaScript Object Notation)：是ECMAScript的子集。作用是進行數據的交換。語法更為簡潔，網絡傳輸、機器解析都更為迅速。
語法規則：
-
數據在鍵值對中
-
數據由逗號分隔
-
花括號保存對象
-
方括號保存數組
數據類型：
-
數字（整數或浮點數）
-
字符串（在雙引號中）
-
邏輯值（true 或 false）
-
數組（在方括號中）
-
對象（在花括號中）
-
null
示例：
// 對象
{
"name":"fox",
"age":"18",
"sex":"true",
"car":null
}
// 數組
[
{
"name":"小小胡",
"age":"1"
},
{
"name":"小二胡",
"age":"2"
}
]
JavaScript中：json 字符串 <--> js 對象
基本上，所有的語言都有將 json 字符串轉化為該語言對象的語法。
比如在 js中：
- JSON.parse()：將JSON字符串轉化為 js 對象。例如：
// 將 JSON 字符串格式化為 js 對象
var jsObj = JSON.parse(ajax.responseText);
- JSON.stringify()：將 JS 對象轉化為JSON字符串。例如：
var Obj = {
name: "fox",
age: 18,
skill: "撩妹"
};
console.log(Obj);
// 將 js 對象格式化為 JSON 字符串
var jsonStr = JSON.stringify(Obj);
PHP中：json 字符串 <--> js 對象
-
json_decode()方法：將
json字符串轉化為變量。 -
json_encode()方法：將變量轉化為
json字符串。
代碼舉例：
<?php
header("Content-Type:text/html;charset=utf-8");
// json字符串
$jsonStr = '{"name":"itcast","age":54,"skill":"歌神"}';
// 字符串轉化為 php對象
print_r(json_decode($jsonStr));
echo "<br>";
// php數組
$arrayName = array('name' =>'littleFox' ,'age' => 13 );
// php對象 轉化為 json字符串
print_r(json_encode($arrayName));
?>
輸出結果：
stdClass Object ( [name] => itcast [age] => 54 [skill] => 歌神 )
{"name":"littleFox","age":13}
ajax 請求解析 json（舉例）
（1）Person.json:
{
"name":"小強",
"skill":"砍樹",
"friend":"老板"
}
（2）myJson.php：
<?php
// 讀取json文件 並返回即可
echo file_get_contents('info/Person.json');
?>
（3）getJson.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>獲取 json 數據</h1>
<input type="button" value="獲取json" id='btnJson'>
</body>
</html>
<script type="text/javascript">
// 獲取的是一個 如果要獲取多個
// document.querySelectorAll(selector)
document.querySelector("#btnJson").onclick = function () {
var ajax = new XMLHttpRequest();
ajax.open('get','myJson.php');
ajax.send();
ajax.onreadystatechange = function () {
if (ajax.readyState==4&&ajax.status==200) {
// json 字符串 是字符串 所以我們可以 通過 responseText獲取
console.log(ajax.responseText);
// 轉化為 js對象
var jsObj = JSON.parse(ajax.responseText);
console.log(jsObj);
// 拼接ul s
var str = '';
str+='<ul>';
str+='<li>'+jsObj.name+'</li>';
str+='<li>'+jsObj.skill+'</li>';
str+='<li>'+jsObj.friend+'</li>';
str+='</ul>';
// 設置到界面上
document.body.innerHTML = str;
}
}
}
</script>
演示效果：
我的公眾號
想學習代碼之外的軟技能？不妨關注我的微信公眾號：生命團隊（id：vitateam）。
掃一掃，你將發現另一個全新的世界，而這將是一場美麗的意外：
