Since using the shh2 MVC pattern, I like to build an MVC pattern for everything. According to the MVC Architecture, it is indeed good.
Implement the MVC mode in Ajax:
M (model): Act as an object that represents the response from the server. The model reads data from the server in a complex manner and notifies the Controller to update the data (usually acted by the responsetext or responsexml of the XMLHTTPRequest object)
V (View): it is usually played by DOM elements on HTML pages. These elements are used to display data in the model and allow users to trigger events to drive events.
C (control layer): a js event handler function is used to control the events in the response view and dynamically load model changes to the HTML page.
To maintain a good MVC Architecture for Ajax, we usually follow the following rules:
1. Write the JS script in A. js file separately, and then introduce it on the required page.
2. do not bind the event handler function to the element attribute of the HTML page, that is, do not add events such as onclick to the element attribute, but bind them to the JS Code, that is, it is bound to the attributes of the DOM object.
3. write the script for dynamically updating the HTML page executed in the callback function into a js method, instead of directly writing it to the event processing function.
The following code demonstrates a simple implementation of MVC:
Page:
<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en"> <HTML>JS: For detailed processing of XMLHttpRequest, see http://www.cnblogs.com/shenliang123/archive/2012/05/13/2498524.html
// Create the XMLHTTPRequest object var objxmlhttp; function createxmlhttprequest () {If (window. XMLHttpRequest) {objxmlhttp = new XMLHttpRequest ();} else {var MSXML = ['msxml2. xmlhttp.5.0 ', 'msxml2. xmlhttp.4.0 ', 'msxml2. xmlhttp.3.0 ', 'msxml2. XMLHTTP ', 'Microsoft. XMLHTTP ']; for (VAR I = 0; n <MSXML. length; I ++) {try {objxmlhttp = new activexobject (MSXML [I]); break;} catch (E) {alert ("failed to create XMLHTTPRequest object") ;}}// bind event handler document to test. getelementbyid ("test "). onclick = sendrequest; function sendrequest () {createxmlhttprequest (); alert (objxmlhttp); var url = "mvcservlet"; objxmlhttp. open ("Post", URL, true); // sets the message request header objxmlhttp. setRequestHeader ("Content-Type", "application/X-WWW-form-urlencoded"); // specify the response function objxmlhttp. onreadystatechange = process; // send the request objxmlhttp. send (null);}/*** process () is the controller function */function process () {If (objxmlhttp. readystate = 4) {If (objxmlhttp. status = 200) {// call the view function instead of writing it directly in the control function show (objxmlhttp. responsetext) ;}}/ *** view function */function show (content) {document. getelementbyid ("show "). innerhtml = content ;}Mvcservlet:
Package xidian. SL. ajax; import Java. io. ioexception; import Java. io. printwriter; import javax. servlet. servletexception; import javax. servlet. HTTP. httpservlet; import javax. servlet. HTTP. httpservletrequest; import javax. servlet. HTTP. extends; public class mvcservlet extends httpservlet {public void doget (httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {doget (request, response);} public void dopost (httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {response. setcontenttype ("text/html"); Request. setcharacterencoding ("UTF-8"); response. setcharacterencoding ("UTF-8"); printwriter out = response. getwriter (); out. print ("I am writing a blog in the blog Park ");}}
Detailed design ideas
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
