Ajax with JQuery [Selectors : Basic]


Trong các bài này mình hướng dẫn các thành phần cơ bản về Jquery trong Ajax

Source code : Download

Các bạn có thể thấy document jquery  http://docs.jquery.com/ khá chi tiết và đầy đủ. Các bạn có thể học trực tiếp trên web của họ và có thể làm việc 1 cách dể dáng. Ở đây mình chỉ tóm gọn để mình có thể tổng quan về Jquery. Hy vọng giúp ích được các bạn

*Note* : Load file jquery.js trước các file Scripts

Lấy DOM Elements

  • Chúng ta sử dụng $(“css selector”) để lấy 1 tập các DOM elements.
  • Basic Example:
  1. $(“#some-id”) :  Trả về 1 element – với với tag HTML có id = some-id, Chúng ta thường dùng trong Ajax.
  2. $(“p”) : Trả về cho chúng ta ALL các thẻ p ….<p></p>.
  3. $(“.YourClass”) : Trả về cho chúng ta các thẻ có class = “YourClass” , Example <h1 class=”YourClass”>, <ul class=”YourClass”> nó sẻ lấy 2 thẻ h1 và thẻ ul về cho chúng ta
  4. $(“li b span.boom”) : Trả về all thẻ <span class=”boom”> bên trong <b> và bên trong thẻ <li> . Example : <li> <b> <span class=”boom”>HEHE </span> </b> </li>

Thao Tác DOM Elements

  • $(“#some-id”).val() : trả vể value của input element (only one element)
  • $(“selector”).each(function): chúng ta duyệt qua cac selector và run function đó:
  1. Example : <li>ABC</li> – <li>XYZ</li>.
  2. Chúng ta thực hiện each : $(“li”).each(function(){ //do some thing… })
  • $(“selector”).addClass(“name”) : Thêm CSS class name vào trong các selector : các method tương tự như removeClass, toggleClass.
  • $(“selector”).hide() : Tạo ra invisible (display:none). Các method tương tự như show, fadeOut, fadeIn…
  • $(“selector”).click(function) : Add click handler . Các method tương tự như change, focuse, mouseover,…
  • $(“selector”).html(“<tagHTML> do some thong </tagHTML>”); nó hoạt động giống innerHTML của chúng ta . các method tương tự như append, prepend..

Kết hợp : $(“a”).click(function1).addClass(“name”).each(function2).

Ajax – Basic

$.ajax(options).

Cú pháp cơ bản : $.ajax({ url:“address”, success : function });

  • Function : đây là hàm điều khiển giá trị trả về từ server (responseText) thường chúng ta sẻ trả về PlainText, XML, JSON.
  • Đề xác định loại giá trị trả về chúng ta sử dụng tùy chọn : dataType

Options cho $.ajax({….})

  • Luôn sử dụng url, success (bắt buộc)
  • các tùy chọn khác : cache, data, dataType, error, type, username, password

Process handler function cho tùy chọn success

  • Cơ bản nhất mà chúng ta use : function someHandler(Text) { … }

Note : Text ở đây có thể là : normal Text, XML, JSON phụ thuộc vào dataType.

  • Đầy đủ nhất : function someHandler(Text, Status, Request) {…}
  1. Text : data response từ server gửi về client.
  2. Status : mô tả trạng thái có thể như status : “success” or “notmodified”, nếu đó là error handlers thì nó có nhiều lý do để sử dụng.
  3. request : XMLHttpRequest object.

Ví dụ cơ bản :

function showGreeting(){
	$.ajax({
		url : "MyServer.jsp",
		success : showResult,
		cache : false
	});
}

function showResult(text){
	alert(text);
}

Server của chúng ta :MyServer.jsp

d1

Client :

<fieldset>
<legend>Using $.Ajax Basic - Using Onlick in HTML</legend>
<input type="button" onclick="showGreeting()" value="Show Greeting">
</fieldset>

kết quả :
d1

Event Handlers in JavaScript

  • Cách thông thường chúng ta dùng là thiết lập event Onclick trong HTML
  • Jquery :
  1. $( function(){…} ) : function này run sau khi DOM được load lên. Nhưng không so với hình ảnh nó hoạt dộng giống với window.onload
  2. $(“#some-id”).click(someHandler) : Gán sự kiện onlick trên đối tượng có id tương ứng.

Tương tự với demo trên chúng ta bỏ sự kiện onClick trong HTML:

<input type=”button” onclick=”showGreeting()” value=”Show Greeting”>

chúng ta add thêm vào message.js đoạn code sau :

<input type=”button” id=”showGreeting” value=”Show Greeting”>

$(function() {
     $("#showGreeting").click(showGreeting);
});

$.ajax Sending Data

$.ajax({ url: …, success: …, data: … });

ví dụ data chúng ta có thể như sau :

  1. $.ajax({… data: “param1=foo+bar%21&param2=baz”});
  2. $ ajax({ data: { param1: ” foo bar!”, param2: ” baz” }});

Chúng ta lấy data từ các input element như sau :

var myValue = $(“#textfield-id”).val();

Làm việc trên all các input element. Ngoại trừ các đối tượng multiSelect (nó có thể trả về array)

Sau đây là 3 cách mà chúng ta thiết lập DATA

  • Thiết lập String rỏ ràng như thiết lập trên URL : 

$ ajax ({url:… data:”a=value1&b =value2″ success:…. });

  • Data Object : URL được mã hóa tự động
  1. var params = { a: “value1”, b: “value2”};
  2. $.ajax({url:… , data : params, success:…. });
  • String built by “serialize”
  1. Chúng ta truyền vào id-form. khi chúng ta gọi serialize trên form, nó sẻ built tương tự như một query string khi chúng ta nhấn submit form vậy.
  2. $.ajax({url: …, data: $(“#form-id”).serialize() , success: …});

Overview :

Common options: example
$.ajax({

  • url: ” address” , 
  • success: successHandlerFunction,
  • data: { param1: “value1”, param2: “value2”},
  • error: errorHandlerFunction,
  • cache: false,
  • dataType: “json”,
  • username: “….”,
  • password: “…..”

});

Để biết thêm các tùy chọn khác và hiểu được các tùy chọn chúng ta gé : http://api.jquery.com/jQuery.Ajax/

Đơn giản hóa việc Insert String vào HTML vs Load Function in JQUERY

Basic : 

  • $(“#result-area-id”).load(“url”) ;
  • $(“#result-area-id”).load(“url”, data) ;
  • $(“#result-area-id”).load(“url” data handlerFunction );

Filtering returned HTML (!)

  • $(“#result-id”).load(“address li”);

Khá là hay nha…chúng ta chỉ insert all các thẻ <li> có trong address đó .

Đối vời JSON chúng ta củng làm như thao tác bình thường :

chúng ta có servlet trả về JSONObject như sau :

package com.ajax.demo;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.json.JSONArray;
import org.json.JSONObject;

@WebServlet("/ProductServlet")
public class ProductServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

    public ProductServlet() {
        super();

    }

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setHeader("Cache-Control", "no-cache");
		response.setHeader("Pragma", "no-cache");
		response.setContentType("text/javascript");
		response.setContentType ("application/json");
		PrintWriter out = response.getWriter();

		Product p1 = new Product("1001", "Iphone-4S", 1500);

		JSONObject productsJSON = new JSONObject(p1);
		out.print(productsJSON);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

Client HTML của chúng ta như sau :

<fieldset>
	<legend>Using $.Ajax JSON Basic</legend>
	<input type="button" id="showProduct1" value="Show Product">
	<div id="mydiv2"></div>
</fieldset>

file message.js của chúng ta thiết lập 2 function sau :

function showProduct(){
	$.ajax({
		url:"ProductServlet",
		success : displayResult,
		dataType : "json"
	});
}

function displayResult(text){
	var resutl = text.id + " - " + text.name + " - " + text.price;
	$("#mydiv2").html(resutl);
}

Kết quả chúng ta có thể nhận :
d1

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: