AJAX

目录

一、AJAX概述

1.1 什么是ajax

1.2 同步交互与异步交互

1.3 AJAX核心（XMLHttpRequest）

1.4 AJAX的优缺点

二、使用jQuery实现Ajax

2.1 $.ajax()

2.2 $.get()

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"
);