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的优缺点

优点：

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

缺点：

AJAX并不适合所有场景，很多时候还是要使用同步交互；
AJAX虽然提高了用户体验，但无形中向服务器发送的请求次数增多了，导致服务器压力增大；
因为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"
);