ajax_json

AJAX framework Day1

1, Ajax Introduction

a) Concept A Synchronous  J avascript  A Nd  X- ML (asynchronous request javaScript And XML)

b) traditional request

1. Traditional way of initiating the request
   1. Address Bar
   2. Super Link
   3. Forms
   4. Javascript: location.href function
   5.  
2. The problem with traditional request
   because the traditional response is to request a new page (refresh the page). Therefore, users have to wait for a response result, subsequent operations can.
   Poor user experience.

1. Based on the characteristics of the asynchronous request
   content of the response is not a new page, a local, a character string information page, the user in the use of asynchronous requests, without waiting for a response, the subsequent processing may be performed directly.

1. Difference between traditional asynchronous request request
   1. In response to the contents of
      the content of the traditional response: a new page, refresh the page
      asynchronous response content: local, string information page
   2. Operation by the user for
      traditional request: waiting for a response
      asynchronous requests: without waiting for a response, the user can directly operate the subsequent
2. Recommended in the appropriate scene, use asynchronous requests to improve the user experience

2, the development of asynchronous request

Create a) an asynchronous request object                   
　　javascript: XmlHttpRequest objects XHR
　　the Chrome | the FF | Safari in the XmlHttpRequest
　　var = new new XHR the XmlHttpRequest ();
　　IEs (IE5 IE6) in the ActiveXObject
　　var = new new XHR the ActiveXObject ( "Microsoft.XMLHTTP");

Use b) xhr object

 

 

3, case detection username

 

 

No longer jump

 

 

 

 

Control whether to submit the form, the detection time of submission

4, Ajax development steps

 

 

 

 

 

 

a) creating asynchronous request
IE based xhr = new ActiveXObject ( "Microsoft.XMLHTTP" );
non-IE-based xhr = new XmlHttpRequest ();

b) sending the request the queryString
xhr.open ( "the GET", the URL name = & Suns = pwd = 123 & Sex MALE);?
xhr.send (null);
xhr.open ( "the POST", URL, to true (whether asynchronous));
XHR .setRequestHeader ( "content-type", "application / x-www-form-urlencoded");

Why set: analog form
basic Web developers can use the form to submit data, the default specified when submitting data using a form
enctype = "application / x-www -form-urlencoded", but now using ajax programming, no longer in use
<form a tag it did not provide a value corresponding to the attribute enctype way. Then this time the need to
manually set the application / x-www-form- urlencoded request header to simulate form.
xhr.send ( "name = suns & pwd = 123 & sex = male") ;, communicating data in quotes,

 

 

c) listens for a response
xhr.onreadystatechange = function () {
    IF (xhr.readyState == == 200 is xhr.status &&. 4) {
          xhr.responseText
          the DOM programming
    }
}

d) the server side:
no page jump, but by returning the character string information, complete interaction
request scope is not used
obtain an output bottom stream is used response.getWriter () interacting

. 5, JSON protocol string
JSON protocol string is essentially a string.

 

 

a) action: the heterogeneous system programming, data transmission, interactive.

b) Core:

1. It defines the format string
   1. Object form

       

       

   2. Aggregate form

       

       

      
      
   3. Embedded object

       

       

      
      
   4. Form consistent with the object of type Map

       

       

      
      
   5. JSON protocol analysis support a variety of tools can automatically convert
      java end: the library JSONlib GSON (Google) FASTJSON (Ali) jakeson (SpringMVC)
      Gson // objects are braces, a collection of small brackets

Note that map is as objects to write, braces

1. Gson specific basic应用
   Gson Gson = New Gson ();
   Gson.ToJson ();
   
2. Gson specific application scenarios
3. 

    

    

Inconsistent with the attribute name a) Json string object property name problem

 

 

b) loop problem resolution objects

 

 

1. Notes @Expose
   with the annotations @Expose of the property will be excluded and will not be converted
   

    

    

   
   

Too inflexible, complicated both by gsonbuilder

 

1. And use interface,
   to achieve a (notice the contents of Gson excluded) exclusion policy interface
   
   
2. 

    

    

    

    

You can specify multiple exclusion policies, more flexible

c) the date of the special type of problem

1. Implement an interface
2. 

    

    

3. Sign up to GsonBuilder
   

    

    

    

    

   
   
4. Object converted to JSON JS (browser built, Jquery, Ext ..)
   browser built-in objects, subsequent recommended Jquery
   the JSON.parse (JSONString) JS objects -----
                      ----- JS array
   

    

    

   
   
   

6, Case: Application of Ajax technology used to display user information

 

 

AJAX framework Day2

1, SpringMVC support for Ajax

a) Original Integration Integration bottom

 

 

b) by @ResponseBody
automatically convert objects into SpringMVC JSON string, and by the character output stream.
Note: @ResponseBody encapsulated object component is converted JSON jackson
environment structures: introducing jackson jar package related
development step;

 

 

1. The key attribute name is inconsistent with the JSON string
   1. 

       

       

2. Date format type
   @JsonFormat (pattern = "yyyy-MM -dd")
3. Null type not converted
   @JsonInclude (the Include. NON_NULL )
4. How to ignore a property
   @JsonIgnore
5. Chinese character sets automatic processing

The original approach

Actual processing based on the automatic date processing null value

2, Struts2 and Ajax technology integration

 

 

3, Ajax-based way of thinking about programming:
    the current development system in addition to using a ajax ui framework of (easyui ext dojo) program, the rest used by the application, in the development, should use ajax part of the session.

   1 local operations interact with the server side
   2 is preferably a simple structure