Java基礎——Ajax（二），java基礎ajax

Java基礎——Ajax（二），java基礎ajax

一、jQuery 實現 ajax

$(function(){  $("#userName").blur(function(){  // 發ajax請求  用的函數原型: $.get(url, data, callback )  $.get("UserServlet",{uname:$("#userName").val()},function( receiveData){  $("#lblMsg").html(receiveData);                   });         });});

//服務端UserServletpublic void doPost(HttpServletRequest request, HttpServletResponse response)       throws ServletException, IOException {       String userName=request.getParameter("uname");       response.setContentType("text/html;charset=utf-8");       response.getWriter().print("這是用戶端傳過來的 使用者名稱 : "+userName+"  , 可用");  //盡量別加ln} 

二、jQuery.ajax([options]) 詳解

$("button").click(function(){  $.ajax({        type:"POST",   //大小寫不敏感,後面別忘加  " , ""        url:"UserServlet",   //一定要用引號擴起來        data: {userName:$("#userName").val(),password:$("#password").val()},   // "userName=123&password=456",        success:function(receiveData){        $("#lblMsg").html(receiveData);                        }          });       });

 //服務端 public void doPost(HttpServletRequest request, HttpServletResponse response)      throws ServletException, IOException {      request.setCharacterEncoding("utf-8");  //對方如果是post請求,可以這樣處理中文亂碼                      String userName=request.getParameter("userName");      String password=request.getParameter("password");                              response.setContentType("text/html;charset=utf-8");      response.getWriter().print("添加成功,添加的資訊是"+userName+":"+password); } 

參數說明

-- 回呼函數  beforeSend、error、dataFilter、success、complete( 當請求完成之後調用這個函數 )

-- 資料類型 dataType  /* 我們必須確保網頁伺服器報告的MIME類型與我們選擇的dataType所匹配。

比如說，XML的話，伺服器端就必須聲明 text/xml 或者 application/xml 來獲得一致的結果。 如果指定為html類型，任何內嵌的JavaScript都會在HTML作為一個字串返回之前執行類似的，指定script類型的話，也會先執行伺服器端產生JavaScript，然後再把指令碼作為一個文本資料返回。

如果指定為json類型，則會把擷取到的資料作為一個JavaScript對象來解析,並且把構建好的對象作為結果返回，為了實現這個目的，他首先嘗試使用JSON.parse()。

如果擷取的資料檔案存放在遠程伺服器上（網域名稱不同，也就是跨域擷取資料），則需要使用jsonp類型。

使用這種類型的話，會建立一個查詢字串參數 callback=? ，這個參數會加在請求的URL後面。伺服器端應當在JSON資料前加上回呼函數名，以便完成一個有效JSONP請求。

如果要指定回呼函數的參數名來取代預設的callback，可以通過設定$.ajax()的jsonp參數。

預期伺服器返回的資料類型。如果不指定，jQuery 將自動根據 HTTP 包 MIME 資訊來智能判斷，比如XML MIME類型就被識別為XML。在1.4中，JSON就會產生一個JavaScript對象，而script則會執行這個指令碼。隨後伺服器端返回的資料會根據這個值解析後，傳遞給回呼函數。

可用值: 

"xml": 返回 XML 文檔，可用 jQuery 處理。

"html": 返回純文字 HTML 資訊；包含的script標籤會在插入dom時執行。

"script": 返回純文字 JavaScript 代碼。不會自動緩衝結果。除非設定了"cache"參數。'''注意：'''在遠程請求時(不在同一個域下)，所有POST請求都將轉為GET請求。(因為將使用DOM的script標籤來載入)

"json": 返回 JSON 資料 。

"jsonp": JSONP 格式。使用 JSONP 形式調用函數時，如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函數名，以執行回呼函數。

"text": 返回純文字字串 */

--發送資料 data選項

既可以包含一個查詢字串，比如 key1=value1&key2=value2，也可以是一個映射，比如 {key1: 'value1', key2: 'value2'} 。如果使用了後者的形式，則資料再發送器會被轉換成查詢字串

--進階選項

cache  //是否緩衝 預設值是true  , (dataType為script和jsonp時預設為false)

async  //是否使用非同步 預設值 為true ,預設的情況下,所有的請求都是非同步請求

contentType //預設: "application/x-www-form-urlencoded")

context  /* 設定Ajax相關回呼函數的上下文

$.ajax({ url: "test.html", context: document.body, success: function(){$(this).addClass("done");}}); */