AJAX技术在商城中的应用.ppt

第12章 AJAX技术在商城 中的应用 12.1 项目导引：用户注册验证 第7章介绍的用户注册过程是这样的，打开注册页面，填写注册信息，单击注册按钮完成用户注册过程，如果用户已经存在，会提示用户名已存在，然后，需要重新填写注册信息，这样很是麻烦。 有没有一种办法，在我填写用户名或其它信息时，马上告诉我用户名是否存在或信息是否正确呢？不用单击注册按钮后再告诉我。 Ajax技术就可以解决这个问题。基于Ajax的用户注册过程该如何开发？如何提升用户体验呢？ 12.2 项目分析 Ajax全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML)，是指一种结合了JavaScript和XML等编程技术，用于创建交互式网页应用的Web开发技术。 Ajax是使用客户端脚本与Web服务器异步交换数据的Web应用开发方法。 使用Ajax可以在不中断交互流程的情况下，重新加载Web页面，从而实现动态跟新，并且是在用户没有感觉页面刷新的情况下，这大大提高了用户体验； 使用Ajax可以创建接近本地桌面应用的、直接的、易用的、丰富的Web用户接口界面。 12.2 项目分析 在传统Web应用中，HTML页面直接和服务器（PHP）进行交互，基于Ajax的Web应用中，Ajax脚本负责页面和服务器之间的通信，采用异步交互模式。 对比发现，传统方式页面的每一次操作将生成一次HTTP请求（刷新页面），而Ajax中则变成对Ajax引擎的一次JavaScript调用，从而实现不刷新整个页面的情况下，对部分数据进行更新。 12.2 项目分析 基于Ajax的用户注册过程需要创建3个页面，注册页面、Ajax程序页面和实现注册的PHP程序页面。注册页面负责收集用户信息，PHP程序页面接收、检查用户信息，将信息插入数据库，与之前不同的是，用户填写用户信息交给Ajax程序，Ajax程序再将信息交给PHP程序页面，并将返回的结果显示在注册页面。 注册页面 Ajax程序页面 PHP程序页面 提交 请求 响应 响应 12.3 技术准备 12.3.1 XMLHttpRequest对象 Ajax中的核心对象，具有应用程序接口的JavaScript对象 能够使用HTTP协议连接服务器 使用之前需实例化该对象 IE浏览器 Mozilla/Safari浏览器 XMLHttp=new ActiveXObject(“Microsoft.XMLHTTP”); xmlHttp = new XMLHttpRequest(); 12.3 技术准备 为了提高程序兼容性，可创建一个跨浏览器的XMLHttpRequest对象 function getXMLHTTPRequest(){ var req=false; try{ req=new XMLHttpRequest(); }catch(err){ try{ req=new ActiveXObject(Msxml2.XMLHTTP); }catch(err){ try{ req=new ActiveXObject(Microsoft.XMLHTTP); }catch(err){ req=false; } } } return req; } 12.3 技术准备 12.3.1 XMLHttpRequest对象 1．XMLHttpRequest对象的常用方法 open()方法 打开一个新的HTTP请求，并指定此请求的方法、URL等信息，语法如下： open(method,URL[,asyncFlag[,username[,password]]]); method：用于指定请求的类型，一般为get或post； URL：用于指定请求的地址，可以使用绝对路径或者相对路径； asyncFlag：可选参数，布尔类型，用于指定是否允许异步传输； username：可选参数，指定请求用户名； password：可选参数，指定请求密码。 12.3 技术准备 12.3.1 XMLHttpRequest对象 1．XMLHttpRequest对象的常用方法 send()方法 send()方法用于将open()方法定义的请求发送到服务器，只有在XMLHttpRequest处于发送状态时才能使用send()方法，否则将会出现异常。当open()方法的参数asyncFlag为ture时，send()方法将这个请求立即发送，从而得到服务器端的响应。语法如下： send(content) 参数content用于指定发送的数据。 abort()方法 abort()方法用于停止当前异步请求。 12.3 技术准备 12.3.1 XMLHttpReque