Mise en route avec Java EE (XVIII) - base Ajax et JSON

Mise en route avec Java EE (XVIII) - base Ajax et JSON
　　iwehdio le jardin blog: https://www.cnblogs.com/iwehdio/

1, Ajax

Asynchronous JavaScript And XML, Asynchronous JavaScript and XML. Sans avoir à charger la page entière à une partie de mise à jour de la page.

Synchrone et asynchrone:
- client de communication mutuelle et à la fin du serveur.
- des moyens synchrones que le client doit attendre la réponse du serveur, au cours de laquelle le client ne peut rien faire.
- l'asynchronisme que le client n'a pas à attendre la réponse du côté serveur, le client peut faire d'autres opérations au cours de cette période.
Implémentation native JS:
1. Reliure fonction d'événement.
```
<script>
    function func(){
        /* 内容 */
    }
</script>
```
2. Créer un objet de base.
```
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");
}
```
3. Établir une connexion. xmlhttp.open("GET", "text1,txt", true). Trois paramètres sont, le type d'URL de requête et demande de synchronisation (false) ou asynchrone (true).
4. demande de transmission. xmlhttp.send(). Pour get mode de réalisation, les paramètres à l'épissage de requête d'URL, la méthode d'envoi est vide référence, car la demande après, la méthode des paramètres de demande d'envoi.
5. Réception d'une réponse du serveur. code d'état Prêt et la réponse est une demande de prêt compléter 4, le code d'état de réponse de 200 indique une réponse positive.
```
xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        var responseText = xmlhttp.responseText;
    }
}
```
mises en œuvre JQuery:
- $.ajax(url, [settings])Ou $.ajax({键值对}): pour envoyer une demande asynchrone. Si par écrit sous la forme de paires valeur clé, la clé comprenant une URL (chemin de la requête de paramètres), le type (mode de demande), les données (paramètre de demande), Succès (après une réponse de rappel réussie), l' erreur (la fonction de rappel d'erreur), dataType (réception format de données de réponse).
- $.get(url, [data], [callback], [type]): Envoyez une demande get. Les paramètres ont été chemin de requête, un paramètre de requête, en réponse à la fonction de rappel, et les types de données.
- $.post(url, [data], [callback], [type]): Envoi de la demande après.

2, JSON

JavaScript Object Notation, JavaScript Object Notation. Un stockage de grammaire ou de messages texte d'échange.

La syntaxe de base:
- Les données dans les paires nom / valeur: données JSON est composé de paires valeur clé. Chaque paire de paires de valeurs de clé séparés par des virgules. Les clés peuvent être utilisés sans guillemets peuvent être utilisés, mais pour être cohérent.
- Nested Format: définition des accolades est définition d'objet stockée est stockée dans un tableau supports.
  - Enregistrer l' objet:var v = {"key":{"key1":value1, "key2":value2}} .
  - Enregistrer var v = {"key":[{"key1":value1}, {"key2":value2}]}formule: .
- Le type de valeur de la valeur peut lire des tableaux, des chaînes, des valeurs booléennes, réseau, un objet ou nulle.
Obtenir des données:
- json对象.键名.
- json对象["键名"]: Guillemets simples guillemets doubles peuvent être.
- json数组对象[索引].
- Traversal:
```
for(var key in json_object){
    //在这里key是字符串形式，不能直接 person.key 获取
    alert(key + ":" + person[key]);
}
```
données JSON et convertit des objets Java: analyseur jackson.
- Procédez comme suit:
  1. Importez package jar dépendant.
  2. Création Jackson objet principal ObjectMapper.
  3. Conversion.
- JSON transformer des objets Java:
  - mapper.readValue(JSON字符串数组, class类型): Le type de classe doit être transformé en un objet de classe.
- objets Java tournent JSON:
  - mapper.writeValueAsString(obj): Objets Java dans la chaîne JSON.
  - mapper.writeValue(参数,obj): Objets Java dans la chaîne JSON et stockée dans un fichier (paramètre objet File), flux-sortie de caractères (paramètre objet Writer), le flux de sortie d'octets (paramètre objet OutputStream).
  - Remarque:
    - @JsonIgnore: Ignorer cette propriété, cette propriété ne semble pas quand tourner JSON. Appliqué à la variable membre.
    - @JsonFormat(格式): Valeur de la propriété Format. Appliqué à la variable membre. Comme cela est décrit pour la date, le format peut être pattern = "yyy-MM-dd".
  - objets Java complexes:
    - Liste tableau: dans un tableau JSON.
    - Carte Collection: Conversion d'un objet JSON.

3, cas

Valider le nom d'utilisateur existe:

Nom d'utilisateur au serveur via un navigateur, le serveur, après avoir déterminé, en réponse au navigateur mis en œuvre des données JSON.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSON</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
            $("#username").blur(function () {
                var username = $(this).val();
                $.get("findUsernameServlet", {username:username}, function (data) {
                    var span = $("#tips");
                    if(data.userExist){
                        span.css("color", "red");
                        span.html(data.msg);
                    } else {
                        span.css("color", "green");
                        span.html(data.msg);
                    }
                }, "json")
            })
        })
    </script>
</head>
<body>
    <form>
        <input type="text" name="username" id="username" placeholder="请输入用户名"><br>
        <span id="tips"></span>
    </form>
</body>
</html>

FindUsernameServlet:

@WebServlet("/findUsernameServlet")
public class FindUsernameServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        String username = request.getParameter("username");
        Map<String, Object> map = new HashMap<String, Object>();
		//此处应使用数据库查询
        if("otto".equals(username)){
            map.put("userExist", true);
            map.put("msg", "用户名已被占用");
        } else {
            map.put("userExist", false);
            map.put("msg", "用户名可以使用");
        }
        ObjectMapper mapper = new ObjectMapper();
        mapper.writeValue(response.getWriter(), map);
    }

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

Apprenez à faire le navigateur la réponse est JSON types de données, éviter brouillées:
- Dans $.get()désigné comme « JSON » La dernière méthode de paramètre de type.
- En response.setContentType("application/json;charset=utf-8")spécifiant le type MIME comme JSON.

Le blog de iwehdio Park: [https://www.cnblogs.com/iwehdio/] (https://www.cnblogs.com/iwehdio/)

Mise en route avec Java EE (XVIII) - base Ajax et JSON

1, Ajax

2, JSON

3, cas

Je suppose que tu aimes