学习内容：学习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 {
        CloseableHttpClient httpclient = HttpClients.createDefault();
        HttpGet httpGet = new HttpGet(url);//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);
        });
    });
});