HTML5 Learning-day3

The first content of this study is about the problem of font self-adaptation, HTML5 is doing well in self-adaptation, but the problem of font size is not adaptive.

Finally, the boss gave the information found that the font size of the problem can be used in CSS font units to do adaptive

CSS font size unit px, EM

• PX is an absolute unit and does not support IE scaling
• EM is relative units, fonts in Web pages can zoom in and out

PX Everyone knows how to use, here is no longer described, the main simple said EM

Characteristics of EM

1. EM value is not fixed
2. EM inherits the parent element font size, and if it encounters a parent element also uses EM, then recalculate

Use Note:

1. Declare the font-size:62.5% in the body selector;
2. Divide the original PX value by 10 and replace it with the EM unit
3. Recalculate the EM value of the enlarged font to avoid duplicate statement calculation of font size
4. If the parent element is already using EM, it is recommended that the child elements not be reused and need to be reused, because EM inherits the font size of the parent element

After the font problem has been solved, the first problem is the form form submission problem

Form form Submission

There are two ways to submit form forms

1. Submit Submission

在表单form元素中，使用onsubmit="return checkUser()"注意：表单中，需要有一个type="submit" 的 input元素

Function method

  function checkUser(){   varresult = document.getElementById ("userid"). Value;varPassword = document.getElementById ("Userpassid"). Value;if(Result = ="") {alert ("User name cannot be empty");return false; }if(Password = ="") {alert ("Password cannot be empty");return false; }Else{return true; }}

2. Button Submission

直接在form表单中，type="button" 的 input元素中使用 onclick="checkUser()"注意：表单form元素必须要有id,在方法中使用 doument.getElementById(id).submint();  提交

Function method

  function checkUser(){   varresult = document.getElementById ("userid"). Value;varPassword = document.getElementById ("Userpassid"). Value;if(Result = ="") {alert ("User name cannot be empty");return false; }if(Password = ="") {alert ("Password cannot be empty");return false; } Doument.getelementbyid ("Formid"). Submint ();}

Attention:

• Both of these methods must have a submitted address for the action in form forms
• If the input type is submit, do not put the method function in the onclick of the submit, otherwise it will be submitted two times
• The pass parameter uses the Name property of the child element

Ajax

Asynchronous JavaScript and XML

The core of Ajax is the JavaScript object XMLHttpRequest.

Instantiation of

XMLHttpRequest objects are the basis of Ajax (IE5 and IE6 use ActiveXObject)

var xmlhttp;if (window.XMLHttpRequest){  xmlhttp=newelse {  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}

Send Request

Using Open and send

xmlhttp.open("GET","xx.xx",ture);xmlhttp.send();

The parameters in the open above are

• Request Type, Get/post
• Request address, location (URL) of the file on the server
• Boolean value, whether asynchronous, true for async, false for synchronous

When Open is set up, send the request directly with send, if there are parameters, fill in the parameters in send, only for POST request

Get/post selection

Use the POST request in the following cases
1. Unable to use cache file (update file or database on server)
2. Send a large amount of data to the server (post no data limit)
3. When sending user input with unknown characters, post is more stable and more reliable.

POST request

xmlhttp.open("POST","xx.xx",ture);xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");xmlhttp.send("fname=xxx&fpassword=xxxx");

Considerations when using Async

When the third argument of Open is Asyns true, the function needs to be executed at the response:

xmlhttp.onreadystatechange=function(){    if(xmlhttp.readyState==4 && xmlhhtp.status==200){        //ready状态为4且status为200即为请求完成，执行需要执行的内容        responsetxt = xmlhttp.responseText;    }}xmlhttp.open("GET","xxx.xx",true);xmlhttp.send();

When using synchronization, the Asyns is set to false, and does not need to write the onreadystatechange function, directly behind the receiving content.

xmlhttp.open("GET","xxx.xx",false);xmlhttp.send();var responsetxt=xmlhttp.responseText;

Server response

In the above we have seen the way to get the server response, there are actually two kinds of, using the properties of the XMLHttpRequest object

• ResponseText getting response data as a string
• Responsexml getting the response data in XML form

onreadystatechange function Contents

The onreadystatechange function is a function that starts when the readystate changes

ReadyState has XMLHttpRequest status information

• readyState
  0 Request not initialized
  1 server Connection established
  2 Request received
  3 in Request processing
  4 Request Complete

• Status
  $: "OK"
  404: Page Not Found

When readystate==4 && Status = = 200 indicates that the response is ready

HTML5 Learning-day3