※ajax()
@WebServlet(urlPatterns = { "/xxx" })
public class XxxServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("text/html; charset=UTF-8");
PrintWriter out = resp.getWriter();
// try {
// Thread.sleep(2000);
// } catch (InterruptedException e) {
// e.printStackTrace();
// }
out.print("username=" + req.getParameter("username") + "<br />");
out.print("password=" + req.getParameter("password"));
}
}
----------
var ajaxTest = function(){
$.ajax({
url : "xxx",
type : "POST",
// data : {
// username:'u',
// password:$('input[name="password"]').val()
// },
// async : false,
data : $.param({
username: $('input[name="username"]').val(),
password: 'p'
}),
success : function(data, textStatus, jqXHR){
alert(data); // username=user<br />password=p
alert(textStatus); // success
for(xhr in jqXHR){
alert('xhr=' + xhr); // readyState、getResponseHeader、getAllResponseHeaders、setRequestHeader、overrideMimeType、statusCode、abort、state、always、then、promise、pipe、done、fail、progress、complete、success、error、responseText、status、statusText
// alert('jqXHR[xhr]=' + jqXHR[xhr]);
}
}
});
alert('think');
}
----------
<form action="xxx" method="post">
使用者：<input type="text" name="username" value="user" /><br />
密碼：<input type="password" name="password" value="pass" /><br />
<input type="submit" />
</form>
<input onclick="ajaxTest()" type="button" value="test" />
※最下面的form不是ajax，是一般的寫法，整批一起丟到controller
※按鈕test是ajax寫法，async預設是true，是非同步，至少要有url和type才可以運作(雖然預設是GET，但我不寫就是不行)，但總是要看結果回傳什麼，所以我加了success；而data是傳過去的json資料，「:」左邊等同name名稱，controller是抓這個名稱的
data我用了兩種方法
※如果將async設為false，就是同步
※注意think印出的時機，如果沒將controller的sleep打開，我試的結果它都是最後執行
但打開時，也就是停2秒，這兩秒的意思是模擬後端有很多工作
這時async為true時think會先執行，所以才叫非同步；false就變成最後執行，所以才叫同步
※另外還有可能會用到的還有error和statusCode，其他就很少用到了，要用時再研究
※ajaxPrefilter()、ajaxSetup()
var ajaxTest = function(){
$.ajaxSetup({
config1: 123,
config2: "c2",
config3: false,
config4: 4.5,
config5: {'c1': 1, 'c2': false},
url: "zzz"
});
$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
alert(options.url);//xxx
options.url = "http://localhost:8080/TestServletXXX/xxx/ooo/zzz";
alert(options.url);
alert('options=' + options);
alert('config1=' + options.config1); // 123
alert('config5=' + options.config5.c2); //false
for(o in options){
alert('o=' + o); // url、type、isLocal、global、processData、async、contentType、accepts、contents、responseFields、converters、flatOptions、jsonp、jsonpCallback、xhr、data、success、dataTypes、crossDomain
}
for(oo in originalOptions){
alert('oo=' + oo); // url、type、data、success
}
});
$.ajax({
url : "xxx",
type : "POST",//async : false,
data : $.param({
username: $('input[name="username"]').val(),
password: 'p'
}),
success : function(data, textStatus, jqXHR){
// ...
}
});
alert('think');
}
※使用ajaxPrefilter表示要在$.ajax前過濾，所以將$.ajax註解後，ajaxPrefilter也不會執行
※ajaxPrefilter的第一個參數是個選項，可以是xml html text json jsonp script，預設是「*」，像上面的範例，是沒有第一個參數的，這個參數表示還要特定的類型才會過濾，也就是說$.ajax有一個dataType的屬性，兩個對應才會過濾，隨便打也行，兩個有對應就ok
※ajaxSetup是設定options用的，在ajaxPrefilter的第二個參數的第一個option去點就有了，可以用自訂的、也可以用options本來就有的
理論上ajaxSetup是設options的預設值，我設sync有成功，但url居然失敗了，不知道為什麼，而致於其他的我也沒試
※像上面的ajaxPrefilter，我在呼叫前過濾一下，將xxx轉成另外一支叫xxx/ooo/zzz的servlet了
※ajaxTransport
$.ajaxTransport('abc', function(options, originalOptions, jqXHR) {
for(o in options) {
alert('o=' + o); // url、type、isLocal、global、processData、async、contentType、accepts、contents、responseFields、converters、flatOptions、jsonp、jsonpCallback、xhr、dataType、data、success、dataTypes、crossDomain、hasContent
}
for(oo in originalOptions) {
alert('oo=' + oo); // url、type、dataType、data、success
}
for(xhr in jqXHR) {
alert('xhr=' + jqXHR.xhr);// readyState、getResponseHeader、getAllResponseHeaders、setRequestHeader、overrideMimeType、statusCode、abort、state、always、then、promise、pipe、done、fail、progress、complete、success、error、[Object object]、completeCallback=function done(...
}
return {
send: function(headers, completeCallback) {
alert('headers=' + headers);
alert('completeCallback=' + completeCallback);
},
abort: function() {
alert('abort function');
}
};
});
※ajaxTransport的第一個參數是必填，否則不會執行，所以$.ajax的dataType也要一樣才會執行
※這個功能是用在ajaxPrefilter也無法滿足需求時，實際的用法我也不清楚
※快速方法
官網連結※post、get、getJSON
$.post(
'xxx',
$.param({
username: $('input[name="username"]').val(),
password: 'p'
}),
function(data, textStatus, jqXHR){
alert(data);
alert(textStatus);
alert(jqXHR);
},
'html'
);
※總共4個參數，第一個參數一定要，其他都是選項，最後一個參數是dataType，就是從server返回的格式是哪一種，如xml、json、script、text、htm，不給的話會自己猜測
※和另外一個$.get完全一樣，只差在要對應後端的doGet
※$.getJSON，差在沒有最後的dataType參數，因為就是json
※load
$('input[name="username"]').load(
'xxx',
$.param({
username: $('input[name="username"]').val(),
password: 'p'
}),
function(responseText, textStatus, XMLHttpRequest){
alert(responseText);
alert(textStatus);
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.statusText);
}
);
※事件也有一個方法叫load，兩個是不一樣的
※總共3個參數，第一個參數一定要，其他都是選項
※getScript
$.getScript(
'xxx.js',
function(script, textStatus, jqXHR){
alert(script);
alert(textStatus);
alert(jqXHR);
}
);
※前面的一定要連到server，這個不用
※第一個參數抓javascript，像我是將xxx.js和寫getScript這一支放在同一個目錄，所以這樣子就抓到了
※總共2個參數，第一個參數一定要
沒有留言:
張貼留言