学习内容：学习JavaWeb（Day44）

1、Ajax跨域操作
2、Ajax接收json数据
3、JQuery和Ajax
4、使用JavaScript模板简化操作

1、Ajax跨域操作

（1）Ajax不可以进行跨域请求

<body>
<input type="button" value="跳转百度" id="btn"/><script type="text/javascript">
var xmlHttp = null;
//构建AJAX引擎
function createXmlHttpRequest() {if (window.ActiveXObject) {xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");} else {xmlHttp = new XMLHttpRequest();}
}
createXmlHttpRequest();
/*document.querySelector("#btn").onclick = function () {//跨域请求 ： 1 请求协议不同 或 IP（域名）地址不同  或端口号不同 都会引起跨域请求xmlHttp.open("GET", "https://www.baidu.com:8080");xmlHttp.onreadystatechange = callback;xmlHttp.send();
}*///只能通过location对象进行跳转document.querySelector("#btn2").onclick = function () {window.location.href = "https://www.baidu.com";}
</script>
</body>

（2）使用代理模式进行跨域操作：通过在服务端进行跨域操作，将结果返回给Ajax，Ajax通过回调函数进行展示。
需要的包：
fluent-hc-4.5.13.jar
httpclient-4.5.13.jar
httpclient-cache-4.5.13.jar
httpclient-osgi-4.5.13.jar
httpclient-win-4.5.13.jar
httpcore-4.4.13.jar
httpmime-4.5.13.jar
jna-4.5.2.jar
jna-platform-4.5.2.jar

（3）使用有道翻译API实现跨域翻译
用Ajax发送翻译请求，并调用回调函数接收服务端传来的xml文档：

document.querySelector("#btn").onclick = function () {let value = document.querySelector("#cont").value;//value是要翻译的内容httpReq.open("GET", "/trans?q=" + value);httpReq.onreadystatechange = callback;httpReq.send();
}function callback(){if(httpReq.readyState == 4){if(httpReq.status == 200){let result = httpReq.responseXML;console.log(result.getElementsByTagName("paragraph")[0].childNodes[0].nodeValue);}}
}

注册申请有道翻译API后，使用http://hc.apache.org/中Apache HttpComponents项目HttpClient和HttpCore 模组提供的方法进行跨域操作。HttpClient相比传统JDK自带的URLConnection，增加了易用性和灵活性，它不仅使客户端发送Http请求变得容易，而且也方便开发人员测试接口（基于Http协议的），提高了开发的效率，也方便提高代码的健壮性。

创建工具类封装网络操作：

public class HttpReqUtil {public static String getReq(String url) throws IOException {//使用HttpClient发送get/post请求CloseableHttpClient httpclient = HttpClients.createDefault();HttpGet httpGet = new HttpGet(url);//发送get请求，url是传输来的有道翻译APICloseableHttpResponse response1 = httpclient.execute(httpGet);System.out.println(response1);try {HttpEntity entity1 = response1.getEntity();//getContent()方法获得entity1的内容并返回一个输入流，//IOUtils类属于commons.io.jar包，IOUtils的toString方法将输入流转化为字符串String result = IOUtils.toString(entity1.getContent(),"UTF-8");return result;} finally {response1.close();}}
}

创建Servlet：

@WebServlet("/trans")
public class TransServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String q = request.getParameter("q");//url编码格式中不允许出现空格，需要把空格替换为20%q = q.replace(" ","%20");//传到客户端的是xml文档，所以格式类型为text/xmlresponse.setContentType("text/xml;charset=utf-8");//将有道翻译API传入工具类，该API获取的是一个xml文档String result = HttpReqUtil.getReq("https://fanyi.youdao.com/openapi.do?keyfrom=neverland&key=969918857&type=data&doctype=xml&version=1.1&q=" + q);PrintWriter out = response.getWriter();out.print(result);out.close();}
}

2、Ajax接收json数据

（1）JSON的全称是JavaScript Object Notation（即JavaScript对象标识），实际上是通过组合使用 JavaScript中的数组与键值对（hash）对象来描述数据的结构。
JSON中两种结构： 1. 数组用来表示有序结构 2. 键值对用来表示对应关系。

var json = { ‘name’ : ‘西安’ , ‘people’ : ‘387万’ , ‘area’ : ‘9871’ , ‘places’ : [ ‘兵马俑’ , ‘华清池’ , ‘骊山’ , ‘钟楼’ ] }

（2）JSON类库
• Json-lib • Gson • FastJson • Jackson

（3）使用Jackson需要的jar包
jackson-annotations-2.12.3.jar
jackson-core-2.12.3.jar
jackson-databind-2.12.4.jar

（4）对象转为json

BookDao bookDao = new BookDao();
Book book = bookDao.findById(88);//Book对象Map<String,Object> map = new HashMap<>();//map集合
map.put("name","Jerry");
map.put("code","100");
map.put("msg","删除成功！");List<Book> bookList = bookDao.findAll();//list集合ObjectMapper mapper = new ObjectMapper();
String jsonBook = mapper.writeValueAsString(bookList);//都可以转为json格式
System.out.println(jsonBook);

对象转为json时可以在实体类中增加注解，可以加在定义属性上或get方法上。

public class Book {//给转化的json的键起一个别名@JsonProperty(value = "bookId")private int id;//更改转化为json后的日期格式@JsonFormat(pattern="yyyy-MM-dd HH:mm:ss")private Date datetime;

（5）json转为对象

String jsonString="[{\"id\":1,\"bookname\":\"java编程\",\"author\":\"James-Gosling\",\"publisher\":\"人民邮政出版社\"}]";
Book book1 = mapper.readValue(jsonString,Book.class);//json转为Book对象
Map map1 = mapper.readValue(jsonString,Map.class);//json转为Map集合
//json转为List集合
List<Book> listll = mapper.readValue(jsonString, new TypeReference<List<Book>>(){});
System.out.println(listll);

3、JQuery和Ajax

（1）使用Jquery发送Ajax请求

第一种：

$("#btn").click(function (){$.ajax({type: "POST",//请求类型url: "/json",//发送地址data: "name=John&location=Boston",//要传输的数据success: function(msg) { //4 & 200 成功后接收服务端传来的值alert("Data Saved: " + msg);},error:function(){//接收失败alert("服务器升级中！");},complete:function (){//成功或失败都会执行alert("ajax 请求完成");$("#loader").hide();},beforeSend:function (){//发送请求之前$("#loader").show();}});
});

第二种：这种方法需要指定type类型才能接收json数据类型

$("#btn").click(function (){$.get("/json",{name:"Jack"},function (data){//（地址，传递参数，回调函数）alert(data);});
});

第三种：

$("#btn").click(function (){$.getJSON("/json",{name:"Rose",age:12},function (data){$("#tab").html("");//再次点击清空$(data).each(function (){let tr = "<tr><td>"+this.id+"</td><td>"+this.bookname+"</td></tr>";$("#tab").append(tr);});});
});

4、使用JavaScript模板简化操作

（1）创建一个模板

<script type="text/template" id = "temp"><tr><td>{{id}}</td><td>{{bookname}}</td><td>{{author}}</td><td>{{publisher}}</td></tr>
</script>

（2）使用模板将数据添加到jsp页面

$("#btn").click(function (){$.getJSON("/json",{name:"Rose",age:12},function (data){$("#tab").html("");//再次点击清空var template = Handlebars.compile($("#temp").text());//编译模板$(data).each(function (){let tr = template(this);$("#tab").append(tr);});});
});

学习日志day44（2021-09-08）（1、Ajax跨域操作 2、Ajax接收json数据 3、JQuery和Ajax 4、使用JavaScript模板简化操作）相关推荐

Ajax跨域请求,无法传递及接收cookie信息解决方案
Ajax跨域请求,无法传递及接收cookie信息解决方案参考文章: (1)Ajax跨域请求,无法传递及接收cookie信息解决方案 (2)https://www.cnblogs.com/yalong ...
ajax轮播图控件,基于json数据的jquery卡片轮播图插件
这是一款基于json数据的jquery卡片轮播图插件.该插件通过ajax来获取卡片的信息,动态显示卡片.它还提供不使用ajax的方式来获取数据,和其它一些api接口. 使用方法在页面中引入jquer ...
vue接收json数据_Vue之使用ajax获取json数据，并用v-for循环显示在表格中
运行的时候,出现了php跨域问题,解决办法是在php的头文件中添加了如下代码: header('Content-Type: application/json'); header('Content-Ty ...
使用jq实现ajax传递json数据,使用jQuery的$ .ajax（）将多个Json对象作为数据传递
我正在将数据发布到MVC控制器,并且试图维护状态以及乐观并发性.我目前正在回发JSON请求,但可以接受其他可行的选择吗? 我已经使用以下命令发布了名称/值集合: $.ajax({ url: g_app ...
cesium 3dtiles 加载本地数据_深入echarts学习：加载跨域、异步、本地json数据的防坑录
1 说明: ===== 1.1 推荐指数:★★★★ 1.2 网上这方面说明,大多模棱两可,坑很多,讲透彻的不多,故本人做一个小结. 1.3 我曾介绍echarts的简单基本用法: <Echart ...
ajax跨域请求时会出现什么问题,在用AJAX跨域请求时遇到的问题
刚刚接触ajax就遇到一个词--跨域. 在我百度了各种资料以后总结了一句话:"只要不是在一个协议.域.名端口下,都属于跨域(127.0.0.1本地也属于跨域)". 在做ajax请求 ...
ajax跨域原理以及解决方案
ajax跨域原理以及解决方案参考文章: (1)ajax跨域原理以及解决方案 (2)https://www.cnblogs.com/bojuetech/p/5895767.html (3)https: ...
ajax跨域，这应该是最全的解决方案了
前言从刚接触前端开发起,跨域这个词就一直以很高的频率在身边重复出现,一直到现在,已经调试过N个跨域相关的问题了,16年时也整理过一篇相关文章,但是感觉还是差了点什么,于是现在重新梳理了一下. 个人见 ...
JQuery实现ajax跨域
AJAX 的出现使得网页可以通过在后台与服务器进行少量数据交换,实现网页的局部刷新.但是出于安全的考虑,ajax不允许跨域通信.如果尝试从不同的域请求数据,就会出现错误.如果能控制数据驻留的远程服务器 ...
ajax跨域，这应该是最全的解决方案了 1
前言从刚接触前端开发起,跨域这个词就一直以很高的频率在身边重复出现,一直到现在,已经调试过N个跨域相关的问题了,16年时也整理过一篇相关文章,但是感觉还是差了点什么,于是现在重新梳理了一下. 个人见 ...

学习日志day44（2021-09-08）（1、Ajax跨域操作 2、Ajax接收json数据 3、JQuery和Ajax 4、使用JavaScript模板简化操作）