AJAX初级

article/2025/11/3 8:01:03

AJAX介绍

AJAX = Asynchronous JavaScript and XML(异步的JavaScript和XML).

同步与异步的区别

同步的理解;

同步就是指一个进程在执行某个请求的时候,若该请求需要一段时间才能返回信息,那么这个进程将会一直等待下去,直到收到返回信息才继续执行下去;

同步就相当于是当客户端发送请求给服务端,在等待服务端响应的请求时,客户端不做其他的事情。当服务端做完了才返回到客户端。这样的话客户端需要一直等待。用户使用起来会有不友好。

异步的理解;

异步是指进程不需要一直等下去,而是继续执行下面的操作,不管其他进程的状态。当有消息返回时系统会通知进程进行处理,这样可以提高执行的效率。

异步就相当于当客户端发送给服务端请求时,在等待服务端响应的时候,客户端可以做其他的事情,这样节约了时间,提高了效率。

同步是阻塞横式,异步是非阻塞横式

AJAX是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。这意味着可以在不重新加或整个网页的情况下,对网页的某部分进行更新。

比如百度搜索.百度注册、天猫.京东等

传统的网页(不使用AJAX)如果需要更新内容,必需重载整个网页面。

以前Ajax是用XM1L格式的字符串进行数据交换,现在已经被]SON取代了。

Ajax特点:

优点:

·可以无需刷新页面,与服务器进行通信

·允许依据用户事件来更新部分页面内容

缺点;

·没有浏览历史,不能回退·存在跨域问题《同源)

. SEO不友好〔搜索引擎优化,对爬虫不友好)

AJAX原理

客户端发送请求,请求交给XMLHttpRequest,XMLHttpRequest把请求提交给服务,服务器进行业务处理,服务器响应数据交给XMLHttpRequest对象,XMLHttpRequest对象接收数据,由javascript把数据写到页面上。

 

 

获得响应

如需获得来自服务器的响应,请使用XMLHttpRequest对象的responseText或responseXML属性。

 onreadystatechange事件

当请求被发送到服务器时,我们需要执行一些基于响应的任务。

每当readyState改变时,就会触发onreadystatechange事件。

readyState属性存有XMLHttpRequest的状态信息。

下面是XMLHttDReauest对象的三个重要的属性:

 

 

 

$.ajax()

执行异步AJAX请求。

定义和用法

ajax()方法用于执行AJAX(异步HTTP)请求。

所有的jQuery AJAX方法都使用ajax()方法。该方法通常用于其他方法不能完成的请求。

语法

 该参数规定AJAX请求的一个或多个名称/值对。

下面的表格中列出了可能的名称/值:

$.get()和$.post()

jQuery get()和post()方法用于通过HTTP GET 或 POST请求从服务器请求数据。

HTTP请求:GET vs POST

两种在客户端和服务器端进行请求-响应的常用方法是:GET 和POST.

· GET-从指定的资源请求数据

. POST-向指定的资源提交要处理的数据

GET基本上用于从服务器获得(取回)数据。注释:GET方法可能返回缓存数据。

POST也可用于从服务器获取数据。不过,POST方法不会缓存数据,并且常用于连同请求一起发送数据。

 $.get()方法

$.get()方法通过HTTP GET请求从服务器上请求数据。

语法:

· URL:发送请求的URL字符串。

  data:可选的,发送给服务器的字符串或,keylvalue键值对。

. callback:可选的,请求成功后执行的回调函数。

 dataType:可选的,从服务器返回的数据类型。默认︰智能猜测(可以是xml,json, script,或 html).


http://chatgpt.dhexx.cn/article/CRriuXHk.shtml

相关文章

Ajax学习笔记-get请求参数-3

传统的表单内容会变成请求参数,自动拼接到对应的位置。get会放在请求地址的后面,post会放在请求体当中。 但是在Ajax中, 我们需要自己拼接请求参数,然后根据请求参数的不同,将请求参数放置在不同的位置。 路由&#xf…

【AJAX学习笔记三】ajax的post请求及其请求主体请求头的设置

AJAX的post请求及其请求行请求头的设置 一、POST请求 参照上一节的笔记,我们实现了get请求的方法,而POST方法的简单实现和GET方法类似,只需要在前端中将get请求修改为post。 xhr.open(POST, http://127.0.0.1:8000/server);在后端中将其接受…

Ajax参数对照及Success内容

本文是好久之前参考网上大佬教程,边学习边参考边做笔记,整理的内容,分享下大家学习~ 如果这位大佬看见,请评论留下您的名字和博客地址,我这里修改为【转载】 Ajax参数 jQuery 拥有完整的 Ajax 兼容套件。其中的函数和…

学习AJAX必知必会(2)~Ajax基本使用,设置请求行、请求体、请求头,服务端响应JSON数据

一、Ajax的基本使用 1、核心对象 XMLHttpRequest,AJAX 的所有操作都是通过该对象进行的。 2、发送ajax请求(4个步骤): 创建xhr对象,然后open方法初始化,设置请求方式和请求路径,接着send方法…

尚硅谷AJAX教程

优点&#xff1a;无需刷新页面获取数据&#xff0c;允许你根据用户事件来更新部分页面内容 缺点&#xff1a;没有浏览历史&#xff0c;不能回退&#xff0c;存在跨域&#xff0c;SEO不友好 原生XHR请求 get请求 <body><button>获取数据</button><scri…

AJAX (2) — AJAX请求的基本操作、设置请求参数、发送POST请求,POST设置请求体、AJAX设置请求头信息

目录 一、AJAX请求的基本操作 1.server.js文件 2.GET.html文件 二、AJAX设置请求参数 三、AJAX发送POST请求 1.POST.html文件 2.server.js文件 四、POST设置请求体 五、AJAX设置请求头信息 1.预定义头信息 2.自定义头信息 一、AJAX请求的基本操作 先设计出一个需求&…

css ::after和::before详解

伪元素:before和:after添加的内容默认是inline元素 <style>p:before{content: "hello "}p:after{content: "you are handsome!"}</style><p>xx!</p>等价于下面的html结构:<p><span>hello </span>xxx!<span&g…

深入了解::before 和 ::after 伪元素

点击上方 前端瓶子君&#xff0c;关注公众号 回复算法&#xff0c;加入前端编程面试算法每日一题群 本文从最简单的开始&#xff0c;解释如何理解和使用::before和::after。然后再在实际使用场景中去应用它。 ::before和::after是什么? ::before和::after可以添加到选择器以创…

:after和:before的作用及使用方法

1. :before 和 :after 的主要作用是在元素内容前后加上指定内容&#xff0c;示例&#xff1a; HTML代码&#xff1a; <p>你好</p> CSS代码&#xff1a; p:before{content: Hello;color: red; } p:after{content: Tom;color: red; } 效果如图&#xff1a; 以上代码…

::before和::after伪元素的用法案例

CSS3中伪类采用单冒号写法&#xff0c;伪元素采用双冒号写法。 伪类举例——:hover,:link,:active,:target。 伪元素举例——::before,::after,::first-letter,::first-line,::selection。 一、介绍 今天写网页时遇到一个问题&#xff0c;视口的背景中插入一个小图标的话&a…

beforeSend 出现跨域问题,header里直接设置token就没问题----Day1

一开始前端调用后端接口出现跨域问题&#xff0c;右键查看元素&#xff0c;会有跨域错误提示&#xff0c;类似下图&#xff0c;后来找后端设置了一下&#xff0c;问题解决。可以登录获取token等参数了。 但是 请求设备列表时&#xff0c;beforeSend 中设置token却失败了&#x…

after和before的作用及使用方法

:after和:before的作用及使用方法 1、 :before 和 :after 的主要作用是在元素内容前后加上指定内容&#xff0c;示例&#xff1a; HTML代码&#xff1a; <p>你好</p>CSS代码&#xff1a; p:before{content: Hello;color: red; } p:after{content: Tom;color: r…

@Before, @BeforeClass, @BeforeEach 和 @BeforeAll之间的不同

1. 不同注解的区别如下&#xff1a; 特性 Junit 4Junit 5 在当前类的所有测试方法之前执行。注解在静态方法上。此方法可以包含一些初始化代码。BeforeClassBeforeAll 在当前类中的所有测试方法之后执行。注解在静态方法上。此方法可以包含一些清理代码。AfterClassAfterAll 在…

HTML中 :before 和 :after 的用法

1. :before 和 :after 的主要作用是在元素内容前后加上指定内容&#xff0c;示例&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEed…

:before和:after的使用方法

伪元素可以让我们很方便的加入一个样式&#xff0c;比如在字体前加一个icon&#xff0c;或者加一个下换线&#xff0c;可以不占一个元素的位置&#xff0c;使用起来也很方便&#xff0c;现在介绍一下使用的方法。 注意&#xff1a;:before和:after中的content是必加项 <!DO…

@Before和@After的区别

通常我们使用JUnit的时候&#xff0c;会有一些方法需要提前或最后执行&#xff0c;则需要如下几种方式进行注解

css中::before ::after的用法

一、介绍 ::before和::after是伪元素&#xff0c;&#xff08;css3中为了与伪类做区别&#xff0c;伪元素采用双冒号的写法&#xff1b;但因为兼容性的问题&#xff0c;所以现在大部分还是统一的单冒号&#xff0c;比如:first-line、:first-letter、:before、:after等&#xf…

:before、:after伪元素的用法 !

:after 伪元素在元素之后添加内容。:before伪元素在元素之前添加内容。 这个伪元素允许创作人员在元素内容的最后面插入生成内容。默认地&#xff0c;这个伪元素是行内元素&#xff0c;不过可以使用属性 dispiay 改变这一点。 &#xff1a;before和&#xff1a;&#xff1a;be…

CSS中的:before和 :after

1. &#xff1a;before和 &#xff1a;after CSS中的:befor、:after都会创建一个伪元素&#xff0c;其中:befor创建的伪元素是所选元素的第一个子元素&#xff0c;:after创建的伪元素是所选元素的最后一个子元素。 :befor、:after创建的伪元素**默认样式为内联样式**。 &…

::before和::after伪元素的用法

一、介绍 css3为了区分伪类和伪元素&#xff0c;伪元素采用双冒号写法。 常见伪类——:hover,:link,:active,:target,:not(),:focus。 常见伪元素——::first-letter,::first-line,::before,::after,::selection。 ::before和::after下特有的content&#xff0c;用于在css渲…