Uses native ajax and encapsulated ajax (detailed description) to encapsulate ajax
When we do not write backend interfaces to test ajax, we can use the node environment to simulate a backend interface.
1. to simulate backend interfaces, refer to the example of website whole-site development. Open the command window and go to the project folder. Enter npm install express -- save in the command line to install express middleware.
2. Replace app. js
Var express = require ('express '); // var path = require ('path'); var app = express (); // app. set ('view', path. join (_ dirname, 'view'); // search all templates in the views directory. engine ('html ', require ('ejs '). _ express); // enables ejsto identify files suffixed with '.html 'or apps. engine ("html", require ("ejs "). renderFile); app. set ('view engine ', 'html'); // when calling render, You can automatically add the '.html' suffix to us. If there is no second sentence, we have to write res.render('users' into res.render('users.html '); otherwise, the error var service = require ('. /webService/service. js'); app. use ('/public', express. static ('public'); app. get ('/', function (req, res) {// route http get requests to special paths with special callbacks. Res. render ('index') ;}); app. get ('/ajax/Index', function (req, res) {// creates a simulated backend interface res. send (service. get_index_data () ;});/* If the path cannot be found, the 404 error page is returned */app. use (function (req, res, next) {var err = new Error ('This page 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 simple web development framework composed of routes and middleware. Essentially, an Express application calls various middleware. Middleware (Middleware) is a function that can access the request object (req), response object (res )), and the middleware in the request-response loop process of web applications, which is generally named as the next variable. "}
42.16index.html content
.content-box{ width: 400px;}#text{ padding: 0px 10px; width: 400px; height: 300px;}
5. html Structure
<H3> This is a piece of unchanged content. This is a piece of unchanged content.
6. Native ajax writing
Window. onload = function () {function clickbtn () {var request; if (window. XMLHttpRequest) {request = new XMLHttpRequest (); // create an XMLHttpRequest object} else {request = new ActiveXObject ('Microsoft. XMLHTTP '); // compatible with ie} request. open ('get', '/ajax/Index', true); request. onreadystatechange = function () {// when the status changes, the function is called back if (request. readyState = 4) {// if (request. status = 200) {var text = request. responseText; // succeeded. The response text document is obtained through responseText. getElementById ('text '). value = text;} else {var err = fail (response. status); // failed. Identify the cause of failure based on the response code alert (err) ;}} else {// The HTTP request is still ...}} // Finally, the send () method is called to actually send the request. send (); // the POST request must pass the body part in a string or FormData object.} document. getElementById ('btnchange '). onclick = clickbtn ;}
Or jquery
$(document).ready(function(){ $('#btnchange').click(function(){ $.ajax({ type:"GET", url:"/ajax/index", datatype:"json", success:function(data){ $('#text').val(data); } }); });});
Enter localhost: 3003 in the browser to view
The above ajax usage based on native ajax and encapsulation (detailed description) is all the content shared by Alibaba Cloud xiaobian. I hope you can give us a reference and support for our customer base.