AJAX与JSON数据交互处理

目录

1.使用bootstrap的话先导入JS文件

2.jQuery AJAX API

 2.1 代码如下：

 2.1.1代码如下：

 

3.fastjson （JSON序列化和反序化的框架）

3.1对象转换 --->将Student对象转换为JSON对象

4.Web2.0的特点：

5.为什么使用AJAX

6.传统Web与AJAX的差异

 7.AJAX工作流程

 8.XMLHttpRequest

 9.GET和POST请求的区别：

 10.使用JQuery实现Ajax

 11.ajax（）简介

 12认识JSON

---

前言：好好学习

---

 1.使用bootstrap的话先导入JS文件

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

    <script type="text/javascript">

2.jQuery AJAX API

2.1 代码如下：

---

 2.1.1代码如下：

 <script type="text/javascript">
        $(function() {
                $.ajax({
                    type: "get",
                    url: "RegController?username=" + $("#username").val(),
                    success: function(data){
                        $("#loading").remove() ;
                        //$("#msg").html(msg);
                        alert(data.msg) ;
                    },
                    beforeSend: function() {
                        $("body").append($("<img>").attr({"src":"image/loading.gif","id":"loading"})) ;
                    }
                });
                $.get("AllProductController",function(s){
                    $(s).each(function(index,d){
                        // alert(d.filename)
                        $("#pid4").attr("src","/"+d.fileName);

                        $("#pid5").html(d.name) ;
                        $("#pid6").html(d.price) ;
                        $("#pid7").html(d.description) ;
                        var clone = $("#pid3").clone();
                        $("#pid1").append(clone)

                    }) ;
                }) ;

        }) ;
    </script>

3.fastjson （JSON序列化和反序化的框架）

1. fastjson是阿里巴巴的开源JSON序列化与反序列化对象框架。

2. public static String toJSONString ( Object object )

3. 该方法是将一个对象转换为JSON数据格式。

---

3.1对象转换 --->将Student对象转换为JSON对象

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

---

---

4.Web2.0的特点：

• 用户贡献的内容
• 内容聚合RSS
• 更丰富有的“用户体验”
• 所有的操作是在不刷新窗口的情况下完成的
• 自动补全
• 每个小窗口可以关闭、最小化和进行个性化设置

5.为什么使用AJAX

1. 无刷新：不刷新整个页面，只刷新局部
2. 无刷新的好处

• 只更新部分页面，有效利用贷款
• 提供连续的用户体验
• 提供类似C/S就交互效果，操作更方便

6.传统Web与AJAX的差异

•  AJAX：异步刷新技术
• AJAX的组成：

 7.AJAX工作流程

 8.XMLHttpRequest

• 整个AJAX技术的核心
• 提供异步发生请求的能力
• 常用的方法

•  事件  onreadystantechange ：指定回调函数
• 常用属性：

1. readyState :XMLHttpRequest的状态信息

2.state:HTTP的状态码

 3.---------

---

 9.GET和POST请求的区别：

 10.使用JQuery实现Ajax

 11.ajax（）简介

 12认识JSON