施用Json的Ajax实例-JavaSript-爱易网页

施用Json的Ajax实例

日期：2014-05-16　浏览次数：20451 次

使用Json的Ajax实例

今天公司要求尝试一下Ajax的学习，作为新人，学习新东西是一个任务，也是很乐意做的一件事情。那么就记录一下学到的内容。

首先是我还很不熟悉的html页面的前端的代码（用json封装数据的方式）：

<!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>

??? 这里有用到json的jar包。Json在我看来是一个封装了很多键值对的一些数据的集合（暂时就这么理解吧），用Json再加上Post的请求方式来对服务器请求数据，可以有效地服务器的负担。

??????这里有必要对html代码中异步请求的一些核心功能进行解释，就算是为以后忘记了这一方法的我和还没学会Ajax的新手写的吧。button点击之后，触发doJSON()的事件，通过var car = getCarObject();调用了测试数据function Car()里面的数据，然后创建一个xmlHttp的对象--createXMLHttpRequest();然后再通过xmlHttp对象的open()和send()方法，就算是往服务器传输了数据。就本人理解，所谓异步，是指在open()和send()之间，xmlHttp对象开启了一个onreadystagechange这样一个监听器，负责监听工作的代码块是function handleStageChange()方法。这样开启了一个请求状态的监听器之后，就可以对服务器的响应以parseResult()的方法作出回应，而不是通过刷新来响应服务器的返回的请求。在parseResult()的方法里，做了很简单的用js改变文本的动作，以观察是否有变化。

?????? 在java代码这块，我们只需要写一个简单的Servlet就可以扑捉到在前台通过send()发送过来的请求。代码如下:

package com.servlet;

import java.io.*;   
import java.net.*;   
import java.text.ParseException;   
import javax.servlet.*;   
import javax.servlet.http.*;    

import org.json.JSONException;
import org.json.JSONObject;

  
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);  
            String responseText = "You have a " + jsonObject.getInt("year") + " "  
            + jsonObject.getString("make") + " " + jsonObject.getStr

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

施用Json的Ajax实例

相关资料更多>

推荐阅读更多>