简单来说AJAX就是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
原生态的ajax主要有5步:
第一步:创建XMLHttpRequest:
var xhttp=new XMLHttpRequest();
**第二步:注册回调函数**
xhttp.onreadystatechange=callback()
**第三步:设置与服务器交互的方式、地址、参数等信息。**
xhttp.open("post","/Demo01",true);
**第四步:向服务器发送请求,启动与服务器的交互。**
xhttp.send("username=张三包");
第五步:创建回调函数,让回调函数接收服务端返回的数据,然后更新页面。
function callback(){ }
function myfunction(){
var xhttp=new XMLHttpRequest();
xhttp.onreadystatechange=function(){
if(this.readyState==4&&this.status==200){
console.log("成功");
}
};
xhttp.open("post","/Demo01",true);
xhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xhttp.send("username=张三包");
}
注意get方法的参数可以再url 使用?和&传递,post方法传递参数要写在send方法中并且要加设置请求头
$.ajax()它是jquery提供的最基本的ajax编程方式。其他方式都是根据.ajax()所改进的,所以会用这个其他的也会用;
juqery替我们封装好了上面介绍的那5步,只需要写入参数就可以;
type: “get”/“post” , 表示穿的是post 还是get方法
data: " 这里是传递的参数信息,一般是json格式"
url:“这里是请求的地址”
success:function(){
成功的回调函数
}
其他的一些参数这里不做阐述,想了解的可以看文档
var person01={
"username":"张三",
"age":"50"
}
$(function() {
$("#but").click(function () {
$.ajax({
url: "/Demo02",
success: function () {
console.log("成功");
},
data: person01,
type: "get",
datatype:"json"
});
});
});
json就是一种数据交换格式,广泛在前后端交互中应用;
JSON的规则很简单: 对象是一个无序的“‘名称/值’对”集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值’ 对”之间使用“,”(逗号)分隔。其实就是对象数组相互嵌套使用。
在前端中直接支持json格式,但后台不支持,可以fastjson或者jackson处理.
这里推荐一篇博客,写的比较好,是springmvc实现ajax交互,有兴趣的可以看看。
https://blog.csdn.net/qq_27008807/article/details/78882876