js和java的http通信

2019独角兽企业重金招聘Python工程师标准>>>

可查看基于ajax的前后端多种数据交互：

https://my.oschina.net/u/3697586/blog/1592818

js 发送text & 接收 text

js部分

  <script>
var xmlhttp;
function callback() {
    if (xmlhttp.readyState==4){// 4 = "loaded"
        if (xmlhttp.status==200){// 200 = OK
            alert("成功了 = " + xmlhttp.responseText);
        }else{
            alert("error");
        }
    }
}
//POST方式
function test(){
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange=callback;
    xmlhttp.open("POST","test.do",true);
    // 设置POST请求的请求头  POST需添加这项  GET可不需要.
    xmlhttp.setRequestHeader("Content-Type"
        , "application/x-www-form-urlencoded");
    xmlhttp.send('password=123&username=mingzi');
}
//GET方式
function test(){
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange=callback;
    xmlhttp.open("GET","test.do?password=123&username=mingzi",true);
    // 设置POST请求的请求头  POST需添加这项  GET可不需要.
    //xmlhttp.setRequestHeader("Content-Type"
    //, "application/x-www-form-urlencoded");
    xmlhttp.send('password=123&username=mingzi');
}
</script>   

java部分

    @RequestMapping(value="/test.do",produces="text/html;charset=UTF-8;")
    @ResponseBody
    public String test(HttpServletRequest request){
        String username=request.getParameter("username");
        String password=request.getParameter("password");
        String url=request.getRequestURI();
        String path=request.getServletPath();
        String method =request.getMethod();
        System.out.println("\n url is:"+url);
        System.out.println("\n path is:"+path);
        System.out.println("\n method is:"+method);
        System.out.println("\n username is:"+username);
        System.out.println("\n password is:"+password);
        return "这是后台中文字符";
    }  

后台输出

  url is:/test.do
  path is:/test.do
  method is:GET
  username is:mingzi
  password is:123

js 发送text 接收json

js部分

  <script>
    var xmlhttp;
    function callback() {

        if (xmlhttp.readyState==4){// 4 = "loaded"
            if (xmlhttp.status==200){// 200 = OK
                var data = xmlhttp.responseText;
                var jsonobj = eval('(' + data + ')');
                var strTemp = eval('jsonobj.one');
                console.log("\n data =  " + data);
                console.log("\n jsonobj = " + jsonobj);
                alert(strTemp);
            }else{
                alert("error");
            }
        }
    }
    function test(){
        xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange=callback;
        xmlhttp.open("POST","test.do",true);
//        // 设置POST请求的请求头
        xmlhttp.setRequestHeader("Content-Type"
            , "application/json");
        xmlhttp.send('password=123&username=mingzi');
    }
</script>  

java部分

  @RequestMapping(value="/test.do")
@ResponseBody
public JSONObject test(HttpServletRequest request){
    String username=request.getParameter("username");
    String password=request.getParameter("password");
    String url=request.getRequestURI();
    String path=request.getServletPath();
    String method =request.getMethod();
    System.out.println("\n url is:"+url);
    System.out.println("\n path is:"+path);
    System.out.println("\n method is:"+method);
    System.out.println("\n username is:"+username);
    System.out.println("\n password is:"+password);

    JSONObject obj = new JSONObject();
    obj.put("one","一个");
    obj.put("two","两个");
    System.out.println("\n obj is:"+obj);
    return obj;
}  

特别注意 java想要返回给前端json数据必须引入一下两个包 （否则会出现406错误）

  @ResponseBody返回json格式的数据，而浏览器接受的是text/html;charset=UTF-8文本类型
  解决方法：添加json所需要的依赖
  <!-- jackson start -->
<dependency>
  <groupId>org.codehaus.jackson</groupId>
  <artifactId>jackson-core-asl</artifactId>
</dependency>
<dependency>
  <groupId>org.codehaus.jackson</groupId>
  <artifactId>jackson-mapper-lgpl</artifactId>
  <version>1.9.12</version>
</dependency>   

关于mediaTypes配置和"accept" headers

  前端 ACCEPT 类型如下
  *.3gpp	audio/3gpp, video/3gpp	3GPP Audio/Video
  *.ac3	audio/ac3	AC3 Audio
  *.asf	allpication/vnd.ms-asf	Advanced Streaming Format
  *.au	audio/basic	AU Audio
  *.css	text/css	Cascading Style Sheets
  *.csv	text/csv	Comma Separated Values
  *.doc	application/msword	MS Word Document
  *.dot	application/msword	MS Word Template
  *.dtd	application/xml-dtd	Document Type Definition
  *.dwg	image/vnd.dwg	AutoCAD Drawing Database
  *.dxf	image/vnd.dxf	AutoCAD Drawing Interchange Format
  *.gif	image/gif	Graphic Interchange Format
  *.htm	text/html	HyperText Markup Language
  *.html	text/html	HyperText Markup Language
  *.jp2	image/jp2	JPEG-2000
  *.jpe	image/jpeg	JPEG
  *.jpeg	image/jpeg	JPEG
  *.jpg	image/jpeg	JPEG
  *.js	text/javascript, application/javascript	JavaScript
  *.json	application/json	JavaScript Object Notation
  *.mp2	audio/mpeg, video/mpeg	MPEG Audio/Video Stream, Layer II
  *.mp3	audio/mpeg	MPEG Audio Stream, Layer III
  *.mp4	audio/mp4, video/mp4	MPEG-4 Audio/Video
  *.mpeg	video/mpeg	MPEG Video Stream, Layer II
  *.mpg	video/mpeg	MPEG Video Stream, Layer II
  *.mpp	application/vnd.ms-project	MS Project Project
  *.ogg	application/ogg, audio/ogg	Ogg Vorbis
  *.pdf	application/pdf	Portable Document Format
  *.png	image/png	Portable Network Graphics
  *.pot	application/vnd.ms-powerpoint	MS PowerPoint Template
  *.pps	application/vnd.ms-powerpoint	MS PowerPoint Slideshow
  *.ppt	application/vnd.ms-powerpoint	MS PowerPoint Presentation
  *.rtf	application/rtf, text/rtf	Rich Text Format
  *.svf	image/vnd.svf	Simple Vector Format
  *.tif	image/tiff	Tagged Image Format File
  *.tiff	image/tiff	Tagged Image Format File
  *.txt	text/plain	Plain Text
  *.wdb	application/vnd.ms-works	MS Works Database
  *.wps	application/vnd.ms-works	Works Text Document
  *.xhtml	application/xhtml+xml	Extensible HyperText Markup Language
  *.xlc	application/vnd.ms-excel	MS Excel Chart
  *.xlm	application/vnd.ms-excel	MS Excel Macro
  *.xls	application/vnd.ms-excel	MS Excel Spreadsheet
  *.xlt	application/vnd.ms-excel	MS Excel Template
  *.xlw	application/vnd.ms-excel	MS Excel Workspace
  *.xml	text/xml, application/xml	Extensible Markup Language
  *.zip	aplication/zip	Compressed Archive

转载于:https://my.oschina.net/u/3697586/blog/1543644