JSON, AJAX, i18n internationalization

Posted by murdocsvan on Fri, 18 Feb 2022 10:14:11 +0100

JSON, AJAX, i18n nationalization


What is JSON?

JSON is a lightweight data exchange format. It is easy for human to read and write, and it is also easy for machine to parse and generate. JSON adopts a text format completely independent of language, and many languages provide support for JSON (c,c++,c#,java,js,python). This makes JSON the ideal format for data exchange.

json is a lightweight data exchange format.

Lightweight refers to the comparison with xml.

Data exchange refers to the transmission format of business data between client and server.

Use of json in JavaScript

Definition of json

json consists of key value pairs and is surrounded by curly braces. Each key is enclosed by quotation marks, the key and value are separated by colons, and multiple sets of key value pairs are separated by commas.

<script type="text/javascript">
// Definition of json
			var jsonObj={

json access

json is an object. The key in json can be understood as an attribute in an object. Key access in json is the same as accessing the properties of the object: json object key

The value obtained by alert(jsonObj.key1) is: 12

Two common methods of json

json exists in two forms

1. Exist in the form of object. Called json object

2. Exist in the form of string. Called json string

Generally, when we want to manipulate the data in json, we need the format of json object.

When we want to exchange data between the client and the server, we use json strings.

JSON.stringify(): converts json objects into json strings

JSON.parse(): convert json string to json object

<script type="text/javascript">
var jsonObjString=JSON.stringify(jsonObj);//Like toString method in Java
			// json string to json object
			var jsonobj2=JSON.parse(jsonObjString);

Use of JSON in Java

You need to import the jar package gson-2.2.4 jar

Mutual transformation of javaBean and json

public void test1(){
        Person person=new Person(1,"test");
        //Create a Gson object instance
        Gson gson=new Gson();
        //The toJson method can convert Java objects into json strings
        String personJsonString= gson.toJson(person);
        /*fromJson Convert json string to Java object*/
        Person person1=gson.fromJson(personJsonString,Person.class);

Conversion of List and json

public class PersonListType extends TypeToken<List<Person>> {

public void test2(){
        List<Person> list=new ArrayList<>();
        list.add(new Person(1,"Player number one"));
        list.add(new Person(2,"Player number two"));

        Gson gson=new Gson();
        String list2=gson.toJson(list);
        //Turn back
        List<Person> list1= gson.fromJson(list2,new PersonListType().getType());
        Person person=list1.get(0);

map and json conversion

public class PersonMapType extends TypeToken<HashMap<Integer, Person>> {

public void test3(){
        Map<Integer,Person> personMap=new HashMap<>();
        personMap.put(1,new Person(1,"Player number one"));
        personMap.put(2,new Person(2,"Player number two"));
        Gson gson=new Gson();
        String pm= gson.toJson(personMap);

        Map<Integer,Person> personMap1= gson.fromJson(pm,new PersonMapType().getType());



What are Ajax requests

AJAX is a web development technology to create interactive web applications.

Ajax is a technology that the browser sends a request asynchronously through js and updates the page locally.

Example of a native Ajax request

package servlet;

import com.google.gson.Gson;
import pojo.Person;

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

public class AjaxServlet extends BaseServlet {

    protected void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        System.out.println("The request came");
        Person person=new Person(1,"Number one");

        //String converted to json format
        Gson gson=new Gson();
        String personJsonString=gson.toJson(person);

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
		<meta http-equiv="pragma" content="no-cache" />
		<meta http-equiv="cache-control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript">
			function ajaxRequest() {   //Here, we use JavaScript language to initiate Ajax requests and access JavaScript Ajax in the server ajaxselvlet
// 				1. We first create XMLHttpRequest
				var xmlHttpRequest=new XMLHttpRequest();
// 				2. Call the open method to set the request parameters

				//4. Bind the onreadystatechange event before the send method to handle the operation after the request is completed.
					if (xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
						//Display the response data on the page
						var jsonObj=JSON.parse(xmlHttpRequest.responseText);

						document.getElementById("div01").innerHTML="No.:"+jsonObj.id+",full name:"+jsonObj.name;

// 				3. Call the send method to send the request

		<button onclick="ajaxRequest()">ajax request</button>
		<div id="div01">

Local update

jax is partially updated, and the browser address bar will not change

Partial updates do not discard the original page content

Synchronous request and asynchronous request

Synchronization request principle:

When the browser sends a synchronization request to the server, the browser will be in a waiting state when the service processes the synchronization request. After the server processes the request, it will respond to the data to the browser and overwrite the original data in the browser memory. The browser - reload the page and display the data responded by the server.

Asynchronous request principle:

The browser gives the request to the proxy object - XMLHttpRequest (which is built into most browsers). The proxy object sends a request to the server, receives and parses the data responded by the server, and updates the data to the control specified by the browser. Thus, the local refresh of page data is realized

Ajax requests in jQuery

$. ajax method

utl represents the requested address

Type indicates the type of request GET/POST request

Data indicates that there are two data formats sent to the server: 1 name=value&name=value 2. {key:value}

success request is successful, and the callback function of the response

dataType the data type of the response text,xm,json

<script type="text/javascript">
						success:function (data) {
							// var jsonObj=JSON.parse(data)
							$("#msg").html(" No. "+ data.id +" name "+ data.name);


. g e t square method and . get method and . get method and post method



Callback successful callback function


<script type="text/javascript">
// ajax--get request

					$.get("http://localhost:8080/10_json_ajax_i18n/ajaxServlet","action=jQueryGET",function (data) {
						$("#msg").html(" get No. "+ data.id +", name "+ data. Name");
				// ajax--post request
					// post request
					$.post("http://localhost:8080/10_json_ajax_i18n/ajaxServlet","action=jQueryPOST",function (data) {
						$("#msg").html(" post No. "+ data.id +", name "+ data. Name");

$. getJSON method




Form serialization (serialize)

serialize() can get the contents of all form items in the form and splice them in the form of name = value & name = value

i18n internationalization

What is i18n?

Internationalization refers to the fact that the same website can support multiple languages to facilitate the access of users from different countries and languages.

Apple's solution is not suitable for all companies, and we want the same website to be displayed according to the user's area when different people visit it
Different languages and characters, and the layout style of the website will not change.

So there is what we call internationalization. Generally speaking, internationalization means that people from different countries can visit the same website and show different languages. But in fact, this
This kind of demand is not strong. Generally, companies with real international demand still adopt Apple's solution to create different pages for different countries
noodles. So we can understand the content of internationalization.

International English Internationalization, but because the spelling is too long, foreigners think of a simple way to write it called I18N, which represents Internationalization
This word starts with 1 and ends with N, with 18 letters in the middle, so it is abbreviated as 18N. Later, we say that 18N and internationalization mean the same thing.

Introduction to relevant requirements and elements of internationalization

Topics: Java JSON Ajax i18n