HTML5学习-Day3

这次学习的第一个内容是关于字体自适应的问题，Html5在自适应上都做的很好，但是字体大小的问题却没办法自适应。

最终在老大给出的资料下查到，字体大小的问题可以使用css的字体单位来做自适应

CSS的字体大小单位 px , em

• px是绝对单位，不支持IE的缩放
• em是相对单位，网页中的字体能放大缩小

px大家都知道怎么使用了，这里就不复述了，主要简单的说下em

---

em的特点

1. em值并不固定
2. em会继承父级元素字体大小，如遇到父级元素也使用em，那么请重新计算

使用注意：

1. 在body选择器中声明 font-size:62.5%;
2. 将原来的px数值除以10，换上em单位
3. 重新计算被放大的字体的em值，避免字体大小重复声明计算
4. 如父元素已经使用了em，建议子元素不要再使用，需要再使用的话，请重新计算，因为em会继承父元素的字体大小

---

字体问题得到解决后，迎来的首要问题就是Form表单提交的问题了

Form表单提交

form表单有两种提交方式

1. submit提交

在表单form元素中，使用onsubmit="return checkUser()"

注意：表单中，需要有一个type="submit" 的 input元素

function方法

 function checkUser(){
   var result = document.getElementById("userid").value;
   var password = document.getElementById("userpassid").value;
   if(result == ""  ){
       alert("用户名不能为空");
       return false;
   }
   if(password == ""  ){
       alert("密码不能为空");
       return false;
   }else{
       return true;
   }
}

2. button提交

直接在form表单中，type="button" 的 input元素中使用 onclick="checkUser()"

注意：表单form元素必须要有id,在方法中使用 doument.getElementById(id).submint();  提交

function方法

 function checkUser(){
   var result = document.getElementById("userid").value;
   var password = document.getElementById("userpassid").value;
   if(result == ""  ){
       alert("用户名不能为空");
       return false;
   }
   if(password == ""  ){
       alert("密码不能为空");
       return false;
   }
   doument.getElementById("formid").submint();
}

---

注意：

• 以上两种方法form表单中action 都必须要有提交的地址
• 如果input类型是submit，请勿将方法函数放入 submit中的onclick中，否则会提交两次
• 传递参数使用的是子元素的name属性

---

Ajax

异步 JavaScript和XML

Ajax 的核心是 JavaScript 对象 XmlHttpRequest。

实例化

XmlHttpRequest对象是Ajax的基础（IE5和IE6使用ActiveXObject）

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

---

发送请求

使用open和send

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

以上open中参数分别是

• 请求类型，GET/POST
• 请求地址，文件在服务器上的位置（URL）
• boolean值，是否异步，true为异步，false为同步

open设置好后直接用send发送请求，如果有参数，则在send中填写参数，仅用于post请求下

GET/POST 选择

在下列情况下请使用Post请求
1. 无法使用缓存文件（更新服务器上的文件或数据库）
2. 向服务器发送大量数据（Post无数据量限制）
3. 发送包含未知字符的用户输入时，post更加稳定也更可靠

Post请求

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

使用异步时注意事项

当open的第三个参数 asyns为true时，需要在响应处执行函数：

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();

---

当使用同步时，asyns设置为false即可，且不需要写onreadystatechange函数，直接在后面跟上接收内容即可。

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

---

服务器响应

在上面我们有看到获取服务器响应的方式，其实是有两种的，使用XMLHttpRequest对象的属性

• responseText 获取字符串形式的响应数据
• responseXML 获取XML形式的响应数据

---

onreadystatechange函数内容

onreadystatechange函数是当readystate改变时出发的一个函数

readystate 存有XMLHttpRequest的状态信息

• readyState
  0 请求未初始化
  1 服务器连接已建立
  2 请求已接收
  3 请求处理中
  4 请求完成

• Status
  200: “OK”
  404: 页面未找到

当readyState==4 && Status == 200 表示响应已就绪