6、jQuery與Ajax的應用

時間 2019-11-05

標籤 jquery ajax 應用欄目 JQuery 简体版

原文原文鏈接

Ajax全稱爲"Asynchronous JavaScript and XML"（異步JavaScript和XML），它並非指一種單一的技術，而是有機地利用了一系列交互式網頁應用相關的技術所造成的結合體。它的出現，揭開了無刷新更新頁面的新時代，並有代替傳統的web方式和經過隱藏的框架來進行異步提交的趨勢，是web開發應用的一個里程碑。javascript

jQuery中的Ajaxhtml

jQuery對Ajax操做進行了封裝，在jQuery中$.ajax()方法屬於最底層的方法，第2層是load()、$.get()和$.post()方法，第3層是$.getScript()和$.getJSON()方法。java

1、load()方法jquery

一、載入HTML文檔web

load()方法是jQuery中最爲簡單和經常使用的Ajax方法，能載入遠程HTML代碼並插入DOM中。結構爲，load(url,[data],callback)ajax

url:類型爲string 請求HTML頁面的URL地址。json

data：可選類型爲 Object 發送至服務器的key/value數據數組

callback：可選類型爲Function 請求完成時間的回調函數，不管請求成功或失敗瀏覽器

$("#resText").load("test.html");

二、帥選載入的HTMl文檔緩存

若是隻須要加載某個頁面的某些元素，那麼可使用load()方法的URL參數來達到目的。經過爲URL參數指定選擇符，就能夠很方便地從加載過來的HTML文檔裏帥選出所須要的內容。

load()方法的URL參數的語法結構爲："url selector"。注意，url和選擇器之間有一個空格。

例如

$("#resText").load("test.html .para");

三、傳遞方式

load()方法的傳遞方式根據參數data來自動指定。若是沒有參數傳遞，則此採用GET方式傳遞。反之，則會自動轉爲POST方式。

//有參數傳遞，則是POST方式
$("resText").load("text.html",{name:"wang",age:"22"},function(){.....}); 
//無參數傳遞，則是GET方式
$("resText").load("text.html",function(){});

四、回調函數

對於必須加載完成後才能繼續的操做，load()方法提供了回調函數(callback)，該函數有3個參數，分別表明請求返回的內容、請求的狀態和XMLHttpRequest對象，

$("#resText").load("text.html",function(responseText,textStatus,XMLHttpRequest){
    //responseText  返回內容
    //textStatu  請求狀態:success、error、notmodified、timeout4中
    //XMLHttpRquest :XMLHttpRequest對象
});

在load()方法中不管AJax請求是否成功，只要當請求完成後，回調函數就會觸發。

2、$.get()方法和$.post()方法

load()方法一般用來從web服務器上獲取靜態的數據文件，然而這並不能體現Ajax的所有價值。在項目中，若是須要傳遞一些參數給服務器中的頁面，那麼可使用$.get()或者$.post()方法或者是$.ajax()方法。

一、$.get()方法

$.get()方法使用GET方式來進行異步請求。它的結構爲：

$.get(url,[data],[callback],[type])

url:請求的html頁的url地址

data：Object 發送至服務器的key/value數據會做爲QueryString 附加請求url中

callback:function 載入成功時回調函數(只有當response的返回狀態是succes才調用該方法)自動將請求結果和狀態傳遞給該方法。

type：string服務器端返回內容的格式，包括xml、html、script、json、text和_default

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%
  String path=request.getContextPath();
 %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" >
 $(function(){
  $("#send").click(function(){
   $.get("<%=path%>/testServlet.do",{
    username:$("#username").val(),
    content:$("#content").val()
   },function(data){
    //回調函數
    $("#resText").html(data);
   
   },"html");
  });
  
 });
</script>
</head>
<body>
<form id="form1" action="#">
     <p>評論：</p>
        <p>姓名：<input type="text" name="username" id="username"  /></p>
        <p>內容：<textarea name="content" id="content" rows="2" cols="20" >
        </textarea></p>
        <p><input type="button" id="send" value="提交"  /></p>
    </form>
    <div class="comment">已有評論：</div>
    <div id="resText"></div>
</body>
</html>

java後臺：

package com.edu.servlet;
import java.io.IOException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class TestServlet extends HttpServlet{
 private static final long serialVersionUID = 1L;
 public void doPost(HttpServletRequest request,HttpServletResponse response){
  String username=request.getParameter("username");
  String content=request.getParameter("content");
  try {
  //這裏返回的是html
   response.getWriter().write("<div>"+username+":"+content+"</div>");
  } catch (IOException e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
  }
 }
 
 public void doGet(HttpServletRequest request,HttpServletResponse response){
  this.doPost(request, response);
 }
}

二、json文件

之因此會出現這種數據格式的文件，很大程度上時由於xml文檔體積大和難以解析。json文件和xml文件同樣，也能夠方便的被重用。並且json文件很是簡潔，也容易閱讀。

因爲服務端返回的數據格式是json文件，所以須要對返回的數據進行處理以後，才能夠將新的html數據添加到主頁面中。

三、$.post()方法

它和$.get()方法的結構和使用方式都相同，不過他們之間仍然有如下區別：

①get請求會將參數跟在url後進行傳遞，而post請求則是http消息的實體內容發送給web服務器。固然，在ajax請求中，這種區別對用戶是不可見的。

②get方式對傳輸的數據有大小限制(一般不能大於2kb)，而使用post方式傳遞的數據量要比get方式大的多(理論上不受限制)。

③get方式請求的數據會被瀏覽器緩存起來，所以其餘人就能夠從瀏覽器的歷史記錄讀取到這些數據，例如帳號和密碼等。在這種狀況下，get方式會帶來嚴重的安全性問題，而post方式相對來講就能夠避免這些問題。

3、$.getScript()方法和$.getJson()方法

一、$.getScript()方法

有時候，在頁面初次加載時就取得所需的所有Javascript文件是徹底沒有必要的。能夠在須要哪一個Javascript文件時，動態的建立<script>標籤，

例如

$(document.createElement("script")).attr("src","test.js").appendTo("head");

或者

$("<script type="text/javascript" src='text.js'></script>").appendTo("head");;

可是這種方式並不理想。爲此，jQuery提供了$.getScript()方法來直接加載js文件，與加載一個html片斷同樣簡單方便，而且不須要對Javascript文件進行處理，Javascript文件會自動執行。

$("test.js",function(){
//回調函數
});

二、$.getJSON()方法

$.getJSON("text.json",function(){
//回電函數，處理json數據
});

4、$.ajax()方法

$.ajax()方法是jQuery最底層的Ajax實現

$.ajax(options)

該方法只有1個參數，但在這個對象裏包含了$.ajax()方法所須要的請求設置以及回調函數等信息，參數以key/value的形式存在，全部參數都是可選的。

參數名稱	類型	說明
url	String	發送的請求地址
type	string	請求方式：post\get\put\delete默認爲get
timeout	Number	設置請求超時時間(ms).此設置將覆蓋$.ajaxSetup()方法的全局設置。
data	Object或String	發送到服務器的數據，若是已經不是字符串，將自動轉換爲字符串格式。
dataType	String	預期服務器返回的數據類型。xml、html、script、json、jsonp、text
beforeSend	Function	發送請求前能夠修改XMLHttpRequest對象的函數
complete	Function	請求完成後調用的回調函數
success	Function	請求成功後調用的回調函數有兩個參數 ①有服務器返回，並根據dataType參數進行處理後的數據。 ②描述狀態的字符串 function(data,textStatus){ }
error	Function	請求失敗時被調用的函數。該函數有3個參數，XMLHttpRequest對象、錯誤信息、捕獲的錯誤對象。 function(XMLHttpRequest,textStatus,errorThrown){ }
global	Boolean	默認爲true。表示是否觸發全局AJax事件，

前面用到的load()方法、$.get()、$.post()、$.getScript()、$.getJson()方法，都是基於$.ajax()方法構建的。$.ajax是jQuery最底層的ajax實現，所以能夠用它來代替前面的全部方法。

//簡單用戶登陸
$(function(){
  $(".login-btn").click(function(){
   $.ajax({
    url:'<%=path%>/testServlet.do',
    type:'post',
    data:{username:$('#username').val(),content:$('#content').val()},
    dataType:'json',
    success:function(data){
     alert(data.username);
    }
   });
   
  });
  
 });

//java後臺
public void doPost(HttpServletRequest request,HttpServletResponse response){
  Person p=new Person();
  p.setUsername("wangning");
  //ObjectMapper objctMapper=new ObjectMapper();
          // ObjectMapper mapper=new ObjectMapper();
  JSONObject object=JSONObject.fromObject(p);
           try {
   //String json=mapper.writeValueAsString(p);
   response.getWriter().write(object.toString());
  } catch (Exception e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
  }
           
 
 }

5、序列化元素

一、serialize()

作項目的時候，表單時必不可少的.常規的方法是使表單提交到另外一個頁面，整個瀏覽器都會被刷新，而使用AJax技術則可以異步地提交表單，並將服務器返回的數據顯示在當前頁面中。前面若是要傳入data參數，則須要將字段的值逐個添加到data參數中。

{
username;$("#username").val(),
content:$("#content").val()
}

這種方式在只有少許字段的表單中，勉強還可使用，但若是表單元素愈來愈複雜使用這種方式在增大工做量的同時，也使表單缺少彈性。jQuery爲這一經常使用的操做提供了一個簡化的方法-----serialize()方法。與 jquery中其餘方法同樣，serialize()方法也是做用於一個jQuery對象，它可以將DOM元素內容序列化字符串，用於ajax請求。

將上面的例子改爲

//簡單用戶登陸

$(function(){

  $(".login-btn").click(function(){

   $.ajax({

    url:'<%=path%>/testServlet.do',

    type:'post',

    data:$("#form1").serialize(),
    dataType:'json',

    success:function(data){

     alert(data.username);

    }

   });

   

  });

  

 });

也可使用字符串方式，例如

"username="+encodeURIComponent($("#username").val())+"$content="+encodeURIComponent($("#content").val())

用字符串方式時，須要注意對字符編碼(中文問題)，若是不但願編碼帶來麻煩，可使用serialize()方法，他會自動編碼。

二、serialize()方法不只做用於表單上，其餘選擇器選取的元素也都能使用它，

$(":checkbox,:radio").serialize()

把複選框和單選框的值序列化爲字符串形式，只會將選中的值序列化。

三、serializeArray()方法

在jQuery中還有一個與serialize()方法相似的方法---serializeArray(),該方法不是返回字符串，而是將DOM元素序列化後，返回json格式的數據。

四、$.param()方法

它是serialize()方法的核心，用來對一個數組或對象按照key/value進行序列化。好比將一個普通的對象序列化

var obj={a:1,b:2,c:3};
var k=$.param(obj);
alert(k); //輸出a=1&b=2&c=3

6、jQuery中的ajax全局事件

jQuery簡化Ajax操做不只體如今調用AJax方法和處理響應方面，並且還體如今對調用Ajax方法的過程當中的HTTP請求的控制。經過jQuery提供了一些自定義全局函數，可以爲各類與Ajax相關的事件註冊回調函數。例如當AJax請求開始時，會觸發ajaxStart()方法的回調函數。當Ajax請求結束時，會觸發ajaxStop()方法的回調函數。這些方法都是全局的方法，所以不管建立他們的代碼位於何處，只要有Ajax請求發生時，就會觸發他們。

例如爲網頁添加提示信息：「加載中....」

 <div id="loading">加載中...</div>
//jquery代碼
$(function(){
$("#loading").hide();
$("#loading").ajaxStart(function(){
    $(this).show();
});
$("#loading").ajaxStop(function(){
    $(this).hide();
});
});

使用Css控制元素隱藏，當AJax請求開始的時候，將此元素顯示出來，用來提示用戶Ajax請求正在進行。當AJax請求結束時，將此元素隱藏。若是在此頁面中的其餘地方使用Ajax，該提示信仍然有效，由於它是全局的。jQuery的Ajax全局事件中還有幾個方法，也能夠在使用Ajax方法的過程當中爲其帶來方便。

方法名稱	說明
ajaxStart(callback)	Ajax請求開始時執行的函數
ajaxStop(callback)	Ajax請求結束時執行的函數
ajaxComplete(callback)	Ajax請求完成時執行的函數
ajaxError(callback)	AJax請求發生錯誤時執行的函數，捕捉到的錯誤能夠做爲最後一個參數傳遞
ajaxSend(callback)	Ajax請求發送前執行的函數
ajaxSuccess(callback)	Ajax請求成功時執行的函數

若是想使某個AJax請求不受全局方法的影響，那麼能夠在使用$.ajax()方法時，將參數中的global設置爲false，

$.ajax({
url:"test.html",
global:false  //不觸發全局ajax事件
});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。