ajax的原生 jq的使用

ajax

1.整理了一下以前面試前總結的ajax的使用，在這就當筆記了，如有遺漏或錯誤還請指出，望見諒

ajax工作原理：

相當於在客戶端與服務端之間加了乙個抽象層(ajax引擎)，使使用者請求和伺服器響應非同步化，並不是所有的請求都提交給伺服器，像一些資料驗證和資料處理

都交給ajax引擎來完成，只有確認需要向伺服器讀取新資料時才右ajax引擎向伺服器提交請求。

ajax優缺點：**

優點：

1.無重新整理更新資料 ajax最大的優點就是能在不重新整理整個頁面的情況下維持與伺服器通訊 2.非同步與伺服器通訊使用非同步的方式與伺服器通訊，不打斷使用者的操作 3.前端與後端負載均衡將一些後端的工作移到前端，減少伺服器與頻寬的負擔 4.基於規範被廣泛支援 5.介面與應用分離

ajax使得介面與應用分離，也就是資料與呈現分離

缺點：

1.ajax乾掉了back與history功能，即對瀏覽器機制的破壞在動態更新頁面的情況下，使用者無法回到前一頁的頁面狀態，因為瀏覽器僅能記憶歷史紀錄中的靜態頁面 2.安全問題 ajax技術給使用者帶來很好的使用者體驗的同時也對it企業帶來了新的安全威脅，ajax技術就如同對企業資料建立了乙個直接通道。這使得開發者在不經意間會暴露比以前更多的資料和伺服器邏輯。 3.對搜尋引擎支援較弱非同步請求區域性重新整理 (提高使用者體驗) 非同步請求的資料但是不能被爬蟲獲取 4.破壞程式的異常處理機制因為按程式的處理機制是同步的而ajax確是非同步執行的 5.違背url與資源定位的初衷 6.不能很好地支援移動裝置

7.客戶端肥大，太多客戶段**造成開發上的成本

具體步驟

非同步物件的應用
在事件中
1.獲取使用者資料
var name = this.value；
2.1建立非同步物件
2.2設定請求行 open(請求方式,請求url[,true])
true是非同步的false是同步 預設為true 而且現在基本用的都是非同步，不然也不會建立這個請求
get請求如果有引數就直接在url後面新增
post有引數需要在請求體中傳遞
xhr.open("get","validate.php?username="+name)
2.3設定請求頭 setrequestheader("key","value")鍵值對形式存在
get不需要設定請求頭
2.4 設定請求體：傳送請求send(引數，key=value&key=value)
post應該在這裡傳遞
語法.send(null) 這是get請求

伺服器返回資料判斷資料正確傳輸回來

報文行200 ok是正常的
報文體 responsetext:普通字元創 
respon***ml：符合xml格式的字串
因為非同步是同時進行的所以得判斷請求是否完成
1.xhr.status;可以獲取當前伺服器的響應200 成功
2.乙個真正成功的不僅在伺服器端響應了，還要在客戶端接收到了並且可以使用了
3.監聽非同步物件的響應狀態 方法是readystate (有五個狀態)
0;建立了非同步物件但沒傳送請求
1;呼叫了send方法正在傳送
2;send方法執行完畢了 已經收到伺服器的響應內容--但還不可以使用
3;正在解析 返回的資料
4;響應內容解析完畢，可以使用了
語法:xhr.onreadystatechange = function()

ajax 原理**

var name = this.value
xhr.open("get","validate.php?username="+name)
send(key=value&key=value)
xhr.onreadystatechange = function() }

php資料操作

php當被請求資料時
看有沒有傳遞資料 當有傳遞資料時 看其請求方式 來就收資料 $_post['key'] $_get
鏈結資料庫
$connect = mysqli_connect("主機網域名稱或者id","使用者名稱","使用者密碼","需要鏈結的資料庫"); (必須以分號結尾)
$sql = ""; 這裡書寫 增刪改查 事件 當查詢時
$result = mysqli_query($connect，$sql);當查詢時返回的是乙個結果集或者false($connect或$sql語句有錯誤時) 增刪改返回的都是乙個布林型別 執行正確時(如果有資料變化時 現在資料庫中的資料就已經變化了)返回true， 當錯誤時返回false 資料庫也不會改變
$response = [ "code" => 0, "msg" => "失敗"];
if($result) 
echo json_encode($response); 將json格式轉化為字串 因為資料傳輸 用的是字串 (實際上傳輸的是二進位制)

jq中的ajax請求

乙個請求天氣的案例
$.ajax(,
datatype:'jsonp',
// jsonpcallback:function(){}
//請求成功時返回的函式 
success:function(result));
document.queryselector("tbody").innerhtml = html;
}});

ajax的原生 jq的使用

Ajax簡單原生使用原理

js原生的ajax寫法

原生js的ajax請求

ajax的原生 jq的使用

Ajax簡單原生使用原理

js原生的ajax寫法

原生js的ajax請求

相關推薦