Ajax Java 交互(json)
发布时间:2020-12-15 21:05:56 所属栏目:百科 来源:网络整理
导读:Ajax Java 交互(json) 很多朋友对于Ajax 不是很理解, 其实Ajax 并不是那些比较流行的框架(jQuery.....)。Ajax是异步的javascript 和 XML 的缩写。 其实IE早就实现了异步交互的方式只是没有大规模的应用。后来GOOGLE把他用起来了后期才出现了很多像jQuer
Ajax Java 交互(json)
很多朋友对于Ajax 不是很理解, 其实Ajax 并不是那些比较流行的框架(jQuery.....)。Ajax是异步的javascript 和 XML 的缩写。其实IE早就实现了异步交互的方式只是没有大规模的应用。后来GOOGLE把他用起来了后期才出现了很多像jQuery 这样的框架。现在跟大家分享一下原生态的Ajax应用。 1.编写html页面 <body> <input type="button" value="click here" onclick="ajax();" /> <br> <input type="text" id="value1" /> <input type="text" id="value2" /> <div id="div"></div> </body> </html>
2.在jsp中编写Ajax <script type="text/javascript"> var xmlHttpRequest = null; //声明一个空的 xmlHttpRequest对象 function ajax() { if (window.ActiveXObject) { //IE浏览器 xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { //非IE浏览器 xmlHttpRequest = new XMLHttpRequest; } if (null != xmlHttpRequest) { //获取HTML中的文本输入域值。 var v1 = document.getElementById("value1").value; var v2 = document.getElementById("value2").value; //设置好ajax的 请求方式、地址、是否异步 //xmlHttpRequest.open("GET","AjaxServlet?v1=" + v1 + "&v2=" + v2,true); //xmlHttpRequest.send(); //真正的发送请求 xmlHttpRequest.open("POST","AjaxServlet",true); //Ajax的回调函数 xmlHttpRequest.onreadystatechange = ajaxCallBack; //采用POST提交要设置请求头参数 xmlHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //采用POST提交 xmlHttpRequest.send("v1=" + v1 + "&v2=" + v2);//真正的发送请求 } } //Ajax的回调函数 function ajaxCallBack() { if (xmlHttpRequest.readyState == 4) { //Ajax引擎4个阶段,4为最后一个阶段 if (xmlHttpRequest.status == 200) { //XMLHttpReques对象取得服务器相应信息(文本、XML) var responseText = xmlHttpRequest.responseText; //将结果写入div中 //document.getElementById("div").innerHTML = responseText; //ajax解析json第一种方法 eval("var json=" + responseText); document.getElementById("div").innerHTML = json.name; //ajax解析json第二种方法 //var json =eval("[" + responseText + "]"); //document.getElementById("div").innerHTML = json[0].name; } else { document.getElementById("div").innerHTML = "服务器错误"; } } } </script>
3.编写后台Servlet package com.ajax.servlet; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class AjaxServlet extends HttpServlet { protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException { PrintWriter out = response.getWriter(); // out.print("Hello World"); String value1 = request.getParameter("v1"); String value2 = request.getParameter("v2"); out.print(value1 + value2); out.flush(); } protected void doPost(HttpServletRequest request,IOException { PrintWriter out = response.getWriter(); String value1 = request.getParameter("v1"); String value2 = request.getParameter("v2"); // out.print(value1 + value2); String json = "{" + '"'+ "name" + '"' +":" + '"' + value1 + '"' + "," + '"' + "age" + '"' +":" + '"' + "20"+ '"' +"}" ; out.print(json); out.flush(); } }
4.一个原生态的Ajax应用编写完成运行效果 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |