Sự khác nhau của onload :
window.onload = myOnloadFunc and <body onload="myOnloadFunc();"> are different ways of using the same event. Using window.onload is less obtrusive though – it takes your JavaScript out of the HTML.
All of the common JavaScript libraries, Prototype, ExtJS, Dojo, JQuery, YUI, etc. provide nice wrappers around events that occur as the document is loaded. You can listen for the window onLoad event, and react to that, but onLoad is not fired until all resources have been downloaded, so your event handler won’t be executed until that last huge image has been fetched. In some cases that’s exactly what you want, in others you might find that listening for when the DOM is ready is more appropriate – this event is similar to onLoad but fires without waiting for images, etc. to download.
window.onload will wait until all assets have finished downloading, such as images and scripts.
DOM ready waits until you can access the DOM via the API.
The ready event occurs after the HTML document has been loaded, while the onload event occurs later, when all content (e.g. images) also has been loaded.
The onload event is a standard event in the DOM, while the ready event is specific to jQuery. The purpose of the ready event is that it should occur as early as possible after the document has loaded, so that code that adds funcionality to the elements in the page doesn’t have to wait for all content to load.
http://code.google.com/p/jslibs/wiki/JavascriptTips
Load ajax với javascript kèm theo: cần minify đoạn javascript kèm theo = xóa hết các dấu xuống dòng, dấu cách đoạn javascript gắn ajax load, ví dụ:
$output .= “</div></div></div><div style=\”clear:both;\”></div><script type=\”text/javascript\”>$(document).ready(function(){ $(‘#resizeMe’).draggable({ cursor: ‘move’, containment: $(‘#image-crop-container’), drag: function(e, ui) { var left = (ui.position.left > 0) ? ui.position.left : 0; var top = (ui.position.top > 0) ? ui.position.top : 0; this.style.backgroundPosition = ‘-‘ + left + ‘px -‘ + top + ‘px’; $(‘#edit-image-crop-x’).val(left); $(‘#edit-image-crop-y’).val(top); } }); });</script>”;
Điều khiển sự kiện của đối tượng DOM xuất hiện sau khi load ajax: sử dụng .live( type, fn) . ví dụ:
<script type=”text/javascript”>
$(document).ready(function() {
$(‘#CropImage a’).live(‘click’,function() {
var url = $(this).attr(‘href’);
$(‘div#CropImage’).html(‘<h4>Loading…</h4>’).load(url);
return false;
});
});
</script>
Lấy thông tin trực tiếp từ jquery + ajax :
$.get( ajaxloadUrl , parameters , function(data) {
alert(“Data Loaded: ” + data);
});
Load nội dung html từ jquery: cách thức tượng tự đơn giản hơn ajax
$(‘element’).load(url, parameters, complete)
– url = đường dẫn để request
– parameters = tham số kèm theo request, có hoặc ko.
– complete = , có hoặc ko, hàm thực thi sau khi request hoàn thành. tương tự như kết quả trả về từ ajax (response, status, xhr).
Lấy thông tin sau khi hoàn thành ajax : ajaxComplete(). Không nên gọi ajaxComplete() nhiều lần.
$(document).ajaxComplete(function(e, xhr, settings) {
// e = event , xhr = reponse
alert(settings.url);
});
Tìm kiếm trong chuối : sử dụng jquery indexOf()
|
1 |
<em><code>if (str.indexOf("Yes") >= 0)</code></em> |
Reload- refresh image sau khi xử lý ajax bằng cách đặt thêm chuỗi ? phía cuối url
$(this).attr('src', $(this).attr('src')+'?'+Math.random());
Clear cache khi sử dụng ajax : dùng ajaxSetup hoặc thêm tham số request theo thời gian ?time=time()
|
1 2 3 4 5 |
<em>$(document).ready(function () { $.ajaxSetup({ cache: false }); });</em> |
