Ajax与JSON

（一）AJAX:是异步的JavaScript和XML

异步说明：我可以同时干很多事情；JavaScript是前端的语言；XML是指以此进行数据交换

Ajax：可以通过局部刷新页面，将信息传递到后端进行操作，方便快捷，十分人性化

例如：

 

（二）Ajax介绍和运用：

最早->Servlet返回页面
直接返回JSP
Servlet(查询数据) + jsp(返回和响应) 单体项目-->后端
html+ajax：前后端分离项目

之前做的项目

使用Ajax是前后端能够使前后端分成两个部分，只需要进行前后端的数据交互就可以，避免粘连，方便操作。

 学习之后：

 先写前端的ajax代码：(可以导入axios包简便书写)

//1. 创建核心对象

var xhttp;

if (window.XMLHttpRequest) {

xhttp = new XMLHttpRequest();

} else {

// code for IE6, IE5

xhttp = new ActiveXObject("Microsoft.XMLHTTP");

}

//2. 发送请求

xhttp.open("GET", "http://localhost:8080/ajax-demo/ajaxServlet");

xhttp.send();

//3. 获取响应

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

alert(this.responseText);

}

};

导入包后：

axios({
    method:"get",
    url:"http://localhost:8080/Ajax/SelAllServlet",
}).then(function (resp){
    _this.brands=resp.data
})

后端：

@WebServlet("/selectUserServlet")

public class SelectUserServlet extends HttpServlet {

@Override

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

//1. 接收用户名

String username = request.getParameter("username");

//2. 调用service查询User对象，此处不进行业务逻辑处理，直接给 flag 赋值为 true，表明用户名占用

boolean flag = true;

//3. 响应标记

response.getWriter().write("" + flag);

}

@Override

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

this.doGet(request, response);

}

}

（三）JSON

前后端规定的一种传输数据的格式----本质是字符串

JSON 串的键要求必须使用双引号括起来，而值根据要表示的类型确定。value 的数据类型分为如下

• 数字（整数或浮点数）

• 字符串（使用双引号括起来）

• 逻辑值（true或者false）

• 数组（在方括号中）

• 对象（在花括号中）

• null

那么如何获取：

 如何输出：

如果传出的数据不是字符串类型要调用方法

 ===============知识回顾======

（1）

throw：一般写在catch中，自定义的异常（一般不用自定义的异常）

throws:写在方法后，官方的异常

（2）

get ：请求行中，速度快，有3KB的大小限制，在地址栏中以键值对的形式显示，不安全

post：请求体中，速度慢，无大小限制，不在地址栏中显示信息，较安全