Ajax & JSON

Ajax

概念

  1. 什么是Ajax?
    Asynchronous JavaScript and XML ， 异步的JS和XML.异步的客户端和服务器交互技术
    Ajax是js提供的,代码是js代码,需要写在Script标签体里
    Ajax在客户端和服务器进行交互的时候，数据默认是使用XML格式传输的--已经被json取代了

  2. 作用

    • 局部刷新
    • 异步加载

  3. 异步与同步的概念
    同步: 客户端发起请求,然后客户端处于服务器的等待状态,这个状态下,客户端不能进行其他操作.类似于"假死"状态.
    异步: 客户端发起请求， 然后客户端可以自由进行其他操作，不会处于“假死”状态；一旦服务器响应完成，可以继续后续操作

JS 的 Ajax

步骤
  • 创建一个Ajax引擎对象
  • 给Ajax引擎对象绑定事件,监听Ajax引擎的状态变化.一旦监听到接受服务器响应完成,要执行响应行为
  • 设置请求的参数数据
  • 发送请求
js 的 get方法-异步
function ajaxGet() {
        //创建一个Ajax引擎对象
        var xmlHttp = new XMLHttpRequest();
        //2.给Ajav引擎对象绑定事件,监听Ajax的引擎状态变化,一旦监听到接收服务器响应完成,要执行响应行为
        xmlHttp.onreadystatechange = function (ev) {
            if (xmlHttp.readyState == 4) {
                if (xmlHttp.status == 200) {
                    document.getElementById("tip").innerText = xmlHttp.responseText;
                }
            }
        }
        //3.这是请求的参数数据,open()方法:请求方式,请求地址,是否异步(默认true,异步)
        //get方法传参
        xmlHttp.open("get", "/ajax/ajaxServlet?username=tom", true);
        //4. 发送请求
        xmlHttp.send();
js的post方法-异步
    function ajaxPost() {
        //1. 创建一个Ajax引擎对象
        var xmlhttp = new XMLHttpRequest();
        // 2. 给Ajax引擎对象绑定事件,监听Ajax引擎的状态变化.一旦监听到接受服务器响应完成,要执行响应行为
        xmlhttp.onreadystatechange = function (ev) {
            if (xmlhttp.readyState == 4) {
                if (xmlhttp.status == 200) {
                    document.getElementById("tip").innerHTML = xmlhttp.responseText;
                }
            }
        }
        // 3. 设置请求的参数数据:请求方式,请求地址,是否异步(//不写true,默认是异步的)
        xmlhttp.open("post", "ajaxServlet", true);
        // 4. 发送请求
        xmlhttp.setRequestHeader("Content-type","application/x-www/form-urlencode")
        xmlhttp.send("username=tom");
    }
js的post和get方法-同步模式

只需要将 xmlhttp.open(method,url,async)中的aync参数该为false即可

请求参数的格式
  • 格式一："username=tom&password=123"
  • 格式二：{username:"tom",password:"123"}
关于路径
  • 在HTML里写路径的时候,建议使用相对路径.好处是不需要关注context path.
  • 在jsp或者Servlet里面,写绝对路径 ./资源路径 或者 /contextpath/资源路径
  • 当前页面的资源路径：/jsajax.html
    请求的目标资源路径：/ajaxServlet
    在当前页面里请求/ajaxServlet，路径就可以写成：./ajaxServlet，简写成：ajaxServlet

jQuery 的 Ajax

原生的 JavaScript 提供的 Ajax，重复代码比较多，而且存在浏览器兼容问题。jQuery 对 js 的 Ajax 做了二次封 装，封装后提供了一些方法。这些方法一样可以实现 Ajax 的效果，但是比原生 js 的 Ajax 更为简单，并且解决了浏览器兼 容性问题.

Post方法 (最常用)
语法: jQuery.post(url,[params],[callback],[responseType])
参数: url 请求的地址,必须
     params 请求的参数
        格式1: username=tom&password=123
        格式2:  {username:"tom",password:"123"}
     callback 当Jquery监听到服务端响应完成之后,调用的函数对象
        function(result){
            //result:服务器响应回来的数据
        }
    responseType 服务端响应回来的数据类型。text/json

//var params = "username=tom";
        var params = {username:"tom"};
        $.post("ajaxServlet", params, function (result) {
            alert(result);
        })
Get方法
语法: jQuery.get(url,[params],[callback],[responseType])
参数: url 请求的地址,必须
     params 请求的参数
        格式1: username=tom&password=123
        格式2:  {username:"tom",password:"123"}
     callback 当Jquery监听到服务端响应完成之后,调用的函数对象
        function(result){
            //result:服务器响应回来的数据
        }
    responseType 服务端响应回来的数据类型。text/json

 var params = {username:"tom"}
        $.get("/ajax/ajaxServlet",params,function (result) {
            alert(result);
        })

注意: get/post方法,只能发异步的. 如果要发送同步的请求,需要使用ajax方法

Ajax方法
语法：$.ajax({settings});
参数：是以{}的对象形式，里边是键值对的方式配置相关的数据。有非常多的配置项，常用的有：
      url：请求的地址。必须
      data：请求参数。格式一："username=tom&password=123"。 格式：{username:"tom",password:"123"}
      type：请求方式。get/post
      dataType：服务端响应回来的数据类型。text/json
      success：jQuery 监听到服务端响应完成后，调用的函数对象。
         function(result){
             //result：服务端响应回来的数据
         }
      async：是否异步。true/false

$.ajax({
    url: "/ajax/ajaxServlet",  // 请求地址,必填
    data: "username=tom", //请求参数
    type: "post", //请求方式
    dataType: "text", //服务器返回的参数类型
    success: function (result) { //监听到服务器响应完成后,调用函数对象
        alert(result);
    },
    async: true  //是否异步,默认true
});
jQuery3.0 的Ajax新增签名方式

待补充...下回分解....

JSON

概念

JavaS Object Notation JS对象标记法. 是一种轻量级数据格式,代替xml

定义和解析JSON

  • 定义：
    • 对象形式定义：var json = {"key":value, "key":value}
    • 数组形式定义：var arr = [obj1, obj2];
    • 两种混合定义：var arr = {"key":obj, "key":{}, "key":[]}
  • 解析： var v = json.key; var v = json[i].key
  • Demo
    • var json = {key:value,key:value}
    /*class Person{
   String name = "三丰";    
   Integer age = 100; 
}*/
var p = {"name":"三丰","age":100};
var name = p.name;
var age = p.age;
    • var arr = [object1,object2] 
      //[{key:value,key:value},{key:value,key:value}]
var json = [
    {"name":"张三","age":17},
    {"name":"李四","age":18}
];
var name1 = json[0].name;
var name2 = json[1].name;
var age1 = json[0].age;
var age2 = json[1].age;
    • var arr = {"key":"obj","key":{},"key":[]} 
      //1. {"param":[{key:value,key:value},{key:value,key:value}]
var json = {
    "department" :[
        {"name":"coco","age":17},
        {"name":"joy","age":18},
        {"name":"ceci","age":19}
    ]
};
var name = json.department[2].name;

/**
 * 2. 
 * {
 *   "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 = {
    "department1": [
        {"name": "coco", "age": 17},
        {"name": "joy", "age": 18},
        {"name": "ceci", "age": 19}
    ],
    "department2": [
        {"name": "coco", "age": 17},
        {"name": "joy", "age": 18},
        {"name": "ceci", "age": 19}
    ]
}
var age = json.department2[1].age;
alert(age);

/**
 * 3
 * {
 *   "param1":"value1",
 *   "param2":{},
 *   "param3":[{key:value,key:value},{key:value,key:value}]
 * }
 */

var json = {
    "school": "University",
    "info": {"schoolName": "ShenZhen-University", "address": "ShenZhen"},
    "student": [
        {"name": "coco", "age": 17},
        {"name": "joy", "age": 18},
        {"name": "ceci", "age": 19}
    ]
}
var schoolName = json.info.schoolName;
var name = json.student[0].name;
alert(schoolName);
alert(name);

JSON转换工具

服务端经常要把 JavaBean 或者是 JavaBean 的集合转换成 json，返回响应给客户端，可以使用工具包来完成 这个转换的工作。

常见的有：

  • jsonlib：sun 公司的，依赖的 jar 包过多
  • gson：google 的工具包
  • fastjson：alibaba 的工具包
  • jackson：springMvc 默认使用的转换工具包
jsonlib
package json;

import domain.User;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;

public class JsonLib_01 {
    public static void main(String[] args) {
        User user1 = new User("coco","123");
        User user2 = new User("xingxing","123");

        ArrayList<User> userList = new ArrayList();

        userList.add(user1);
        userList.add(user2);

        Map<String,User> map = new HashMap<>();
        map.put("user1",user1);
        map.put("user2",user2);
        
        //把user1转换为json格式
        JSONObject jsonObject = JSONObject.fromObject(user1);
        String json = jsonObject.toString();
        System.out.println(json);

        //把list转换为json格式
        JSONArray jsonArray = JSONArray.fromObject(userList);
        json = jsonArray.toString();
        System.out.println(json);

        //把map转换为json格式
        JSONObject jsonObject1 = JSONObject.fromObject(map);
        json = jsonObject1.toString();
        System.out.println(json);
    }
}
gson
package json;

import com.google.gson.Gson;
import domain.User;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;

public class Gson_02 {
    public static void main(String[] args) {
        User user1 = new User("coco", "123");
        User user2 = new User("xingxing", "123");

        ArrayList<User> userList = new ArrayList();
        userList.add(user1);
        userList.add(user2);

        Map<String, User> map = new HashMap<>();
        map.put("user1", user1);
        map.put("user2", user2);

        //把user转换为Json格式
        Gson gson = new Gson();
        String json = gson.toJson(user1);
        System.out.println(json);

        //把userList转换为Json格式
        json = gson.toJson(userList);
        System.out.println(json);

        //把map转换为Json格式
        json = gson.toJson(map);
        System.out.println(json);
    }
}
fastjson
package json;

import com.alibaba.fastjson.JSONObject;
import domain.User;


import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;

public class FastJson_03 {
    public static void main(String[] args) {
        User user1 = new User("coco", "123");
        User user2 = new User("xingxing", "123");

        ArrayList<User> userList = new ArrayList();

        userList.add(user1);
        userList.add(user2);

        Map<String, User> map = new HashMap<>();
        map.put("user1", user1);
        map.put("user2", user2);

        //把user转换为Json格式
        String json = JSONObject.toJSONString(user1);
        System.out.println(json);

        //把userList转换为Json格式
        json = JSONObject.toJSONString(userList);
        System.out.println(json);

        //把map转换为Json格式
        json = JSONObject.toJSONString(map);
        System.out.println(json);
    }
}
jackson
package json;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import domain.User;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;

public class Jackson {
    public static void main(String[] args) throws JsonProcessingException {

        User user1 = new User("coco", "123");
        User user2 = new User("xingxing", "123");

        ArrayList<User> userList = new ArrayList();

        userList.add(user1);
        userList.add(user2);

        Map<String, User> map = new HashMap<>();
        map.put("user1", user1);
        map.put("user2", user2);

        ObjectMapper mapper = new ObjectMapper();
        
        //把user转换为Json格式
        String json = mapper.writeValueAsString(user1);
        System.out.println(json);
        
        //把userList转换为Json格式
        json = mapper.writeValueAsString(userList);
        System.out.println(json);
        
        //把map转换为Json格式
        json = mapper.writeValueAsString(userList);
        System.out.println(json);
    }
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 202,723评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,080评论 2赞 379
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 149,604评论 0赞 335
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,440评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,431评论 5赞 364
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,499评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,893评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,541评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,751评论 1赞 296
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,547评论 2赞 319
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,619评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,320评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,890评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,896评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,137评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,796评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,335评论 2赞 342