1. Client and Server
1.1 Server
In the process of surfing the Internet, the computer responsible for storing and providing resources to the outside world is called a server.
1.2 Client
In the process of surfing the Internet, the computer responsible for acquiring and consuming resources is called the client.
2.URL address
2.1 The concept of URL address
The Chinese name of URL is Uniform Resource Locator, which is used to represent the unique storage location of each resource on the Internet. Only through the URL address, the browser can correctly locate the storage location of the resource, so as to successfully access the corresponding resource
2.2 Components of URL Addresses
A URL address generally consists of three parts:
- Communication protocol between client and server
- The name of the server where the resource is stored
- The specific storage location of the resource on the server
3. Communication process between client and server
3.1 Illustrate the communication process between the client and the server
Note: 1. The communication process between the client and the server is divided into three steps: request-processing-response
2. Every resource in the web page is obtained from the server through request-processing-response
4. What resources does the server provide externally
4.1 Data is also a resource
The data in the web page is also a resource provided by the server to the outside world.
4.2 How to request data in web pages
Data is also a resource provided by the server to the outside world. As long as it is a resource, it must be obtained through a request-processing-response method.
If you want to request data resources on the server in a web page, you need to use the XMLHttpRequest object
XMLHttpRequest (referred to as xhr) is a js member provided by the browser, through which data resources on the server can be requested.
Simplest usage: var xhrObj=new XMLHttpRequest()
4.3 How to request resources
When a client requests a server, there are many ways of requesting, and the two most common request ways are get and post requests.
-
The get request is usually used to obtain server-side resources (require resources from the server-side)
For example: Obtain HTML files, css files, js files, image files, data resources, etc. from the server according to the URL address
-
post requests are usually used to submit data to the server (send resources to the server)
For example, login is various data submission operations such as login information submitted to the server, registration information submitted to the server when registering, user information submitted to the server when adding a user, etc.
5. Understand Ajax
5.1 What is Ajax
Ajax (Asynchronous Javascript and XML). Popular understanding: the way to use the XMLHttpRequest object to interact with the server in the web page is Ajax
5.2 Typical application scenarios of Ajax
1. Username detection: When registering a user, dynamically monitor whether the username is occupied by means of Ajax
2. Search hints: When entering search keywords, the list of search hints is dynamically loaded in the form of ajax
3. Paging display of data: when the page number value is clicked, the data of the table is dynamically refreshed according to the page number value in the form of Ajax
4. Data addition, deletion, modification, and query: data addition, deletion, access, query, and operation all need to use the form of Ajax to realize data interaction
6. Ajax in jQuery
The three most common ways to initiate Ajax requests in jQuery are as follows:
- $.get()
- $.post()
- $.ajax()
6.1 $.get() function
1. Grammar
The $.get() function in jQuery has a single function and is specially used to initiate a get request, so as to request resources on the server to the client for use.
The syntax of $.get() is as follows:
$.get(url, [data], [callback]);
2. $.get() initiates a request without parameters
When using the $.get() function to initiate a request without parameters, you can directly provide the requested URL address and the callback function after the request is successful. The sample code is as follows:
$.get('http://www.liulongbin.top:3006/api/getbooks',function(res) { console.log(res);//Here res is the data returned by the server })
3. $.get() initiates a request with parameters
Use the $.get() function to initiate a request with parameters, the sample code is as follows:
//Request information with id 1 $.get('http://www.liulongbin.top:3006/api/getbooks',{id:1},function(res) { console.log(res);//Here res is the data returned by the server })
6.2 $.post() function
1. Grammar
The syntax of $.post() is as follows:
$.post(url, [data], [callback]);
2. $.post() submits data to the server
Use the $.post() function to submit data to the server, the sample code is as follows:
$.post('http://www.liulongbin.top:3006/api/addbook',{bookname:'Water Margin',author:'Shi Naian',publisher:'Shanghai Book Publishing House'},function(res) { console.log(res); })
6.3 $.ajax() function
1. Grammar
$.ajax({ type:'',//The method of the request, such as GET or POST url:'', //the requested url address data:{ },//The data to be carried in this request success:function(res) { }//Callback function after successful request })
2. Use $.ajax() to initiate a GET request
When using $.ajax() to initiate a GET request, simply set the value of the type attribute to 'GET':
$.ajax({ type:'GET',//way of request url:'http://www.liulongbin.top:3006/api/getbooks',//The requested url address data:{id:1},//The data to be carried in this request success:function(res) {//Callback function after successful request console.log(res); } })
3. Use $.ajax() to initiate a POST request
When using $.ajax() to initiate a POST request, simply set the value of the type attribute to 'POST':
$.ajax({ type:'POST',//way of request url:'http://www.liulongbin.top:3006/api/addbook',//The requested url address data:{ bookname:'bbh', author:'Shi Nai'an', publisher:'Shanghai Book Publishing House' },//data to submit to the server success:function(res) {//Callback function after successful request console.log(res); } })
7. Interface
7.1 The concept of interface
When using Ajax to request data, the requested URL address is called the data interface (referred to as the interface). At the same time, each interface must have a request method.
E.g:
http://www.liulongbin.top:3006/api/getbooks Interface to get book list (GET request)
http://www.liulongbin.top:3006/api/addbook Add book interface (POST request)
7.2 Analyze the request process of the interface
1. The process of requesting the interface through GET
2. The process of requesting the interface through POST
7.3 Interface Documentation
1. What is an interface document
The interface document, as the name suggests, is the description document of the interface, which is the basis for us to call the interface. A good interface document contains the description of the interface URL, parameters and output content. We can easily guide the function of the interface and how to call the interface by referring to the interface document.
2. Components of the interface documentation
An interface document can contain a lot of information, and can also be simplified as needed. However, a qualified interface document should contain the following six contents, which provide the basis for the interface invocation:
- Interface name: a simple description used to indicate each interface, such as: login interface, book list access interface, etc.
- Interface URL: the calling address of the interface
- Calling method: the calling method of the interface, such as: GET, POST
- Parameter format: The parameters that the interface needs to pass, each parameter must contain the parameter name, parameter type, whether it is required, and parameter description.
- Response format: a detailed description of the return value of the interface, generally including data name, data type, and data description 3 items
- Return example (optional): In the form of an object, exemplify the structure of the data returned by the server
8. Basic use of form forms
8.1 What is a form
The form is mainly responsible for the data collection function in the web page. The tags in HTML are used to collect the information input by the user, and submit the collected information to the server for processing through the submission operation of the tags.
8.2 Components of a form
A form consists of three basic parts:
- form tag
- Form fields: Contains text boxes, password boxes, hidden fields, multi-line text boxes, check boxes, radio boxes, drop-down selection boxes, and file upload boxes, etc.
- form button
8.3 Attributes of the form tag
Tags are used to collect data, and attributes of tags are used to specify How to send the collected data to the server.Attributes | value | describe |
---|---|---|
action | URL address | Specifies where to send form data when the form is submitted |
method | get or post | Specifies how to submit form data to the action URL |
enctype | application/x-www-form-urlencoded multipart/form-data text/plain | Specifies how to encode form data before sending it |
target | _blank _self _parent _top framename | Specifies where to open the action URL |
1.action
The action attribute is used to specify where to send the form data when the form is submitted
The value of the action attribute should be a URL address provided by the backend, which is responsible for accepting the data submitted by the form
When the form does not specify the action attribute, the default value of the action is the URL address of the current page
Note: When the form is submitted, the page will immediately jump to the URL address specified by the action attribute
2.target
The target attribute is used to specify where to open the actionURL.
There are 5 optional values. By default, the value of target is _self, which means that the action URL is opened in the same frame.
value | describe |
---|---|
_blank | Open in new window. |
_self | default. Open in the same frame. |
_parent | Open in the parent frameset. (Rarely used) |
_top | Open in the whole window. (Rarely used) |
framename | Open in the specified frame. (Rarely used) |
3.method
The method attribute is used to specify how the form data is submitted to the action URL
It has two optional values, namely get and post
By default, the value of method is get, which means that the form data is submitted to the action URL in the form of a URL address.
Notice:
The get method is suitable for submitting a small amount of simple data.
The post method is suitable for submitting large, complex, or including file upload data.
In actual development, the form's post submission method is used the most, and get is rarely used. For example, form operations such as login, registration, and adding data need to use the post method to submit the form.
4.enctype
The enctype attribute is used to specify how the form data should be encoded before sending it.
It has three optional values. By default, the value of enctype is application/x-www-form-urlencoded, which means that all characters are encoded before sending.
value | describe |
---|---|
application/x-www-form-urlencoded | Encode all characters before sending (default) |
multipart/form-data | Does not encode characters. This value is required when using a form that contains a file upload control. |
text/plain | Spaces are converted to "+" plus signs, but special characters are not encoded. (Rarely used) |
Notice:
When it comes to file upload operations, the value of enctype must be set to multipart/form-data
If the form submission does not involve a file upload operation, simply set the value of enctype to application/x-www-form-urlencoded !
8.4 Synchronous submission of forms and disadvantages
1. What is synchronous submission of forms
By clicking the submit button, the form submission operation is triggered, so that the page jumps to the action URL, which is called synchronous submission of the form
2. Disadvantages of synchronous submission of forms
- 1. After the form is submitted synchronously, the entire page will jump to the address pointed to by the action URL, and the user experience is very poor
- 2. After the form is submitted synchronously, the previous state and data of the page will be lost
3. Solve the shortcomings of form synchronous submission
Solution: The form is only responsible for collecting data, and Ajax is responsible for submitting the data to the server
9. Submit form data via Ajax
9.1 Listen to the form submit event
In jQuery, you can use the following two ways to listen to the submit event of the form:
$('#form1').submit(function(e) { alert('Listening to the submit event of the form') }) $('#form1').on('submit', function(e) { alert('Listening to the submit event of the form') })
9.2 Prevent the default submit behavior of forms
After listening to the submission event of the form, you can call the event.preventDefault() function of the event object to prevent the submission of the form and the jump of the page. The sample code is as follows:
$('#form1').submit(function(e) { // Prevent form submission and page jumping e.preventDefault() }) $('#form1').on('submit', function(e) { // Prevent form submission and page jumping e.preventDefault() })
9.3 Quickly get the data in the form
1.serialize() function
In order to simplify the data acquisition operation in the form, jQuery provides the serialize() function whose syntax is as follows:
$(selector).serialize()
The advantage of the serialize() function: you can get all the data in the form at one time
2.serialize() function example
<form id="form1"> <input type="text" name="username" /> <input type="password" name="password" /> <button type="submit">submit</button> </form> $('#form1').serialize() // The result of the call: // username=value of username&password=value of password
Note: When using the serialize() function to quickly get form data, you must add a name attribute to each form element!
10. Basic Concepts of Template Engines
10.1 Problems encountered when rendering UI structures
var rows=[]; $.each(res.data,function(i,item) { rows.push('<li class="list-group-item">'+item.content +'<span class="badge cmt-date">Comment time:' +item.time+'</span><span class="badge cmt-person">Commentator:' +item.username+'</span></li>') }) $('#cmt-list').empty().append(rows.join(''))//The UI structure of the rendering list
The above code renders the UI structure in the form of string splicing
If the UI structure is complex, you need to pay special attention to the nesting between quotation marks when splicing strings, and once the requirements change, it is very troublesome to modify
10.2 What is a template engine
The template engine, as the name suggests, can automatically generate a complete HTML page according to the template structure and data specified by the programmer
10.3 Benefits of Template Engines
- Reduced string concatenation operations
- Make the code structure clear
- Make code easier to read and maintain
11.art-template template engine
11.1 Usage steps
- import art-template
- define data
- define template
- call template function
11.2 art-template standard syntax
1. What is standard syntax
art-template provides a syntax format of {{ }}. In {{ }}, you can perform variable output, or loop array operations. This {{ }} syntax is called standard syntax in art-template.
2. Standard syntax - output
{{value}}
{{obj.key}}
{{obj['key']}}
{{a?b:c}}
{{a||b}}
{{a+b}}
In the {{ }} syntax, variable output, object property output, ternary expression output, logical OR output, addition, subtraction, multiplication and division can be output by expressions such as
3. Standard syntax - original text output
{{@ value}}
If the value to be output contains the HTML tag structure, you need to use the original text output to ensure that the HTML tag is rendered normally.
4. Standard syntax - conditional output
If you want to achieve conditional output, you can use if ... else if ... /if in {{ }} to output on demand
{{if value}} output on demand {{/if}}
{{if v1}}On-demand output{{else if v2}}On-demand output{{/if}}
5. Standard syntax - loop output
If you want to achieve loop output, you can loop the array through the each statement within {{ }}, the index of the current loop is accessed using $ index, and the current loop item is accessed using $ value
{{each}} {{$index}} {{$value}} {{/each}}
6. Standard Syntax - Filter
The essence of the filter is a function handler
{{value | filterName}}
The filter syntax is similar to the pipe operator, its previous output is used as the next input
Basic syntax for defining filters:
template.defaults.imports.filterName = function(value) { /* return the result of processing */ }
E.g:
12. Implementation principle of template engine
12.1 Regular and String Operations
1. Basic grammar
The exec() function is used to retrieve the match of the regular expression in the string, if there is a matching value in the string, it returns the matching value, otherwise it returns null
RegExpObject.exec(string)
The sample code is as follows:
var str = 'hello' var pattern = /o/ // Output result["o", index: 4, input: "hello", groups: undefined] console.log(pattern.exec(str))
2. Grouping
The content enclosed by ( ) in the regular expression represents a group, and you can extract the content you want by grouping. The sample code is as follows:
var str = '<div>I'm{{name}}</div>' var pattern = /{{([a-zA-Z]+)}}/ var patternResult = pattern.exec(str) console.log(patternResult) // Get group information related to name // ["{{name}}", "name", index: 7, input: "<div>I am {{name}}</div>", groups: undefined]
3. String replace function
The replace() function is used to replace some characters with other characters in a string. The syntax is as follows:
var result = '123456'.replace('123', 'abc') // The value of result obtained is the string 'abc456'
4. Multiple replace ments
var str = '<div>{{name}}This year{{ age }}Years old</div>' var pattern = /{{\s*([a-zA-Z]+)\s*}}/ var patternResult = pattern.exec(str) str = str.replace(patternResult[0], patternResult[1]) console.log(str) // Output <div>name is {{ age }} this year</div> patternResult = pattern.exec(str) str = str.replace(patternResult[0], patternResult[1]) console.log(str) // Output <div>name is age this year</div> patternResult = pattern.exec(str) console.log(patternResult) // output null
5. Use a while loop to replace
var str = '<div>{{name}}This year{{ age }}Years old</div>' var pattern = /{{\s*([a-zA-Z]+)\s*}}/ var patternResult = null while(patternResult = pattern.exec(str)) { str = str.replace(patternResult[0], patternResult[1]) } console.log(str) // Output <div>name is age this year</div>
6.replace with true value
var data = { name: 'Zhang San', age: 20 } var str = '<div>{{name}}This year{{ age }}Years old</div>' var pattern = /{{\s*([a-zA-Z]+)\s*}}/ var patternResult = null while ((patternResult = pattern.exec(str))) { str = str.replace(patternResult[0], data[patternResult[1]]) } console.log(str)
12.2 Implementing a Simple Template Engine
1. Implementation steps
- Define template structure
- Pre-invoked template engine
- Encapsulate template function
- Import and use a custom template engine
2. Define the template structure
<!-- Define template structure --> <script type="text/html" id="tpl-user"> <div>Name:{{name}}</div> <div>age:{{ age }}</div> <div>gender:{{ gender}}</div> <div>address:{{address }}</div> </script>
3. Pre-call template engine
<script> // define data var data = { name: 'zs', age: 28, gender: 'male', address: 'Mapo, Shunyi, Beijing' } // call template function var htmlStr = template('tpl-user', data) // Render HTML structure document.getElementById('user-box').innerHTML = htmlStr </script>
4. Encapsulate the template function
function template(id, data) { var str = document.getElementById(id).innerHTML var pattern = /{{\s*([a-zA-Z]+)\s*}}/ var pattResult = null while ((pattResult = pattern.exec(str))) { str = str.replace(pattResult[0], data[pattResult[1]]) } return str }