34 PHP与Ajax

本文涉及的产品
Redis 开源版,标准版 2GB
推荐场景:
搭建游戏排行榜
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
云数据库 Tair(兼容Redis),内存型 2GB
简介: 路老师在知乎上分享了关于PHP语言的知识,帮助大家入门并深入了解PHP。本文重点介绍了Ajax技术,包括其概念、开发模式、优点及常用技术,如JavaScript和XMLHttpRequest对象。Ajax通过异步请求改善了用户体验,减轻了服务器负担,实现了页面无刷新更新。

有胆量你就来跟着路老师卷起来! -- 纯干货,技术知识分享

路老师给大家分享PHP语言的知识了,旨在想让大家入门PHP,并深入了解PHP语言。

image.gif 编辑


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

image.gif 编辑

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

image.gif 编辑

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")

image.gif

其他浏览器(Google 、Mozilla等)

var http_request = new XMLHttpRequest();

image.gif

为了提高程序的兼容性,可以创建一个跨浏览器的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;
            
        }
    }
}

image.gif

2.3 XMLHttpRequest对象的常用方法

2.3.1 open()方法

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

open("method", "URL" [,asyncFlag[,"userName"[,"password"]]])

image.gif

  • method 用于指定请求类型,一般为get或post;
  • URL用于请求的地址
  • asyncFlag用于指定请求方式,异步请求为true,同步请求为false,默认情况下为true;
  • userName为指定用户名,可省略;
  • password用于指定请求密码,可省略

2.3.2 send()方法

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

send(content)
//content为指定发送的数据,可以是DOM对象实例、输入流或者字符串,没有可传递null

image.gif

2.3.3 setRequestHeader()方法

为请求HTTP设置请求头:

setRequestHeader("label", "value")

image.gif

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 技术检测用户名是否被占用

相关文章
|
4天前
|
存储 人工智能 弹性计算
阿里云弹性计算_加速计算专场精华概览 | 2024云栖大会回顾
2024年9月19-21日,2024云栖大会在杭州云栖小镇举行,阿里云智能集团资深技术专家、异构计算产品技术负责人王超等多位产品、技术专家,共同带来了题为《AI Infra的前沿技术与应用实践》的专场session。本次专场重点介绍了阿里云AI Infra 产品架构与技术能力,及用户如何使用阿里云灵骏产品进行AI大模型开发、训练和应用。围绕当下大模型训练和推理的技术难点,专家们分享了如何在阿里云上实现稳定、高效、经济的大模型训练,并通过多个客户案例展示了云上大模型训练的显著优势。
|
7天前
|
存储 人工智能 调度
阿里云吴结生:高性能计算持续创新,响应数据+AI时代的多元化负载需求
在数字化转型的大潮中,每家公司都在积极探索如何利用数据驱动业务增长,而AI技术的快速发展更是加速了这一进程。
|
4天前
|
人工智能 运维 双11
2024阿里云双十一云资源购买指南(纯客观,无广)
2024年双十一,阿里云推出多项重磅优惠,特别针对新迁入云的企业和初创公司提供丰厚补贴。其中,36元一年的轻量应用服务器、1.95元/小时的16核60GB A10卡以及1元购域名等产品尤为值得关注。这些产品不仅价格亲民,还提供了丰富的功能和服务,非常适合个人开发者、学生及中小企业快速上手和部署应用。
|
13天前
|
人工智能 弹性计算 文字识别
基于阿里云文档智能和RAG快速构建企业"第二大脑"
在数字化转型的背景下,企业面临海量文档管理的挑战。传统的文档管理方式效率低下,难以满足业务需求。阿里云推出的文档智能(Document Mind)与检索增强生成(RAG)技术,通过自动化解析和智能检索,极大地提升了文档管理的效率和信息利用的价值。本文介绍了如何利用阿里云的解决方案,快速构建企业专属的“第二大脑”,助力企业在竞争中占据优势。
|
14天前
|
自然语言处理 数据可视化 前端开发
从数据提取到管理:合合信息的智能文档处理全方位解析【合合信息智能文档处理百宝箱】
合合信息的智能文档处理“百宝箱”涵盖文档解析、向量化模型、测评工具等,解决了复杂文档解析、大模型问答幻觉、文档解析效果评估、知识库搭建、多语言文档翻译等问题。通过可视化解析工具 TextIn ParseX、向量化模型 acge-embedding 和文档解析测评工具 markdown_tester,百宝箱提升了文档处理的效率和精确度,适用于多种文档格式和语言环境,助力企业实现高效的信息管理和业务支持。
3936 2
从数据提取到管理:合合信息的智能文档处理全方位解析【合合信息智能文档处理百宝箱】
|
4天前
|
算法 安全 网络安全
阿里云SSL证书双11精选,WoSign SSL国产证书优惠
2024阿里云11.11金秋云创季活动火热进行中,活动月期间(2024年11月01日至11月30日)通过折扣、叠加优惠券等多种方式,阿里云WoSign SSL证书实现优惠价格新低,DV SSL证书220元/年起,助力中小企业轻松实现HTTPS加密,保障数据传输安全。
499 3
阿里云SSL证书双11精选,WoSign SSL国产证书优惠
|
10天前
|
安全 数据建模 网络安全
2024阿里云双11,WoSign SSL证书优惠券使用攻略
2024阿里云“11.11金秋云创季”活动主会场,阿里云用户通过完成个人或企业实名认证,可以领取不同额度的满减优惠券,叠加折扣优惠。用户购买WoSign SSL证书,如何叠加才能更加优惠呢?
985 3
|
8天前
|
机器学习/深度学习 存储 人工智能
白话文讲解大模型| Attention is all you need
本文档旨在详细阐述当前主流的大模型技术架构如Transformer架构。我们将从技术概述、架构介绍到具体模型实现等多个角度进行讲解。通过本文档,我们期望为读者提供一个全面的理解,帮助大家掌握大模型的工作原理,增强与客户沟通的技术基础。本文档适合对大模型感兴趣的人员阅读。
397 16
白话文讲解大模型| Attention is all you need
|
8天前
|
算法 数据建模 网络安全
阿里云SSL证书2024双11优惠,WoSign DV证书220元/年起
2024阿里云11.11金秋云创季火热进行中,活动月期间(2024年11月01日至11月30日),阿里云SSL证书限时优惠,部分证书产品新老同享75折起;通过优惠折扣、叠加满减优惠券等多种方式,阿里云WoSign SSL证书将实现优惠价格新低,DV SSL证书220元/年起。
560 5
|
4天前
|
安全 网络安全
您有一份网络安全攻略待领取!!!
深入了解如何保护自己的云上资产,领取超酷的安全海报和定制鼠标垫,随时随地提醒你保持警惕!
693 1
您有一份网络安全攻略待领取!!!