Native Ajax and encapsulated Ajax use methods

When we do not write back-end interfaces to test Ajax, we can use the node environment to emulate a backend interface.

1, the analog back-end interface can refer to the Http://www.cnblogs.com/heyujun-/p/6793900.html site development Small example, in the Open command window and go to the project folder under the command line to enter NPM Install Express- -save, install Express middleware.

2, the contents of the App.js in exchange for

var express=require (' Express ');//var path=require (' path '); var app=express ();//app.set (' View ', Path.join (__dirname, ' views ')); Search all templates in the Views directory app.engine (' HTML ', require (' Ejs '). __express);  Let Ejs be able to identify files with the suffix '. html '  or   app.engine ("HTML", Require ("Ejs") renderfile); App.set (' View engine ', ' html '); /You can automatically add the '. html ' suffix to the render function when it is called. If there is no second sentence, we have to write Res.render (' users ') as Res.render (' users.html '), otherwise the error will be Var service=require ('./webservice/service.js '); App.use ('/public ', express.static (' public ')), App.get ('/', function (req,res) {  ///route HTTP GET request to a special path with special callback. Res.render (' index ');}); App.get ('/ajax/index ', function (req,res) {   //created an analog back-end Interface res.send (Service.get_index_data ());}); * If the path is not found, return 404 error page */app.use (function (req,res,next) {var err=new error (' This page is not found '); Err.status=404;next (err );}); App.listen (3003);  //Enter localhost:3003 in the browser to browse

3. Index.json Content

{"Items": "Express is a minimalist, entirely a web development framework consisting of Routing and middleware: In essence, an express application is invoking a variety of middleware." The middleware (middleware) is a function that accesses the request object (req), the Response object (Response object (res)), and the middleware in the Web application that is in the request-response loop process, which is generally named The next variable. "}

4. Index.html Content

. content-box{width:400px;} #text {padding:0px 10px;width:400px;height:300px;}

5. HTML structure

6. Native Ajax notation
Window.onload=function () {function clickbtn () {var request;if (window. XMLHttpRequest) {request=new xmlhttprequest ();  New XMLHttpRequest Object}else{request=new activexobject (' microsoft.xmlhttp ');  Compatible with Ie}request.open (' GET ', '/ajax/index ', true); Request.onreadystatechange=function () {   //The function is called back if the state changes ( request.readystate===4) {  //successfully completed if (request.status===200) {var text=request.responsetext;//succeeded, Get the text document.getElementById (' text ') of the response via ResponseText. Value=text;} Else{var Err=fail (Response.Status);//failure, based on response code to determine the reason for failure alert (ERR);}} else{//HTTP request continues ...}} The last call to the Send () method actually sends the request Request.send (), and the//post request requires the body part to be passed in as a string or Formdata object}document.getelementbyid (' Btnchange '). ONCLICK=CLICKBTN;}
or jquery notation
$ (document). Ready (function () {$ (' #btnchange '). Click (function () {$.ajax ({type: "GET", url: "/ajax/index", DataType: " JSON ", success:function (data) {$ (' #text '). val (data);}});});
Browse after running in browser input localhost:3003
Click for a change, the page does not refresh, the box content changes
This is how the native Ajax and encapsulated AJAX usage is implemented.
Native Ajax and encapsulated Ajax use methods