1.什么是Ajax
一、什么是同步，什么是异步
同步现象：客户端发送请求到服务器端，当服务器返回响应之前
客户端都处于等待卡死状态
异步现象：客户端发送请求到服务器端，无论服务器是否返回响应
客户端都可以随 意做其他事情，不会被卡死
二、Ajax的运行原理
页面发起请求，会将请求发送给游览器的内核中的Ajax引擎中，Ajax引擎会提交请求到服务器端，
在这段时间里，客服端可以任意进行操作，直到服务器将数据返回Ajax之后，会触发你设置事件，
从而执行自定义的js逻辑代码完成某种页面的功能，实现页面的局部刷新。
2.js原生的Ajax
五步走
function f1(){ ???????//1.创建ajax对象 ???????var xmlHttp = new XMLHttpRequest(); ???????//2.绑定监听函数 ???????xmlHttp.onreadystatechange = function(){ ???????????//判断数据是否正常返回 ???????????if(xmlHttp.readyState==4&&xmlHttp.status==200){ ???????????????//6.接收数据 ???????????????var res = xmlHttp.responseText; ???????????????document.getElementById("span1").innerHTML = res; ???????????} ???????} ???????//3.绑定处理请求的地址,true为异步，false为同步 ???????//GET方式提交把参数加在地址后面?key1:value&key2:value ???????xmlHttp.open("POST","/ajax/ajax1",true); ???????//4.POST提交设置的协议头（GET方式省略） ???????xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); ???????//POST提交将参数，如果是GET提交send不用提交参数 ???????//5.发送请求 ???????xmlHttp.send("name=zjj&age=18"); ???}3.Json数据格式
json是一种与语言无关的数据交换的格式，
作用：
使用ajax进行前后台数据交换
移动端与服务端的数据交换
一、json的格式和解析
json有两种格式
1.对象格式：{key1：value1，key2：value2}
var json = {"name":"xiaou","age":0}2.数组/集合格式：[obj,obj,obj....]
var json = [{"name":"xiaou","age":0}, ????????{"name":"xiaobei","age":1}]两种格式可以分别套用
var json ={ ????????????"key1":"key1", ????????????"key2":{"name":"xiaou","age":0,"tel":8888888}, ????????????"key3":[{"name":"xiaobei","age":1}, ????????????????????{"name":"xiaonian","age":2}] ????}json的key是字符串而Json的Value是object
4.Jquery的Ajax技术
jquery是一个优秀的js框架，对js原生的Ajax进行了封装
在封装后的Ajax的操作更加简洁，功能更加强大
与Ajax操作相关方法有如下几种
常见的三种Ajax请求方法
1）$.get(url, [data], [callback], [type])
2）$.post(url, [data], [callback], [type])
其中：
url：代表请求的服务器端地址
data：代表请求服务器端的数据（可以是key=value形式也可以是json格式）
callback：表示服务器端成功响应所触发的函数（只有正常成功返回才执行）
type：表示服务器端返回的数据类型（jquery会根据指定的类型自动类型转换）
常用的返回类型：text、json、html等
3）$.ajax( { option1:value1,option2:value2... } );
常用的option有如下：
async：是否异步，默认是true代表异步
data：发送到服务器的参数，建议使用json格式
dataType：服务器端返回的数据类型，常用text和json
success：成功响应执行的函数，对应的类型是function类型
type：请求方式，POST/GET
url：请求服务器端地址
最简单的提交例子
function f1(){ ???????$.get("/ajax/ajax2",{"name":"张三","age":18},function(data){alert(data.name);},"json"); ???} ???function f2(){ ???????$.post("/ajax/ajax2",{"name":"李四","age":18},function(data){alert(data.age)},"json"); ???} ???function f3(){ ???????$.ajax( ???{ ???????????????url:"/ajax/ajax2", ???????????????async:true, ???????????????data:{"name":"李四","age":28}, ???????????????dataType:"json", ???????????????success:function(data){alert(data.age);}, ???????????????error:function(){alert("请求错误");}, ???????????????type:"POST" ???????????????}); ???}5.json解析jar
将java的对象或集合转成json形式的字符串
json的转换插件是通过java的一些工具，直接将java的对象和集合转换成json 的字符串
常见的json转换工具有：
1）jsonlib
2）Gson：google
3）fastjson：阿里巴巴
Js原生Ajax和Jquery的Ajax
原文地址：https://www.cnblogs.com/FlyBlueSky/p/9031202.html