AJAX

目录

一、AJAX概述

[1.1 什么是ajax](#1.1 什么是ajax)

[1.2 同步交互与异步交互](#1.2 同步交互与异步交互)

[1.3 AJAX核心(XMLHttpRequest)](#1.3 AJAX核心(XMLHttpRequest))

[1.4 AJAX的优缺点](#1.4 AJAX的优缺点)

二、使用jQuery实现Ajax

[2.1 .ajax()](#2.1 .ajax())

[2.2 .get()](#2.2 .get())

[2.3 .post()](#2.3 .post())


一、AJAX概述

1.1 什么是ajax

AJAX(Asynchronous Javascript And XML)翻译成中文就是"异步Javascript和XML"。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)。

实际上是下面这几种技术的融合:

  • (1)XHTML和CSS的基于标准的表示技术

  • (2)DOM进行动态显示和交互

  • (3)XML和XSLT进行数据交换和处理

  • (4)XMLHttpRequest进行异步数据检索

  • (5)Javascript将以上技术融合在一起

AJAX还有一个最大的特点就是,当服务器响应时,不用刷新整个浏览器页面,而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过程。

  • 与服务器异步交互

  • 浏览器页面局部刷新

1.2 同步交互与异步交互

  • 同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求;

  • 异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求。

异步交互的优势:

  • 用户操作无须像同步交互必须等待结果。
  • 异步交互只需与服务器端交换必要的数据内容,而不是将所有数据全部更新。
  • 异步交互对带宽造成的压力相比同步交互更小。
  • 通过Ajax实现异步交互不需要任何第三方插件,只要刘览器支持JavaScript语言即可实现

同步交互的优势:

  • 提升用户体验:Ajax可以在不刷新整个页面的情况下更新部分内容,使用户能够更快地获取所需信息,提高了用户的交互体验。
  • 减少网络流量:由于Ajax只更新需要改变的部分,而不是整个页面,因此可以减少网络传输的数据量,降低了对带宽的要求,提高了网页加载速度。
  • 提高页面性能:通过使用Ajax,可以在后台异步加载数据,使页面能够更快地响应用户的操作,提高了页面的性能和响应速度。
  • 实现局部更新:使用Ajax可以实现局部更新,只更新需要改变的部分,而不会影响其他部分的内容和状态,提高了页面的灵活性和可维护性。
  • 持实时通信:Ajax可以与服务器进行实时通信,实现实时更新数据的功能,例如聊天应用、股票行情等。

1.3 AJAX核心(XMLHttpRequest)

AJAX就是在Javascript中多添加了一个对象:XMLHttpRequest对象。所有的异步交互都是使用XMLHttpRequest对象完成的。

XMLHttpRequest 工作原理:

  • 传统的web前端与后端的交互中,浏览器直接访问Tomcat的Servlet来获取数据。Servlet通过转发把数据发送给浏览器。
  • 当我们使用AJAX之后,浏览器是先把请求发送到XMLHttpRequest异步对象之中,异步对象对请求进行封装,然后再与发送给服务器。服务器并不是以转发的方式响应,而是以流的方式把数据返回给浏览器
  • XMLHttpRequest异步对象会不停监听服务器状态的变化,得到服务器返回的数据,就写到浏览器上【因为不是转发的方式,所以是无刷新就能够获取服务器端的数据】

注意:

各个浏览器对XMLHttpRequest的支持也是不同的!

  • 大多数浏览器都支持DOM2规范,都可以使用:var xmlHttp = new XMLHttpRequest()来创建对象;

  • 但IE有所不同,

  • IE5.5以及更早版本需要:var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")来创建对象;

  • IE6中需要:var xmlHttp = new ActiveXObject("Msmxl2.XMLHTTP")来创建对象;

  • 而IE7以及更新版本也支持DOM2规范。

1.4 AJAX的优缺点

优点:

  1. AJAX使用Javascript技术向服务器发送异步请求;
  2. AJAX无须刷新整个页面;
  3. 因为服务器响应内容不再是整个页面,而是页面中的局部,所以AJAX性能高;

缺点:

  1. AJAX并不适合所有场景,很多时候还是要使用同步交互;
  2. AJAX虽然提高了用户体验,但无形中向服务器发送的请求次数增多了,导致服务器压力增大;
  3. 因为AJAX是在浏览器中使用Javascript技术完成的,所以还需要处理浏览器兼容性问题;

二、使用jQuery实现Ajax

jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器,这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。

2.1 $.ajax()

$.ajax()可以通过发送HTTP请求加载远程数据,是jQuery最底层的AJAX的实现,具有较高灵活性

复制代码
 #语法:
  $.ajax([设置参数]);

$.ajax({
     url:"",
     data:{},
     type:"post/get",
     async:true,
     dataType:"text",
     success:function(obj){
     },
     error:function(){
     }
})

常用设置参数如下:

复制代码
$.ajax({
    url:getPath()+"/AServlet",
    type:"GET",
    data:"name=张三",
    dataType:"text",
    success:function(data){
        alert(data);
    }
});

2.2 $.get()

$.get()方法是JQuery封装的发送HTTP GET请求从服务器加载数据的AJAX方法

复制代码
 #语法:
  $.get(url,data,success(resp,status,xhr),dataType)

常用设置参数如下:

复制代码
$.get(
    getPath()+"/Aservlet",
    {"name":"张三"},
    function(data){
        alert(data);
    },"text"
);

2.3 $.post()

$.post()是jQuery封装的发送HTTP POST请求从服务器加载数据的AJAX方法

复制代码
 #语法:
  $.post(url,data,success(resp,status,xhr),dataType);

常用设置参数如下:

复制代码
$.post(
	"servlet/AjaxPostServlet",    
	{
	userName:$("#userName").val(),
	age:$("#age").val()
	},
	function(data){ 
		alert(data);
	},"text"
);
相关推荐
foxhuli2299 分钟前
禁止ifrmare标签上的文件,实现自动下载功能,并且隐藏工具栏
前端
青皮桔40 分钟前
CSS实现百分比水柱图
前端·css
失落的多巴胺40 分钟前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
DataGear43 分钟前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化
影子信息1 小时前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月1 小时前
1.vue权衡的艺术
前端·vue.js·开源
样子20181 小时前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿1 小时前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
翻滚吧键盘1 小时前
vue文本插值
javascript·vue.js·ecmascript
孤水寒月2 小时前
给自己网站增加一个免费的AI助手,纯HTML
前端·人工智能·html