jsonp和XMLHttpRequest用法异同，jsp+js+servlet+mysql

最新推荐文章于 2024-03-13 17:28:28 发布
最新推荐文章于 2024-03-13 17:28:28 发布
阅读量705 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36936155/article/details/70037540
版权

XMLHttpRequest版：

index.html:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>  
<%  
    String path = request.getContextPath();  
    String basePath = request.getScheme() + "://"  
            + request.getServerName() + ":" + request.getServerPort()  
            + path + "/";  
%>  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
<head>  
<base href="<%=basePath%>">  
  
<title>My JSP 'index.jsp' starting page</title>  
<meta http-equiv="pragma" content="no-cache">  
<meta http-equiv="cache-control" content="no-cache">  
<meta http-equiv="expires" content="0">  
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
<meta http-equiv="description" content="This is my page">  
<!-- 
    <link rel="stylesheet" type="text/css" href="styles.css"> 
    -->  
</head>  
  
<body>  
    <input type="button" οnclick="validate()" value="请求并解析JSON">  
    <div id="div"></div>  
    <table border="1" style="width:300px;height:200px;" id="table">  
        <tr id="tr" border="1">  
            <td>1</td>  
            <td>1</td>  
            <td>1</td>  
        </tr>  
  
        <tr border="1">  
            <td>1</td>  
            <td>1</td>  
            <td>1</td>  
        </tr>  
    </table>  
    <script type="text/javascript">  
    
     function validate(){  
     var div=document.getElementById("div");  
     var xmlhttp;  
     var table=document.getElementById('table');  
  
        if (window.XMLHttpRequest) {  
            xmlhttp = new XMLHttpRequest();  
        } else {  
            xmlhttp = new ActiveObject("Microsoft.XMLHTTP");  
        }  
        xmlhttp.onreadystatechange = function() {  
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {  
                var x = xmlhttp.responseText  
                div.innerHTML = x;  
                var sd = eval("(" + x + ")");  
  
                var arr = new Array();  
                var i = 0;  
                for ( var a in sd.person) {//获取有几个person  
                    var count = 0;//计算person属性值的个数  
                    i++;  
                    for ( var item in sd.person[a]) {  
                        count++;  
                        var p = sd.person[a][item];//得到属性值的内容  
                        table.rows[i - 1].cells[count - 1].innerHTML = p;//把内容填向table表格  
                    }  
                }  
            }  
        }  
        var url = "json";  
        xmlhttp.open("POST", url, false);  
        xmlhttp.send();  
  
    }  
</script>  
</body>  
</body>  
</html>
servlet: 

 public void doPost(HttpServletRequest request, HttpServletResponse response)  
            throws ServletException, IOException {  
          
        response.setContentType("text/xml;character=utf-8");  
        response.setHeader("Cache-Control", "no-cache");  
        try {  
            //创建Person对象，保存数据，如果有数据库的话，此处数据应该为从数据库中取出  
            
            classManager cl = new classManager();
            List<classes> list = new ArrayList<classes>();
            try {  
                //创建JsonArray对象，JSONArray则是[]包裹起来的一个数组(Array)，此处调用方法将对象集合装入  
                JSONArray json = JSONArray.fromObject(list);  
                //JSONObject是一个{}包裹起来的一个对象(Object)，此处希望以对象为单位进行操作，所以创建JSONObject对象  
                JSONObject jb = new JSONObject();  
                //将jsonArray对象装入  
                jb.put("person", json);  
                //输出Json数据，它就是一种特殊格式的字符串  
                response.getWriter().write(jb.toString());  
                  
                /*此处可以用另一种方式将数据装入Json,同样可以,只是前台接受的是JSONArray对象，是[]包裹起来的一个数组(Array) 
                 *JSONArray jsonArray = new JSONArray(); 
                 *JSONObject jb = new JSONObject(); 
                 *jb.put("person", json); 
                 *jsonArray.add(jb); 
                 *response.getWriter().write(jsonArray.toString()); 
                 */  
                  
            } catch (IOException e) {  
                e.printStackTrace();  
            }  
        } catch (Exception e) {  
            e.printStackTrace();  
        }  
    }


jsonp版本：

index.jsp



<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>  
<%  
    String path = request.getContextPath();  
    String basePath = request.getScheme() + "://"  
            + request.getServerName() + ":" + request.getServerPort()  
            + path + "/";  
%>  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
<head>  
<base href="<%=basePath%>">  
  
<title>My JSP 'index.jsp' starting page</title>  
<meta http-equiv="pragma" content="no-cache">  
<meta http-equiv="cache-control" content="no-cache">  
<meta http-equiv="expires" content="0">  
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
<meta http-equiv="description" content="This is my page">  
<!-- 
    <link rel="stylesheet" type="text/css" href="styles.css"> 
    -->  
</head>  
  
<body>    
    <div id="div"></div>  
    <table border="1" style="width:300px;height:200px;" id="table">  
        <tr id="tr" border="1">  
            <td>1</td>  
            <td>1</td>  
            <td>1</td>
            <td>1</td>  
        </tr>  
  
        <tr border="1">  
            <td>1</td>  
            <td>1</td>  
            <td>1</td> 
            <td>1</td> 
        </tr>  
    </table>  
    <script type="text/javascript">  
    console.log("aaaaa");
     function validate(sa){  
     console.log("aa");
     var div=document.getElementById("div");  
  
     var table=document.getElementById("table");  
  				
                div.innerHTML = sa; 
                var i = 0;  
                for ( var a in sa.person) {//获取有几个person  
                    var count = 0;//计算person属性值的个数  
                    i++;  
                    for ( var item in sa.person[a]) {  
                        count++;  
                        var p = sa.person[a][item];//得到属性值的内容  
                        table.rows[i - 1].cells[count - 1].innerHTML = p;//把内容填向table表格  
                    }  
                }  
    }  
</script>  
<script  src="json?callback=validate"></script>  
</body>  
</html>


servlet: 

 public void doPost(HttpServletRequest request, HttpServletResponse response)  
            throws ServletException, IOException {  
          
        response.setContentType("text/json;character=utf-8");   
        try {  
            //创建Person对象，保存数据，如果有数据库的话，此处数据应该为从数据库中取出  
           classManager cl = new classManager();
           List<classes> list = new ArrayList<classes>();
           String callback = request.getParameter("callback"); 
           cl.showClass(list);
            try {
                //创建JsonArray对象，JSONArray则是[]包裹起来的一个数组(Array)，此处调用方法将对象集合装入  
                JSONArray json = JSONArray.fromObject(list);  
                //JSONObject是一个{}包裹起来的一个对象(Object)，此处希望以对象为单位进行操作，所以创建JSONObject对象  
                JSONObject jb = new JSONObject();  
                //将jsonArray对象装入  
                jb.put("person", json);  
                //输出Json数据，它就是一种特殊格式的字符串  
                response.getWriter().write(callback+"("+jb.toString()+")");  
                  
                /*此处可以用另一种方式将数据装入Json,同样可以,只是前台接受的是JSONArray对象，是[]包裹起来的一个数组(Array) 
                 *JSONArray jsonArray = new JSONArray(); 
                 *JSONObject jb = new JSONObject(); 
                 *jb.put("person", json); 
                 *jsonArray.add(jb); 
                 *response.getWriter().write(jsonArray.toString()); 
                 */  
                  
            } catch (IOException e) {  
                e.printStackTrace();  
            }  
        } catch (Exception e) {  
            e.printStackTrace();  
        }  
    }
XML版本

json版本




可以看出new XMLHttpRequest().responseText返回的是一串特殊的字符串，需要调用eval将其封装为json对象，然后对对象数组进行操作

而jsonp返回的是一个object对象，个人认为这里是json上传为object对象，然后对对象数组进行操作

博主刚入门，见识不深，如有指教，欢迎补充。

萧凝云
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端面试题--XMLHTTPRequest和JSONP的应用场景，以及其分别如何检测请求错误的
Y_secret的博客
07-07 1220
XMLHttpRequest用于浏览器端与服务器端异步请求数据从面实现对页面的无刷新修改，支持GET/POST请求，一般用于非跨域的场景。如果需要使用XMLHttpRequest跨域请求数据，需要通过CORS头支持。 JSONP用于跨域请求数据的场景，只支持GET请求。 XMLHttpRequest异常判断一般通过该对象的readystate和http状态码status来判断，JSONP的异常判断一般是onerror事件和超时timer来判断。 （答案源自牛客网面试试题） XMLHttpRequest.
XMLHttpRequest VS. JSONP
Benson的专栏
02-27 3383
当我们利用XMLHttpRequest对象从本地服务器获取数据时是可以的。     假设我们使用的数据格式为JSON(JavaScript Object Notation)，并且我们在本地服务器上部署了一个样本数据data.json: { "completed_in":0.044, "max_id":306750251744784385, "max_id_str":"3067502517447
记一次失误，jsonp不属于XmlHttpRequest协议
qq_37162688的博客
05-24 1240
今天在react开发中使用了jsonp请求高的天气，然后在开发者工具的XHR中怎么也找不到请求，后来才发现jsonp请求不属于XmlHttpRequest协议，所以network的XHR中不会显示。 JSONP只能实现GET请求，由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源。如果要进行跨域请求， 我们可以通过使用html的script标记来进行跨域请...
jQuery使用JSONP时的错误处理
weixin_30258027的博客
12-02 226
概述 什么是域，简单来说就是协议+域名或地址+端口，3者只要有任何一个不同就表示不在同一个域。跨域，就是在一个域中访问另一个域的数据。 如果只是加载另一个域的内容，而不需要访问其中的数据的话，跨域是很简单的，比如使用iframe。但如果需要从另一个域加载并使用这些数据的话，就会比较麻烦。为了安全性，浏览器对这种情况有着严格的限制，需要在客户端和服务端同时做一些设置才能实现跨域请求。 JSONP...
深入剖析jsonp跨域原理
weixin_33962923的博客
12-17 333
在项目中遇到一个jsonp跨域的问题，于是仔细的研究了一番jsonp跨域的原理。搞明白了一些以前不是很懂的地方，比如： 1）jsonp跨域只能是get请求，而不能是post请求； 2）jsonp跨域的原理到底是什么； 3）除了jsonp跨域之外还有那些方法绕过“同源策略”，实现跨域访问； 4）jsonp和ajax，或者说jsonp和XMLHttpRequest是什么关系； 等等。 1....
jsp+mysql小型酒吧在线管理系统.zip
05-10
小型酒吧在线管理系统MinibarCMS是使用Java MVC模式 + Mysql数据库开发的一个简单的文章管理系统，代码简单，数据库也非常mini，特别适合初学者研究与学习！ V2版本中对前端进行了重构，一个全新的平面化设计的前端...
asp.net+jquery Jsonp使用方法
01-20
服务器端 代码如下: string callback = Request[“callback”];... 客户端 这里使用JQ，有下面两种调用方法： 1、使用getJson 代码如下: var url = “xxx.aspx?p1=1&p2=2&callback=?”; jQuery.getJS
JS跨域交互(jQuery+php)之jsonp使用心得
11-22
在实际应用中，JSONP经常与jQuery库结合使用，jQuery提供了`getScript`和`getJSON`方法，方便地实现了JSONP请求。`getScript`直接加载并执行远程JavaScript，而`getJSON`则期望返回JSON数据并将其解析为JavaScript...
java+js交互Demo
05-03
Java和JavaScript交互是一种常见的技术实践，特别是在开发单页应用程序（SPA）或富互联网应用程序时。这两种语言虽然在用途上有所不同，但通过特定的技术手段可以实现跨域通信，从而协同工作。下面将详细介绍Java和...
XMLHttpRequest and jsp servlet
Sun's Blog
12-25 1148
关于javascript 与 JSP 或 Servlet 交互一般我都是用XMLHttpRequest 异步调用所需要出结果的页面,由该页面返回结果,再显示在需要展现的当前页面.Example:1.XMLHttpRequest 请求 result.jsp 页面(result.jsp页面生成我们需要的动态结果).2.用XMLHttpRequest的responseXML或respon
深入讲解xhr（XMLHttpRequest）/jsonp请求之abort
10-19
主要给大家深入的介绍了关于xhr（XMLHttpRequest）/jsonp请求之abort的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
mysql xmlhttp_AJAX XML
weixin_28733933的博客
02-05 53
AJAX XMLHttpRequestXMLHttpRequest 对象使 AJAX 成为可能。XMLHttpRequestXMLHttpRequest 对象是 AJAX 的关键。该对象在 Internet Explorer 5.5 与 2000 年 7 月发布之后就已经可用了，但是在 2005 人们开始讨论 AJAX 和 Web 2.0 之前，这个对象并没有得到充分的认识。创建 XMLHttpR...
jsonp在jsp中的使用
weixin_30797199的博客
06-11 547
本地程序代码　　 1 <div id="jsonpData"></div> 2 <script type="text/javascript"> 3 var callbackFunction = function(result){ 4 var html='<ul>'; 5 for(var ...
JSONP ———— 跨域解决方案之一
nainaiqiuwencun的博客
10-01 636
前言：在实际的开发应用过程中，很有可能需要获取另外一个服务器上的资源，如果两个服务器的域名、端口、协议等不同，就存在跨域问题。   一、什么是跨域？ 简单的来讲就是浏览器不能执行其他网站的脚本，主要原因在于浏览器的同源策略。而同源策略又分成： 1.DOM同源策略 2.XMLHttpRequest同源策略 这里主要讲的是如何解决XMLHttpRequest同源策略。 比如有两个服务器，...
XMLHttpRequest 2级 &&进度事件&&JSONP
YogaLin_qwq的博客
07-25 344
XMLHttpRequest 2级 FormData ​ FormData 为序列化表单以及创建与表单格式相同的数据（用于通过 XHR传输）提供了便利 创建FormData对象 ​ 1.append()方法:接收两个参数 => 键和值，分别对应表单字段的名字和字段中包含的值。可以像如下所示这样添加任意多个键值对 var data = new FormData(); data.append("name", "Nicholas"); ​ 2.通过向 FormData 构造函数中传入表单元素 var
js【详解】ajax （含XMLHttpRequest、 同源策略、跨域、JSONP）
最新发布
朝阳39的博客
03-13 1196
借助 script 标签 向目标服务器加载到 jsonp.js 文件，执行 callback 函数，因本地已定义了 callback 函数，便会触发本地 js 代码的执行，获取到 jsonp.js 文件中的数据，从而实现了跨域。服务器设置 http header，即服务器端将指定网址设置为白名单，允许它以指定的方法进行跨域访问。JSONP 实现跨域的过程：借助 script 标签没有同源策略限制的特点，向跨域的目标服务器加载到需要的数据。所有的跨域，都必须经过 server 端允许和配合。
使用jsonp在html中加载jsp页面（适用于前后端分离项目的index.html入口页访问jsp加载相关资源）
Emily's Blog
06-04 536
如何在html中加载jsp页面背景业务场景解决方案 背景 在实际工作中，可能会见证公司技术栈的变迁，比如说：从写jsp到前后端分离。但在这个过渡的阶段中，可能会遇到非得在html页面中加载jsp页面的情况。下面来总结一下如何实现这种需求吧~ 业务场景 当前是一个前后端分离的项目，使用的是vue-cli脚手架，使用webpack进行打包，入口页为index.html。由于历史原因，需要用到一个公共组件 xxxComponent，由于该公共组件适用于大部分用jsp写的项目，因此提供的引入方式是<%=XXX
XMLHttpRequest的同域请求和跨域请求以及jsonp
热门推荐
ali1995的博客
12-14 2万+
XMLHttpRequest的同域请求和跨域请求以及jsonpXMLHttpRequest的同域请求和跨域请求以及jsonp 使用XMLHttpRequest xhr同域请求get post xhr跨域请求 jsonp使用XMLHttpRequest先创建一个xhr对象，下面代码是js高级程序设计里面给出的兼容性代码function createXHR() { if(typeof X
mysql xmlhttp_建立XMLHttpRequest对象
weixin_30974373的博客
02-27 59
utl.jsfunctioncreateXmlTree(node,indent){if(node==null)return"";varstr="";switch(node.nodeType){case1://Elementstr+="<"+node.nodeName+"";varattrs=node.attributes;for(var...
html+css+js 用jsonp调淘宝搜索接口
06-01
当用户输入关键词并点击搜索按钮时，JS代码会调用 `search` 函数，该函数会发送一个 JSONP 请求，获取搜索结果并将其显示在页面上。JSONP请求返回的结果会调用 `callbackFunction` 函数进行处理，该函数会将搜索结果...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值