【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文本,然后再进行渲染。

目录
相关文章
|
7月前
|
XML 前端开发 JavaScript
AJAX 前端开发利器:实现网页动态更新的核心技术
**AJAX** 允许网页在不刷新的情况下更新内容,实现异步与服务器交换数据。通过JavaScript的XMLHttpRequest对象,可发送和接收数据。当用户触发事件(如点击),函数向服务器发送GET请求,服务器响应后更新指定HTML部分。AJAX并非编程语言,而是利用浏览器内置对象、JavaScript和DOM技术。核心是XMLHttpRequest对象,它有多种方法(如`open()`和`send()`)和属性(如`onreadystatechange`、`readyState`和`status`)来处理请求和响应。
127 2
AJAX 前端开发利器:实现网页动态更新的核心技术
|
1月前
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
49 3
|
1月前
|
JSON 前端开发 JavaScript
java-ajax技术详解!!!
本文介绍了Ajax技术及其工作原理,包括其核心XMLHttpRequest对象的属性和方法。Ajax通过异步通信技术,实现在不重新加载整个页面的情况下更新部分网页内容。文章还详细描述了使用原生JavaScript实现Ajax的基本步骤,以及利用jQuery简化Ajax操作的方法。最后,介绍了JSON作为轻量级数据交换格式在Ajax应用中的使用,包括Java中JSON与对象的相互转换。
54 1
|
4月前
|
前端开发 Java UED
告别页面刷新时代:Struts 2 Ajax技术揭秘,轻松实现动态加载,Web应用焕然一新!
【8月更文挑战第31天】在Web应用开发中,用户体验至关重要。为减少页面刷新带来的不适,Ajax技术应运而生。Struts 2作为流行的Java EE框架,通过内置的Ajax支持简化了无刷新页面动态加载的实现。本文通过对比传统请求响应模式,展示了Struts 2如何轻松实现Ajax功能,提升了用户体验和开发效率,并灵活地实现了数据交换。然而,使用Ajax时还需注意SEO和跨域请求等局限性。
46 0
|
4月前
|
JSON 前端开发 JavaScript
Django入门到放弃之ajax
Django入门到放弃之ajax
|
6月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
6月前
|
数据采集 Web App开发 前端开发
技术心得记录:如何用JAVA爬取AJAX加载后的页面(转载)
技术心得记录:如何用JAVA爬取AJAX加载后的页面(转载)
|
7月前
|
XML JSON 前端开发
Ajax – JSON入门指南
Ajax – JSON入门指南
64 1
|
7月前
|
前端开发 搜索推荐 安全
AJAX和CSR(客户端渲染)是Web开发中常用的两种技术
【5月更文挑战第8天】AJAX提升用户体验,减轻服务器压力,但对搜索引擎不友好且增加开发复杂度,易引发安全问题。CSR提供快速响应和交互性,改善用户体验,但首屏加载慢,搜索引擎支持不足,同样面临安全挑战。两者各有适用场景,需按项目需求选择。
63 0
|
7月前
|
XML 前端开发 JavaScript
【JavaScript技术专栏】JavaScript网络请求与Ajax技术
【4月更文挑战第30天】Ajax是Web开发中实现动态数据更新的关键技术,允许不刷新页面即从服务器获取数据。它结合了HTML/CSS、DOM、XML/JSON和JavaScript。`XMLHttpRequest`是传统的Ajax实现方式,而`fetch` API是现代、简洁的替代选项。Ajax应用实例展示了如何使用fetch在搜索框输入时异步获取并显示结果,提升了用户体验。掌握这些技术对前端开发者至关重要。
76 0