javascript与html ajax,Ajax教程之：Javascript与Ajax

Javascript是Ajax技术中最重要的一部分之一。Ajax利用Javascript的特性实现Web应用程序对用户行为触发的实时响应和处理，包括鼠标事件、键盘事件、页面载入离开或者事件、焦点事件等等。Javascript将HTML与DOM、XMLHttpRequest等对象联系起来，作为他们之间沟通的渠道。

4.1节所述的HTML标记在Web页面形成HTML控件，比如单行文本输入框、多行文本输入区域、复选按钮、单选按钮、下拉列表框、提交按钮等，这些HTML控件具有响应用户行为的事件属性，其中常用的事件包括：

— onactivate：当控件对象为活动元素时触发。

— onblur：当控件对象失去焦点时触发。

— onchange：当控件对象或者选中区的值发生改变时触发。

— onclick：当用户用鼠标左键单击控件对象时触发。

— ondbclick：当用户双击控件对象时触发。

— ondeactivate：当活动元素从当前控件对象变为父文档或者其他控件对象时触发。

— ondrag：当进行拖曳操作时在源控件对象上持续触发。

— ondragend：当用户在拖曳操作结束后释放鼠标时在源控件对象上触发。

— ondragenter：当用户拖曳控件对象到一个合法拖曳目标时在目标元素上触发。

— ondragleave：当用户在拖曳操作过程中将鼠标移出合法拖曳目标时在目标控件对象上触发。

— ondragover：当用户拖曳控件对象划过合法拖曳目标时持续在目标元素上触发。

— ondragstart：当用户开始拖曳文本选中区或选中控件对象时在源控件对象上触发。

— onfocus：当控件对象获得焦点时触发。

— onkeydown：当用户按下键盘按键时触发。

— onkeypress：当用户按下字面按键时触发。

— onkeyup：当用户释放键盘按键时触发。

— onmousedown：当用户用任何鼠标按钮单击对象时触发。

— onmouseenter：当用户将鼠标指针移动到控件对象内时触发。

— onmouseleave：当用户将鼠标指针移出控件对象边界时触发。

— onmousemove：当用户将鼠标划过控件对象时触发。

— onmouseout：当用户将鼠标指针移出控件对象边界时触发。

— ommouseover：当用户将鼠标指针移动到控件对象内时触发。

— onmouseup：当用户在鼠标位于控件对象之上时释放鼠标按钮时触发。

— onresize：当控件对象的大小要改变时触发。

— onselect：当当前选中区改变时触发。

— onload：当文档载入的时候触发。

— onunload：当文档卸载的时候触发。

Javascript在响应上述事件的函数中，提取表单Form的内容，调用XMLHttpRequest对象，将表单内容发送给服务器处理。有时候，在发送表单内容之前，要对表单内容的格式进行必要的校验和预处理，这些工作也交由Javascript处理。

服务器返回浏览器客户端的处理数据，通常由XMLHttpReqeust对象取得。XMLHttpReqeust对象再将这些数据以普通文本或者XML文档的形式交给DOM对象。Javascript最终再操作DOM，利用这些数据更新Web页面内容。

总之，Javascript在Ajax中起到了“承前启后”的作用，通过其特有的属性、方法、集合操纵HTML文档内容，使用DOM、XMLHttpReqeust对象相关属性和方法，与服务器实现异步交互通信。其在Ajax中的作用如图4-11所示。

【责任编辑 陈东方】