《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的用户注册用户名验证程序的运行过程？,
