热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

深入解析Ajax的工作机制及其在现代Web开发中的应用

本文深入探讨了Ajax的工作机制及其在现代Web开发中的应用。Ajax作为一种异步通信技术,改变了传统的客户端与服务器直接交互的模式。通过引入Ajax,客户端与服务器之间的通信变得更加高效和灵活。文章详细分析了Ajax的核心原理,包括XMLHttpRequest对象的使用、数据传输格式(如JSON和XML)以及事件处理机制。此外,还介绍了Ajax在提升用户体验、实现动态页面更新等方面的具体应用,并讨论了其在当前Web开发中的重要性和未来发展趋势。

一、什么是ajax

ajax是一种异步通信技术。在ajax出现之前,客户端与服务端之间直接通信。引入ajax之后,客户端与服务端加了一个第三者--ajax。有了ajax之后,通过在后台与服务器进行少量数据交换,可以达到在不刷新整个页面的情况下实现局部刷新。其原理如图

二、XHR对象

ajax技术的核心是XMLHttpRequest对象(简称XHR)。IE7+、FireFox、Opera、Chrome和Safari都支持原生的XHR对象,创建XHR对象可以这样写

var xhr = new XMLHttpRequest();

那如果要兼容IE6、7又该怎么写

var xhr = new ActiveXObject("MSXML2,XMLHTTP");

因此兼容写法如下

var xhr = \'\';
window.ActiveXObject ? xhr = new ActiveXObject(\'MSXML2,XMLHTTP\') : xhr = new XMLHttpRequest();

三、XHR用法

创建完XHR对象后,要调用open()方法创建请求,open()方法接受三个参数:

1.要发送的请求的类型(如"get"、"post"等)

2.请求的URL

3.表示是否异步发送请求的布尔值(默认为true,表示异步)

xhr.open("get","index.php",true);

post()请求方法如下面代码

xhr.open("get","index.php",true);
//post()方法必须在send()方法之前加上下面这段代码
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

说明一点:URL相对于执行代码的当前页面,也可以用绝对路径

准备工作做好后,调用send()方法发送请求,

xhr.send(null);

这里get方法传输的数据已经放到url中,可以将参数设置为null

在调用send()方法后,请求就会被分派到服务器,onreadychange捕获请求的状态码,并进行检测

onreadychange对象有个readyState属性,该属性的值表示当前的活动阶段,其值有如下几个:

0:未初始化。尚未调用open()方法

1:启动。已经调用open()方法,但尚未调用send()方法

2:发送。已经调用send()方法,但尚未接收到响应

3:接收。已经接受到部分响应数据

4:完成。已经接受到全部响应数据,并且可以在客户端使用

我们只需判断readyState的值是否为4就可以知道所有数据已经就绪。

 1 xhr.Onreadystatechange= function(){
 2     if (xhr.readyState==4) {
 3         //判断状态码是否成功
 4         if (xhr.status>=200&&xhr.status<=207||xhr.status==304) {
 5             //调用ajax的responseText属性返回数据
 6             alert(xhr.responseText);
 7         }else{
 8             alert(xhr.status);
 9     }  
10 }      

四、总结

原生ajax的请求总结为一下六个步骤

1.创建XHR对象

2.调用open()方法创建请求

3.调用send()方法发送请求

4.onreadychange捕获请求的状态码

5.判断状态吗是否成功

6.调用ajax的responseText属性返回数据

 1 //拼接路径
 2 function toUrl(url, data) {
 3     //获取时间戳
 4     var time = new Date().getTime();
 5     data.time = time;
 6     var arr = [];
 7     for(var i in data) {
 8         var str = i + "=" + data[i];
 9         //["user"=\'lili\',"pass"="4564522",time="145486456"]
10         arr.push(str);
11     }
12     var str = arr.join("&"); //"user=lili&pass=4564522&time=145486456"
13     var path = url + "?" + str;
14     return path;
15 }
16 function fnAjax(obj) {
17     var data = obj.data||{};//可选,如果没有data就新建一个
18     var path = toUrl(obj.url,data);
19     var sendType = obj.sendType||"get";
20     var succFn = obj.succFn||false;
21     var failFn = obj.failFn||false;
22     //1、创建一个XMLHttpRequest对象
23     //兼容写法
24     if(window.ActiveXObject) {
25         var ajax = new ActiveXObject("MSXML2,XMLHTTP");//兼容IE6、7
26     } else {
27         var ajax = new XMLHttpRequest();//现代浏览器
28     }
29     //2、创建一个请求
30     var time = new Date().getTime();
31     //判断传送的类型
32     if (sendType=="get") {
33         ajax.open("get", path);
34         ajax.send(path);
35     }else{
36         var pathArr = path.split("?");
37         ajax.open("post", pathArr[0]);// pathArr[0]?之前的内容
38         //url = "test.txt?time=12365478"
39         //3、发送请求
40         //get方法传输的数据已经放到url中,可以将参数设置为null
41         ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
42         ajax.send(pathArr[1]);//pathArr[1]?之后的内容
43     }
44     //4、检测请求的状态
45     ajax.Onreadystatechange= function() {
46         //如果ajax对象的准备状态发生改变执行事件
47         //onreadystatechange事件是在readyState属性发生改变时触发的,
48         //readyState的值表示当前请求的状态,在事件处理程序中可以根据这个值来进行不同的处理。
49         //5、判断请求的状态
50         if(ajax.readyState == 4) {
51             //6、判断请求结果
52             if(ajax.status >= 200 && ajax.status <= 207 || ajax.status == 304) {
53                 //7、请求成功拿到返回的结果
54                 if (succFn) {
55                     succFn(ajax.responseText);
56                 }
57             } else {
58                 if (failFn) {
59                     failFn(ajax.status);
60                 }                
61             }
62         }
63     }
64 }
View Code

 


推荐阅读
  • 本文探讨了如何利用 jQuery 的 JSONP 技术实现跨域调用外部 Web 服务。通过详细解析 JSONP 的工作原理及其在 jQuery 中的应用,本文提供了实用的代码示例和最佳实践,帮助开发者解决跨域请求中的常见问题。 ... [详细]
  • 深入解析 Vue 中的 Axios 请求库
    本文深入探讨了 Vue 中的 Axios 请求库,详细解析了其核心功能与使用方法。Axios 是一个基于 Promise 的 HTTP 客户端,支持浏览器和 Node.js 环境。文章首先介绍了 Axios 的基本概念,随后通过具体示例展示了如何在 Vue 项目中集成和使用 Axios 进行数据请求。无论你是初学者还是有经验的开发者,本文都能为你解决 Vue.js 相关问题提供有价值的参考。 ... [详细]
  • 在Laravel中实现PHP对JSON数据的发布与处理 ... [详细]
  • 技术日志:使用 Ruby 爬虫抓取拉勾网职位数据并生成词云分析报告
    技术日志:使用 Ruby 爬虫抓取拉勾网职位数据并生成词云分析报告 ... [详细]
  • 本文探讨了如何通过检测浏览器类型来动态加载特定的npm包,从而优化前端性能。具体而言,仅在用户使用Edge浏览器时加载相关包,以提升页面加载速度和整体用户体验。此外,文章还介绍了实现这一目标的技术细节和最佳实践,包括使用User-Agent字符串进行浏览器识别、条件加载策略以及性能监控方法。 ... [详细]
  • 2018年9月21日,Destoon官方发布了安全更新,修复了一个由用户“索马里的海贼”报告的前端GETShell漏洞。该漏洞存在于20180827版本的某CMS中,攻击者可以通过构造特定的HTTP请求,利用该漏洞在服务器上执行任意代码,从而获得对系统的控制权。此次更新建议所有用户尽快升级至最新版本,以确保系统的安全性。 ... [详细]
  • 在深入研究 React 项目的过程中,特别是在探索 react-router 源码时,我发现了其中蕴含的中间件概念。这激发了我对中间件的进一步思考与整理。本文将详细探讨 Redux 中间件的原理及其在实际项目中的应用,帮助读者更好地理解和使用这一强大工具。通过具体示例和代码解析,我们将揭示中间件如何提升应用的状态管理和异步操作处理能力。 ... [详细]
  • 本文深入探讨了 hCalendar 微格式在事件与时间、地点相关活动标记中的应用。作为微格式系列文章的第四篇,前文已分别介绍了 rel 属性用于定义链接关系、XFN 微格式增强链接的人际关系描述以及 hCard 微格式对个人和组织信息的描述。本次将重点解析 hCalendar 如何通过结构化数据标记,提高事件信息的可读性和互操作性。 ... [详细]
  • 本文详细解析了JSONP(JSON with Padding)的跨域机制及其工作原理。JSONP是一种通过动态创建``标签来实现跨域请求的技术,其核心在于利用了浏览器对``标签的宽松同源策略。文章不仅介绍了JSONP的产生背景,还深入探讨了其具体实现过程,包括如何构造请求、服务器端如何响应以及客户端如何处理返回的数据。此外,还分析了JSONP的优势和局限性,帮助读者全面理解这一技术在现代Web开发中的应用。 ... [详细]
  • HTTP请求与响应机制:基础概览
    在Web浏览过程中,HTTP协议通过请求和响应报文实现客户端与服务器之间的通信。当用户访问一个网页时,浏览器会发送一个HTTP请求报文至服务器,服务器接收到请求后,会生成并返回一个HTTP响应报文。这两种报文均包含三个主要部分:起始行、头部字段和消息体,确保了数据的有效传输和解析。 ... [详细]
  • 期末Web开发综合实践项目:运用前端技术打造趣味小游戏体验
    期末Web开发综合实践项目中,学生通过运用HTML、CSS和JavaScript等前端技术,设计并实现了一款趣味性十足的小游戏。该项目不仅检验了学生对前端基础知识的掌握情况,还提升了他们的实际操作能力和创意设计水平。视频链接展示了项目的最终成果,直观呈现了游戏的互动性和视觉效果。 ... [详细]
  • 本文介绍了如何通过掌握 IScroll 技巧来实现流畅的上拉加载和下拉刷新功能。首先,需要按正确的顺序引入相关文件:1. Zepto;2. iScroll.js;3. scroll-probe.js。此外,还提供了完整的代码示例,可在 GitHub 仓库中查看。通过这些步骤,开发者可以轻松实现高效、流畅的滚动效果,提升用户体验。 ... [详细]
  • 本文深入探讨了在使用 Spring Cloud Feign 时遇到的 `java.lang.IllegalStateException` 异常,具体表现为方法体参数过多的问题。通过详细分析异常原因和代码结构,提出了有效的解决方案,帮助开发者更好地理解和处理这一常见问题。 ... [详细]
  • 本文深入探讨了在Spring Boot中处理RESTful风格的表单请求的方法,包括请求参数处理、请求映射以及RESTful设计原则的应用。文章详细介绍了如何利用HTTP动词(如GET、POST、PUT、DELETE)来操作资源,并结合Spring Boot的注解(如@GetMapping、@PostMapping等)实现高效、清晰的请求处理逻辑。通过实例分析,展示了如何在实际项目中应用这些技术,提高开发效率和代码可维护性。 ... [详细]
  • PHP中元素的计量单位是什么? ... [详细]
author-avatar
爱她拿命换
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有