《ajax技术在商城中的应用》由会员分享,可在线阅读,更多相关《ajax技术在商城中的应用(16页珍藏版)》请在金锄头文库上搜索。
1、PHP+MySQL动态网页技术教程,第12章 AJAX技术在商城 中的应用,12.1 项目导引:用户注册验证,第7章介绍的用户注册过程是这样的,打开注册页面,填写注册信息,单击注册按钮完成用户注册过程,如果用户已经存在,会提示用户名已存在,然后,需要重新填写注册信息,这样很是麻烦。 有没有一种办法,在我填写用户名或其它信息时,马上告诉我用户名是否存在或信息是否正确呢?不用单击注册按钮后再告诉我。 Ajax技术就可以解决这个问题。基于Ajax的用户注册过程该如何开发?如何提升用户体验呢?,12.2 项目分析,Ajax全称为“Asynchronous JavaScript and XML”(异步J
2、avaScript和XML),是指一种结合了JavaScript和XML等编程技术,用于创建交互式网页应用的Web开发技术。 Ajax是使用客户端脚本与Web服务器异步交换数据的Web应用开发方法。 使用Ajax可以在不中断交互流程的情况下,重新加载Web页面,从而实现动态跟新,并且是在用户没有感觉页面刷新的情况下,这大大提高了用户体验; 使用Ajax可以创建接近本地桌面应用的、直接的、易用的、丰富的Web用户接口界面。,12.2 项目分析,在传统Web应用中,HTML页面直接和服务器(PHP)进行交互,基于Ajax的Web应用中,Ajax脚本负责页面和服务器之间的通信,采用异步交互模式。 基
3、于Ajax的用户注册过程需要创建3个页面,注册页面、Ajax程序页面和实现注册的PHP程序页面。注册页面负责收集用户信息,PHP程序页面接收、检查用户信息,将信息插入数据库,与之前不同的是,用户填写用户信息交给Ajax程序,Ajax程序再将信息交给PHP程序页面,并将返回的结果显示在注册页面。,12.3 技术准备,12.3.1 XMLHttpRequest对象 1XMLHttpRequest对象的常用方法 open()方法 打开一个新的HTTP请求,并指定此请求的方法、URL等信息,语法如下: open(“method“,“URL“,asyncFlag,“username“,“password
4、“); method:用于指定请求的类型,一般为get或post; URL:用于指定请求的地址,可以使用绝对路径或者相对路径; asyncFlag:可选参数,布尔类型,用于指定是否允许异步传输; username:可选参数,指定请求用户名; password:可选参数,指定请求密码。,12.3 技术准备,12.3.1 XMLHttpRequest对象 1XMLHttpRequest对象的常用方法 send()方法 send()方法用于将open()方法定义的请求发送到服务器,只有在XMLHttpRequest处于发送状态时才能使用send()方法,否则将会出现异常。当open()方法的参数as
5、yncFlag为ture时,send()方法将这个请求立即发送,从而得到服务器端的响应。语法如下: send(content) 参数content用于指定发送的数据。 abort()方法 abort()方法用于停止当前异步请求。,12.3 技术准备,12.3.1 XMLHttpRequest对象 2XMLHttpRequest对象的常用属性 readyState属性 该属性用于得到当前XMLHttpRequest的状态,它有5个值,分别代表不同的状态。,12.3 技术准备,12.3.1 XMLHttpRequest对象 2XMLHttpRequest对象的常用属性 onreadystatech
6、ange属性 当readyState属性表示的XMLHttpRequest状态发生变化时,XMLHttpRequest对象会激发一次readystatechange事件,同时调用onreadystatechange属性所指的函数。 responseText属性 responseText属性获取服务器的响应结果。 XMLHttpRequest对象接收成功返回的信息有两种处理方式。 使用XMLHttpRequest对象的responseText属性,将传回的信息当字符串处理; 使用XMLHttpRequest对象的responseXML属性,将传回的信息当XML文档使用,可以用DOM处理。,12.
7、3 技术准备,12.3.1 XMLHttpRequest对象 2XMLHttpRequest对象的常用属性 status属性 status属性用于表示服务器端执行的过程,前面readystate属性表示Ajax脚本执行的过程。status属性返回服务器的HTTP状态码,,12.3 技术准备,12.3.2 XMLHttpRequest对象与服务器的交互 1初始化XMLHttpRequest对象 IE浏览器的初始化方法为: xmlHttp = new ActiveXObject(Microsoft.XMLHTTP); MOzilia、safari等其它浏览器的初始化方法为: xmlHttp = n
8、ew XMLHttpRequest();,12.3 技术准备,12.3.2 XMLHttpRequest对象与服务器的交互 2向服务器发送请求 利用上面创建的xmlHttp对象实例,向对应的服务区发送请求,请求方式可以是GET请求,也可以是POST请求。 function Send_Request(url) createxmlhttp(); /创建xmlHttp对象实例 xmlHttp.open(“GET“,url ,true); /open方法建立连接,一定是异步方式 xmlHttp.onreadystatechange=processRequest; /声明回调函数 xmlHttp.sen
9、d(); /使用send方法发送请求 ,12.3 技术准备,12.3.2 XMLHttpRequest对象与服务器的交互 3处理服务器响应 function processRequest() if(xmlHttp.readyState=4) /信息已经返回,可以处理了 if(xmlHttp.status=200) /服务器返回信息后,还需要判断返回的HTTP状态码,确定返回的页面有没有错误,200表示成功。 var result=xmlHttp.responseText; /获取服务器响应结果 /处理数据 else /页面有问题 ,12.3 技术准备,12.3.3 体验Ajax 例12-1、例
10、12-2,12.4 项目实施,基于Ajax的用户注册程序需要创建3个页面 12.4.1 用户注册页面 12.4.2 Ajax程序页面 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的用户注册用户名验证程序的运行过程?,