傳統方法的缺點:
傳統的web互動是使用者觸發一個http請求伺服器,然後伺服器收到之後,在做出響應到使用者,并且傳回一個新的頁面,每當伺服器處理用戶端送出的請求時,客戶都隻能空閑等待,并且哪怕隻是一次很小的互動、隻需從伺服器端得到很簡單的一個資料,都要傳回一個完整的HTML頁,而使用者每次都要浪費時間和帶寬去重新讀取整個頁面。這個做法浪費了許多帶寬，由于每次應用的互動都需要向伺服器發送請求，應用的響應時間就依賴于伺服器的響應時間。這導緻了使用者界面的響應比本地應用慢得多。
什麼是ajax？
ajax的出現,剛好解決了傳統方法的缺陷。AJAX 是一種用于建立快速動态網頁的技術。通過在背景與伺服器進行少量資料交換，AJAX 可以使網頁實作異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
XMLHttpRequest 對象
XMLHttpRequest對象是ajax的基礎,XMLHttpRequest 用于在背景與伺服器交換資料。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。目前所有浏覽器都支援XMLHttpRequest
| abort() | 停止目前請求 |
|---|---|
| getAllResponseHeaders() | 把HTTP請求的所有響應首部作為鍵/值對傳回 |
| abort() | 停止目前請求 |
| getResponseHeader(“header”) | 傳回指定首部的串值 |
| open(“method”,“URL”,[asyncFlag],[“userName”],[“password”]) | 建立對伺服器的調用。method參數可以是GET(擷取資料) 、POST（建立 增加資料）或PUT（更新 修改資料 删除資料）。url參數可以是相對URL或絕對URL。這個方法還包括3個可選的參數，是否異步， 預設為true異步 同步是false 同步使用者名，密碼 |
| send(content) | 向伺服器發送請求（500 伺服器報錯 404 頁面丢失 200 success） |
| setRequestHeader(“header”, “value”) | 把指定首部設定為所提供的值。在設定任何首部之前必須先調用open()。設定header并和請求一起發送 ('post’方法一定要 ) |
五步使用法：
1.建立XMLHTTPRequest對象
2.使用open方法設定和伺服器的互動資訊
3.設定發送的資料，開始和伺服器端互動;send(content)這個方法裡面的參數可寫可不寫 寫想伺服器傳輸資料 不寫是請求資料
4.注冊事件
5.更新界面
同步和異步的差別：
同步是：等待請求完成之後 再去執行 異步是：請求和後續代碼同時執行
如何将原生ajax進行封裝
封裝成一個函數，請求接口時候需要 路徑 方式 資料
<!DOCTYPE html>
<html>
<head >
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
/* get 方式傳值 是在url 路徑之後？a=1&b=2&n=3
* post 不在路徑上寫 send() 上發送資料
* */
function method(res, url, data, callback) {
var http = new XMLHttpRequest();
if (res == "get") {
if (data) {
url += "?";
url += data;
}
http.open(res, url);
http.send();
}
else {
http.open(res, url);
if (data) {
http.send(data);
}
else {
http.send();
}
}
http.onreadystatechange = function () {
if (http.readyState == 4 && http.status == 200) {
callback(JSON.parse(http.response));
}
}
}
method("post", "./list/data.txt", null, function (data) {
console.log(data);
});
</script>
</body>
</html>
JS幾種跨域方法和原理
解決ajax跨域
一般ajax跨域解決就是通過JSONP解決或者CORS解決,如以下:
js跨域是指通過js在不同的域之間進行資料傳輸或通信，跨域 ： 協定 端口 主機名稱不同會産生跨域
第一種方法：jsonp跨域（隻支援get請求）
比如，有個a.html頁面，它裡面的代碼需要利用ajax擷取一個不同域上的json資料，假設這個json資料位址是http://example.com/data.php,那麼a.html中的代碼就可以這樣：
實作原理：由于使用script标簽調用遠端js檔案沒有不受跨域的影響，是以可以通過建立一個script标簽，通過src屬性來通路遠端檔案。
其實這并不屬于AJAX，但是可以實作類似AJAX的功能。
第二種方法：cross 跨域 php 在裡面配置 header('Access-Control-Allow-Origin: * ');但隻支援HTML5
var http = new XMLHttpRequest();
http.open("post", "http://127.0.0.1:8080/0616/insert.php");
http.send();
http.onreadystatechange = function () {
if (http.readyState == 4 && http.status == 200) {
console.log(http.response);
}
}
第三種方法：代理
這種方式是通過背景(ASP、PHP、JAVA、ASP.NET)擷取其他域名下的内容，然後再把獲得内容傳回到前端，這樣因為在同一個域名下，是以就不會出現跨域的問題。
實作代碼：建立一個AJAX請求（頁面位址為：http://localhost/ajax/proxy.html）
var request = null;
if(window.XMLHttpRequest)
{ request = new XMLHttpRequest; }
else
{
request = new ActiveXObject("Microsoft.XMLHttp");
}
request.onreadystatechange = function{ console.log(this.readyState); if(this.readyState===4 && this.status===200)
{
var resultObj = eval("("+this.responseText+")"); //将傳回的文本資料轉換JSON對象 document.getElementById("box").innerHTML = resultObj.name+":"+resultObj.sex; //将傳回的内容顯示在頁面中 } } request.open("POST","proxy.php",true); request.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); request.send("name=呂銘印&sex=男");
建立AJAX請求。
proxy.php代碼
header("Content-type:text/html;charset=utf-8");
$url = "http://localhost:63342/ajax/proxy.js";
$contents = file_get_contents($url);
echo $contents;