Khu Techie

Nguyên mẫu là khuôn khổ rộng rãi nhất được sử dụng cho Ajax vận hành. Ưu điểm chính của việc sử dụng thử nghiệm Ajax Framework là đơn giản hơn để sử dụng, tự động thực hiện qua trình duyệt và nó cung cấp bó chức năng tiện ích mà có thể được sử dụng trong mã JavaScript của bạn. Bài viết này sẽ danh sách xuống nhiều cách khác nhau do đó bạn có thể làm cho Ajax gọi thử nghiệm bằng cách sử dụng khung. Hướng dẫn này không đi vào chi tiết, nhưng thực hiện cho bạn thấy làm thế nào chúng tôi có thể làm cơ bản sử dụng thử nghiệm cuộc gọi Ajax Ajax Framework.

Trong thử nghiệm có ba cách để bạn có thể thực hiện cuộc gọi Ajax.
1) Ajax.Request
2) Ajax.PeriodicalUpdater
3) Ajax.Updater

Trước khi chúng tôi chuyển sang học tập của cá nhân Ajax gọi chúng ta cũng cần phải hiểu những sự kiện khác nhau và nhận được các thông số được sử dụng trong khi thực hiện cuộc gọi Ajax.

Trong số các tham số khác nhau Object Passed to Ajax.Request:
phương pháp
Điều này có thể được HTTP GET hoặc HTTP POST. Bằng phương pháp mặc định được xác định là POST.

thông số
Điều này giữ cặp giá trị chính của dữ liệu mà chúng ta sẽ vượt qua đến trang yêu cầu. Đây là cùng một dữ liệu mà chúng tôi đi qua chuỗi truy vấn URL trong khi gọi từ xa.

tần số
Ở đây bạn chỉ định khoảng thời gian trong vài giây trong đó gọi Ajax sẽ được thực hiện.

phân rã
Này được sử dụng để tăng khoảng thời gian cho Ajax gọi nếu không có sự thay đổi trong phản ứng. Số tiền nhận được tăng lên là khoảng tần số * sâu răng. Điều này đảm bảo rằng chúng tôi không làm cho Ajax không cần thiết gọi cho cùng một phản ứng nhận được từ máy chủ.

Nguyên mẫu Ajax sự kiện:
onCreate:
Sự kiện này được gọi là bất cứ khi nào một ajax mới gọi là yêu cầu thực hiện. Điều này rất hữu ích khi chúng ta muốn hiển thị một hình ảnh tải chỉ gọi ajax.

onSuccess:
Sự kiện này được gọi là bất cứ khi nào các yêu cầu được hoàn tất và mã trạng thái trả lại là trong 2xx series.

onFailure:
Sự kiện này được gọi là bất cứ khi nào các yêu cầu được hoàn tất và mã trạng thái trả lại không có trong 2xx series.

onComplete:
Sự kiện này được gọi là bất cứ khi nào các yêu cầu được hoàn tất và yêu cầu kết nối những vòng đời hoàn tất. Sự kiện này được gọi là sau sự kiện onSuccess và onFailure. Trong sự kiện này, chúng tôi thường ẩn hình ảnh tải.

Yêu cầu đọc Response:
Với khung mẫu thử nghiệm, chúng tôi có thể đọc hoặc là String, XML và nội dung JSON. String nội dung có thể được đọc bằng cách gọi phương thức responseText, nội dung XML có thể được đọc bằng cách gọi responseXML và nội dung JSON có thể được đọc bằng cách gọi responseJSON phương pháp.

Ajax.Request:
Ở đây chúng tôi đưa ra một yêu cầu ajax đơn đến một trang máy chủ và sau khi nhận được phản hồi từ máy chủ kết nối được chấm dứt. Các đơn giản thực hiện cho cùng là

	 "http://www.hiteshagrawal.com/uploads/ajax_time.php" ; var ajaxObjhttp = new Ajax. Request ( url , { method : 'POST' , parameters : { operation : "readRecord" } , onCreate : function ( transport ) { alert ( "Creating New Ajax Call" ) ; } , onSuccess : function ( transport ) { var serverResponse = transport. responseText ; } , onFailure : function ( response ) { alert ( "Some error occured while making call to remote server" ) ; } } ) ; var url = "http://www.hiteshagrawal.com/uploads/ajax_time.php"; var ajaxObjhttp = mới Ajax Yêu cầu (url, (method: 'POST', parameters: (hoạt động: "readRecord"), onCreate.: chức năng (giao thông) (alert ( "Tạo mới Ajax Call");), onSuccess: chức năng (giao thông) (var serverResponse = responseText vận tải;.), onFailure: function (response) (alert ( "Một số lỗi xảy ra trong khi thực hiện cuộc gọi đến máy chủ từ xa ");))); 

Ở đây chúng ta làm cho một đối tượng của Ajax.Request. 2 đối tượng này chấp nhận các tham số tham số đầu tiên là trang yêu cầu url và đối tượng khác mà giữ thông tin cần thiết mà chúng tôi sẽ được gửi / nhận được từ trang chủ. Ngày thành công nhận được dữ liệu từ các trang yêu cầu chúng ta đọc dữ liệu bằng cách gọi phương thức responseText.

  "http://www.hiteshagrawal.com/uploads/ajax_time.php" ; var url = "http://www.hiteshagrawal.com/uploads/ajax_time.php";
	 new Ajax. PeriodicalUpdater ( "textobj" , url , { var ajaxObjhttp = mới Ajax PeriodicalUpdater ( "textobj", url,. (
		 , Phương pháp: 'POST',
		 , tần số: 3,
                 phân rã: 2
          )); 

Ở đây chúng ta làm cho một đối tượng của Ajax.PeriodicalUpdaterRequest. Các đối tượng này chấp nhận 3 tham số paramter đầu tiên là tên của các DIV / SPAN nơi kiểm soát dữ liệu sẽ được cập nhật, thứ hai tham số yêu cầu giữ URL và tham số thứ ba giữ một đối tượng trong đó có các thông tin cần thiết mà chúng tôi sẽ được gửi / nhận được từ Sửa máy chủ.

Ajax.Updater:
Sự khác biệt duy nhất giữa Ajax.Request và Ajax.Updater là trong Ajax.Updater chúng tôi xác định DIV / SPAN tên kiểm soát vì vậy bây giờ dữ liệu trả về từ máy chủ sẽ được tự động cập nhật trong DIV / SPAN kiểm soát hoạt động khi hoàn thành.

  "http://www.hiteshagrawal.com/uploads/ajax_time.php" ; var url = "http://www.hiteshagrawal.com/uploads/ajax_time.php";
	 new Ajax. Updater ( "textobj" , url , { var ajaxObjhttp = mới Ajax Updater ( "textobj", url,. (
		 operation : "readRecord" } tham số: (hoạt động: "readRecord")
         )); 

Ở đây chúng ta làm cho một đối tượng của Ajax.Updater. Các đối tượng này chấp nhận 3 tham số tham số đầu tiên là tên của / DIV SPAN nơi dữ liệu sẽ được cập nhật, thứ hai tham số yêu cầu giữ URL và tham số thứ ba giữ một đối tượng trong đó có các thông tin cần thiết mà chúng tôi sẽ được gửi / nhận được từ máy chủ Sửa.

Ví dụ:
Trong ví dụ này i am bao gồm cả việc thực hiện 3 cuộc gọi Ajax.

Mã HTML:

  <html>
	 <head>
		 <title> thử nghiệm Ajax Call </ title>
		 <script type="text/javascript" src="js/prototype.js"> </ script>
		 <script type="text/javascript">
			 chức năng ajaxRequest () (
				 var url = "/ upload / ajax_time.php";
				 var ajaxObjhttp = new Ajax.Request (url, (
					 Phương pháp: 'POST',
					 tham số: (hoạt động: "readRecord"),
			                 onCreate: chức năng (giao thông) (
			        	        alert ( "Tạo mới Ajax Call");
			                 ),
			                 onSuccess: chức năng (giao thông) (
			        		 var textBoxObj = document.getElementById ( "ajaxRequestCall");
			                         textBoxObj.innerHTML = transport.responseText;
			                 ),
			                 onFailure: function (response) (
			                        alert ( "Một số lỗi xảy ra trong khi thực hiện cuộc gọi đến máy chủ từ xa");
			                )
			         ));  
			 )

    		         chức năng ajaxUpdater () (
				 var url = "/ upload / ajax_time.php";
				 var textBoxObj = "ajaxUpdaterCall";
				 var ajaxObjhttp = new Ajax.Updater (textBoxObj, url, (
					 Phương pháp: 'POST'
	    		         ));  
			  )

			 chức năng ajaxPeriodicUpdater () (
				 var url = "/ upload / ajax_time.php";
				 var textBoxObj = "ajaxPeriodicUpdaterCall";
				 var ajaxObjhttp = mới Ajax.PeriodicalUpdater (textBoxObj, url, (
					 Phương pháp: 'POST',
					 tần số: 3,
	        		         phân rã: 2
	    		         ));   	
			 )
		 </ script>
	 </ head>
             <body>
		 Ajax Yêu cầu: <span id="ajaxRequestCall" name="ajaxRequestCall" style="border: 1px #CCCCCC"> rắn </ p> <input type = "button" onClick = "ajaxRequest (); "value =" Ajax Yêu "/> <br /> <br />		
	 Ajax Updater: <span id="ajaxUpdaterCall" name="ajaxUpdaterCall" style="border: 1px #CCCCCC"> rắn </ p> <input type = "button" onClick = "ajaxUpdater (); "value =" Ajax Updater "/> <br /> <br />	
	 Ajax định kỳ Updater: <span id="ajaxPeriodicUpdaterCall" name="ajaxPeriodicUpdaterCall" style="border: 1px #CCCCCC"> rắn </ p> <input type = "button" onClick = "ajaxPeriodicUpdater () ; "value =" Ajax định kỳ Updater "/> <br />	
	 </ body>
 </ html> 

SERVER SIDE MÃ (PHP):

  <?
	 ( "H:i:s" ) ; echo date ( "H: i: s");
 ?> 

SERVER SIDE MÃ (JSP):

 "java.util.Date" %> < % Date currentDate = new Date ( ) ; long currentTime = currentDate . getTime ( ) ; out . println ( currentTime ) ; %> <% @ Nhập khẩu trang = "java.util.Date"%> <% Ngày currentDate = new Date (); dài currentTime = currentDate. GetTime (); ra. Println (currentTime);%> 

Theo người sử dụng môi trường làm việc của người sử dụng hay không PHP hay JAVA tôi đã viết code phía máy chủ của ngôn ngữ đó cả hai. Người sử dụng chỉ có thay đổi URL trong mã javascript.

Tìm kiếm Tuỳ chỉnh

Phổ biến các điều:

• Khái niệm cơ bản của AJAX - Phần 2
• Làm thế nào AJAX Works
• Khái niệm cơ bản của AJAX - Phần 1
• Sai lầm thường gặp Lập trình AJAX
• Cơ bản AJAX Demo