有胆量你就来跟着路老师卷起来! -- 纯干货,技术知识分享
路老师给大家分享PHP语言的知识了,旨在想让大家入门PHP,并深入了解PHP语言。
编辑
上篇文章简单的了解了如何实现多文件上传以及文件的下载功能,本文我们开始进入Ajax的PHP应用技术的学习。
1 Ajax概述
Ajax技术改善了传统Web应用的用户体验,发掘了Web浏览器的潜力,为Web开发开创了大量的新的可能性。
1.1 什么是Ajax
Ajax是由Jesse James Garrett创造的,是Asynchronous JavaScript And XML的缩写,即异步JavaScript和XML技术。Ajax并不是一门新的语言或者技术,它是JavaScript、XML、CSS、DOM等多种已有技术的组合,可以实现客户端的异步请求操作,并可以实现在不需要刷新页面的情况下与服务器进行通信,从而减少用户的等待时间,提高使用效率。
1.2 Ajax 的开发模式
在传统的Web应用模式中,页面中用户的每次操作都将触发一次返回Web服务器的HTTP请求,服务器进行相应的处理后,返回一个HTML页面给客户端。
编辑
而Ajax应用中,页面中用户的操作将通过Ajax引擎与服务器端进行通信,然后将返回结果提交给客户端页面的Ajax引擎,再由Ajax引擎来决定将这些数据插入到页面的指定位置。
编辑
1.3 Ajax的优点
与传统Web应用不同,Ajax在用户与服务器之间引入一个中间媒介Ajax引擎,Web页面不用打断交互流程进行重新加载即可动态地更新,从而消除了网络交互过程中的“处理--等待--处理--等待”的缺点。
使用Ajax的有点具体如下:
- 减轻服务器的负担。Ajax的原则是“按需求获取数据”,可以最大程度地减少由于冗余请求和响应对服务器造成的负担。
- 可以把一部分以前由服务器担负的工作转移到客户端,利用客户端闲置的资源进行处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。
- 无刷新更新页面,使用户不用再像以前一样在服务器处理数据时,只能在死板的白屏前焦急地等待。Ajax使用XMLHttpRequest对象发送请求并得到服务器响应,在不需重新载入整个页面的情况下,即可通过DOM及时将更新的内容显示在页面上。
- 可以调用XML等外部数据,进一步实现Web页面显示和数据的分离。
2 Ajax使用的技术
2.1 Ajax与JavaScript
Ajax利用JavaScript将DOM、HTML、XML以及CSS等技术综合起来,并控制它们的行为。因此,要开发一个复杂、高效的Ajax应用程序,就必须要对JavaScript有一定了解。
2.2 XMLHttpRequest对象
Ajax技术中,最核心的技术就是XMLHttpRequest,它是一个具有应用程序接口的JavaScript对象,能够使用超文本传输协议(HTTP)连接服务器,是微软公司为了满足开发者需要,与1999年在IE5.0浏览器率先推出的。
通过XMLHttpRequest对象,Ajax可以像桌面应用程序一样只同服务器进行数据层面的交换,而不用每次都刷新页面,也不用每次都将数据处理的工作交给服务器来做,这样既减轻了服务器负担又加快了响应速度,从而缩短了用户等待的时间。
在使用XMLHttpRequest对象发送请求和处理响应之前,首先需要初始化该对象,由于XMLHttpRequest对象还没有标准化,所以对于不同的浏览器,初始化的方法还不同。
IE浏览器
var http_request = new ActiveXObject("Msxml2.XMLHTTP") //或者 var http_request = new ActiveXObject("Microsoft.XMLHTTP")
其他浏览器(Google 、Mozilla等)
var http_request = new XMLHttpRequest();
为了提高程序的兼容性,可以创建一个跨浏览器的XMLHttpRequest对象,方法如下:
if(window.XMLHttpRequest) { http_request = new XMLHttpRequest(); }else if(window.ActiveXObject){ try { http_request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e1) { alert("您的浏览器不支持Ajax"); return false; } } }
2.3 XMLHttpRequest对象的常用方法
2.3.1 open()方法
该方法用于设置进行异步请求目标的URL、请求方法以及其他参数信息,具体语法如下:
open("method", "URL" [,asyncFlag[,"userName"[,"password"]]])
- method 用于指定请求类型,一般为get或post;
- URL用于请求的地址
- asyncFlag用于指定请求方式,异步请求为true,同步请求为false,默认情况下为true;
- userName为指定用户名,可省略;
- password用于指定请求密码,可省略
2.3.2 send()方法
用于向服务器发送请求。如果请求声明为异步,该方法将立即返回,否则将到接收到响应为止:
send(content) //content为指定发送的数据,可以是DOM对象实例、输入流或者字符串,没有可传递null
2.3.3 setRequestHeader()方法
为请求HTTP设置请求头:
setRequestHeader("label", "value")
2.3.4 abort()方法
用于停止当前异步请求
2.3.5 getAllResponseHeaders()方法
用于以字符串形式返回完整的HTTP头信息,当存在参数时,表示以字符串形式返回由该参数指定的HTTP头信息。
2.4 XMLHttpRequest对象的常用属性
属性 | 说明 |
onreadystatechange | 每个状态改变时都会触发这个事件处理器,通常会调用一个JavaScript函数 |
readyState | 请求的状态。由如下5个取值: 0=未初始化 1=正在加载 2=已加载 3=交互中 4=完成 |
responseText | 服务器的响应,表示为字符串 |
responseXML | 服务器的响应,表示为XML。这个对象可以解析为一个DOM对象 |
status | 返回服务器的HTTP状态码,如: 200=“成功” 202=“请求被接收,但尚未成功” 400=“错误的请求” 404=“文件未找到” 500=“内部服务器错误” |
statusText | 返回HTTP状态码对应的文本 |
下一篇 Ajax 技术检测用户名是否被占用