ajax way of interacting with the rear end of the front-end data

Ajax way of front-end and back-end data interaction

 For front-end in terms of learning, CSS + HTML + JavaScript is learning to master in the case of self-learning is not hard, but you want to achieve data exchange before and after the end of the study would be a loss in the absence of guidance. Then let me come to the front and rear end of what the data interactive way.

front-end and back-end web is how connected

Site data processing is divided into three layers.
The first layer, presentation layer, which may be part of the HTML code, CSS / Javascript code to implement the like. Page layout and design may be implemented by front-end code. This layer can be called a display layer. That is, you open the page to see the browser.
The second layer is the service layer, this layer is responsible for handling the data. There are commonly used code language PHP, JSP, Java and so on. Data processing foreground by background processing algorithms for these languages returned. When necessary to operate the database, then the results returned to the front pages.
The third layer is the data layer, this database is used to store data. CRUD database operations may be achieved by operating the business layer.
① you are exposed to this page belongs to the presentation layer, this page generally consists of HTML tags CSS / JAVASCRIPT to achieve. This time you have to fill in the data.
② then you press the submit trigger background processing mechanism, this time the data will be transmitted back-end code is processed. This code enables PHP, JSP, JAVA, etc. Depending on the site. Code corresponding to the database operations, the data stored in the data processing and the like after the programmer will receive a preset algorithm.
③ After successful completion of database operations, business layer code that will again display side presentation layer that is a return instruction to inform you fill out the form success


A. Method to pass parameters from the front end toward the rear end

1. The front-end form by form, when you click on the submit button to send data to the background

2. The rear end of the front end will request response, received data, data processing and then returned to the front end.

II. Parameters passed by ajax, ajax there are two ways to get and post (here we explain ajax)

What is Ajax

1, Ajax stands for Asynchronous JavaScript and XML, or Asynchronous JavaScript + XML.
2, which is a technical solution, but not a new technology.
3, it relies on existing CSS / HTML / Javascript, and the core of which is dependent on the XMLHttpRequest object provided by the browser. This object sends a request to the server and parsing server response provides a smooth interface, enables the browser makes an HTTP request and HTTP response receiving, implemented for data exchange in the case of the page and the server does not refresh the
relationship between the Ajax and XMLHttpRequest : we use the XMLHttpRequest object to send an Ajax request.

About ajax advantages and disadvantages:

advantage:
    1. do not need to plug-in support (usually a browser and JavaScript can be enabled by default);
    2. The user experience is very good (not refresh the page to get the data can be updated);
    3. To enhance the performance of Web applications (sent to do on-demand, data transfer is not necessary in terms of the overall submitted);
    4. reduce the burden on the server and the bandwidth (the transfer of some of the operations of the server to the client);
 
Disadvantages:
    1. The lack of different versions of the browser support for XMLHttpRequest objects degrees (such as before IE5);
    2. The forward and backward functions are destroyed (because Ajax is always the current page, the page will not be recorded before and after);
    3. Support of the search engine is not enough (because search engine crawlers can not understand the contents of the data changes caused by JS);

get and post in two ways:

1.POST mainly used to transmit data, receive data mainly used GET;
security 2.PSOT better transmission data, and GET is poor;
3.POST transmission data size is not limited, and the size is limited GET 2 ~ 100k.
When using GET and POST: using GET method, using the POST method should be operational data in the data acquisition.

The use of Ajax

. 1 . Var AJAX = new new the XMLHttpRequest (); 

 2 .AJAX.open ( ' GET ' , ' Data / test.json ' , to true ); 
 
    first parameter: the POST || the GET 
 
    second parameter: a request url to 
 
    the first three parameters: accept a Boolean value, decided to ask the way 
    to true, the server requests is asynchronous, that is, without waiting for the results of the script execution server send () method, but continue to execute script code; 
    is false waiting for an execution result of the server, the server requests are synchronous, i.e. script execution send () method returns, if the waiting time of timeout, then no wait, proceed behind the script code! 
    
    . 3 .ajax.onreadystatechange = function () {
         IF (ajax.readyState == . 4 && ajax.status == 200 is ) {
            func_succ(ajax.responseText);
        }else if(ajax.readyState == 4 && ajax.status != 200){
            //alert("ajax faild readyState:"+ajax.readyState+" status:"+ajax.status);
        }
    };
    
    4.ajax.send(null);

ajax.readystate

    0 - (uninitialized) has not been called send () method
    1-- (load) has been called send () method, is sending request
    2 - (Loaded) Send () method performs is completed, the entire response has been received
    3 - (interactive) response is being parsed
    4 - (complete) response content analysis is complete, you can call the client
HTTP status code ajax.status
   1 **: Request received, continuing process
    2 **: operating successfully received, analyzed, accepted
    ** 3: complete the request must be further processed
    4 **: a request contains bad syntax or can not be completed
    5 **: a server performs perfectly valid request failed
    
    100-- customers must continue to make requests
    101-- client asks the server to convert the HTTP protocol version upon request
 
    200-- trading success
    201-- prompted know the new URL file     
    202-- accept and deal with, but the process is not completed
    203-- return uncertain or incomplete information
    204-- requests received, but returned information is null
    205-- server completes the request, the user agent must reset the current document has been visited
    206-- server has completed GET request some users
 
    300-- resource request may be obtained in many
    301-- deletion request data
    302-- address found in other requested data
    303-- advise clients to access the URL or other access methods
    304-- client has performed a GET, but the file does not change
    305-- resources must be requested from the server specified address
    306-- HTTP previous version of code used in the current version is no longer in use
    307-- stated delete temporary resource request
 
    400-- Bad Request, such as syntax errors
    401-- request authorization failed
    402-- effective retention head in response ChargeTo
    403-- request is not allowed
    404-- not find the file, query or URl
    405-- method does not allow the user fields defined in Request-Line
    406-- according to Accept sent by the user to drag, the requested resource is not accessible
    407-- similar 401, the user must first be authorized on the proxy server
    408-- client request is not completed within a user-specified time hungry
    409-- on the current status of the resource, the request can not be completed
    410-- no longer have this resource on the server and no further reference address
    411-- server denies the user-defined attribute request Content-Length
    412-- request one or more header fields in the current request error
    413-- resource request is larger than the size allowed by the server
    414-- resources requested URL is longer than the length allowed by the server
    415-- requested resource request is not supported project format
    416-- request request including a Range header field is not within the range value indicating the current request resources, the request does not comprise Request If-Range header field
    417-- server does not meet a desired value specified by the request Expect header field, if a proxy server may be a server can not satisfy the request
 
    500-- generate an internal server error
    501-- server does not support the requested function
    502-- server is temporarily unavailable, and sometimes to prevent system overload
    503-- server overload or suspend service
    504-- overload mark, use another gateway server in response to a user or service, set a longer waiting time value
    505-- server does not support or refuses to support the specified HTTP request header version
 
These are some of you in my learning summary ajax process, if there is understanding not in place to welcome everyone said.

Guess you like

Origin www.cnblogs.com/lxylhj/p/11563746.html