ajax运用（Java前端Ajax和Jquery-Ajax）java教程 / Java Web应用中的Ajax与JavaScript交互...

Ajax原生Ajax的实现步骤1、创建XMLHttpRequest核心对象 2、准备请求/打开请求 xhr.open(); open有参数参数: 1、请求类型 （GET/POST）

2、请求的路径 （请求的地址；如果是GET请求后面通过"?"拼接参数） 3、是否异步 （true或false；默认是异步true） 3、发送请求 xhr.send(); send有一个参数：

1、要传递给后台的数据 如果是GET请求，设置为null（GET请求参数在请求地址后面） 如果是POST请求，无参数时设置为null；有参数时设置参数 例如uname=zhangsan&upwd=123 4、判断响应结果，解析响应数据

如果是同步请求 xhr.status 响应状态 404 请求路径不正确 500 服务器内部异常 200 成功 xhr.responseText 响应结果

如果是异步请求，需要知道请求是否处理完毕，处理完毕后再解析数据 监听处理请求的状态码readyState，需要绑定监听事件 onreadystatechange 判断响应状态码为4时，表示数据已经完全响应

xhr.status 响应状态 404 请求路径不正确 500 服务器内部异常 200 成功 xhr.responseText 响应结果Get同步 //创建XMLHttpRepuest核心对象 var xhr=new XMLHttpRequest(); console.log(xhr); //准备请求 xhr.open("get","js/data.json",false); //发送请求 xhr.send(null); //判断响应结果，解析响应数据 if(xhr.status==200){ console.log(xhr.responseText); }

Get异步 //创建XMLHttpRequest的核心对象 var xhr=new XMLHttpRequest(); //准备请求 xhr.open("get","js/data.json",true); //发送请求 xhr.send(null); //监听响应结果是否完全响应 xhr.onreadystatechange=function(){ console.log(xhr.readyState); //判断数据是否完全响应 解析响应数据 if(xhr.readyState==4){ if(xhr.status==200){ console.log(xhr.responseText); }else{ alert("错误码:"+xhr.status+",错误原因"+xhr.statusText) } } };

Post同步 // 创建XMLHttpRequest核心对象 var xhr = new XMLHttpRequest(); // 2、准备请求/打开请求 xhr.open(); xhr.open("POST","js/data.json",false); // 模拟表单提交 xhr.setRequestHeader(Content-Type,application/x-www-form-urlencoded); // 3、发送请求 xhr.send(); xhr.send("uname=zhangsan"); // 判断响应结果，解析响应数据 if (xhr.status == 200) { console.log(xhr.responseText); }

Post异步 // 创建XMLHttpRequest核心对象 var xhr = new XMLHttpRequest(); // 2、准备请求/打开请求 xhr.open(); xhr.open("POST","js/data.json",true); // 模拟表单提交 xhr.setRequestHeader(Content-Type,application/x-www-form-urlencoded); // 3、发送请求 xhr.send(); xhr.send("uname=zhangsan"); // 监听readyState的状态，如果完全响应数据，才解析数据 xhr.onreadystatechange = function(){ // 判断是否等于4 if (xhr.readyState == 4) { // 判断响应结果，解析响应数据 if (xhr.status == 200) { console.log(xhr.responseText); } } }

Ajax封装 Ajax封装 var u1 = { method:"GET", url:"js/data.json?key=a&uname=zhangsan&upwd=12345", async:true, data:{ uname:"zhangsan", upwd:"123456" }, success:function(result){ // 解析结果 console.log(result); } }; var u2 = { method:"POST", url:"js/data2.json", async:false, data:{ key:"he" }, success:function(result){ // 解析结果 alert(result); } }; ajax(u1); ajax(u2); ajax({ method:"POST", url:"js/data2.json", async:false, data:{ key:"he" }, success:function(result){ // 解析结果 alert(result); } }); /** * 封装AJax */ function ajax(obj) { // 1、创建XMLHttpRequest核心对象 var xhr = new XMLHttpRequest(); //=================格式化参数=============== var param = obj.data; // 将json对象格式的参数转换为指定格式的字符串 uname=zhangsan&upwd=12345 var paramArray = []; // 遍历参数对象 for (var key in param) { /* console.log(key); console.log(param[key]); */ // 拼接参数名和参数值 var pa = key+"="+param[key]; // 将数据追加到数组中 paramArray.push(pa); } // 将数组通过指定符号转换成字符串 var p = paramArray.join("&"); console.log(p); //=================格式化参数=============== // 得到用户请求类型 var method = obj.method; // 2、判断请求类型，如果是GET请求，在请求地址后面拼接请求参数 if (method.toUpperCase() == "GET") { // 判断地址中是否包含"?"，如果有，则拼接时使用"&";如果没有，则使用"?" obj.url += (obj.url).indexOf("?") > -1 ? "&" + p : "?" + p; } // 3、打开请求 xhr.open(method,obj.url,obj.async); // 4、如果是POST请求，则需要模拟表单提交 if (method.toUpperCase() == "POST") { // 模拟表单提交 xhr.setRequestHeader(Content-Type,application/x-www-form-urlencoded); // post提交 xhr.send(p); } else { // get提交 xhr.send(null); } // 5、判断是否是否是异步请求 if (obj.async) { // 异步请求 // 监听readySate的值，判断响应是够完毕 xhr.onreadystatechange = function() { // 如果完全响应，值为4 if (xhr.readyState == 4) { callback(); } } } else { // 同步请求 callback(); } // 回调函数 function callback() { // 判断是否响应成功 status=200 if (xhr.status == 200) { // 得到相应数据，并回调数据给调用者 var result = xhr.responseText; obj.success(result); } } }

.$.ajax()jquery 调用 ajax 方法： 格式：$.ajax({});参数： type：请求方式 GET/POST url：请求地址 url async：是否异步，默认是 true 表示异步

data：发送到服务器的数据 dataType：预期服务器返回的数据类型 contentType：设置请求头 success：请求成功时调用此函数 error：请求失败时调用此函数 $.ajax $.ajax({ type:"get", url:"js/data.json", data:{ }, dataType:"json", success:function(result){ console.log(result); } });

.$.get() 请求 json 文件,传递参数,拿到返回值 $.get(../js/cuisine_area.json,{name:"tom",age:100},function(data){ console.log(data)

}); $.get $.get("js/data.json",{},function(data){ console.log(data); });

.$.post() 请求 json 文件,传递参数,拿到返回值 $.post(../js/cuisine_area.json,{name:"tom",age:100},function(data){ console.log(data)

}); $.get $.post("js/data.json",{},function(data){ console.log(data); });

.$.getJSON() 表示请求返回的数据类型是 JSON 格式的 ajax 请求 $.get $.getJSON("js/data.txt",{},function(data){ console.log(data); });