当前位置: 代码迷 >> JavaScript >> JSON AJAX例证
  详细解决方案

JSON AJAX例证

热度:183   发布时间:2012-11-23 22:54:33.0
JSON AJAX例子

一下为Ajax基础教程一书提供的实例?

jsonExample.html?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<title>JSON Example</title>  
  
<script type="text/javascript" src="json.js"></script>  
<script type="text/javascript">  
  
var xmlHttp;  
  
function createXMLHttpRequest() {  
    if (window.ActiveXObject) {  
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
    }   
    else if (window.XMLHttpRequest) {  
        xmlHttp = new XMLHttpRequest();  
    }  
}  
      
function doJSON() {  
    var car = getCarObject();  
      
    //Use the JSON JavaScript library to stringify the Car object  
    var carAsJSON = JSON.stringify(car);  
    alert("Car object as JSON:\n " + carAsJSON);  
      
    var url = "JSONExample?timeStamp=" + new Date().getTime();  
      
    createXMLHttpRequest();  
    xmlHttp.open("POST", url, true);  
    xmlHttp.onreadystatechange = handleStateChange;  
    xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");      
    xmlHttp.send(carAsJSON);  
}  
      
function handleStateChange() {  
    if(xmlHttp.readyState == 4) {  
        if(xmlHttp.status == 200) {  
            parseResults();  
        }  
    }  
}  
  
function parseResults() {  
    var responseDiv = document.getElementById("serverResponse");  
    if(responseDiv.hasChildNodes()) {  
        responseDiv.removeChild(responseDiv.childNodes[0]);  
    }  
      
    var responseText = document.createTextNode(xmlHttp.responseText);  
    responseDiv.appendChild(responseText);  
}  
  
function getCarObject() {  
    return new Car("Dodge", "Coronet R/T", 1968, "yellow");  
}  
  
function Car(make, model, year, color) {  
    this.make = make;  
    this.model = model;  
    this.year = year;  
    this.color = color;  
}  
  
</script>  
</head>  
  
<body>  
  
  <br/><br/>  
  <form action="#">  
      <input type="button" value="Click here to send JSON data to the server" onclick="doJSON();"/>  
  </form>  
    
  <h2>Server Response:</h2>  
  
  <div id="serverResponse"></div>  
  
</body>  
</html>  

?JSONExample.java(servlet)?

package json;  
  
import java.io.*;  
import java.net.*;  
import java.text.ParseException;  
import javax.servlet.*;  
import javax.servlet.http.*;  
import org.json.*;  
  
public class JSONExample extends HttpServlet {  
      
    protected void doPost(HttpServletRequest request, HttpServletResponse response)  
    throws ServletException, IOException {  
        String json = readJSONStringFromRequestBody(request);  
          
        //Use the JSON-Java binding library to create a JSON object in Java  
        JSONObject jsonObject = null;  
        try {  
            jsonObject = new JSONObject(json);  
        }  
        catch(ParseException pe) {  
            System.out.println("ParseException: " + pe.toString());  
        }  
          
        String responseText = "You have a " + jsonObject.getInt("year") + " "  
            + jsonObject.getString("make") + " " + jsonObject.getString("model")  
            + " " + " that is " + jsonObject.getString("color") + " in color.";  
          
        response.setContentType("text/xml");  
        response.getWriter().print(responseText);  
    }  
  
    private String readJSONStringFromRequestBody(HttpServletRequest request){  
        StringBuffer json = new StringBuffer();  
        String line = null;  
        try {  
            BufferedReader reader = request.getReader();  
            while((line = reader.readLine()) != null) {  
                json.append(line);  
            }  
        }  
        catch(Exception e) {  
            System.out.println("Error reading JSON string: " + e.toString());  
        }  
        return json.toString();  
    }  
}  
?
  相关解决方案