Enter the URL from the address bar to render the page
1. The browser requests the URL domain name to resolve the IP address corresponding to the server.
2. Establish a TCP connection (three-way handshake).
3. The browser sends an HTTP request to read the file, third handshake issued
4. The server responds to the browser, and the corresponding HTML text to the browser
5. The HTML browser display text
6. Release TCP Connection
Establish a TCP connection, three-way handshake, waving four
Three-way handshake
1. The first handshake: client sends a SYN is set to 1, a randomly generated value seq = J, and the packet to Server, Client enters the SYN_SENT state
2. The second handshake, Server receives the packet, Server sends a SYN and ACK are set to 1, ack = J + 1; a randomly generated seq = K, issued Client, and enters the SYN_RCVD state.
3. Third: client acknowledgment is received, checks whether the ack J + 1, ACK is 1, then the correct ACK flag bit is set to 1, ack = K + 1, and the data to the Server, server checks ack whether K + 1, whether the ACK is 1, if the correct connection is established successfully.
HTTP methods, post, get
HTTP1.0 defines three request methods, GET, POST and HEAD method,
HTTP1.1 new six kinds: OPTIONS, PUT, PATCH, DELETE, TRACH, CONNECT
Form of expression: get the requested data will be appended to the URL, to? Division, multiple parameters & connect, and in ASCII, ASCII required some non-coding cacheable; POST request data in the request body, not cacheable.
Data transmission: GET request, HTTP specification of URL length is not to be limiting, but rather to limit the browser and server URL length, so that when the GET request, the transmission data is restricted;
POST URL is not traditional values, theoretically unlimited, but the server will generally POST data transfer size limit.
Security POST request body using traditional values higher security.
xss
Cross-site scripting attacks, when an attacker embedded JavaScript scripts in HTML return, in order to mitigate these attacks need coupled with set-cookie in http header: 'httponly', would prohibit access js cookie,
Attack Type: reflection,
Storage, based on DOM
Solution: httponly prevent interception cookie,
Input check, the input filter, in particular <>
Check output: output, encoding and escape,
CSRF
Cross-site request forgery, the attacker cookie aid victims of defrauding trusted servers, in the name of victims of fake requests sent to the server under attack, and thus attack.
A cookie is sent to the browser and the server locally saved a small piece of data, mainly for session state management,
Prevention: Captcha
Referer check detection request is legitimate sources, or add a randomly generated token
AJAX
That is asynchronous JavaScript and XML,
After synchronization is complete this step before the next step, step, then, this step ranging callback return, began to perform the next step.
AJAX techniques contains: XHTML using css and said model using interactive DOM, and the server using XMLHttpRequest asynchronous communication. Js binding and calls.
Simple principle, the request is sent to the server through XMLHTTPRequest object to obtain data from the server, and then update the page,
Advantages: No refresh update data, and asynchronous server communication, reduce back-end load,
AJAX, can not use the back function and history.
It can cause security issues, cross-site scripting attacks, SQL injection
Search engine support is weak.
Primeval
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("POST","ajax_info.json",true);//POST可以发送大量数据
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//设置请求，GET忽略。
xmlhttp.send();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.status == 200 && xmlhttp.readyState == 4){
console.log(xhr.responseText);
}jquery in
$.ajax({
type:'get',
url:'abc.php',
data:{},
dataType:'json',
timeout:3000,
beforeSend:function(){
// 发送之前就会进入这个函数
// return false 这个ajax就停止了不会发 如果没有return false 就会继续
},
success:function(data){ // 成功拿到结果放到这个函数 data就是拿到的结果
},
error:function(){//失败的函数
},
complete:function(){//不管成功还是失败 都会进这个函数
}
})
$.ajax({
type:'get',
url:'',
data:{},
dataType:"json",
success:function(data){
}
})axios
axious.get('/uesr?id=1')
.then(function(response){
console.log(response);
}).catch(function(error){
console.log(error);
});
//post也一样
post, get the difference
1, from the point of view of the standard http, get security for the servers, get used to retrieve data without causing data changes, post may cause data changes.
2, get mass participation, the parameters in the URL, insecurity, and post parameters in the request body inside, than get security post, and will get cached, but the post supports multiple encoding, in theory, no limit to submit the data.
What GET and POST are? Two methods for HTTP protocol to send the request.
What is HTTP? HTTP is based on the TCP / IP protocol on how to communicate data on how the World Wide Web.
HTTP is the underlying TCP / IP. So the bottom GET and POST is TCP / IP, that is to say, GET / POST is a TCP connection. GET and POST can do is the same as the same. Plus you give GET request body, to bring POST url parameter, technically completely do the same in.
Responsive layout and compatibility
Advantages: different devices for strong flexibility, but more compatible with a variety of device code,
1. the first to write a fixed layout, adding media queries, and responsive code.
2. General to add meta tags, name = "viewport" content = "width = device-width, initial-scale = 1, minimum-scale = 1, user-scalable = no" and prohibits scaling.
3、@media screen and (max-width:980px){
}
link in the media may be used.
4, the width of the percentage
compatibility
The main solution is css hack (different browsers, different style)
1, the inner and outer margins different default with * margin: 0; padding: 0;
2, when a block containing picture element, ie6-7 voids appear next picture.
Solve: div and img same line
Image into block, (img replace elements in line with incline-block similar)
Set image vertical alignment. Set float.
3, ul and ol lists indentation problem
IE：margin :0;
firebox :margin :0; padding:0; list-style:none;
4, for IE. HTML conditional comments,
adding a label pattern, setting display: block;
5, IE6 bilateral distance, display: incline;
height太小，overflow：hidden；
6, the issue of transparency: private property with various browsers.
