学习内容:学习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是传输来的有道翻译API
CloseableHttpResponse 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 {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String q = request.getParameter("q");
//url编码格式中不允许出现空格,需要把空格替换为20%
q = q.replace(" ","%20");
//传到客户端的是xml文档,所以格式类型为text/xml
response.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);
});
});
});