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:
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