Ajax这种技术能够向服务器请求额外的数据而无须卸载页面(即刷新）
一.实现同步流程：
1、得到核心对象XMLHttpRequest对象
var xhr = new XMLHttpRequest();
2、准备/打开请求
open(请求类型GET/POST,请求的路径,是否异步true/false);
3、发送请求
send(参数/null);
注：如果是get请求，参数直接跟在请求路径后面，send()方法中设置null;
如果是post请求，有参数则设置参数，无参数设置为null;
4、解析响应数据
1、判断响应是否成功 status=200 （404=未找到资源;500=服务器异常;200=成功）
2、得到后台响应数据 responseText
例子：
<script type="text/javascript">
1、得到核心对象XMLHttpRequest对象
var xhr = new XMLHttpRequest();
console.log(xhr);
2、准备/打开请求 open(请求类型GET/POST,请求的路径,是否异步true/false);
xhr.open("GET","js/data.json?uname=zhangsan&uage=10",false); // 同步请求
3、发送请求 send(参数/null);
xhr.send(null);
4、解析响应数据
if (xhr.status == 200) { // 1、判断响应是否成功 status=200
2、得到后台响应数据 responseText
console.log(xhr.responseText);
var user = JSON.parse(xhr.responseText);
console.log(user);
console.log(user.uname);
} else {
alert("失败状态码：" + xhr.status + "，失败原因：" + xhr.statusText);
}
</script>
二.实现异步流程：
1.得到核心对象XMLHttpRequest对象
var xhr = new XMLHttpRequest();
2.准备/打开请求
open(请求类型get/post,请求的路径，是否异步true/false);
3.发送请求
send(参数/null);
注：如果是get请求 ，参数直接跟在请求路径后面，send()方法中设置null；
如果是post请求，有参数则设置参数，无参数设置为null；
4.解析响应数据：
1.判断响应是否成功 status=200 (404=未找到资源；500=服务器异常；200=成功连接)
2.得到后响应数据 responseText
例子：
<script type="text/javascript">
1.得到核心对象XMLHttpRequest对象
var xhr = new XMLHttpRequest();
console.log(xhr);
2.准备/打开请求 open（请求类型Get/post,请求的路径，是否异步true/false）;
xhr.open("GET","js/data.json?uname=zhangsan$uage=10",true);//异步请求
3.发送请求 send（参数/null）；
shr.send(null);
//监听readystate事件 （0=尚未调用open·方法； 1=已调用open方法未调用send方法，2=调用send方法，未接收到响应；3=接收到部分响应；4=响应完全接收）
xhr.onreadystatechange = function() {
//如果是异步请求，需要等待数据完全响应再做处理
if(xhr.readyState == 4){
4.解析响应数据 responseText
console.log(xhr.responseText);
var user = JSON.parse(xhr.responseText);
console.log(user);
console.log(user.uname);
} else{
console.log("失败状态码：" + xhr.status + "，失败原因：" + xhr.statusText);
}
}
}
</script>
三.post请求
实现流程：
异步：
1、得到核心对象XMLHttpRequest对象
var xhr = new XMLHttpRequest();
2、准备/打开请求
open(请求类型GET/POST,请求的路径,是否异步true/false);
3、发送请求
send(参数/null);
注：如果是get请求，参数直接跟在请求路径后面，send()方法中设置null;
如果是post请求，有参数则设置参数，无参数设置为null;
4、解析响应数据
1、判断响应是否成功 status=200 （404=未找到资源;500=服务器异常;200=成功）
2、得到后台响应数据 responseText
例子：
<script type="text/javascript">
1、得到核心对象XMLHttpRequest对象
var xhr = new XMLHttpRequest();
console.log(xhr);
2、准备/打开请求 open(请求类型GET/POST,请求的路径,是否异步true/false);
xhr.open("POST","js/data.json",true); // 异步请求
由于Post请求的机制问题，需要模拟表单提交
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
3、发送请求 send(参数/null);
xhr.send("uname=zhangsan&uage=10"); // post请求如果有参数，需要将参数设置在send方法中
监听readystate事件 （0=尚未调用open方法；1=已调用open方法未调用send方法，2=调用send方法，未接收到响应；3=接收到部分响应；4=响应完全接收）
xhr.onreadystatechange = function() {
如果是异步请求，需要等待数据完全响应后再做处理
if (xhr.readyState == 4) {
4、解析响应数据
if (xhr.status == 200) { // 1、判断响应是否成功 status=200
2、得到后台响应数据 responseText
console.log(xhr.responseText);
var user = JSON.parse(xhr.responseText);
console.log(user);
console.log(user.uname);
} else {
console.log("失败状态码：" + xhr.status + "，失败原因：" + xhr.statusText);
}
}
}
</script>
四.封装
实现流程：同异步流程
例子：
<script type="text/javascript">
var obj = {
method:"GET",
url:"js/data.json?aa=11",
async:true,
data:{
uname:"zhangsan",
uage:18
},
success:function(data){
// 做想处理的事情
console.log(data);
}
};
function ajax(obj) {
// 1、得到核心对象XMLHttpRequest对象
var xhr = new XMLHttpRequest();
var params = formatParam(obj.data);
// 判断是否是get请求，如果是则将参数拼接在url后面
if ("GET" == (obj.method).toUpperCase()) {
obj.url += (obj.url).indexOf("?") > 0 ? "&" +params : "?" + params;
}
// 2、准备/打开请求 open(请求类型GET/POST,请求的路径,是否异步true/false);
xhr.open(obj.method,obj.url,obj.async);
// 判断如果是POST请求
if ("POST" == (obj.method).toUpperCase()) {
// 由于Post请求的机制问题，需要模拟表单提交
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// 3、发送请求 send(参数/null);
xhr.send(params); // post请求如果有参数，需要将参数设置在send方法中
} else {
xhr.send(null); // get请求设置为null
}
// 判断是同步请求还是异步请求
if (obj.async) { // 异步请求
// 监听readystate事件 （0=尚未调用open方法；1=已调用open方法未调用send方法，2=调用send方法，未接收到响应；3=接收到部分响应；4=响应完全接收）
xhr.onreadystatechange = function() {
// 如果是异步请求，需要等待数据完全响应后再做处理
if (xhr.readyState == 4) {
// 处理响应结果
callback();
}
}
} else { // 同步请求
// 处理响应结果
callback();
}
// 处理响应结果
function callback() {
// 4、解析响应数据
if (xhr.status == 200) { // 1、判断响应是否成功 status=200
// 2、得到后台响应数据 responseText
/* console.log(xhr.responseText);
var user = JSON.parse(xhr.responseText);
console.log(user); */
obj.success(xhr.responseText);
} else {
console.log("失败状态码：" + xhr.status + "，失败原因：" + xhr.statusText);
}
}
}
// formatParam({ uname:"zhangsan", uage:18 });
/*将对象格式的参数转换成等号拼接的字符串*/
function formatParam(data) {
// 判断参数是否存在
if (data == null) {
return "";
}
// 定义数组，接收每个参数字符串
var params = [];
for(var key in data) {
// js中通过push()方法向数组的最后追加
params.push(key+"="+data[key]);
}
console.log(params.join("&"));
var param = params.join("&");// uname=zhangsan&uage=18
return param;
}
五jquery调用ajax方法
1.ajax。html
格式：$.ajax({});
参数：
type：请求方式GET/POST
url：请求地址url
async：是否异步，默认是true表示异步
data：发送到服务器的数据
dataType：预期服务器返回的数据类型
contentType：设置请求头
success：请求成功时调用此函数
error：请求失败时调用此函数
例子：
$.ajax({
type:"get", // 请求类型 GET/POST
url:"js/data.json", // 请求路径
dataType:"json", // 预期服务器返回的数据类型
data:{ // 请求参数，键值对的json对象
},
success:function(data){ // 请求成功时的回调函数
console.log(data);
}
});
post类型只需要将get改成post就可以了
2.get.html
1.请求get文件，忽略返回值
$.get('../js/cuisine_area.json');
2.请求get文件，传递参数，忽略返回值
$.get('../js/cuisine_area.json',{name:"tom",age:100});
3.请求get文件,拿到返回值,请求成功后可拿到返回值
$.get('../js/cuisine_area.json',function(data){
console.log(data)
});
4.请求get文件,传递参数,拿到返回值
$.get('../js/cuisine_area.json',{name:"tom",age:100},function(data){
console.log(data)
例子：
/* 无参数，无返回值 */
// $.get("http://localhost:8080/jqueryAjax/ServletTest");
/* 有参数，无返回值 */
// $.get("http://localhost:8080/jqueryAjax/ServletTest",{uname:"zhangsan"});
/* 无参数，有返回值 */
/* $.get("http://localhost:8080/jqueryAjax/ServletTest",function(data){
console.log(data);
}); */
/* 有参数，有返回值 */
/* $.get("http://localhost:8080/jqueryAjax/ServletTest",{uname:"zhangsan"},function(data){
console.log(data);
}); */
post.html同上就是将get改成post
