Ajax 引见一

Ajax 介绍一

?

Ajax 介绍一1.Ajax技术? 全称Asynchronous(异步) JavaScript And XML? 异步的JavaScript和XML2.Ajax技术的作用，有什么好处? 用于客户端和服务器交互的一项技术.?主要用于局部刷新.提升用户体验度.?----原有交互技术主要基于提交表单，点超链接方式----这种方式主要有以下一些弊端：? a.请求发出后，如果响应速度慢，客户需要等待.而且是茫然的等待.? b.请求响应回来需要刷新整个页面，如果页面中有需要频繁更新的数据，会造成页面的频繁刷新.? ? 采用Ajax技术可以解决以上问题,提升用户体验度.
3.Ajax技术原理? Ajax技术是若干技术的综合运用。主要涵盖JavaScript,XMLHttpRequest,XML,css,Html? Ajax技术使用时，需要编写客户端脚本和 服务器端处理程序.? 原理：? ? ?a.首先客户端利用JavaScript创建一个XMLHTTPRequest对象? ? ?b.利用XMLHTTPRequest对象，创建和发生应该请求? ? ?c.请求到达服务器，调用Servlet组件处理，处理完毕后,返回响应数据，数据可以采用字符串或XML格式返回.? ? ?d.XMLHTTPRequest接收到服务器返回的数据，调用客户端的回调函数，将更新到页面.
4.XMLHttpRequest对象的使用? 该对象是由浏览器提供的,在IE中该对象以ActiveXObject组件形式存在，? 在其他浏览器中以XMLHttpRequest形式存在.
?XMLHttpRequest对象主要的函数和属性如下：? 1)open(param1，param2,[param3])函数:创建一个请求.? ? param1:用于指定请求类型,可以是GET，POST? ? param2:用于指定请求url地址? ? param3:用于指定请求发出方式，true异步，false表示同步。默认异步。? 2)send(param1)函数，发送请求? ? 把open的请求发送出去.? ? param1:用于指定发送时提交的数据.如果是GET请求,param1指定为null? ? ?如果是POST请求需要指定为"key=value"? 3)onreadystatechange事件? ? 用于指定注册的回调函数.指定函数名不需要()? ? 该事件在readyState属性发生改变的时候触发.? 4)readyState属性? ? 该属性有0，1，2，3，4五种状态?????? ? 0:请求未初始化? ? 1:请求已初始化? ? 2:请求已发送? ? 3:请求正在处理中? ? 4:请求处理完毕.? 5)status属性? ? ?用于获取请求处理的状态码.例如：500,404等.? ? ?404：找不到处理资源? ? ?500：找到处理资源，执行错误? ? ?200：处理成功? 6)responseText属性? ? 用于获取服务器处理返回的字符串信息.? ? 需要在readyState==4&&status==200执行，才可以获取正常数据.? 7)responseXML属性(过时)? ? 用于获取服务器返回的XML结果对象.
5.Ajax程序编写步骤? 示例1:焦点移开，检查用户名非空和唯一性.? ? ? ?1)为用户名输入框添加onblur事件处理? ? ? ?2)在事件处理中,创建XMLHttpRequest对象? ? ? ? ?创建请求，发送请求.? ? ? ?3)编写服务器处理组件Servlet，返回字符串信息? ? ? ?4)编写回调函数,为创建XMLHttpRequest对象注册.JSP页面：

??Servlet:
?示例2：下拉单选项发生改变，提取数据库中的产品信息显示? ? ?1)编写ComputerServlet,并进行测试?????? ? ?2)编写onchange事件处理? ? ?3)在事件处理中，创建XMLHttpRequest对象，创建请求，发送请求.JSP页面：
?Servlet:
?
?
 

 

查看更多 下一篇