Ajax Java 交互（json）

来源：互联网发布：moment.js fromnow 编辑：程序博客网时间：2024/06/05 15:59

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,HttpServletResponse response) throws ServletException, 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应用编写完成运行效果