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

PHP+MySQL动态网页技术教程,第12章AJAX技术在商城中的应用,12.1项目导引：用户注册验证,第7章介绍的用户注册过程是这样的，打开注册页面，填写注册信息，单击注册按钮完成用户注册过程，如果用户已经存在，会提示用户名已存在，然后，需要重新填写注册信息，这样很是麻烦。有没有一种办法，在我填写用户名或其它信息时，马上告诉我用户名是否存在或信息是否正确呢？不用单击注册按钮后再告诉我。Ajax技术就可以解决这个问题。基于Ajax的用户注册过程该如何开发？如何提升用户体验呢？,12.2项目分析,Ajax全称为“AsynchronousJavaScriptandXML”(异步JavaScript和XML)，是指一种结合了JavaScript和XML等编程技术，用于创建交互式网页应用的Web开发技术。Ajax是使用客户端脚本与Web服务器异步交换数据的Web应用开发方法。使用Ajax可以在不中断交互流程的情况下，重新加载Web页面，从而实现动态跟新，并且是在用户没有感觉页面刷新的情况下，这大大提高了用户体验；使用Ajax可以创建接近本地桌面应用的、直接的、易用的、丰富的Web用户接口界面。,12.2项目分析,在传统Web应用中，HTML页面直接和服务器（PHP）进行交互，基于Ajax的Web应用中，Ajax脚本负责页面和服务器之间的通信，采用异步交互模式。基于Ajax的用户注册过程需要创建3个页面，注册页面、Ajax程序页面和实现注册的PHP程序页面。注册页面负责收集用户信息，PHP程序页面接收、检查用户信息，将信息插入数据库，与之前不同的是，用户填写用户信息交给Ajax程序，Ajax程序再将信息交给PHP程序页面，并将返回的结果显示在注册页面。,12.3技术准备,12.3.1XMLHttpRequest对象1XMLHttpRequest对象的常用方法open()方法打开一个新的HTTP请求，并指定此请求的方法、URL等信息，语法如下：open(method,URL,asyncFlag,username,password);method：用于指定请求的类型，一般为get或post；URL：用于指定请求的地址，可以使用绝对路径或者相对路径；asyncFlag：可选参数，布尔类型，用于指定是否允许异步传输；username：可选参数，指定请求用户名；password：可选参数，指定请求密码。,12.3技术准备,12.3.1XMLHttpRequest对象1XMLHttpRequest对象的常用方法send()方法send()方法用于将open()方法定义的请求发送到服务器，只有在XMLHttpRequest处于发送状态时才能使用send()方法，否则将会出现异常。当open()方法的参数asyncFlag为ture时，send()方法将这个请求立即发送，从而得到服务器端的响应。语法如下：send(content)参数content用于指定发送的数据。abort()方法abort()方法用于停止当前异步请求。,12.3技术准备,12.3.1XMLHttpRequest对象2XMLHttpRequest对象的常用属性readyState属性该属性用于得到当前XMLHttpRequest的状态，它有5个值，分别代表不同的状态。,12.3技术准备,12.3.1XMLHttpRequest对象2XMLHttpRequest对象的常用属性onreadystatechange属性当readyState属性表示的XMLHttpRequest状态发生变化时，XMLHttpRequest对象会激发一次readystatechange事件，同时调用onreadystatechange属性所指的函数。responseText属性responseText属性获取服务器的响应结果。XMLHttpRequest对象接收成功返回的信息有两种处理方式。使用XMLHttpRequest对象的responseText属性，将传回的信息当字符串处理；使用XMLHttpRequest对象的responseXML属性，将传回的信息当XML文档使用，可以用DOM处理。,12.3技术准备,12.3.1XMLHttpRequest对象2XMLHttpRequest对象的常用属性status属性status属性用于表示服务器端执行的过程，前面readystate属性表示Ajax脚本执行的过程。status属性返回服务器的HTTP状态码，,12.3技术准备,12.3.2XMLHttpRequest对象与服务器的交互1初始化XMLHttpRequest对象IE浏览器的初始化方法为：xmlHttp=newActiveXObject(Microsoft.XMLHTTP);MOzilia、safari等其它浏览器的初始化方法为：xmlHttp=newXMLHttpRequest();,12.3技术准备,12.3.2XMLHttpRequest对象与服务器的交互2向服务器发送请求利用上面创建的xmlHttp对象实例，向对应的服务区发送请求，请求方式可以是GET请求，也可以是POST请求。functionSend_Request(url)createxmlhttp();/创建xmlHttp对象实例xmlHttp.open(GET,url,true);/open方法建立连接，一定是异步方式xmlHttp.onreadystatechange=processRequest;/声明回调函数xmlHttp.send();/使用send方法发送请求,12.3技术准备,12.3.2XMLHttpRequest对象与服务器的交互3处理服务器响应functionprocessRequest()if(xmlHttp.readyState=4)/信息已经返回，可以处理了if(xmlHttp.status=200)/服务器返回信息后，还需要判断返回的HTTP状态码，确定返回的页面有没有错误，200表示成功。varresult=xmlHttp.responseText;/获取服务器响应结果/处理数据else/页面有问题,12.3技术准备,12.3.3体验Ajax例12-1、例12-2,12.4项目实施,基于Ajax的用户注册程序需要创建3个页面12.4.1用户注册页面12.4.2Ajax程序页面12.4.3用户查询页面,12.5本章小结,AJAX技术是Web开发中的一项重要技术，它的出现大大提高了用户体验。本章采用PHP+Ajax技术完成了用户注册任务中检查名是否存在的任务，在这过程中介绍了Ajax的概念、运行原理和XMLHttpRequest对象的常用属性和方法，读者在完成任务的同时，重点理解Ajax的运行原理，掌握XMLHttpRequest对象的常用属性和方法。本书只是对AJAX技术有一个初步介绍，读者可以查阅相关资料完成AJAX技术的进一步学习。,12.6强化练习,一、简答题1什么是AJAX，它的主要作用及工作原理是什么？2XMLHttpRequest对象readyState属性的作用，其主要取值及含义？3XMLHttpRequest对象status属性属性的作用，其主要取值及含义？4简述基于Ajax的用户注册用户名验证程序的运行过程？,