Ajax brief

1. Briefly

AJAX (Asynchronous Javascript And XML), is a partial refresh technology that does not need to reload the page, you can carry out only a partial update

For example: video barrage, thumbs up, login authentication ...

2.JavaScript native AJAX

step:

　　1. Create a core XMLHttpRequest objects;

　　　　var variable name = new XMLHttpReques ();

　　2. Use core object opening request;

　　　　.Open variable name (a parameter, two parameters, three parameters);

　　　　　　A parameter: Data presented in a way (get or post)

　　　　　　Two parameters: the request address

　　　　　　Three parameters: whether asynchronous (true [default] asynchronous, false)

　　3. Use core object transmission request;

　　　　Variable names .send ();

　　4. receiving data.

　　　　Variable name .onreadystatechange = function () {...}

Code Example:

html:

<script type="text/javascript">
function jsajax(){
    var xhr = new XMLHttpRequest();
    xhr.open("post","JsAjax",true);
    xhr.send();
    xhr.onreadystatechange = function(){
        if(xhr.status == 200 && xhr.readyState == 4){
            var i = xhr.responseText;
            document.getElementById("msg").innerText=i;            
        }
    }
}
</script>
</head>
<body>
jsajax:<span id="msg"></span>
<br>
<button onclick = "jsajax () "> I have a surprise point </ the Button> 
</ body> 
</ HTML>

java

// Because ajax content may be obtained in response to the theme, so the use of the data returned PrintWriter 
PrintWriter Writer = response.getWriter (); 
writer.print ( "the JS native AJAX");

Native AJAX is very cumbersome to use, generally only need to understand, more is the use of JQ version below AJAX.

Version 3.JQuery AJAX

There are three written version of JQuery AJAX, introduced one by one the three following wording

The first:

$.ajax({

　　url: "Path Request",

　　data: { "key name 1": a value 1, "two keys": value 2 "key name 3": 3 ......} value,

　　type: "presented in a way get / post",

　　dataType: "Return Data Format", (commonly: text, json)

　　async:true/false,

　　success:function(){},

　　error:function(){}

})

url: request path; data: data request; type: data request mode; dataType: return data format; async: whether asynchronous; success: the successful implementation of this function is performed; error: the implementation of this function fails

Code Example:

$.ajax({
    url:"JQAjax",
    data:{"name":"李四","age":24},
    type:"post",
    dataType:"text",
    async:true,
    success:function(obj){
        $("#msg").text(obj);
    }
})

The second & third:

The second and third will be presented in a way is factored out, $. Get () and $ .post () are basically the same content

$.get(

　　"Path Request", (corresponding to a first embodiment url)

　　{ "Key name 1": a value 1, "two keys": value 2 "key name 3": value} ...... 3, (corresponding to data)

　　function(){},(对应success:function(){})

　　"Return Data Format" (corresponding to the dataType)

)

$.post(

　　"Path Request",

　　{ "Key name 1": a value 1, "two keys": value 2 "key name 3": 3 ......} value,

　　function(){},

　　"Return Data Format"

)

Code Example:

$.get(
    "JQPostAjax",
    {"name":"张三","age":23},
    function(obj){
        $("#msg").text(obj);
    },
    "text"
);
$.post(
    "JQPostAjax", {"name":"张三","age":23}, function(obj){ $("#msg").text(obj); }, "text" );

4.json

Overview: JSON format is a character string, data transmission is lightweight.

json data format (three kinds)

　　1. Array

　　　　[Value 1, value 2 and value 3 ......]

　　　　Arbitrary data type value

　　2. Object

　　　　{ "Key name 1": a value 1, "2 key name": "value 2"} ......

　　3. Mixed Mode

　　　　[Object {1}, {2} the object, the object {3} .....]

　　　　{[1 Array], [array 2], [3 array] ......}

　　　　Described here simply two way mixed mode, the actual wording is not fixed, as long as properly nested ({} and [] are used interchangeably), on OK.

　　E.g:

{
　　"zone":"boss",
　　"persons":[
　　　　{"name":"张三","age":23,"sroce":[98,99,100]},
　　　　{"name":"李四","age":24,"sroce":[87,87,87]},
　　　　{"name":"王五","age":25,"sroce":[76,876,65]}
　　]
}

5.jackson

Action: The Jackson arrays, collections, ... is converted into an object format json

Use:

　　1. Create an object ObjectMapper

　　　　ObjectMapper object name = new ObjectMapper ();

　　2. The specified data into json

　　　　String variable name = object name .writeValueAsString ( "specified data");

Code Example:

Student s1 = new Student("张三", 23, new int[]{93,94,95});
Student s2 = new Student("李四", 24, new int[]{94,95,96});
Student s3 = new Student("王五", 25, new int[]{95,96,97});
Student s4 = new Student("赵六", 26, new int[]{96,97,98});
Student s5 = new Student("孙七", 27, new int[]{97,98,99});
List<Student> students = new ArrayList<Student>();
students.add(s1);
students.add(s2);
students.add(s3);
students.add(s4);
students.add(s5);
//转化为json
/*
 * 1.创建ObjectMapper对象
 * 2.使用writeValueAsString将数据转化为json格式
 */
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(students);

response.setContentType("text/html;charset=utf-8");
PrintWriter writer = response.getWriter();
writer.print(json);

1. Briefly

2.JavaScript native AJAX

Version 3.JQuery AJAX

The first:

The second & third:

4.json

5.jackson

Guess you like