有胆量你就来跟着路老师卷起来！-- 纯干货，技术知识分享
路老师给大家分享PHP语言的知识了，旨在想让大家入门PHP，并深入了解PHP语言。

 

入门PHP就来我这（高级）33~ PHP与Ajax_开发语言

 上篇文章简单的了解了如何实现多文件上传以及文件的下载功能，本文我们开始进入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页面给客户端。

入门PHP就来我这（高级）33~ PHP与Ajax_js_02

而Ajax应用中，页面中用户的操作将通过Ajax引擎与服务器端进行通信，然后将返回结果提交给客户端页面的Ajax引擎，再由Ajax引擎来决定将这些数据插入到页面的指定位置。

入门PHP就来我这（高级）33~ PHP与Ajax_js_03

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")
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

其他浏览器（Google 、Mozilla等）

var http_request = new XMLHttpRequest();
  • 1.

为了提高程序的兼容性，可以创建一个跨浏览器的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;
            
        }
    }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.

 2.3 XMLHttpRequest对象的常用方法

2.3.1 open()方法

该方法用于设置进行异步请求目标的URL、请求方法以及其他参数信息，具体语法如下：

open("method", "URL" [,asyncFlag[,"userName"[,"password"]]])
  • 1.
  • method 用于指定请求类型，一般为get或post；
  • URL用于请求的地址
  • asyncFlag用于指定请求方式，异步请求为true，同步请求为false，默认情况下为true；
  • userName为指定用户名，可省略；
  • password用于指定请求密码，可省略
2.3.2 send()方法

用于向服务器发送请求。如果请求声明为异步，该方法将立即返回，否则将到接收到响应为止：

send(content)
//content为指定发送的数据，可以是DOM对象实例、输入流或者字符串，没有可传递null
  • 1.
  • 2.
2.3.3 setRequestHeader()方法

为请求HTTP设置请求头：

setRequestHeader("label", "value")
  • 1.
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 技术检测用户名是否被占用