AJAX异步请求JSON格式数据

AJAX异步请求JSON格式数据

AJAX异步请求

A: 异步Asynchronous

J: JavaScript

A: And

X: XML

同步请求: 客户端请求到服务器,如果服务器没有响应,客户端只能等待,卡死

异步请求: 客户端请求到服务器,如果服务器没有响应,客户可是自由活动

AJAX的运行原理

浏览器内置了AJAX的引擎

原生态的JavaScript实现异步请求

实现步骤

• 获取AJAX引擎
• 设置回调函数
  • 自定义函数,服务器响应成功后,自动调用函数
• 设置请求服务器路径
• 提交

<script type="text/javascript">
    /**
     * 原生态的JavaScript实现AJAX异步请求
     */
    function fn() {
        //获取AJAX引擎对象，XMLHttpRequest
        var xmlhttp = new XMLHttpRequest();
        //对象调用了事件,AJAX引擎的状态变化
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                //xmlhttp.responseText: AJAX引擎对象属性,服务器响应回来的文本数据
                document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
            }
        }
        //设置服务器路径
        xmlhttp.open("GET","/WEB11/js_ajax");
        //提交请求
        xmlhttp.send();
    }
</script>

jQuery的AJAX请求

$.get()函数

• 参数解释
  • url: 提交的服务器地址
  • data:提交到服务器的数据 k=v&k=v
  • 回调函数:服务器响应成功,自动调用函数
  • type: 服务器响应回来的数据类型 ,text, json

<script type="text/javascript">
    function fn() {
        /**
         *  jQuery中的函数get异步请求
         */
        $.get(
            //传递服务器路径
            "/web11/jquery_get",
            //传递提交到服务器的参数
            "username=zhangsan&age=20",
            //回调函数,服务器响应成功,调用函数
            //服务器响应回来的数据,传递到函数的参数
            function (data) {
                alert(data);
            },
            //服务器响应的数据格式
            "text"
        );
    }
</script>

$.post()函数

<script type="text/javascript">
    function fn() {
        /**
         *  jQuery中的函数post异步请求
         */
        $.post(
            //传递服务器路径
            "/web11/jquery_post",
            //传递提交到服务器的参数
            "username=zhangsan&age=20",
            //回调函数,服务器响应成功,调用函数
            //服务器响应回来的数据,传递到函数的参数
            function (data) {
                alert(data);
            },
            //服务器响应的数据格式
            "text"
        );
    }
</script>

$.ajax()函数

jQuery的异步请求函数 ajax(), 他是get和post的底层函数

使用get或者post的时候,调用的底层都是ajax函数

上层函数: 代码简单,但可以控制内容少

底层函数: 代码量多,灵活性很大,可以控制的内容更多

• 函数的参数
  • url:服务器请求地址
  • async: 异步请求或者同步请求,默认是true,表示异步
  • data:请求到服务器参数 k=v
  • dataType:接收服务器响应的数据格式 text json
  • error:服务器响应失败的回调函数
  • success:服务器响应成功的回调函数
  • type:get请求或者是post

<script type="text/javascript">
    function fn() {
        /**
         * jQuery的底层函数ajax实现异步请求
         * $.ajax({
         *    k:v,
         *    k:v
         * })
         */
        $.ajax({
            //服务器路径
            url:"/WEB11/jquery_ajax",
            //提交服务器的数据
            data:"username=zhangsan&age=20",
            //响应失败的回调函数
            error:function(){alert("响应失败")},
            //响应成功的回调函数
            success:function(data){alert("响应成功"+data)},
            //设置接收的响应数据格式
            dataType:"text",
            //设置请求方式
            type:"GET"
        });
    }
</script>

异步请求和同步请求的差异

同步请求: 没有响应,卡死

异步请求: 没有响应,自由活动

好处: 速度快,用户体验好,节约资源

JSON数据格式介绍

JSON,是JavaScript支持的一种数据格式

格式1

​ 对象: { “k1”:obj,“k2”:obj }

格式2

​ 数组:[ obj1,obj2,obj3 ]

数组格式和对象格式相互嵌套

{ “k1”:obj,“k2”: [o1,o2, {“k3”:o3} ] }

[o1,o2, {“k”:v,“k2”: [03,04] } ]

JSON练习一

 <script type="text/javascript">
/**
 * 案例一
 *  {key:value,key:value}
 *  
 * class Person{
 *       String firstname = "张";
 *    String lastname = "三丰";
 *    Integer age = 100;
 * }
 */
//JSON数据格式,表现Java中的对象
   var person = {"firstname":"张","lastname":"三丰","age":100};
   //取出三丰
   alert(person.lastname);
 </script>

JSON练习二

<script type="text/javascript">
   /**
* 案例二
*  [{key:value,key:value},{key:value,key:value}]
*  JSON数据本质是数组
   *  有2个元素,每个元素又是一个对象
*/
   var json = [
      {"firstname":"张","lastname":"三丰","age":100},
      {"firstname":"周","lastname":"芷若","age":50}
  ];
   for(var i=0;i<json.length;i++){
       alert(json[i].firstname+"=="+json[i].lastname+"=="+json[i].age);
  }
</script>

JSON练习三

<script  type="text/javascript">
 /**
* 案例三
* {
*   "param":[{key:value,key:value},{key:value,key:value}]
* }
*  JSON数据本质是对象
  *   对象的键是param
  *   对应一个值,值是数组
  *   数组2个元素,都是对象
*/
 var json = {
    "param":[
        {"firstname":"张","lastname":"三丰","age":100},
        {"firstname":"周","lastname":"芷若","age":50}
    ]
 };
//取出芷若
  alert(json.param[1].lastname);
</script>

JSON练习四

<script type="text/javascript">
 /**
* 案例四
* {
*   "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}]
* }
*  JSON数据本质是对象
  *  对象有三个键值对
  *    param1
  *      对应的值是数组
  *      数组中2个元素是对象
  *    param2
*/
 var json = {
     "param1":[
         {"firstname":"张","lastname":"三丰","age":100},
         {"firstname":"周","lastname":"芷若","age":50}
     ],
     "param2":[
         {"firstname":"张","lastname":"翠山","age":90},
         {"firstname":"谢","lastname":"逊","age":120}
     ]
 }
 //取出芷若
  alert( json.param1[1].lastname );
</script>

AJAX响应JSON格式数据

<script type="text/javascript">
    function fn() {
        /**
         * 发送AJAX请求
         * 获取服务器响应的数据,使用JSON格式
         */
        $.get(
            "/web11/jquery_json",
            "username=zhangsan",
            function (data){
                alert(data.lastname);
            },"json"
        );
    }
</script>

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    System.out.println(request.getParameter("username"));
    //客户端响应JSON数据格式
    response.setContentType("text/html;charset=utf-8");
    //定义出JSON数据  {"firstname":"张","lastname":"三丰","age":100}
    //转义字符,转变字符意义
    String json =  "{ \"firstname\":\"张\",\"lastname\":\"三丰\" }";
    response.getWriter().write(json); 
}

JSON-LIB工具

作用: Java中的数据转成JSON格式数据

包含:对象,数组,集合

/**
 * JSON-LIB工具
 * 对象Person存储到List
 * 集合转成JSON
 */
public void ListToJson(){
    List<Person> list = new ArrayList<Person>();
    list.add(new Person("张三",20,"北京市海淀区"));
    list.add(new Person("李四",30,"天津市武清区"));
    list.add(new Person("王麻子",40,"北京市宣武区"));
    //JSON-LIB工具: JSONArray类静态方法fromObject

    String json = JSONArray.fromObject(list).toString();
    System.out.println(json);
}

/*
 *
 * 对象Person中的数据转成JSON格式
 */
public void ObjectToJson(){
    Person p = new Person("张三",30,"北京市海淀区");
    //JSON-LIB工具: JSONObject类静态方法fromObject
    //方法返回值本类对象,再次调用方法toString()
    String json = JSONObject.fromObject(p).toString();
    System.out.println(json);
}

Gson工具

google公司开发的转换工具

Java中的数据转成JSON数据

public void ListToJson(){
    List<Person> list = new ArrayList<Person>();
    list.add(new Person("张三",20,"北京市海淀区"));
    list.add(new Person("李四",30,"天津市武清区"));
    list.add(new Person("王麻子",40,"北京市宣武区"));
    //gson工具实现转换
    Gson gson = new Gson();
    //对象调用方法 toJson(任意数据)
    String json = gson.toJson(list);
    System.out.println(json);
}

利用AJAX实现的一些小功能

检查用户名是否被占用

dao

/**
 * 方法,检查用户名是否占用
 * 业务层传递用户名
 * 作为条件查询数据表user
 * 封装为User对象
 */
public User check(String username) throws SQLException {
    QueryRunner qr = new QueryRunner(C3P0Utils.getDataSource());
    String sql = "select * from user where username=?";
    return qr.query(sql,new BeanHandler<User>(User.class),username);
}

service

/**
 * 检查用户名方法
 * 接收web传递用户名
 * 传递到dao层,获取返回User对象
 */
public User check(String username){
    User user = null;
    try {
        user = new UserDao().check(username);
    } catch (SQLException e) {
        e.printStackTrace();
    }
    return user;
}

web

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    /**
     * 接收客户端提交用户名
     * 调用业务层方法传递用户名
     * 获取返回值User
     * 判断User对象,做出响应
     */
    String username = request.getParameter("username");
    UserService service = new UserService();
    User user = service.check(username);
    if(user==null){
        //没有数据,用户名可以使用,响应true
        response.getWriter().write("true");
    }else{
        //有数据,用户名被占用,响应false
        response.getWriter().write("false");
    }

}

搜索自动补全案例

dao

    /**
     * 根据商品名模糊查询
     * 业务层传递商品名
     * 返回集合List
     */
    public List<Product> search(String word) throws SQLException {
        QueryRunner qr = new QueryRunner(C3P0Utils.getDataSource());
        String sql = "select * from product where pname like ?";
        return qr.query(sql,new BeanListHandler<Product>(Product.class), "%"+word+"%");
    }

service

/**
 * 检查用户名方法
 * 接收web传递用户名
 * 传递到dao层,获取返回User对象
 */
public User check(String username){
    User user = null;
    try {
        user = new UserDao().check(username);
    } catch (SQLException e) {
        e.printStackTrace();
    }
    return user;
}

web

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    /**
     * 获取客户端提交商品名
     * 调用业务层传递商品名
     * 获取查询结果List集合
     * 集合转成JSON数据格式
     * 响应客户端
     */
    String word = request.getParameter("word");
    ProductService service = new ProductService();
    List<Product> list = service.search(word);
    //集合对象转成JSON格式数据
    Gson gson = new Gson();
    String json = gson.toJson(list);
    System.out.println(json);
    response.setContentType("text/html;charset=utf-8");
    response.getWriter().write(json);
}

补充（Ajax跨域问题）

AJAX跨域访问

跨域问题来源于JavaScript的同源策略，即只有 协议+主机名+端口号 (如存在)相同，则允许相互访问。
也就是说JavaScript只能访问和操作自己域下的资源，不能访问和操作其他域下的资源。

//允许AJAX跨域访问
response.setHeader("Access-Control-Allow-Origin", "跨域地址");
//AJAX访问允许客户端保存cookie
response.setHeader("Access-Control-Allow-Credentials","true");