一、什么是 AJAX 請求
- AJAX 即“Asynchronous Javascript And XML”（異步 JavaScript 和 XML），是指一種創建互動式網頁應用的網頁開發技術，
- AJAX是一種瀏覽器通過 js 異步發起請求，實作區域更新頁面，Ajax 請求的區域更新，瀏覽器地址欄不會發生變化，區域更新不會舍棄原來頁面的內容，
二、原生 AJAX 請求的示例
<script type="text/javascript">
//這個按鈕系結的函式，使用js發起Ajax請求，訪問服務器AjaxServlet中JavaScriptAjax
function ajaxRequest() {
// 1、我們首先要創建XMLHttpRequest
var xmlHttpRequest = new XMLHttpRequest();
// 2、呼叫open方法設定請求引數
xmlHttpRequest.open("GET","http://localhost:8080/json_Ajax_i18n/ajaxServlet?action=javaScriptAjax",true);
// 3、在send方法前系結onreadystatechange事件，處理請求完成后的操作，
xmlHttpRequest.onreadystatechange = function () {
if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
var jsonObj = JSON.parse(xmlHttpRequest.responseText);
//把回應的資料顯示在頁面上
document.getElementById("div01").innerText = "編號：" + jsonObj.id + ",姓名：" + jsonObj.name ;
}
}
// 4、呼叫send方法發送請求
xmlHttpRequest.send();
}
</script>
三、jQuery 中的 AJAX 請求
// ajax請求
$("#ajaxBtn").click(function(){
$.ajax({
url:"http://localhost:8080/json_Ajax_i18n/ajaxServlet",
data:"action=jQueryAjax",
type:"GET",
success:function (data) {
alert("服務器回傳的資料是：" + data);
},
dataType:"text"
})
});
// ajax--get請求
$("#getBtn").click(function(){
$.get("http://localhost:8080/json_Ajax_i18n/ajaxServlet","action=jQueryGet",function (data) {
alert("服務器回傳的資料是：" + data);
},"json");
});
// ajax--post請求
$("#postBtn").click(function(){
// post請求
$.post("http://localhost:8080/json_Ajax_i18n/ajaxServlet","action=jQueryPost",function (data) {
alert("服務器回傳的資料是：" + data);
},"json");
});
// ajax--getJson請求
$("#getJSONBtn").click(function(){
// 呼叫
$.getJSON("http://localhost:8080/json_Ajax_i18n/ajaxServlet","action=jQueryPost",function (data) {
alert("服務器回傳的資料是：" + data);
});
});
表單序列化 serialize()可以把表單中所有表單項的內容都獲取到，并以 name=value&name=value 的形式進行拼接，
// ajax請求
$("#submit").click(function(){
// 把引數序列化
//$("#form01").serialize();
$.getJSON("http://localhost:8080/json_Ajax_i18n/ajaxServlet","action=jQuerySerialize&" + $("#form01").serialize(),function (data) {
});
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/278099.html
標籤：其他
下一篇：CSS預處理框架——Stylus