原生ajax請求
前些日子，忙着考駕照，沒有時間對知識進行總結，感到十分慚愧啊，剛好趁現在有時間，做個知識總結，希望對各位有所幫助。
很多人都知道ajax是用來進行數據請求的，但是具體的請求方法會有些疑惑，也有很多人問我什么是數據交互是什么？在這里我將通過四個三個方面進行講解，算是給前端新手的吧 大神可以忽略。
- 什么是ajax
- ajax原理是什么
- ajax的優點與缺點
- 如何利用ajax進行數據交互
在這里引用一張網圖來作為開頭部分
1.什么是 ajax
百度百科上是這樣解釋的：
AJAX即“Asynchronous Javascript And XML”（異步JavaScript和XML），是指一種創建交互式網頁應用的網頁開發技術。
AJAX = 異步 JavaScript和XML（標准通用標記語言的子集）。
AJAX 是一種用於創建快速動態網頁的技術。
通過在后台與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
傳統的網頁（不使用 AJAX）如果需要更新內容，必須重載整個網頁頁面。
2. ajax原理
Ajax的原理簡單來說通過XmlHttpRequest對象來向服務器發異步請求，從服務器獲得數據，然后用javascript來操作DOM而更新頁面。這其中最關鍵的一步就是從服務器獲得請求數據。要清楚這個過程和原理，我們必須對 XMLHttpRequest有所了解。
XMLHttpRequest是ajax的核心機制，它是在IE5中首先引入的，是一種支持異步請求的技術。簡單的說，也就是javascript可以及時向服務器提出請求和處理響應，而不阻塞用戶。達到無刷新的效果。
所以我們先從XMLHttpRequest講起，來看看它的工作原理。
首先，我們先來看看XMLHttpRequest這個對象的屬性。
它的屬性有：
onreadystatechange 每次狀態改變所觸發事件的事件處理程序。
responseText 從服務器進程返回數據的字符串形式。
responseXML 從服務器進程返回的DOM兼容的文檔數據對象。
status 從服務器返回的數字代碼，比如常見的404（未找到）和200（已就緒）
status Text 伴隨狀態碼的字符串信息
readyState 對象狀態值
0 (未初始化) 對象已建立，但是尚未初始化（尚未調用open方法）
1 (初始化) 對象已建立，尚未調用send方法
2 (發送數據) send方法已調用，但是當前的狀態及http頭未知
3 (數據傳送中) 已接收部分數據，因為響應及http頭不全，這時通過responseBody和responseText獲取部分數據會出現錯誤，
4 (完成) 數據接收完畢,此時可以通過通過responseXml和responseText獲取完整的回應數據
但是，由於各瀏覽器之間存在差異，所以創建一個XMLHttpRequest對象可能需要不同的方法。這個差異主要體現在IE和其它瀏覽器之間
3. ajax優點與缺點
優點：Ajax的給我們帶來的好處大家基本上都深有體會，在這里我只簡單的講幾點：
1、最大的一點是頁面無刷新，在頁面內與服務器通信，給用戶的體驗非常好。
2、使用異步方式與服務器通信，不需要打斷用戶的操作，具有更加迅速的響應能力。
3、可以把以前一些服務器負擔的工作轉嫁到客戶端，利用客戶端閑置的能力來處理，減輕服務器和帶寬的負擔，節約空間和寬帶租用成本。並且減輕服務器的負擔，ajax的原則是“按需取數據”，可以最大程度的減少冗余請求，和響應對服務器造成的負擔。
4、基於標准化的並被廣泛支持的技術，不需要下載插件或者小程序。
缺點：1、ajax干掉了back按鈕，即對瀏覽器后退機制的破壞。后退按鈕是一個標准的web站點的重要功能，但是它沒法和js進行很好的合作。這是ajax所帶來的一個比較嚴重的問題，因為用戶往往是希望能夠通過后退來取消前一次操作的。那么對於這個問題有沒有辦法？答案是肯定的，用過Gmail的知道，Gmail下面采用的ajax技術解決了這個問題，在Gmail下面是可以后退的，但是，它也並不能改變ajax的機制，它只是采用的一個比較笨但是有效的辦法，即用戶單擊后退按鈕訪問歷史記錄時，通過創建或使用一個隱藏的IFRAME來重現頁面上的變更。（例如，當用戶在Google Maps中單擊后退時，它在一個隱藏的IFRAME中進行搜索，然后將搜索結果反映到Ajax元素上，以便將應用程序狀態恢復到當時的狀態。）
但是，雖然說這個問題是可以解決的，但是它所帶來的開發成本是非常高的，和ajax框架所要求的快速開發是相背離的。這是ajax所帶來的一個非常嚴重的問題。
2、安全問題
技術同時也對IT企業帶來了新的安全威脅，ajax技術就如同對企業數據建立了一個直接通道。這使得開發者在不經意間會暴露比以前更多的數據和服務器邏輯。ajax的邏輯可以對客戶端的安全掃描技術隱藏起來，允許黑客從遠端服務器上建立新的攻擊。還有ajax也難以避免一些已知的安全弱點，諸如跨站點腳步攻擊、SQL注入攻擊和基於credentials的安全漏洞等。
3、對搜索引擎的支持比較弱。
4、破壞了程序的異常機制。至少從目前看來，像ajax.dll，ajaxpro.dll這些ajax框架是會破壞程序的異常機制的。關於這個問題，我曾經在開發過程中遇到過，但是查了一下網上幾乎沒有相關的介紹。后來我自己做了一次試驗，分別采用ajax和傳統的form提交的模式來刪除一條數據……給我們的調試帶來了很大的困難。
5、另外，像其他方面的一些問題，比如說違背了url和資源定位的初衷。例如，我給你一個url地址，如果采用了ajax技術，也許你在該url地址下面看到的和我在這個url地址下看到的內容是不同的。這個和資源定位的初衷是相背離的。
6、一些手持設備（如手機、PDA等）現在還不能很好的支持ajax，比如說我們在手機的瀏覽器上打開采用ajax技術的網站時，它目前是不支持的，當然，這個問題和我們沒太多關系。
4.如何進行數據交互
比如下面一個簡單的例子，點擊 獲取按鈕 獲取數據 並把數據渲染到頁面
html
<!DOCTYPE html>
<html>
<head>
<title>ajax</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>123</p>
<div id="box">
<select id="city"></select>
<input type="button" value="獲取" id="get" />
</div>
</body>
</html>
相應的原生js代碼
<script type="text/javascript">
var get = document.getElementById("get");
var city = document.getElementById("city");
get.onclick = function () {
//創建XHR對象,主要是瀏覽器兼容性差異，處理兼容問題一般都是通過判斷去解決。下面是一個三目運算符。
var xhr = window.XMLHttpRequest ? new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");
//設置請求URL
var url = "./login.php";
//設置XHR對象readyState變化時響應函數
xhr.onreadystatechange = function () {
//readyState是請求的狀態，為4表示請求結束
if (xhr.readyState == 4 && xhr.status == 200) {
//responseText服務器響應的內容
//通過eval把傳來的json字符串轉成對象
var data = eval(this.responseText);
console.log(this.responseText)
var str = "";
for(var i in data) {
str += "<option value='" + data[i].id + "'>" + data[i].name + "</option>";
}
city.innerHTML = str;
}
};
//打開鏈接，注意請求的方式是get還是post請求
xhr.open("get", url, true);
//發送請求
xhr.send();
}
</script>
我相信很多人都想知道后端是如何返回數據的，這個問題我請教了我的朋友，所以我用簡單的php代碼寫一寫
<?php
$data = array(
array("id" => 1,"name" => "上海"),
array("id" => 2,"name" => "北京"),
array("id" => 3,"name" => "廣州"),
array("id" => 4,"name" => "深圳"),
);
echo json_encode($data);
這里的$data就是后端返回給你的數據
到此一個完整的原生get請求就結束了 小伙伴可以試着去運轉一下。遍歷循環后端返回數據的過程其實就是前端渲染過程。
下面在寫一個簡單的post請求 小伙伴注意請求的區別
<!DOCTYPE html>
<html>
<head>
<title>ajax</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="box">
<input type="text" name="name" value="" id="name" />
<input type="password" name="pwd" value="" id="pwd" />
<input type="submit" name="sub" value="注冊" id="sub" />
</div>
<p></p>
</body>
</html>
相應的原生js代碼
<script type="text/javascript">
window.onload=function(){
var sub = document.getElementById("sub");
sub.onclick = function () {
var name = document.getElementById("name").value;
var pwd = document.getElementById("pwd").value;
var p = document.getElementsByTagName("p")[0];
console.log(p)
//創建XHR對象
var xhr = new XMLHttpRequest();
//設置請求URL
var url = "./post.php";
//設置XHR對象readyState變化時響應函數
//打開鏈接
xhr.open("POST", url, true);
//設置請求頭部,(這里就是post請求和get請求的區別)
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//發送請求 主要是前端傳遞的參數
xhr.send("name="+name+" &pwd="+pwd);
xhr.onreadystatechange = function () {
//readyState是請求的狀態，為4表示請求結束
if (xhr.readyState == 4 && xhr.status == 200) {
//responseText服務器響應的內容
console.log(xhr.responseText)
p.innerHTML=this.responseText
}
};
}
}
</script>
那么后端同樣的php代碼就要這樣寫，其實我覺得前端會一點簡單的后端語言很有必要，我也就只學習了一點點php，學習的主要目的是知道前后端是如何進行數據交互的，我傳給后端的參數后端是如何接收處理 並返回我想要的數據的。php大神可以忽略
<?php
$name = !empty($_POST['name']) ? trim($_POST['name']) : '沒有名字';
$pwd = !empty($_POST['pwd']) ? trim($_POST['pwd']) : '沒有密碼';
echo "歡迎來到".$name."博客";
建議 可以把ajax函數封裝成方法 ，方便調用。至此，我的講解結束有啥問題可以在群里找我 歡迎各位假如 群主很熱心 群里也有很多大神 。web前端開發 474471759