一、什么是Ajax

异步的JavaScript and xml；前端可以异步请求，在页面局部刷新

1.XMLHttpRequest

浏览器能够发送异步请求全是依赖该对象的属性和方法(原生的ajax了解即可)

2.异步请求，局部刷新

1、jQuery的Ajax

①：get方法

②：post方法

③：Ajax（这个重要，jQuery的ajax最常用）

$.ajax({url:"请求url?param1=v1",            //url   ajax请求的目标服务器地址type:"get|post",                   //type  指定请求方式（get|post）data:,                            // 提交的数据dataType:"json",             //预期返回的是json对象格式的数据success:function(backData){ //success  ajax请求成功之后执行的回调函数，参数backData就是服务器返回的数据},error:function(e){    //error   ajax请求出现错误执行的回调函数，参数e表示异常信息对象}
});$.ajax({url: '/json2/test2',type: 'post',contentType: "application/json",//声明请求参数类型为 jsondata: JSON.stringify(user),// 转换js对象成jsonsuccess: function (ret) {console.log(ret);alert(ret.name);}});

PS：一定要注意，数据类型是 json ！！！

2、JavaScript的Ajax（原生Ajax，可以了解一下，看情况使用吧）

1）发送get请求

<input type="text" id="name2" > <a href="javascript:getName()">ajax方式get请求</a>

2）创建AJAX异步对象

 //1. 创建 XMLHttpRequest 对象var xmlHttp;if(window.XMLHttpRequest){//存在浏览器差异  有的浏览器直接支持这个对象  直接 new 就可以了xmlHttp = new XMLHttpRequest();}else {//有的浏览器不支持xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}

3）指定回调函数监听请求的执行结果

//2.指定回调函数  监听请求的执行结果xmlHttp.onreadystatechange = function (){// readyState=4 表示读取响应结束// status 表示 后端响应正常if(xmlHttp.readyState==4 && xmlHttp.status==200){// 在这里 接受响应结果var result = xmlHttp.responseText;
alert(result);
document.getElementById("name2").value = result;}}

4）与服务端建立链接

open(method,url,async)method表示提交方式：get/posturl表示访问的资源async 表示是否异步//3. 与服务端建立链接xmlHttp.open("get","/getAjax1Name?name=zs",true);

5）发送请求

//4. 发送请求xmlHttp.send();

二、Ajax的特性

1 异步式数据交互：Ajax可以异步地向服务器发送请求并处理响应，无需刷新整个页面。这样可以提高应用程序的响应速度，提供更加流畅的用户体验。

2 较少的网络传输：由于Ajax只发送更新数据而不是整个页面，它可以大大减少网络流量，从而提高应用程序性能。

3 实时响应：使用Ajax可以使应用程序实时响应用户的操作，并不需要用户提交表单或者重新加载页面才能更新内容。

4 增量式开发：Ajax允许应用程序针对功能进行增量式开发。这意味着开发人员可以一步一步地扩展应用程序的功能，而不是等待所有功能的开发和测试。

5 增强的交互性：Ajax可以增强用户和应用程序之间的交互性。它使站点可以更好地响应用户操作和请求，实现更好的用户体验。

6 支持多种数据格式：Ajax支持多种数据格式（如XML、JSON等），可以充分满足数据传输的不同需求。

7 跨平台、跨浏览器兼容性：由于Ajax是基于Web标准（如JavaScript、DOM、XML等）的技术，可以在几乎所有现代浏览器上运行，以及跨多种平台。

三：基于ajax的交互方式：

前端发送请求的方式：在js中发送ajax请求，当前用的是基于jQuery封装的方法，注意请求地址携带的参数，以及收到后端响应数据的写法，特别是要看懂后端响应的数据格式
后端接收请求参数：当前还是基于request接收，到了springmvc区别就大了
响应数据到前端：直接用过response对象，得到一个打印流，向浏览器直接输出json格式的数据，需要把java类型转为json格式

可以用Jackson或者fastjson

Ajax的特性以及用法相关推荐

关于Jquery中ajax方法data参数用法的总结
关于Jquery中ajax方法data参数用法的总结 jquery手册描述: 示例: $.ajax({type: "POST",url: "some.php", ...
jquery ajax实例get,jQuery中ajax的get()方法用法实例
本文实例讲述了jQuery中ajax的get()方法用法.分享给大家供大家参考.具体分析如下: $.get()通过 HTTP GET请求从服务器上请求数据. 语法结构: $.get(url, [dat ...
html5新特性与用法大全了解一下
有好多小伙伴私聊我问我html5新特性和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等 2)增强型表单表单2 ...
Stream的特性、用法、stream().map().collect()用法
Stream的特性.用法.stream().map().collect()用法 1.举例说明有一个集合: List<User> users = getList(); 现在想获取User的 ...
关于Jquery中ajax方法data参数用法
data 发送到服务器的数据.将自动转换为请求字符串格式.GET 请求中将附加在 URL 后.查看 processData 选项说明以禁止此自动转换.必须为 Key/Value 格式.如果为数组,jQ ...
fetch的用法ajax,Promise发送Ajax请求、fetch用法
实例方法: Document /* 基于Promise发送Ajax请求 */ function queryData(url) { var p = new Promise(function(resolv ...
bui ajax,BUI 控件用法
前言前面快速开始已经讲解了控件的最基本用法, 学一个就会全部了. 控件之间还可以相互嵌套, BUI的控件主要可以分为3类: 滑动交互控件: 例如: 焦点图bui.slide, 选项卡bui.tab, ...
ajax之gson简单用法
gson使用简单, 第一种,传String字符串. servlet界面 resp.setCharacterEncoding("UTF-8");PrintWriter out = r ...
回调函数举例ajax,通过回调函数的理解来进一步理解ajax及其注意的用法
一,再一次理解回调函数 (function($){ $.fn.shadow = function(opts){ //定义的默认的参数 var defaults = { copies: 5, opaci ...

Ajax的特性以及用法