Ajax-url-http protocol-Cache-dom operations-html element events

1.URL
The role of 1.URL
The location used to represent any one resource (on the Internet).

Protocol + host name + file directory structure + file name
2. Detailed
Format:
<scheme>://<user>:<pwd>@Scheme: scheme, protocol, how to get resources to server, protocol is case-insensitive, common protocol: HTTP,HTTPS,FTP
User: Username
PWD: Password
Host: hostname localhost
Port: Ports
Path: The location where the resource resides on the server
Params: Parameters
Query: Queries string, data to be passed to the service
Http:127.0.0.1/update.php?uid=1&uname=dangdang&upwd=123
Frag: Anchor Point
Http://127.0.0.1/a.html#NO1
2.HTTP protocol
1. What is HTTP
Hyper Text Transfer Protocol: Hypertext Transfer Protocol.
The specification of how data is packaged and delivered.
2. History
History
Active Version: http/1.1
3. Detailed
1. Request message
What information the client brings to the server, consisting of three parts: request start line, request header, request Principal
1. Request Start line
1. Request method
1.GET
Indicates that the client obtains server resources using the
Characteristics:
1. No request body
2. Passing the query string by the address bar
2.POST
Indicates that you want to pass data to the server using
Features: Request subject
3.DELETE indicates that the client wants to delete server data (typically disabled)
4.PUT indicates that the client wants to place the file to the server
5.HEAD indicates that the client only wants to get the specified response header
6.CONNECT Test Connection
7.TRACE Trace Request Path
8.OPTIONS option, reserved for later use
2. Request URL
3. Protocol version http/1.1
2. Request Header
1.host:localhost
Role: Tell the server which host to request
2.connection:keep-alive
Role: Tells the server to make a persistent connection.
3.user-agent:
Role: Tell the server the type of itself (browser).
4.accept-language:zh-cn
Function: tells the server which natural language to receive.
5.accept-encoding:gzip
Role: Tells the server what type of data compression it can receive.
6.referer:http://127.0.0.1/login.html
Role: tells the server which page to request from.
3. Request Body
Form Data

2. Response (Response) message
1. Response Start line
1. Protocol version: http/1.1
2. Status code of the response
Role: Tell the browser what the server's response status is.
1xx:100-199, prompting information
2XX: Successful response
200:ok
3XX: Redirect Required
301: Permanent Redirection
302: Temporary redirection
304:not Modified (Request not modified, hit cache)
4XX: Client Request Error
404:not found request resource does not exist
403:forbidden Insufficient Authority
405:method not allowed request method is not allowed
5XX: Server Run Error
500: Server Internal Error
3. Reason
A simple explanation of the state
2. Response header
1.Date
Function: Tells the browser, the response time of the server (Greenwich)
2.Connection
Role: tells the browser that a persistent connection has been started
3.content-type:
What is the type of response body that tells the browser what way to parse the response body.
1.text/html: The data returned by the response is HTML text
2.text/plain: Response back data is plain text
3.TEXT/CSS: Response back data is CSS style
4.application/javascript: The response back data is JS file
5.application/xml: The response back data is an XML format string
6.application/json: Response back data is a JSON format string
7.image/jpeg: The response back to the data is the picture

3. Response body
Response
3. Caching
1. What is a cache
The client automatically saves the data that the server responds to, and uses the saved data directly when it is accessed again.
2. Benefits of Caching
1. Reduce the transmission of redundant data, save the client's traffic
2. Can save server bandwidth
3. Reduce the consumption and operational requirements of server resources
4. Reduced delay loading due to long distance
3. Message headers associated with the cache
1.cache-control message Header
Role: This document is in fresh seconds from the time the server passes the document to the client
Syntax: cache-control:max-age= in a fresh number of seconds
Ex
cache-control:max-age=3600;
2.Expires message Header
Role: Specify the exact time that the cache expires
Syntax: Expires:thu,23,nov 07:00:00 GMT

4. Set the message header in the Web page
Html:
<meta http-equiv= "message header" content= "value" >
Ex
<meta http-equiv= "Cache-control" content= "max-age=3600" >
4.DOM operation
1. The complete composition of JavaScript
1.JS Core: ECMAScript
2.dom:document Object Model
Document Object Model
Let JS dynamically manipulate the elements of the page
3.bom:browser Object Model
Browser Object Model
Let JS dynamic operation of the browser
2. Use JS to get an element on the page
In JS, the element's ID is allowed to get the specified element of the page
var Ele=document.getelementbyid ("Element id");
Practice:
1. Create a div in the Web page and define the ID value, the contents of the Div are arbitrary
2. Create a button on the page, click on the div element to get it out and print it in the console and observe the results.
3. Get/Set the contents of the element
A property of the DOM object: InnerHTML
All content in the label is represented
Practice:
1. Create a new paragraph element on the page, set the ID to P1, and the content is arbitrary.
2. Add a button to the page, click to get the text in the P element, and print it in the console.
3. Add a button and, when clicked, set the text in the P element to "This is my first DOM action".
4. Get/Set data for form controls
In the DOM, form controls get/set values through the Value property of the DOM object.
Steps:
1. Get form controls by ID
2. Get/Set the value of the control through the Value property
Practice:
The page creates a text box with ID uname, creates a DIV element with id d1, adds a button to the page, and when you click the button, the data in the text box is displayed in the Div.
Package JS function:
1. Create a standalone JS file (with. js as the end of the file)
2. Encapsulate the $ () function in the JS file, the function receives an ID value as a parameter, and the function returns a DOM object.
3. When you click the button, call the $ () function to display the data in the text box in a div with a first-level title.
5.HTML element Events
1. What is an event
Actions that are allowed to fire through the user's behavior are events.
Common events: OnClick
2. Other events
1. text box and Password box-onblur
onblur Event: Losing focus
2. text box and Password box-onfocus
onfocus Event: Getting focus
OnLoad event for 3.body
The action to take when the page loads.

Ajax-url-http protocol-cache-dom operations-html element Events