AJAX JS DOM front and back interactions Detailed steps hand in hand (graphic)

Front- and back-office interaction steps

I. Build the background

1. Create the project directory basepro

2. Create a static folder in the project directory public

3. Installation of dependencies

First of all this generates apackage.json configuration file and add the appropriate version information in it, so that when you run the program later, the installation dependency package can be directlynpm install xxx

Next, install npm installexpressThe node_modules directory is created in the project directory and all dependent packages are added to that directory.

4. Create the entry file that serves as the project's entry point for the creation of application objects

- Introduction of express

- Creating a WEB server

- Listening on port 8080

- Hosting static resources . /public file

- Create a route for a get method request and look at the parameters and give the return value

- Parses the form's data in url-encoded format.

- Creates a route for post requests and looks at the parameters and gives a return value.

- Create a route for a put method request and look at the parameters and give the return value

- Create a route for delet mode requests and look at the parameters and give the return value

5. Operation

// Type npm install express in a terminal in the current directory to install the



//1. Introducing express




var express = require('express');



//2. Create the web server, instantiate it




var app = express();



//3. Setting the port



app.listen(8080);



/* 4. Static Resource Managed() takes the static resource's



directory into the parameter, it is not necessary to have only this one file directory to host, the



It's not the only directory where you can */



app.use(express.static('./public'));



//5. Start the server node in the terminal



/ / 6. to the foreground an interface address, because the foreground send request with the get, background interactive data, also with the get



//address path (string format)



//Receive foreground? mode passed parameters



app.get('/getpar1',(req,res)=>{



    console.log(req.query)



})



 



// The address of the interface that receives the post method



The format passed via urlencoded needs to be parsed separately before //receiving it



app.use(express.urlencoded({extended:false}))



app.post('/ajaxpost',(req,res)=>{



    console.log(req.body)



    res.send('post method return value')



})



 



// Receive the interface address of the put method



app.put('/ajaxput',(req,res)=>{



    console.log(req.body);



    res.send('put method return value');



})



 



// Receive the interface address of the delete method.



app.delete('/ajaxdel/:names',(req,res)=>{



    console.log(req.params);



    res.send('delete method return value')



})

II. Browser requests

way (of life)

<script>




    //1. Create xhr object





var xhr = new XMLHttpRequest();



//4. Originally received data, now by listening to determine the value of readyState, for 4 when the receipt came back



xhr.onreadystatechange = function () {



    //()




    //Determine if readyState is 4 before you can get the backend data.




    if (xhr.readyState == 4) {



        //Determine the success of the return content, and then receive data




        if (xhr.status >= 200 && xhr.status < 300) {



            var result = xhr.responseText;



            console.log(result);



        }



    }



}



// 2. Setting up request information



xhr.open('get','/getpar1?names=Zhang San & pwd=123456',true);



//3. Send a request (the format of sending a request varies from method to method)



//get method is directly () parameter can be omitted, also (null)



xhr.send();



</script>

way (of life)

//1. Create asynchronous objects




var xhr =new XMLHttpRequest();



//4. Listening and returning values



xhr.onreadystatechange=function(){



    //Judge readyState==4




    if(xhr.readyState ==4){



        //Judgment status code




        if(xhr.status>=200 && xhr.status<300){



            //Receive the return content




            var result=xhr.responseText;



            console.log(result);



        }



    }



}



//2. Setting up request information



xhr.open('post','/ajaxpost',true);



The data format of the passed parameters must be specified before sending in //post mode.



//Set the request header to specify how the request parameters are parsed before passing the data.



xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");



//3. Send request



xhr.send('names=bob & pwd=333');



 // Browser access to http://localhost:8080/

way (of life)

var a='tom';




var b='lili';



//1. Create asynchronous objects




var xhr=new XMLHttpRequest();



//4. Listening for return values



xhr.onreadystatechange=function(){



    //Judgment




    if(xhr.readyState==4){



        if(xhr.status>=200 && xhr.status<300){



            //Receive the return content




            var result=xhr.responseText;



            console.log(result);



        }



    }



}



//2. Setting up request information



xhr.open('put','/ajaxput',true);



// Request header



xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');



//3. Send request



xhr.send(`names=${b} & oldname=${a}`);

 way (of life)

var username='Wang Wu';



//1. Create asynchronous objects




var xhr=new XMLHttpRequest();



//4. Listening and returning values



xhr.onreadystatechange=function(){



    if(xhr.readyState==4){



        if(xhr.status>=200 & xhr.status<300){



            var result=xhr.responseText;



            console.log(result);



        }



    }



}



//2. Setting up request information



xhr.open('delete',`/ajaxdel/${username}`,true);



//3. Send request



xhr.send();

4. Avoid icon mistakes

<link rel="shortcut icon" href="#" />

III. DOM

brief description

DOM full name Document Object Model, that is, the documentobject modelIt allows scripts (js) to control Web pages, windows, and documents.

In a nutshell.Use js to dynamically manipulateAll elements within the browser window.

2. DOM Basic Functions

- Query an element

- Query the ancestor, brother, and descendant elements of an element

- Getting and modifying attributes of an element

- Getting and modifying the content of an element

- Creating, inserting and deleting elements

Simply put, it's the addition, deletion, and alteration of page elements.

II. Manipulation of elements (application section)

1. Get the element by its id.

`()`Write the id name of the element parameter lookup by id attribute in the document.

```js

//Get the whole of the html element whose id is called myDiv.

var myDiv = ('myDiv');

In browsers that can support ES6, you can get the element object in a shorthand way. The id value is used directly to refer to the current element object.

2. Events - interacting with elements

It is possible to bind `onclick, onmouseover, onmouseout, onmousedown, onmouseup, ondblclick, onkeydown, onkeyup`, etc. to DOM elements.JavaScript Ability to execute on an event as it occurs.

(1) Bind events directly in DOM

Setting event properties and binding methods directly in the tag completes the interaction.

html：

<input type="button" value="Click me." onclick="hello(1)" />




<script>




    function hello(a) {



        alert('hello world!');



    }



</script>

(2) Binding Events in JavaScript Code

You can fetch an element via js, bind events related to the fetched element in js, and call thefunction (math.)Handle event functions.

js：

var btn = document.getElementById('mybtn');



btn.onclick = function () {



    alert('hello');



};

3. Get/Set the content of the element innerHTML

Gets/Sets the content of the element.

innerHTML is a two-way function in JS: getting the content of an object or inserting content into an object.

html：

<div id="myDiv">div element</div>





<script>




    var myDiv = document.getElementById('myDiv');



    myDiv.innerHTML = '<p> an element </p>';



</script>

- This can be achieved by `("myDiv").innerHTML` to get the inline content of the object whose `id` is `myDiv`;

-It is also possible to insert content to an object, such as `("myDiv").innerHTML='This is the inserted content';` This inserts content into the object with id myDiv.

4. Getting the value

The value attribute of an element can be used to directly retrieve the value of an element that has a value attribute. It is used in most cases to retrieve form-related elements.

html：

<input type="text" id="nn" />



<input type="button" value="Get." οnclick="print()" />




<script>




    var a = document.getElementById('nn');



    // Getting values through events




    function print() {alert(a.value);}



</script>

Exercise: fine-tuning

> put a text input box, a password input box, and a button on the page

> Get two input box elements and a button element using js

> Clicking on the button element triggers the click event, which gets the contents of the text input box and the password input box, and is viewed in the console.

> create two p tags, use js to get two p elements

> Display the user name and password entered by the user on the page.

01_get.html code:

<body>



    Users:<input type="text" id="uname"><br>




    Password:<input type="text" id="upwd"><br>




    <button onclick="ajax()">log in</button>




    <script>




        ajax();



        function ajax() {



            //1. Create xhr object




            var xhr = new XMLHttpRequest();



            //4. Originally received data, now by listening to determine the value of readyState, for 4 when the receipt came back




            xhr.onreadystatechange = function () {



                //()




                //Determine if readyState is 4 before you can get the backend data.




                if (xhr.readyState == 4) {



                    //Determine the success of the return content, and then receive data




                    if (xhr.status >= 200 && xhr.status < 300) {



                        var result = xhr.responseText;



                        console.log(result);



                    }



                }



            }



            var myname=uname.value;



            var mypwd=upwd.value;



            // 2. Setting up request information




            xhr.open('get','/getpar1?names='+myname+'&pwd='+mypwd,true);



            //3. Send a request (the format of sending a request varies from method to method)




            //get method is directly () parameter can be omitted, also (null)




            xhr.send();



        }



    </script>




</body>

 Code:

// Type npm install express in a terminal in the current directory to install the



//1. Introducing express




var express = require('express');



//2. Create the web server, instantiate it




var app = express();



//3. Setting the port



app.listen(8080);



/* 4. Static Resource Managed() takes the static resource's



directory into the parameter, it is not necessary to have only this one file directory to host, the



It's not the only directory where you can */



app.use(express.static('./public'));



//5. Start the server node in the terminal



//Receive foreground? mode passed parameters



app.get('/getpar1',(req,res)=>{



    console.log(req.query)



})

 

 Enter 127.0.0.1:8080/01_get.html in the browser, enter the user password information, and click Login.

 

The backend gets the data:

5. Clearing of extra spaces - trim() method

- The `trim()` method is used to remove the "first and last" blank characters of a string, including: spaces, tabs, newlines and other blank characters.

- The `trim()` method does not change the original string.

- The `trim()` method does not apply to null, undefined, Number types.

var str = '  hello   ';




alert(str.trim());

Methods for non-empty validation

var str1 = '   ';




var str2 = ''





var str3 = ' tom ';




function notEmpty(s){



    var nstr = s.trim();



    return nstr.length;



}




notEmpty(str1)




notEmpty(str2)




notEmpty(str3)

'

(of a computer) run
(of a computer) run