[JavaScript知识库]7.3 AJAX

AJAX

HTML + AJAX 可以替换JSP
大概就是前后端分离了

ajax特点

1、与服务器进行数据交换：通过AJAX可以给服务器发送请求，服务器将数据直接响应回给浏览器。
2、异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。

ajax的代码的某些意义上是死的，后续有插件会方便更多
在HTML页面中

<script>

    //1. 给用户名输入框绑定 失去焦点事件
    document.getElementById("username").onblur = function () {
        //2. 发送ajax请求
        // 获取用户名的值
        var username = this.value;

        //2.1. 创建核心对象
        var xhttp;
        if (window.XMLHttpRequest) {
            xhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //2.2. 发送请求
        xhttp.open("GET", "http://localhost:80/selectNameMatching?username="+username);
        xhttp.send();

        //2.3. 获取响应
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                //alert(this.responseText);
                //判断
                if(this.responseText == "true"){
                    //用户名存在，显示提示信息
                    document.getElementById("username_err").style.display = '';
                }else {
                    //用户名不存在 ，清楚提示信息
                    document.getElementById("username_err").style.display = 'none';
                }
            }
        };

    }




</script>

主要三步
1、创建对象

    xhttp = new XMLHttpRequest(); } else {
    // code for IE6, IE5
    xhttp = new ActiveXObject("Microsoft.XMLHTTP"); } ```

2、获取请求

```bash //建立连接 xhttp.open("GET",
"http://localhost:8080/ajax-demo/ajaxServlet"); //发送请求 xhttp.send();

3、获取响应

    if (this.readyState == 4 && this.status == 200) {
        // 通过 this.responseText 可以获取到服务端响应的数据
        alert(this.responseText);
    } }; ```

Axios 对原生的AJAX进行封装，简化书写

官网 ：https://www.axios-http.cn

在HTML里

 <script src="js/axios-0.18.0.js"></script>

axios({
    method:"get",
    url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan" }).then(function (resp){
    alert(resp.data); })

axios({
    method:"post",
    url:"http://localhost:8080/ajax-demo/axiosServlet",
    data:"username=zhangsan"
}).then(function (resp) {
    alert(resp.data);
})

axios.get("http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan").then(function (resp) {
    alert(resp.data);
});

axios.post("http://localhost:8080/ajax-demo/axiosServlet","username=zhangsan").then(function (resp) {
    alert(resp.data);
})

axios() 是用来发送异步请求的，小括号中使用 js 对象传递请求相关的参数：

• method 属性：用来设置请求方式的。取值为 get 或者 post。
• url 属性：用来书写请求的资源路径。如果是 get 请求，需要将请求参数拼接到路径的后面，格式为： url?参数名=参数值&参数名2=参数值2。
• data 属性：作为请求体被发送的数据。也就是说如果是 post 请求的话，数据需要作为 data 属性的值。

JSON

格式

{    "name":"zhangsan",   
	 "age":23,   
 	 "city":"北京"}

var jsonStr = '{"name":"zhangsan","age":23,"addr":["北京","上海","西安"]}'

json字符串和对象的转换

<script>
    //1. 定义JSON字符串
    var jsonStr = '{"name":"zhangsan","age":23,"addr":["北京","上海","西安"]}'
    alert(jsonStr);

    //2. 将 JSON 字符串转为 JS 对象
    let jsObject = JSON.parse(jsonStr);
    alert(jsObject)
    alert(jsObject.name)
    //3. 将 JS 对象转换为 JSON 字符串
    let jsonStr2 = JSON.stringify(jsObject);
    alert(jsonStr2)
</script>

• js 提供的 JSON 对象我们只需要了解一下即可。因为 axios 会自动对 js 对象和 JSON 串进行想换转换。
• 发送异步请求时，如果请求参数是 JSON 格式，那请求方式必须是 POST。因为 JSON 串需要放在请求体中。

Fastjson

<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.62</version>
</dependency>

JAVA对象转json
String jsonStr = JSON.toJSONString(obj);

JSON字符串转Java对象 User user = JSON.parseObject(jsonStr, User.class);

查询所有 数据转成json送

@WebServlet("/selectAllServlet")
public class SelectAllServlet extends HttpServlet {
    private BrandService brandService = new BrandService();

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1. 调用Service查询
        List<Brand> brands = brandService.selectAll();

        //2. 将集合转换为JSON数据   序列化
        String jsonString = JSON.toJSONString(brands);

        //3. 响应数据  application/json   text/json
        response.setContentType("text/json;charset=utf-8");
        response.getWriter().write(jsonString);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

添加 json数据转java对象 存

@WebServlet("/addServlet")
public class AddServlet extends HttpServlet {

    private BrandService brandService = new BrandService();

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

        //1. 接收数据,request.getParameter 不能接收json的数据
       /* String brandName = request.getParameter("brandName");
        System.out.println(brandName);*/

        // 获取请求体数据
        BufferedReader br = request.getReader();
        String params = br.readLine();
        // 将JSON字符串转为Java对象
        Brand brand = JSON.parseObject(params, Brand.class);
        //2. 调用service 添加
        brandService.add(brand);
        //3. 响应成功标识
        response.getWriter().write("success");
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}