標籤：size page pen 互動圖 地址 json格式 ade passwd star
AJAX 原生態
原生態AJAX詳解和jquery對AJAX的封裝
AJAX：
A ：Asynchronous [eI`sinkrenes] 非同步
J ：JavaScript JavaScript指令碼語言
A： And
X ：XML 可延伸標記語言 (XML)
AJAX現在貌似已經無處不在了，其實自從web2.0的廣泛發展帶來了AJAX的發展。我們目前的用戶端可以分為胖用戶端（C/S）、廋用戶端（B/S），
PS：胖客戶泛指用戶端承擔一部分計算工作減輕伺服器壓力。典型應用 ：C / S架構的用戶端。瘦客戶泛指用戶端不承擔任何計算工作，完全依賴伺服器端計算。典型應用：B / S 架構的瀏覽器。
Ajax技術是我們將瀏覽器發展為胖客戶應用的一種最佳解決方案，使用 XmlHttpRequest對象進行非同步重新整理和提交，使用前台JavaScript代碼進行解析伺服器資料並呈現，大大減輕了伺服器負擔和大量資料提交造成的網路延時
知道為什麼使用AJAX就來具體看看AJAX的屬性跟方法：
XmlHttpRequest對象的方法: abort() 停止當前的請求send(content) 向伺服器發送請求 setRequestHeader(“header”,”value”) 指定請求的首部，在制定首部之前必須先調用open() getRequestHeader(“header”) 返回指定首部的值 XmlHttpRequest對象的屬性 onreadystatechage 事件 每當XmlHttpRequest對象狀態改變都會觸發這個事件 readyState 當前XmlHttpRequest請求伺服器的狀態(0=未初始化，1=正在載入，2=已載入，3=互動中，4=完成) responseText 伺服器相應文本 responseXml 伺服器相應的XmlDocument
open(string method,string url,boolean asynch,[string username],[string password]) 建立對伺服器的遠端調用，後兩個參數是選擇性參數
AJAX互動圖解，
步驟：1、發起AJAX事件,2、建立XMLHttpRequest對象，3、串連到伺服器並發送參數，
4、執行AJAX需要的操作，5互動完成返回資料，6、處理資料
如果還看不明白可以先看看下面的代碼實現，再回來看看
如上所述，AJAX方法沒有多少，使用AJAX也比較簡單：以下為原生態的AJAX使用方法，後面附JqueryAJAX實現方法
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP ‘index.jsp‘ starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
var xmlHttp; //聲明XMLHttpRequest對象
function createXmlHttp(){ //建立XMLHttpRequest對象
if(window.ActiveXObject){//判斷是否為IE
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}
return xmlHttp;
}
//觸發AJAX事件
function checkUs(){
var user=document.logfrm.us.value;
xmlHttp=createXmlHttp();
xmlHttp.onreadystatechange=handleStateChange; //調用回呼函數，每當XmlHttpRequest對象狀態改變都會觸發這個事件
xmlHttp.open("get","/jsch6/checkUser.jsp?userName="+user,true); //開啟訪問路徑
xmlHttp.send(null); //發送參數
//如果使用post方法提交
//xmlhttp.open("POST", "/jsch6/checkUser.jsp", true);
//xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//xmlhttp.send("userName="+user);//發送
}
//回呼函數狀態的改變判斷AJAX互動狀態
// 2 已載入 0 未初始化 1 正在載入 3 互動，中 4 完成
function handleStateChange(){
if(xmlHttp.readyState==4){ //互動完成
//判斷Http狀態代碼 200 OK 404 Not Found 500 Server errors 等等
if(xmlHttp.status==200){ //AJAX互動狀態OK，解析資料
//解析伺服器資料呈現
var msg=xmlHttp.responseText;
var spob=document.getElementById("usmsg");
spob.innerHTML=msg;
}
}
}
</script>
</head>
<body>
<div align="center">
<form name="logfrm" action="">
userName:<input type="text" name="us" value="" onblur="checkUs()"><span id="usmsg"></span><br/>
password:<input type="password" name="passwd" value=""><br/>
</form>
</div>
</body>
</html>
JQUery 對AJAX的幾個常用封裝方法：$.ajax，$.post， $.get， $.getJSON。
以下引用自：http://blog.csdn.net/liujiahan629629/article/details/22229669
一， $.ajax，這個是JQuery對ajax封裝的最基礎步，通過使用這個函數可以完成非同步通訊的所有功能。也就是說什麼情況下我們都可以通過此方法進行非同步重新整理的操作。但是它的參數較多，有的時候可能會麻煩一些。看一下常用的參數： var configObj = { method //資料的提交方式：get和post url //資料的提交路勁 async //是否支援非同步重新整理，預設是true data //需要提交的資料 dataType //伺服器返回資料的類型，例如xml,String,Json等 success //請求成功後的回呼函數 error //請求失敗後的回呼函數 } $.ajax(configObj);//通過$.ajax函數進行調用。 好，看一個實際的例子吧，看一個進行非同步刪除的例子：[javascript] view plaincopyprint?在CODE上查看代碼片派生到My Code片<span style="font-size:18px;"> // 刪除 $.ajax({ type : "POST", //提交方式 url : "${pageContext.request.contextPath}/org/doDelete.action",//路徑 data : { "org.id" : "${org.id}" },//資料，這裡使用的是Json格式進行傳輸 success : function(result) {//返回資料根據結果進行相應的處理 if ( result.success ) { $("#tipMsg").text("刪除資料成功"); tree.deleteItem("${org.id}", true); } else { $("#tipMsg").text("刪除資料失敗"); } } }); </span> 二，$.post，這個函數其實就是對$.ajax進行了更進一步的封裝，減少了參數，簡化了操作，但是運用的範圍更小了。$.post簡化了資料提交方式，只能採用POST方式提交。只能是非同步訪問伺服器，不能同步訪問，不能進行錯誤處理。在滿足這些情況下，我們可以使用這個函數來方便我們的編程，它的主要幾個參數，像method，async等進行了預設設定，我們不可以改變的。例子不再介紹。url:發送請求地址。data:待發送 Key/value 參數。callback:發送成功時回呼函數。type:返回內容格式，xml, html, script, json, text,_default。 三，$.get，和$.post一樣，這個函數是對get方法的提交資料進行封裝，只能使用在get提交資料解決非同步重新整理的方式上，使用方式和上邊的也差不多。這裡不再示範。 四， $.getJSON，這個是進一步的封裝，也就是對返回資料類型為Json進行操作。裡邊就三個參數，需要我們設定，非常簡單：url,[data],[callback]。 其實會了$.ajax方法，其它的就都會使用了，都是一樣的，其實非常簡單。 但是這裡還有一個問題，比較麻煩，就是如果頁面資料量比較大，該怎麼辦呢？在常規表單的處理中，我們使用架構Struts2可以通過域驅動模式進行自動擷取封裝，那麼通過ajax,如何進行封裝呢？這裡JQuery有一個外掛程式，Jquery Form，通過引入此js檔案，我們可以模仿表單Form來支援Struts2的域驅動模式，進行自動資料的封裝。用法和$.ajax類似，看一下實際的例子，這裡寫一個儲存使用者的前台代碼： [javascript] view plaincopyprint?在CODE上查看代碼片派生到My Code片<span style="font-size:18px;"> $(function(){ var options = { beforeSubmit : function() {//處理以前需要做的功能 $("tipMsg").text("資料正在儲存，請稍候..."); $("#insertBtn").attr("disabled", true); }, success : function(result) {//返回成功以後需要的回呼函數 if ( result.success ) { $("#tipMsg").text("機構儲存成功"); //這裡是對應的一棵樹，後邊會介紹到， // 控制樹形組件，增加新的節點 var tree = window.parent.treeFrame.tree; tree.insertNewChild("${org.id}", result.id, result.name); } else { $("#tipMsg").text("機構儲存失敗"); } // 啟用儲存按鈕 $("#insertBtn").attr("disabled", false); }, clearForm : true }; $(‘#orgForm‘).ajaxForm(options); //通過Jquery.Form中的ajaxForm方法進行提交 }); </span>
雖然有工具給我們封裝好的AJAX方便我們的使用，但有時候我們還需要自己對AJAx進行封裝，只有掌握了其中原理才能將AJAx技術運用自如，因為萬變不離其宗。，其實不管對於任何技術，只有熟悉原理，才能運用自如。
AJAX 原生態
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
