JavaScript Ajax

AJAX là một kỹ thuật phát triển web để tạo các ứng dụng web tương tác. Nếu bạn biết JavaScript, HTML, CSS và XML, thì bạn chỉ cần dành một giờ để bắt đầu với AJAX

Tại sao nên học Ajax?

AJAX là viết tắt của JavaScript và XML không đồng bộ. AJAX là một kỹ thuật mới để tạo các ứng dụng web tốt hơn, nhanh hơn và tương tác hơn với sự trợ giúp của XML, HTML, CSS và Java Script

• Ajax sử dụng XHTML cho nội dung, CSS để trình bày, cùng với Mô hình đối tượng tài liệu và JavaScript để hiển thị nội dung động

• Các ứng dụng web thông thường truyền thông tin đến và từ máy chủ bằng cách sử dụng các yêu cầu đồng bộ. Điều đó có nghĩa là bạn điền vào biểu mẫu, nhấn gửi và được chuyển đến một trang mới với thông tin mới từ máy chủ

• Với AJAX, khi bạn nhấn gửi, JavaScript sẽ gửi yêu cầu đến máy chủ, diễn giải kết quả và cập nhật màn hình hiện tại. Theo nghĩa thuần túy nhất, người dùng sẽ không bao giờ biết rằng bất kỳ thứ gì thậm chí đã được truyền đến máy chủ

• XML thường được sử dụng làm định dạng để nhận dữ liệu máy chủ, mặc dù có thể sử dụng bất kỳ định dạng nào, kể cả văn bản thuần túy

• AJAX là một công nghệ trình duyệt web độc lập với phần mềm máy chủ web

• Người dùng có thể tiếp tục sử dụng ứng dụng trong khi chương trình máy khách yêu cầu thông tin từ máy chủ ở chế độ nền

• Tương tác người dùng trực quan và tự nhiên. Không cần nhấp chuột, di chuyển chuột là đủ để kích hoạt sự kiện

• Theo hướng dữ liệu trái ngược với hướng theo trang

Công nghệ ứng dụng Internet phong phú

AJAX là công nghệ Rich Internet Application [RIA] khả thi nhất cho đến nay. Nó đang nhận được động lực to lớn của ngành và một số bộ công cụ và khung đang nổi lên. Nhưng đồng thời, AJAX không tương thích với trình duyệt và nó được hỗ trợ bởi JavaScript, khó bảo trì và gỡ lỗi

AJAX dựa trên các tiêu chuẩn mở

AJAX dựa trên các tiêu chuẩn mở sau đây –

• Bản trình bày dựa trên trình duyệt sử dụng HTML và Cascading Style Sheets [CSS]
• Dữ liệu được lưu trữ ở định dạng XML và được lấy từ máy chủ
• Tìm nạp dữ liệu hậu trường bằng các đối tượng XMLHttpRequest trong trình duyệt
• JavaScript để biến mọi thứ thành hiện thực

Khán giả

Hướng dẫn này sẽ hữu ích cho các nhà phát triển web muốn tìm hiểu cách tạo các trang web tương tác cũng như cải thiện tốc độ và khả năng sử dụng của họ bằng AJAX

điều kiện tiên quyết

Bạn nên làm quen với HTML và JavaScript trước khi thực hiện hướng dẫn này

Ajax là viết tắt của JavaScript và XML không đồng bộ. Nó được sử dụng để thực hiện giao tiếp không đồng bộ với máy chủ. Ajax được sử dụng để đọc dữ liệu từ máy chủ và cập nhật trang hoặc gửi dữ liệu đến máy chủ mà không ảnh hưởng đến trang máy khách hiện tại. Ajax là một khái niệm lập trình.  

Dưới đây là một số cách để thực hiện cuộc gọi Ajax trong JavaScript

Cách tiếp cận 1. Trong cách tiếp cận này, chúng ta sẽ sử dụng đối tượng XMLHttpRequest để thực hiện lệnh gọi Ajax. Phương thức XMLHttpRequest[] tạo đối tượng XMLHttpRequest được sử dụng để thực hiện yêu cầu với máy chủ.  

cú pháp.  

var xhttp = new XMLHttpRequest[];

Cú pháp trên được sử dụng để tạo đối tượng XMLHttpRequest. Đối tượng này có nhiều phương thức khác nhau được sử dụng để tương tác với máy chủ để gửi, nhận hoặc ngắt phản hồi từ máy chủ. Trong phản hồi, chúng tôi nhận được một chuỗi từ máy chủ mà chúng tôi in.  

Thí dụ.  

Javascript

    function run[] {

"{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}"

0

"{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}"

1

"{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}"

2

"{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}"

1

"{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}"

4

"{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}"

5

"{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}"

6

"{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}"

7

"{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}"

0

"{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}"

1

$.ajax[{arg1: value, arg2: value, .. }];

0

"{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}"

1

"{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}"

4

$.ajax[{arg1: value, arg2: value, .. }];

3

$.ajax[{arg1: value, arg2: value, .. }];

4_______11_______5

"{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}"

1

$.ajax[{arg1: value, arg2: value, .. }];

7

$.ajax[{arg1: value, arg2: value, .. }];

8

$.ajax[{arg1: value, arg2: value, .. }];

9

{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

0

{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

1

"{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}"

0

"{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}"

1

{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

4

"{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}"

1

{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

6function

{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

8

{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

9_______30_______0

fetch[url, {config}].then[].catch[];

1

fetch[url, {config}].then[].catch[];

2_______30_______3

fetch[url, {config}].then[].catch[];

2

fetch[url, {config}].then[].catch[];

5

fetch[url, {config}].then[].catch[];

6_______30_______7

fetch[url, {config}].then[].catch[];

2

fetch[url, {config}].then[].catch[];

9

{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

9

{ userId:1 ,id:1 ,title : "delectus aut autem" ,completed : false
__proto__:Object }
Title of our response :  delectus aut autem

1

"{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}"

1

{ userId:1 ,id:1 ,title : "delectus aut autem" ,completed : false
__proto__:Object }
Title of our response :  delectus aut autem

1

"{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}"

1____41_______5

"{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}"

1

{ userId:1 ,id:1 ,title : "delectus aut autem" ,completed : false
__proto__:Object }
Title of our response :  delectus aut autem

7

    

{ userId:1 ,id:1 ,title : "delectus aut autem" ,completed : false
__proto__:Object }
Title of our response :  delectus aut autem

1

    1

2

đầu ra.  

"{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}"

Cách tiếp cận 2. Trong cách tiếp cận này, chúng tôi sẽ sử dụng jQuery để thực hiện cuộc gọi ajax. Phương thức ajax[] được sử dụng trong jQuery để thực hiện cuộc gọi ajax. Nó được sử dụng để thay thế cho tất cả các phương pháp không hoạt động để thực hiện cuộc gọi ajax.  

cú pháp

$.ajax[{arg1: value, arg2: value, .. }];

Tham số. Phải mất một tệp cấu hình định cấu hình URL, loại, chức năng để gọi khi chúng tôi nhận được phản hồi hoặc nếu có lỗi, v.v.

Thí dụ.  

HTML

3

4_______99_______56

"{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}"

0

496

    99_______4_______100_______3     4    5

    6_______99_______6

        9_______100_______36

    9_______99_______96

"{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}"

0

4function76

"{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}"

0

    4_______100_______36

"{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}"

0

"{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}"

1run[] {6

{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

9_______102_______8

"{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}"

0

fetch[url, {config}].then[].catch[];

6______1_______01

fetch[url, {config}].then[].catch[];

6______1_______03

    

"{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}"

05

"{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}"

0

fetch[url, {config}].then[].catch[];

6______1_______08

fetch[url, {config}].then[].catch[];

6_______1_______10

"{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}"

0

fetch[url, {config}].then[].catch[];

6_______1_______13

fetch[url, {config}].then[].catch[];

6_______1_______15

fetch[url, {config}].then[].catch[];

6_______1_______17

"{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}"

18

"{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}"

19

"{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}"

18

"{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}"

21

fetch[url, {config}].then[].catch[];

6______1_______23

"{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}"

0

fetch[url, {config}].then[].catch[];

6______1_______26

fetch[url, {config}].then[].catch[];

6______1_______28

"{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}"

18

"{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}"

30

fetch[url, {config}].then[].catch[];

6_______41_______1

{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

9_______1_______34

"{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}"

1

{ userId:1 ,id:1 ,title : "delectus aut autem" ,completed : false
__proto__:Object }
Title of our response :  delectus aut autem

1

"{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}"

1

"{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}"

38

        9_______100_______36

    9_______101_______76

"{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}"

0

    9_______99_______56

đầu ra.  

{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

Cách tiếp cận 3. Theo cách tiếp cận này, chúng tôi sẽ sử dụng API tìm nạp [] được sử dụng để tạo XMLHttpRequest với máy chủ. Do cấu trúc linh hoạt nên rất dễ sử dụng. API này đưa ra yêu cầu tới máy chủ và nhận kết quả là một lời hứa được giải quyết thành chuỗi

cú pháp.  

fetch[url, {config}].then[].catch[];

Tham số. Nó lấy URL và cấu hình của yêu cầu làm tham số.  

Chúng tôi sẽ định cấu hình dữ liệu cần thiết và gửi yêu cầu đến máy chủ. Vì đó là một lời hứa đã được giải quyết, chúng tôi sử dụng hàm then[] và hàm catch[] để tạo đầu ra cho kết quả. Đáp lại, chúng tôi nhận được chuỗi mà chúng tôi in.  

AJAX JavaScript được sử dụng để làm gì?

AJAX JavaScript có còn được sử dụng không?

AJAX và JSON có giống nhau không?

AJAX có tốt hơn JavaScript không?