Ajax的瞭解及其封裝
Ajax是一種在無需重新加載的情況下，能夠更新部分網頁的技術。
通過在後臺與服務器進行少量數據交換，Ajax 可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
例如：微信的點贊，當我們給一個人點贊時，已經點贊過的標誌即會實時的出現在此人的點贊區，並且沒有整個網頁更新。即可以通過ajax實現。
Ajax有兩種方式請求，一種同步請求（等待請求完成再去執行），一種異步請求（請求和後續代碼同時執行），我們一般默認的爲異步請求。
ajax請求後臺數據，是通過接口來返回數據。
原生ajax寫法爲5步：
1、創建對象（請求數據的對象爲http，https 進行三次握手 xmlhttprequest）
var http=new XMLHttpRequest();
2、服務器的鏈接
http.open();
第一個參數指請求的類型 get（www.maodou.com/www/my.php?name=zhangsan） post
第二個參數 請求的路徑url
第三個參數可選 同步還是異步 默認異步 true false
第四個參數 和 第五個參數 可選 用戶名 密碼 用戶的身份驗證
3、開始給服務器發送請求
http.send();
參數一般爲數據 根據請求類型 可選
4、創建請求讀取完成事
http.onreadystatechange=function (){
//根據讀取的狀態去判斷
/!* http.readyState 4 請求讀取完成*!/
/!*http.status 200 讀取的狀態是成功*!/
/!*http.response 返回結果*!/
if(http.readyState==4&&http.status==200)
{
console.log(http.response) /!* 5.渲染界面*!/
}
}
get和post兩種http基本請求
get類型：
<script>
var http=new XMLHttpRequest();
http.open("get","./data/stu.txt");
http.send();
http.onreadystatechange=function (){
if(http.readyState==4&&http.status==200)
{
var data=JSON.parse(http.response);
console.log(data);
}
}
</script>
post類型：
<script>
var a=10;
var http=new XMLHttpRequest();
http.open("post","./data/stu.txt",true);
http.send();
//原生js ajax 設置同步會造成線程鎖死 onreadystatechange 無法進入
http.onreadystatechange=function (){
console.log(1);
}
</script>
get和post的區別：
除此之外：
http請求方式中get和post的區別：
1.get是從服務器上獲取數據，post是向服務器傳送數據。
2.get是把參數數據隊列加到提交表單的ACTION屬性所指的URL中，值和表單內各個字段一一對應，在URL中可以看到。post是通過HTTPpost機制，將表單內各個字段與其內容放置在HTML HEADER內一起傳送到ACTION屬性所指的URL地址。用戶看不到這個過程。
3.對於get方式，服務器端用Request.QueryString獲取變量的值，對於post方式，服務器端用Request.Form獲取提交的數據。
4.get傳送的數據量較小，不能大於2KB。post傳送的數據量較大，一般被默認爲不受限制。但理論上，IIS4中最大量爲80KB，IIS5中爲100KB。（這裏有看到其他文章介紹get和post的傳送數據大小跟各個瀏覽器、操作系統以及服務器的限制有關）
5.get安全性非常低，post安全性較高。
在FORM提交的時候，如果不指定Method，則默認爲get請求，Form中提交的數據將會附加在url之後，以?分開與url分開。字母數字字符原樣發送，但空格轉換爲“+“號，其它符號轉換爲%XX,其中XX爲該符號以16進製表示的ASCII（或ISOLatin-1）值。get請求請提交的數據放置在HTTP請求協議頭中，而post提交的數據則放在實體數據中；
原生js ajax簡單封裝
<script>
function ajax(method, url, data, success) {
var http = new XMLHttpRequest();
if (method == "get") {
if (data) {
url += "?";
url += data;
}
http.open(method, url);
http.send();
}
else {
http.open(method, url);
if (data) {
http.send(data);
} else {
http.send();
}
}
http.onreadystatechange = function () {
if (http.readyState == 4 && http.status == 200) {
success(http.response);
}
}
}
ajax("post", "./data/stu.txt", null, showinfo);
function showinfo(data) {
var stu = JSON.parse(data);
var ul = document.createElement("ul");
for (var i = 0; i < stu.length; i++) {
var li = document.createElement("li");
li.innerHTML = "姓名：" + stu[i].name + "/年齡：" + stu[i].age + "/性別：" + stu[i].sex + "/地址：" + stu[i].add;
ul.appendChild(li);
}
document.body.appendChild(ul);
}
</script>