AJAX和JSON

作者: 北冥有鱼_很好吃 | 来源:发表于2018-07-15 20:06 被阅读0次

第一章Ajax

1.1 Ajax 概念

"Asynchronous Javascript And XML"（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

1.2 AJAX原理分析

AJAX引擎会在不刷新浏览器地址栏的情况下，发送异步请求

1.1 使用JavaScript获得浏览器内置的AJAX引擎（XMLHttpRequest对象）

1.2 使用js确定请求路径和请求参数

1.3  AJAX引擎对象根据请求路径和请求参数进行发送请求

服务器接收到ajax引擎的请求进行处理

2.1     服务器获得请求参数数据

2.2     服务器处理请求业务（调用业务层代码）

2.3     服务器响应数据给ajax引擎

AJAX引擎获得服务器响应的数据，通过执行JavaScript的回调函数将数据更新到浏览器页面具体位置。

3.1     通过设置给AJAX引擎的回调函数获得服务器响应的数据

3.2     使用JavaScript在指定的位置，显示响应数据，从而局部修改页面的数据，达到局部刷新目的。

1.3 js原生的ajax开发

1.3.1. js原生的ajax的开发步骤
1）创建Ajax引擎对象（浏览器创建）
2）为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）
3）绑定提交地址
4）发送请求
5）监听里面处理响应数据

开发参照w3cschool文档
XMLHttpRequest 是 AJAX 的基础
准备资源：编写外部js （在html中导入依赖！！）

1531470878996.png

内容：

// 获取ajax开发核心对象
function getXhr() {
    var xmlhttp;
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    return xmlhttp;
}
//  通过id 获取dom对象 自定一个方法 这里以 $(id) 为例 ，也可以 _(id) 等
function  $(id) {
    return document.getElementById(id);
}

准备资源页面 ajax_get.html

<body>
<input type="button" value="ajax_get请求" onclick="sendGet();"><br>
<input type="button" value="ajax_Post请求" onclick="sendPost();"><hr>
<div id="mydiv"></div>
</body>

get请求

 //  ajax开发 发送get请求  更新 div标签 内容来自服务器servlet响应数据

        function sendGet() {
            // 1.  创建XMLHttpRequest
            var xhr = getXhr();
            // 2. 点击按钮 发送异步请求  后台servlet发送请求  获取response数据更新 div
            //  建立请求参数  参数1  请求方式  get/post   参数2 请求服务器地址   参数3  true 异步 默认 true
            xhr.open("get", "ajaxGetServlet?id=10101&name=lisi", true);

            // 4 服务器响应 接受服务器response回送数据  函数 一开始不执行的！  回调函数注册
            xhr.onreadystatechange = function ()
                //  事件 绑定函数  当服务器响应时，该事件触发了函数执行  dom更新
            {   
               //当服务器相应码为200且xhr的readyState参数为4的时候，执行dom更新
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var data = xhr.responseText;//  服务器回送数据字符
                   $("mydiv").innerHTML = data;//调用自定义函数
                }
            }

            //3 发送请求
            xhr.send(null);//  get 请求  send null

        }

post请求

//  ajax开发 发送get请求  更新 div标签 内容来自服务器servlet响应数据

        function sendPost() {
            // 1.  创建XMLHttpRequest
            var xhr = getXhr();
            // 2. 点击按钮 发送异步请求  后台servlet发送请求  获取response数据更新 div
            //  建立请求参数  参数1  请求方式  get/post   参数2 请求服务器地址   参数3  true 异步 默认 true
            xhr.open("post", "ajaxGetServlet", true);

            // 4 服务器响应 接受服务器response回送数据  函数 一开始不执行的！  回调函数注册
            xhr.onreadystatechange = function ()
                //  事件 绑定函数  当服务器响应时，该事件触发了函数执行  dom更新
            {
               //  alert("1");
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var data = xhr.responseText;//  服务器回送数据字符
                    $("mydiv").innerHTML = data;
                }
            }

            //3 post发送请求
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xhr.send("id=9999");//  post 请求
        }

编写服务器servlet接受ajax请求

package cn.itheima.ajax.get;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/ajaxGetServlet")
public class AjaxGetServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
       String id = request.getParameter("id");
        System.out.println("客户端提交id = "+id);
       response.setContentType("text/html;charset=utf-8");
       response.getWriter().print("<font color='red'>你好A贾克斯</font>");
    }
}

1.4 get/post小结：

相同点：

1. 开发的四步骤结构代码是一样： 
2. 获取XMLHttpRequest代码相同的
3. open("get/post","url",true);
4. xhr.onreadystatechange=function(){  //  dom更新。。。} 
5. 都是通过xhr.send()方法发送请求！

不同点:

1.xhr.open("get/post"); 
2.get请求 xhr.send(null)   
post请求需要添加固定头信息和send参数
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(key=value)

第5节 jQuery框架的ajax（***）

jquery是一个优秀的js框架，自然对js原生的ajax进行了封装，封装后的ajax的操作方法更简洁，功能更强大，与ajax操作相关的jquery方法有如下几种，但开发中经常使用的有三种：

请求方式	语法
GET请求	$.get(url, [data], [callback], [type])
POST请求	$.post(url, [data], [callback], [type])
AJAX请求	$.ajax([settings])
Load请求	$(element).load(url);

5.1 GET请求方式

语法：$.get(url, [data], [callback], [type])
url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。

示例1：
$("button").click(function(){
  $.get("demo_test.asp",function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

示例2：
$.get("test.cgi", { name: "John", time: "2pm" },
  function(data){
    alert("Data Loaded: " + data);
  });

5.2 POST请求方式

示例1：使用 ajax 请求发送表单数据：
$.post("test.php", $("#testform").serialize());

示例2：获得 test.php 页面返回的 json 格式的内容：：
$.post("test.php", { "func": "getNameAndTime" },
   function(data){
     alert(data.name); // John
     console.log(data.time); //  2pm
   }, "json");

5.3 AJAX请求方式

$.ajax({key:value,key:value})

属性名称	解释
url	请求的服务器端url地址
async	(默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false
data	发送到服务器的数据，可以是键值对形式，也可以是js对象形式
type	(默认: "GET") 请求方式 ("POST" 或 "GET")，默认为 "GET"
dataType	预期的返回数据的类型，取值可以是 xml, html, script, json, text, _defaul等
success	请求成功后的回调函数
error	请求失败时调用此函数

示例：
         $.ajax({
                        //type默认为get
                        type:"post",
                        url:"searchServlet",
                        data:{name:word},
                        dataType:"json",
                        success:function (result) {
                            //判断数据是否为空,result返回的是一个列表数据，就是js数组
                            if(result.length>0){
                                //result为json数组例如 [{id:1,name:aa,password:123},...]
                                //每一个用户名就是一个div
                                var html="";//用于拼接结果
                                for(var i=0;i<result.length;i++){
                                    var user = result[i];
                                    html+="<div>"+user.name+"</div>";
                                }
                                //将html更新到show里面并显示出来
                                $(".show").html(html).show();
                            }
                        },
                        error:function () {
                            alert("没有成功获取数据");
                        }
                     });

第六章. json数据格式

简介：JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

json对象有三种数据格式，分别如下：

类型	语法	解释
对象类型	{name:value,name:value...}	其中name是字符串类型，而value是任意类型
数组/集合类型	[value,value,value...]或[{},{}... ...]	其中value是任何类型（比如js对象，或数组）
混合类型	{name:[]... ...}	合理包裹嵌套对象类型和数组类型

 <script language="JavaScript">

    /**

     * 案例一 -json对象的定义和调用说明

     *  var person={key:value,key:value}

     *  

     * class Person{

     *    String firstname = "张";

     *    String lastname = "三丰";

     *    Integer age = 100;

     * }

     * 

     * Person p = new Person();

     * System.out.println(p.firstname);

     */

    

     //json的定义

     var person = {"firstname":"张","lastname":"三丰","age":100};

     

     //json解析

     alert(person.firstname);

     alert(person.lastname);

     alert(person.age);

    

  </script>



<script language="JavaScript">

    /**

     * 案例二 - json对象数组使用说明

     *  [{key:value,key:value},{key:value,key:value}]

     *  

     */

    var json = [

                    {"firstname":"张","lastname":"三丰","age":100},

                    {"firstname":"张","lastname":"翠山","age":58},

                    {"firstname":"张","lastname":"无忌","age":23}

                 ];

    

    for(var i=0;i<json.length;i++){

        alert(json[i].lastname);

    }

 

  </script>

<script language="JavaScript">

  /**

    * 案例三 -json对象数组嵌套

    * {

    *   "param1":[{key:value,key:value},{key:value,key:value}],

    *   "param2":[{key:value,key:value},{key:value,key:value}],

    *   "param3":[{key:value,key:value},{key:value,key:value}]

    * }

    *  

    *  

    */

    var json = {

               "baobao":[

                           {"name":"小双","age":18,"addr":"扬州"},

                           {"name":"建宁","age":18,"addr":"北京海淀"},

                           {"name":"龙儿","age":38,"addr":"岛国"},

                           {"name":"阿珂","age":17,"addr":"台湾"}

                         ],

               "haohao":[

                           {"name":"楠楠","age":23,"addr":"北京昌平修正"},

                           {"name":"倩倩","age":18,"addr":"上海"}

                         ]

        }

    

    

    //取倩倩

    alert(json.haohao[1].name);



 </script>

java对象需要转为json格式的字符串回调给浏览器。

常见的json转换工具

工具名称	介绍
Jsonlib	Java 类库，需要导入的jar包较多
Gson	google提供的一个简单的json转换工具
Fastjson	alibaba技术团队提供的一个高性能的json转换工具
Jackson	开源免费的json转换工具，springmvc转换默认使用jackson

fastjson依赖包：

fastjson依赖包

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        //模拟数据库
        ArrayList<User> users = new ArrayList<User>();
        users.add(new User(1,"lanzhiyi",26));
        users.add(new User(2,"Bill",56));
        users.add(new User(3,"Tang",36));
        users.add(new User(4,"周杰伦",36));
        //集合转换json数组字符串 这里依赖fast
        response.setContentType("text/json;charset=utf-8");
        //fastjson依赖包的方法：java->json
        String s = JSON.toJSONString(users);
        System.out.println("s = " + s);
        //s = [{"age":26,"id":1,"name":"lanzhiyi"},{"age":56,"id":2,"name":"Bill"},{"age":36,"id":3,"name":"Tang"},{"age":36,"id":4,"name":"周杰伦"}]
        response.getWriter().print(s);

    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.11.3.js" type="application/javascript"></script>
    <script>
        function jsonDemo() {
            $("#mytab").empty();
            var str = "";
            $.get("jsonServlet",function(data){
                $(data).each(function () {
                    str+="<tr><td>"+this.id+"</td><td>"+this.name+"</td><td>"+this.age+"</td></tr>"
                })
                $("#mytab").append("<tr>\n" +
                    "        <td> 编号</td>\n" +
                    "        <td> 姓名</td>\n" +
                    "        <td> 年龄</td>\n" +
                    "    </tr>").append(str)
            });
        }
    </script>
</head>
<body>
<input type="button" value="显示用户列表信息" onclick="jsonDemo();"><br>
<table id="mytab" border="1px " style=" border-color: darkgray" width="30%">

</table>
</body>

效果.PNG

AJAX和JSON

第一章Ajax

1.1 Ajax 概念

1.2 AJAX原理分析

1.3 js原生的ajax开发

1.4 get/post小结：

第5节 jQuery框架的ajax（***）

5.1 GET请求方式

5.2 POST请求方式

5.3 AJAX请求方式

第六章. json数据格式

json对象有三种数据格式，分别如下：

java对象需要转为json格式的字符串回调给浏览器。

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读