【Ajax入门技术】了解Ajax

简介: 【Ajax入门技术】了解Ajax

Ajax简介:


AJAX技术能够实现无需重新加载整个网页,就可以更新部分网页内容。

在WEB应用中AJAX使用十分广泛,百度,淘宝,京东等常见的PC端网页以及各种WEB

APP, 随处可见它的身影,AJAX已经成为前端工程师的常备技能之一。

AJAX全称为Asynchronous JavaScript And XML,就是异步的JS和XML。

通过AJAX可以在浏览器中向服务器发送异步请求,最大的优势:无刷新获取数据。

AJAX不是新的编程语言,而是一一种将现有的标准组合在一起使用的新 方式。


(1)Ajax的优缺点:

①优点

1.可以无需刷新页面而与服务器端进行通信。

2.允许你根据用户事件来更新部分页面内容。


②缺点

1.没有浏览历史,不能回退

2.存在跨域问题[同源] (即是从一个服务器向另外一个服务器发送请求默认是不允许的)

3.SEO不友好(爬虫无法爬取)

【SEO (Search Engine

Optimization) :搜索引擎优

化。】


那没问题来了,为什么爬虫无法爬取数据呢?


答:Ajax会直接向服务器发送一个请求,然后服务器返回数据,最后再由js进行一个动态的呈现,因此爬虫无法得到想要的数据。


(2)HTTP协议

(大多数网页都是有HTTP来传输的)


HTTP (hypertext transport protocol) 协议「超文本传输协议」,协议详细规定了浏览器和万维网服务器之间互相通信的规则。


主要是约定了两块地方,一个是请求,一个是响应(即返回结果)就好比是


一个小孩拿着一块钱去小卖店买糖一样,小孩给钱老板给糖。


(3)报文

请求报文(分为行,头,空行,体):


行:POST/GET /s?ie=utf-8 HTTP/1.1

头:Host: shanyu. com

Cookie: name=shanyu
Content -type: application/ x -Www- form-urlencoded
User-Agent: chrome 83


空行


体:(get请求时体为空,post请求时体可以不为空)

username=admin&password=admin


响应报文(也是分为四部分,行,头,空行,体):


行:HTTP/1.1(响应http协议版本)200(响应状态码,200表示OK,当然还有其他的一些常见的状态码【404,403,401,500等】)OK(响应状态字符串)


头:Content-Type: text/html ; charset=utf-8(类型)

Content-length: 2048(长度)

Content-encoding: gzip (压缩方式)


空行


体(主要返回结果):

<html>
<head> 
</head>
<body>
<h1>山鱼社区< /h1>
</body>
< /html>


返回出我们熟悉的html文本,然后再进行渲染。

目录
打赏
0
0
0
0
1
分享
相关文章
AJAX 前端开发利器:实现网页动态更新的核心技术
**AJAX** 允许网页在不刷新的情况下更新内容,实现异步与服务器交换数据。通过JavaScript的XMLHttpRequest对象,可发送和接收数据。当用户触发事件(如点击),函数向服务器发送GET请求,服务器响应后更新指定HTML部分。AJAX并非编程语言,而是利用浏览器内置对象、JavaScript和DOM技术。核心是XMLHttpRequest对象,它有多种方法(如`open()`和`send()`)和属性(如`onreadystatechange`、`readyState`和`status`)来处理请求和响应。
148 2
AJAX 前端开发利器:实现网页动态更新的核心技术
Ajax与Axios,以及Apifox的入门使用
本文由blue编写于2025年3月20日,主要介绍了Ajax、Axios以及Apifox的入门使用。文章首先讲解了Ajax的概念与作用,通过原生代码示例展示了如何实现异步数据交互;接着引入Axios,说明其对Ajax的封装简化了开发流程,并给出Axios实现相同功能的代码;最后详细讲述了Apifox的基本用法,包括创建接口、设置参数及生成Mock数据,为前后端开发提供了便利工具。
37 0
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
110 3
java-ajax技术详解!!!
本文介绍了Ajax技术及其工作原理,包括其核心XMLHttpRequest对象的属性和方法。Ajax通过异步通信技术,实现在不重新加载整个页面的情况下更新部分网页内容。文章还详细描述了使用原生JavaScript实现Ajax的基本步骤,以及利用jQuery简化Ajax操作的方法。最后,介绍了JSON作为轻量级数据交换格式在Ajax应用中的使用,包括Java中JSON与对象的相互转换。
98 1
告别页面刷新时代:Struts 2 Ajax技术揭秘,轻松实现动态加载,Web应用焕然一新!
【8月更文挑战第31天】在Web应用开发中,用户体验至关重要。为减少页面刷新带来的不适,Ajax技术应运而生。Struts 2作为流行的Java EE框架,通过内置的Ajax支持简化了无刷新页面动态加载的实现。本文通过对比传统请求响应模式,展示了Struts 2如何轻松实现Ajax功能,提升了用户体验和开发效率,并灵活地实现了数据交换。然而,使用Ajax时还需注意SEO和跨域请求等局限性。
64 0
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
Ajax – JSON入门指南
Ajax – JSON入门指南
93 1
AJAX和CSR(客户端渲染)是Web开发中常用的两种技术
【5月更文挑战第8天】AJAX提升用户体验,减轻服务器压力,但对搜索引擎不友好且增加开发复杂度,易引发安全问题。CSR提供快速响应和交互性,改善用户体验,但首屏加载慢,搜索引擎支持不足,同样面临安全挑战。两者各有适用场景,需按项目需求选择。
88 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等