精华内容
下载资源
问答
  • 主要介绍了Ajax 高级功能之ajax向服务器发送数据的相关资料,需要的朋友可以参考下
  • NULL 博文链接:https://xiangtui.iteye.com/blog/656081
  • 服务器客户端HTML 在不使用ajax的情况下从客户端向服务器发送数据和从服务器接收数据
  • Ajax使用JSON向服务器发送数据

    千次阅读 2016-07-01 17:36:37
    不过,看过前面的例子后(使用XML向服务器发送复杂的数据结构),你可能会改变主意。通过串连接来创建XML串并不好,这也不是用来生成或修改XML数据结构的健壮技术。 JSON概述 XML的一个替代方法是JSON,可以在...

    做了这么多,你已经能更顺手地使用JavaScript了,也许在考虑把更多的模型信息放在浏览器上。不过,看过前面的例子后(使用XML向服务器发送复杂的数据结构),你可能会改变主意。通过串连接来创建XML串并不好,这也不是用来生成或修改XML数据结构的健壮技术。
    JSON概述
    XML的一个替代方法是JSON,可以在 www.json.org找到。JSON是一种文本格式,它独立于具体语言,但是使用了与C系列语言(如C、C#、JavaScript等)类似的约定。JSON建立在以下两种数据结构基础上,当前几乎所有编程语言都支持这两种数据结构:
    l    名/值对集合。在当前编程语言中,这实现为一个对象、记录或字典。
    l    值的有序表,这通常实现为一个数组。
    因为这些结构得到了如此众多编程语言的支持,所以JSON是一个理想的选择,可以作为异构系统之间的一种数据互换格式。另外,由于JSON是基于标准JavaScript的子集,所以在所有当前Web浏览器上都应该是兼容的。
    JSON对象是名/值对的无序集合。对象以  开始,以  } 结束,名/值对用冒号分隔。JSON数组是一个有序的值集合,以 开始,以  结束,数组中的值用逗号分隔。值可以是串(用双引号引起)、数值、 truefalse、对象,或者是数组,因此结构可以嵌套。图3-6以图形方式很好地描述了JSON对象的标记。
    图3-6  JSON对象结构的图形化表示(摘自www.json.org)
    请考虑 employee对象的简单例子。 employee对象可能包含名、姓、员工号和职位等数据。使用JSON,可以如下表示 employee对象实例:
    var employee = {
        "firstName" : John
        , "lastName" : Doe
        , "employeeNumber" : 123
        , "title" : "Accountant"
    }
    然后可以使用标准点记法使用对象的属性,如下所示:
    var lastName = employee.lastName;   //Access the last name
    var title = employee.title;             //Access the title
    employee.employeeNumber = 456;      //Change the employee number
    JSON有一点很引以为豪,这就是它是一个轻量级的数据互换格式。如果用XML来描述同样的 employee对象,可能如下所示:
    <employee>
        <firstName>John</firstName>
        <lastName>Doe</lastName>
        <employeeNumber>123</employeeNumber>
        <title>Accountant</title>
    </employee>
    显然,JSON编码比XML编码简短。JSON编码比较小,所以如果在网络上发送大量数据,可能会带来显著的性能差异。
    www.json.org网站列出了至少与其他编程语言的14种绑定,这说明,不论在服务器端使用何种技术,都能通过JSON与浏览器通信。
    使用JSON的示例
    (此例子需要
    json.js,http://www.json.org/js.html 最下面的链接点击下载,此例子使用的是比较老版本的json.js,如果你下载的是新的,使用的方法就不同了;
    JSONObject.java,JSONArray.java,http://www.json.org/java/index.html下载,注意不是java JSON-lib虽然里面也有这两个类,可能是版本原因不同了
    如果你要用json-lib,那你就必须下载json-lib-2.0-jdk15.jar,还必需下面5个jar

    jakarta commons-lang, jakarta commons-beanutils, jakarta commons-collections

    jakarta commons-logging ,ezmorph  缺少任何一个都是不行的,试过了- -!!

    前面4个在apache.org下载,最后一个在http://ezmorph.sourceforge.net/下载

    下面红色字体都是分歧部分,就看你是用什么了,经本人测试没问题。

    )
    下面是一个简单的例子,展示了如何使用JSON将JavaScript对象转换为串格式,并使用Ajax技术将这个串发送到服务器,然后服务器根据这个串创建一个对象。这个例子中没有业务逻辑,也几乎没有用户交互,它强调的是客户端和服务器端的JSON技术。图3-7显示了一个“字符串化的” Car对象。
    图3-7  “字符串化的”Car对象
    因为这个例子几乎与前面的POST例子完全相同,所以我们只关注JSON特定的技术。点击表单上的按钮将调用 doJSON函数。这个函数首先调用 getCarObject函数来返回一个新的 Car对象实例,然后使用JSON JavaScript库(可以从 www.json.org免费得到)将 Car对象转换为JSON串,再在警告框中显示这个串。接下来使用XMLHttpRequest对象将JSON编码的 Car对象发送到服务器。
    因为有可以免费得到的JSON-Java绑定库,所以编写Java servlet来为JSON请求提供服务相当简单。更妙的是,由于对每种服务器端技术都有相应的JSON绑定,所以可以使用任何服务器端技术实现这个例子。
    文本框:图3-8  读取JSON串之后的服务器响应 JSONExample  servlet doPost 方法为 JSON 请求提供服务。它首先调用 readJSONStr- ingFromRequestBody 方法从请求体获得 JSON 串,然后创建 JSONObject 的一个实例,向 JSONObject 构造函数提供 JSON 串。 JSONObject 在对象创建时自动解析 JSON 串。一旦创建了 JSONObject,就可以使用各个 get方法来获得你感兴趣的对象属性。
    这里使用 getString getInt 方法来获取 yearmakemodelcolor属性。这些属性连接起来构成一个串返回给浏览器,并在页面上显示。图3-8显示了读取JSON对象之后的服务器响应。
    代码清单3-11显示了 jsonExample.html,代码清单3-12显示了 JSONExample.java
    代码清单3-11   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);       老版本的json.js的用法
        var carAsJSON = car.toJSONString();
        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"
            οnclick="doJSON();"/>
      </form>
     
      <h2>Server Response:</h2>
     
      <div id="serverResponse"></div>
     
    </body>
    </html>
    代码清单3-12   JSONExample.java
    package ajaxbook.chap3;
     
    import java.io.*;
    import java.net.*;
    import java.text.ParseException;
    import javax.servlet.*;
    import javax.servlet.http.*;
    import org.json.JSONObject;
    //import net.sf.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 {
                 //如果是用json-lib的话,前面引进的包改为
                //import  net.sf.json.*;   //这里改为
                //jsonObject = JSONObject.fromObject(json);
                //fromObject(object)是static的。也可以用fromString(string)的,但官方是不建议用fromString的。
                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();
        }
    }
     
    展开全文
  • 利用Ajax向服务器发送请求

    Ajax向服务器端发送请求

    Ajax的应用场景

    1. 页面上拉加载更多数据
    2. 列表数据无刷新分页
    3. 表单项离开焦点数据验证
    4. 搜索框提示文字下拉列表

    Ajax运行原理

    Ajax 相当于浏览器发送请求与接收响应的代理人,以实现在不影响用户浏览页面的情况下,局部更新页面数据,从而提高用户体验。

    Ajax是一种异步进程,程序不会等待异步代码执行完后再继续执行后续代码

    当后续代码需要调用Ajax返回的数据时,可能会有数据未返回的问题

    Ajax的实现步骤

    1. 创建Ajax对象
    var xhr = new XMLHttpRequest();
    
    1. 告诉Ajax请求地址和请求方式
    xhr.open('get','127.0.0.1');
    
    1. 发送请求
    xhr.send();
    
    1. 获取服务器端给与客户端的响应数据
     xhr.onload = function () {
         console.log(xhr.responseText);
     }
    

    服务器端响应的数据格式

    服务器端大多数情况下会以JSON对象作为响应数据的格式

    http请求和响应的过程中,无论是请求参数还是响应内容,如果是对象类型,最终都会被转换为对象字符串进行传输。

    JSON.parse();//将json字符串转化为json对象
    
    JSON.stringify() // 将json对象转换为json字符串
    

    GET请求方式

    xhr.open('get','http://www.');
    

    get 请求是不能提交 json 对象数据格式的,传统网站的表单提交也是不支持 json 对象数据格式的。

    POST请求方式

    //设置请求头
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    //发送请求
    xhr.send();
    

    Ajax状态值

    在Ajax请求执行的过程中每一步都对应一个状态码

    数值意义
    0请求没有初始化,没有调用 open()
    1请求已经建立,但是没有发送 send()
    2请求已经发送
    3请求正在处理,通常响应中已经有部分数据可以使用了
    4响应已经完成,可以获取并使用服务器响应了
    xhr.readyState;//获取Ajax状态值
    

    onreadstatechange事件

    Ajax状态码发生变化的时候触发

     // 当Ajax状态码发生变化时触发事件
     xhr.onreadystatechange = function () {
         // 判断当Ajax状态码为4时
         if (xhr.readyState == 4) {
             // 输出响应数据
             console.log(xhr.responseText);
         }
     }
    

    HTTP状态码

    xhr.status();//响应的HTTP状态码
    
    状态码意义
    1xx信息响应类,表示接收到请求并且继续处理
    2xx处理成功响应类,表示动作被成功接收、理解和接受
    3xx重定向响应类,为了完成指定的动作,必须接受进一步处理
    4xx客户端错误,请求可能出错,妨碍服务器的处理
    5xx服务端错误,服务器不能正确执行一个正确的请求

    低版本浏览器缓存问题

    由于缓存的存在,在请求地址不发生改变的情况下,只有第一次的数据请求会发送到服务器端,后续的请求都会从浏览器的缓存中获取

    解决方法:改变请求的地址

    xhr.open('get','http://xxx.com?t=' + Math.random());
    

    通过Math下的方法产生随机数,使请求地址不同

    也可以使用Date下的方法,利用时间戳,也可以使值不同

    Ajax的封装

    1. 给函数设定一些默认值
    2. 创建ajax对象
    3. 拼接转化用户传递参数格式
    4. 配置ajax请求方式和地址
    5. 对不同的方式进行不同的处理
    6. 最后对返回的数据进行输出
    function ajax (options) {
    	// 设置初始化的默认值
    	var defaults = {
    		type: 'get',
    		url: '',
    		data: {},
    		header: {
    			'Content-Type': 'application/x-www-form-urlencoded'
    		},
    		success: function () {},
    		error: function () {}
    	}
    	// 通过assign的方法用options的值替换defaults
    	Object.assign(defaults, options);
    	// 创建ajax对象
    	var xhr = new XMLHttpRequest();
    	//处理用户传入的data数据,拼接成特定的数据格式传递给服务器端
    	var params = '';
    	// 循环参数
    	for (var attr in defaults.data) {
    		// 参数拼接
    		params += attr + '=' + defaults.data[attr] + '&';
    		// 去掉参数中最后一个&
    		//从第一位截取到倒数第一位并返回
    		params = params.substr(0, params.length-1)
    	}
    	// 如果请求方式为get
    	if (defaults.type == 'get') {
    		// 将参数拼接在url地址的后面
    		defaults.url += '?' + params;
    	}
    
    	// 配置ajax请求
    	xhr.open(defaults.type, defaults.url);
    	// 如果请求方式为post
    	if (defaults.type == 'post') {
    		// 设置请求头
    		xhr.setRequestHeader('Content-Type', defaults.header['Content-Type']);
    		// 如果向服务器端传递的参数类型为json
    		if (defaults.header['Content-Type'] == 'application/json') {
    			// 将json对象转换为json字符串
    			xhr.send(JSON.stringify(defaults.data))
    		}else {
    			// 发送请求
    			//post请求参数放在send中
    			xhr.send(params);
    		}
    	} else {
    		xhr.send();
    	}
    	// 请求加载完成
    	xhr.onload = function () {
    		// 获取服务器端返回数据的类型
    		var contentType = xhr.getResponseHeader('content-type');
    		// 获取服务器端返回的响应数据
    		var responseText = xhr.responseText;
    		// 如果服务器端返回的数据是json数据类型
    		if (contentType.includes('application/json')) {
    			// 将json字符串转换为json对象
    			responseText = JSON.parse(responseText);
    		}
    		// 如果请求成功
    		if (xhr.status == 200) {
    			// 调用成功回调函数, 并且将服务器端返回的结果传递给成功回调函数
    			defaults.success(responseText, xhr);
    		} else {
    			// 调用失败回调函数并且将xhr对象传递给回调函数
    			defaults.error(responseText, xhr);
    		} 
    	}
    	// 当网络中断时
    	xhr.onerror = function () {
    		// 调用失败回调函数并且将xhr对象传递给回调函数
    		defaults.error(xhr);
    	}
    }
    
    展开全文
  • Ajax - 使用JSON向服务器发送数据

    千次阅读 2007-08-13 00:00:00
    使用JSON向服务器发送数据做了这么多,你已经能更顺手地使用JavaScript了,也许在考虑把更多的模型信息放在浏览器上。不过,看过前面的例子后(使用XML服务器发送复杂的数据结构),你可能会改变主意。通过串连接...
    使用JSON向服务器发送数据 
    
    做了这么多,你已经能更顺手地使用JavaScript了,也许在考虑把更多的模型信息放在浏览器上。不过,看过前面的例子后(使用XML向服务器发送复杂的数据结构),你可能会改变主意。通过串连接来创建XML串并不好,这也不是用来生成或修改XML数据结构的健壮技术。
    JSON概述
    XML的一个替代方法是JSON,可以在 www.json.org找到。JSON是一种文本格式,它独立于具体语言,但是使用了与C系列语言(如C、C#、JavaScript等)类似的约定。JSON建立在以下两种数据结构基础上,当前几乎所有编程语言都支持这两种数据结构:
    l    名/值对集合。在当前编程语言中,这实现为一个对象、记录或字典。
    l    值的有序表,这通常实现为一个数组。
    因为这些结构得到了如此众多编程语言的支持,所以JSON是一个理想的选择,可以作为异构系统之间的一种数据互换格式。另外,由于JSON是基于标准JavaScript的子集,所以在所有当前Web浏览器上都应该是兼容的。
    JSON对象是名/值对的无序集合。对象以 { 开始,以 } 结束,名/值对用冒号分隔。JSON数组是一个有序的值集合,以 [ 开始,以 ] 结束,数组中的值用逗号分隔。值可以是串(用双引号引起)、数值、 truefalse、对象,或者是数组,因此结构可以嵌套。图3-6以图形方式很好地描述了JSON对象的标记。
    图3-6  JSON对象结构的图形化表示(摘自www.json.org)
    请考虑 employee对象的简单例子。 employee对象可能包含名、姓、员工号和职位等数据。使用JSON,可以如下表示 employee对象实例:
    var employee = {
        "firstName" : John
        , "lastName" : Doe
        , "employeeNumber" : 123
        , "title" : "Accountant"
    }
    然后可以使用标准点记法使用对象的属性,如下所示:
    var lastName = employee.lastName;   //Access the last name
    var title = employee.title;             //Access the title
    employee.employeeNumber = 456;      //Change the employee number
    JSON有一点很引以为豪,这就是它是一个轻量级的数据互换格式。如果用XML来描述同样的 employee对象,可能如下所示:
    <employee>
        <firstName>John</firstName>
        <lastName>Doe</lastName>
        <employeeNumber>123</employeeNumber>
        <title>Accountant</title>
    </employee>
    显然,JSON编码比XML编码简短。JSON编码比较小,所以如果在网络上发送大量数据,可能会带来显著的性能差异。
    www.json.org网站列出了至少与其他编程语言的14种绑定,这说明,不论在服务器端使用何种技术,都能通过JSON与浏览器通信。
    使用JSON的示例
    (此例子需要
    json.js,http://www.json.org/js.html 最下面的链接点击下载,此例子使用的是比较老版本的json.js,如果你下载的是新的,使用的方法就不同了;
    JSONObject.java,JSONArray.java,http://www.json.org/java/index.html下载,注意不是java JSON-lib虽然里面也有这两个类,可能是版本原因不同了
    如果你要用json-lib,那你就必须下载json-lib-2.0-jdk15.jar,还必需下面5个jar

    jakarta commons-lang, jakarta commons-beanutils, jakarta commons-collections

    jakarta commons-logging ,ezmorph  缺少任何一个都是不行的,试过了- -!!

    前面4个在apache.org下载,最后一个在http://ezmorph.sourceforge.net/下载

    下面红色字体都是分歧部分,就看你是用什么了,经本人测试没问题。

    )
    下面是一个简单的例子,展示了如何使用JSON将JavaScript对象转换为串格式,并使用Ajax技术将这个串发送到服务器,然后服务器根据这个串创建一个对象。这个例子中没有业务逻辑,也几乎没有用户交互,它强调的是客户端和服务器端的JSON技术。图3-7显示了一个“字符串化的” Car对象。
    图3-7  “字符串化的”Car对象
    因为这个例子几乎与前面的POST例子完全相同,所以我们只关注JSON特定的技术。点击表单上的按钮将调用 doJSON函数。这个函数首先调用 getCarObject函数来返回一个新的 Car对象实例,然后使用JSON JavaScript库(可以从 www.json.org免费得到)将 Car对象转换为JSON串,再在警告框中显示这个串。接下来使用XMLHttpRequest对象将JSON编码的 Car对象发送到服务器。
    因为有可以免费得到的JSON-Java绑定库,所以编写Java servlet来为JSON请求提供服务相当简单。更妙的是,由于对每种服务器端技术都有相应的JSON绑定,所以可以使用任何服务器端技术实现这个例子。
    文本框:
图3-8  读取JSON串之后的服务器响应
JSONExample servlet doPost 方法为 JSON 请求提供服务。它首先调用 readJSONStr- ingFromRequestBody 方法从请求体获得 JSON 串,然后创建 JSONObject 的一个实例,向 JSONObject 构造函数提供 JSON 串。 JSONObject 在对象创建时自动解析 JSON 串。一旦创建了 JSONObject,就可以使用各个 get方法来获得你感兴趣的对象属性。
    这里使用 getString getInt 方法来获取 yearmakemodelcolor属性。这些属性连接起来构成一个串返回给浏览器,并在页面上显示。图3-8显示了读取JSON对象之后的服务器响应。
    代码清单3-11显示了 jsonExample.html,代码清单3-12显示了 JSONExample.java
    代码清单 3-11   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);       老版本的json.js的用法
        var carAsJSON = car.toJSONString();
        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"
            οnclick="doJSON();"/>
      </form>
     
      <h2>Server Response:</h2>
     
      <div id="serverResponse"></div>
     
    </body>
    </html>
    代码清单 3-12   JSONExample.java
    package ajaxbook.chap3;
     
    import java.io.*;
    import java.net.*;
    import java.text.ParseException;
    import javax.servlet.*;
    import javax.servlet.http.*;
    import org.json.JSONObject;
    //import net.sf.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 {
                //如果是用json-lib的话,前面引进的包改为
                //import  net.sf.json.*;   //这里改为
                //jsonObject = JSONObject.fromObject(json);
                //fromObject(object)是static的。也可以用fromString(string)的,但官方是不建议用fromString的。
                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();
        }
    }
     
    展开全文
  • AJAX - 向服务器发送请求请求

    千次阅读 2017-01-04 01:19:48
    AJAX - 向服务器发送请求请求 XMLHttpRequest 对象用于和服务器交换数据向服务器发送请求 如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法: xmlhttp.open(...

    AJAX - 向服务器发送请求请求


    XMLHttpRequest 对象用于和服务器交换数据。


    向服务器发送请求

    如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:

    xmlhttp.open("GET","ajax_info.txt",true);
    xmlhttp.send();

    方法 描述
    open(method,url,async)

    规定请求的类型、URL 以及是否异步处理请求。

    • method:请求的类型;GET 或 POST
    • url:文件在服务器上的位置
    • async:true(异步)或 false(同步)
    send(string)

    将请求发送到服务器。

    • string:仅用于 POST 请求


    GET 还是 POST?

    与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。

    然而,在以下情况中,请使用 POST 请求:

    • 无法使用缓存文件(更新服务器上的文件或数据库)
    • 向服务器发送大量数据(POST 没有数据量限制)
    • 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

    GET 请求

    一个简单的 GET 请求:

    实例

    xmlhttp . open ( " GET " , " /try/ajax/demo_get.php " , true ) ; xmlhttp . send ( ) ;

    尝试一下 »

    在上面的例子中,您可能得到的是缓存的结果。

    为了避免这种情况,请向 URL 添加一个唯一的 ID:

    实例

    xmlhttp . open ( " GET " , " /try/ajax/demo_get.php?t= " + Math . random ( ) , true ) ; xmlhttp . send ( ) ;

    尝试一下 »

    如果您希望通过 GET 方法发送信息,请向 URL 添加信息:

    实例

    xmlhttp . open ( " GET " , " /try/ajax/demo_get2.php?fname=Henry&lname=Ford " , true ) ; xmlhttp . send ( ) ;

    尝试一下 »


    POST 请求

    一个简单 POST 请求:

    实例

    xmlhttp . open ( " POST " , " /try/ajax/demo_post.php " , true ) ; xmlhttp . send ( ) ;

    尝试一下 »

    如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:

    实例

    xmlhttp . open ( " POST " , " /try/ajax/demo_post2.php " , true ) ; xmlhttp . setRequestHeader ( " Content-type " , " application/x-www-form-urlencoded " ) ; xmlhttp . send ( " fname=Henry&lname=Ford " ) ;

    尝试一下 »

    方法 描述
    setRequestHeader(header,value)

    向请求添加 HTTP 头。

    • header: 规定头的名称
    • value: 规定头的值


    url - 服务器上的文件

    open() 方法的 url 参数是服务器上文件的地址:

    xmlhttp.open("GET","ajax_test.html",true);

    该文件可以是任何类型的文件,比如 .txt 和 .xml,或者服务器脚本文件,比如 .asp 和 .php (在传回响应之前,能够在服务器上执行任务)。


    异步 - True 或 False?

    AJAX 指的是异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。

    XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参数必须设置为 true:

    xmlhttp.open("GET","ajax_test.html",true);

    对于 web 开发人员来说,发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前,这可能会引起应用程序挂起或停止。

    通过 AJAX,JavaScript 无需等待服务器的响应,而是:

    • 在等待服务器响应时执行其他脚本
    • 当响应就绪后对响应进行处理

    Async=true

    当使用 async=true 时,请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数:

    实例

    xmlhttp . onreadystatechange = function ( ) { if ( xmlhttp . readyState == 4 && xmlhttp . status == 200 ) { document . getElementById ( " myDiv " ) . innerHTML = xmlhttp . responseText ; } } xmlhttp . open ( " GET " , " /try/ajax/ajax_info.txt " , true ) ; xmlhttp . send ( ) ;

    尝试一下 »

    您将在稍后的章节学习更多有关 onreadystatechange 的内容。


    Async = false

    如需使用 async=false,请将 open() 方法中的第三个参数改为 false:

    xmlhttp.open(&quot;GET&quot;,&quot;test1.txt&quot;,false);

    我们不推荐使用 async=false,但是对于一些小型的请求,也是可以的。

    请记住,JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢,应用程序会挂起或停止。

    注意:当您使用 async=false 时,请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可:

    实例

    xmlhttp . open ( " GET " , " /try/ajax/ajax_info.txt " , false ) ; xmlhttp . send ( ) ; document . getElementById ( " myDiv " ) . innerHTML = xmlhttp . responseText ;

    尝试一下 »
    展开全文
  • 哪个大神给我说说,怎么使用jQuery+Ajax(post)向服务器提交登录请求? 然后验证。返回数据后怎么处理?
  • AJAX如何向服务器发送请求

    千次阅读 2017-11-02 15:34:49
    其实很简单,AJAX向服务器发送请求其实就是使用了XMLHttpRequest对象中的两个方法Open()方法和Send()方法。对于这两个方法的介绍在我的上一章AJAX基础XMLHttpReqiest中有详细的讲解。 例如: xmlhttp.open("GET/...
  • 1.首先我们需要json.js这个js文件,因为我们要利用JSON对象把对象变为JSON串,例如 var person = { name : 'yewenjun', school: 'zafu' ...然后我们用xml对象的send方法来发送转化好的JSON串 xml.send...
  • 前端入门一 —— 使用 JQuery 获取表单数据并通过 Ajax 向服务器提交数据一、JQuery 简介二、Ajax 简介三、传统Web应用开发模式与 Ajax 开发模式对比1、传统Web应用开发模式2、Ajax 开发模式3、对比总结四、开发实例...
  • AJAX - 向服务器发送请求

    千次阅读 2014-04-03 19:35:52
    向服务器发送请求 如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法: xmlhttp.open("GET","test1.txt",true); xmlhttp.send(); 方法 描述 open(method,url
  • 1.echarts的官网上的demo,都是直接写死的随机数据,没有和数据库的交互,所以就自己写了一下,ok,我们开始一步一步走一遍整个流程吧。 就以官网最简单的那个小demo来做修改吧。官网上的小demo的效果图如下:...
  • ajax使用步骤: 1.给后端发请求 ...然后向服务器发送请求,以下是两种发送请求的方法(“GET&amp;amp;amp;amp;amp;amp;amp;amp;quot;和&amp;amp;amp;amp;amp;amp;amp;amp;quot;POST”) xhr.
  • GET 或 POSTurl:文件在服务器上的位置async:true(异步)或 false(同步)send(string)将请求发送服务器。string:仅用于 POST 请求υ 对于是使用POST还是GET W3C上的解释如下:与 POST 相...
  • ########这里input框里是显示以前房间的position, 并且可以改, 这里的class是用来jquery监听的, value是用来input框中显示默认值的, data-id是用来传递subject.id的, data-id这个是自定义属性是用来ajax时用到url...
  • EXTJS AJAX方式发送数据给后台服务器
  • AJAX 工作原理 ... 2.服务器端接收到 Http 请求以创建一个响应,将数据发送到 Internet 使得传输到客户端。 3.客户端通过 JS 获取...AJAX - 向服务器发送请求请求 XMLHttpRequest 对象用于和服务器交换数据。如需将请求发
  • 在一次servlet服务器的项目中,想在前台使用json后台发送请求,其中data的格式如下: var requestData = { "services": [{ "lightbulb" : [{"alpha":0}], "operation_status":[{"status":0}] }], ...
  • 使用ajax服务器端获取数据

    千次阅读 2016-11-11 19:00:38
    使用ajax服务器端获取数据的步骤:  代码表示: var xhr = new XMLHttpRequest(); xhr.open("GET","ajax.do",true); xhr.onreadystatechange= function(){ if(xhr.readyState==4&&xhr....
  • jQuery——通过Ajax发送数据

    千次阅读 2017-07-15 11:24:10
    Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML),一个Ajax解决...XMLHttpRequest:这个对象可以在不中断其他浏览器任务的情况下向服务器发送请求。 文本文件:服务器提供的XML、HTML或JSON格式的文本数
  • 用JQ来写AJAX发送请求到服务器

    千次阅读 2016-12-05 00:27:23
    用JQ发送AJAX请求到服务器,接收数据并处理。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 139,208
精华内容 55,683
关键字:

ajax向服务器发送数据