0

0

ajax如何正确的使用?初识ajax时候的使用详情

寻∝梦

寻∝梦

发布时间:2018-09-10 12:03:40

|

1598人浏览过

|

来源于php中文网

原创

本篇文章主要的介绍了关于ajax的定义,对于一些刚认识ajax的人来说,这个还是不懂的,所以这篇文章教大家如何正确的理解ajax以及正确的学习ajax。现在就一起来看这篇文章吧

 这几天正在学asp.net ajax,学的有点迷糊,所以决定先学ajax,再向asp.net ajax过渡,本文将带大家初识ajax,从宏观上看ajax,再从细节部分学习,文章脉络如下。

  • Ajax定义

  • Ajax组成

  • XMLHttpRequest

  • 常见Ajax使用

  • Ajax客户端生命周期

  • 实现原理

  • 一个简单的实例

Ajax定义

   Ajax是Asynchronous JavaScript and XML(异步JavaScript和XML)的缩写,它不是一种新的编程语言,而是一种使用现有标准的新方法。看全称好像只有JavaScript和XML,其实Ajax并不是只包含JavaScript和XML,Ajax是由JavaScript、XML、CSS、DOM和XMLHttpRequest等组成的。

Ajax组成

  除了Json和XMLHttpRequest,其它的以前都学习过,所以简略介绍一下。

   1、HTML/XHTML:用于描述Ajax页面的初始样式,即首次加载显示的页面。
   2、DOM:Document Object Model(文件对象模型),用来表示XML数据结构。
   3、CSS:Cascading Style Sheet(层叠样式表)达式,用来表示HTML文件中元素出现的样式。
   4、XML和JSON:XML是标准的数据样式,无论是服务器端还是客户端都可以很好地对其进行解释,
JSON:JavaScript Object Notation,因为JSON的格式和JavaScript中定义对象的语法一致, 对于同样的数据,JSON要比XML更简短,减少了网络流量。
   5、服务器端处理浏览器请求:开发者可以选择他所熟悉的方式进行服务器端设计实现。
   6、XMLHttpRequest对象:它允许开发者在javaScript中以异步的方式向服务器发出HTTP请求并得到响应。
   7、JavaScript:通过JavaScript可以将上述元素联系在一起,例如通过JavaScript查看修改DOM、CSS等。

XMLHttpRequest对象

   XMLHttpRequest对象是AJAX和Web 2.0应用程序的技术基础,AJAX利用XMLHttpRequest来实现发送和接收HTTP请求与响应信息。一个经由XMLHttpRequest对象发送的HTTP请求不需要页面中拥有或回寄一个<form>元素。AJAX中的"A"代表了"异步",这意味着XMLHttpRequest对象的send()方法可以立即返回,从而让Web页面上的其它HTML/JavaScript继续其浏览器端处理而由服务器处理HTTP请求并发送响应。缺省情况下请求是异步进行的,你也可以选择发送同步请求,这将会暂停其它Web页面的处理,直到该页面接收到服务器的响应为止,在使用XMLHttpRequest对象发送请求和处理响应之前,必须先用JavaScript创建一个XMLHttpRequest对象。(想看更多就到PHP中文网AJAX开发手册栏目中学习)

  XMLHttpRequest属性

属 性

描 述

onreadystatechange

每个状态改变时都会触发这个事件处理器,通常会调用一个JavaScript函数

readyState

请求的状态。有5个可取值:0 = 未初始化,1 = 正在加载,2 = 已加载,3 = 交互中,4 = 完成

responseText

服务器的响应,表示为一个串

responseXML

服务器的响应,表示为XML。这个对象可以解析为一个DOM对象

status

服务器的HTTP状态码(200对应OK,404对应Not Found(未找到),等等)

statusText

HTTP状态码的相应文本(OK或Not Found(未找到)等等)

XMLHttpRequest方法

方 法

描 述

abort()

停止当前请求

getAllResponseHeaders()

把HTTP请求的所有响应首部作为键/值对返回

getResponseHeader("header")

返回指定首部的串值

open("method", "url")

动态WEB网站中的PHP和MySQL:直观的QuickPro指南第2版
动态WEB网站中的PHP和MySQL:直观的QuickPro指南第2版

动态WEB网站中的PHP和MySQL详细反映实际程序的需求,仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法,让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能,对常用的、强大的包

下载

建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数

send(content)

向服务器发送请求

setRequestHeader("header", "value")

把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()

Ajax的使用

 为什么使用Ajax?因为它可以实现异步通信,可以对页面部分刷新,同时减少了数据传输量,最重要的一点是给了用户更好的体验。

Ajax在当前web中非常常见,比如Google的地图,每次拖动都会重新加载该区域,但页面并没有刷新;百度的搜索框,输入后出现匹配的内容;微博上面的内容更新,也未重新加载页面……

Ajax客户端生命周期

 把这个周期分成了六个容易区分的过程,如下:

(1)用户对某个网址提出浏览请求。
(2)服务器将HTML页面内容发送给浏览器。
(3)浏览器根据所收到的HTML内容,在内存中创建DOM。
(4)用户触发异步请求给服务器。此举不会影响既有的DOM,即用户操作不会被打断。
(5)浏览器将XML格式数据发送给原页面中的JavaScript函数进行处理。
(6)浏览器解析结果,接着更新内存中的DOM,网页部分内容被更新,非常平顺地显示页面。

实现原理

   Ajax的加载和传统Web应用相同:首先,输入URL地址或点击链接引发了浏览器一次HTTP请求;然后服务器处理请求,生成合适的HTML、CSS以及JavaScript,并发送至客户端;客户端浏览器将这一段HTML显示出来;此后的用户操作的响应开始不同:用户的这些操作将不会引发浏览器的另一次HTTP请求,而是将引发客户端的某段JavaScript代码的执行。

再怎么形象的描述也不如一张图:

14.jpg

一个简单的实例:不重新加载页面获取book.xml中的书名。

  HTML代码:



book





我的藏书:




   book.xml

<书籍>
  <书  类别="网络">
    <书名 lang="en">WEB开发
    <作者>M
    <年份>2008
    <价格>35
  
  <书 类别="计算机">
    <书名 lang="en">存储体
    <作者>C
    <年份>2012
    <价格>30
  

  运行结果:未刷新显示结果如下

13.jpg

本篇文章到这就结束了(想看更多就到PHP中文网AJAX使用手册栏目中学习),有问题的可以在下方留言提问。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
asp开发工具有哪些
asp开发工具有哪些

asp开发工具有Visual Studio、Dreamweaver、FrontPage、EditPlus、UltraEdit、SQL Server Management Studio、RAD Studio、Delphi、Asp.NET和Oracle SQL Developer。更多asp开发工具相关内容,详情请阅读本专题下面的其他文章,php中文网欢迎大家前来学习。

362

2023.10.23

json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

419

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

535

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

311

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

77

2025.09.10

ajax教程
ajax教程

php中文网为大家带来ajax教程合集,Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

159

2023.06.14

ajax中文乱码解决方法
ajax中文乱码解决方法

ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容,供大家免费下载体验。

160

2023.08.31

ajax传递中文乱码怎么办
ajax传递中文乱码怎么办

ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

117

2023.11.15

Golang 网络安全与加密实战
Golang 网络安全与加密实战

本专题系统讲解 Golang 在网络安全与加密技术中的应用,包括对称加密与非对称加密(AES、RSA)、哈希与数字签名、JWT身份认证、SSL/TLS 安全通信、常见网络攻击防范(如SQL注入、XSS、CSRF)及其防护措施。通过实战案例,帮助学习者掌握 如何使用 Go 语言保障网络通信的安全性,保护用户数据与隐私。

2

2026.01.29

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号