妙味JS学习记录

Posted 2020-10-29 言叶以上のBLOG

在学习过程中零碎的知识点记录以及一些想法，加深印象，强化记忆。

五、Ajax

~ 无刷新数据读取；用户注册、在线地图、聊天室、webQQ、微博；

Ajax能且仅能 从服务器读取一个文件，要注意文本文件和网页的编码要统一（utf-8）

只读一次，后面加载缓存，?t=1213 用get提交数据

可以用?t=new Date().getTime 使每次都重新加载；

eval()计算字符串里的值，如果参数是一个表达式，eval() 函数将执行表达式。如果参数是javascript语句，eval()将执行 Javascript 语句。

原理：

Http请求方法：GET - 获取数据（浏览帖子）　　POST - 上传数据（用户注册）；

form的action属性是用来确定表单提交到哪里，method属性默认为get

<form action="www.baidu.com" method="get" accept-charset="utf-8">
        用户名：<input type="text" name="user"/>
        密码：<input type="password" name="pass" />
</form>

get方式把数据放到url 里面提交；post把数据放在http content里；

get安全性很低；post安全性一般；

get容量很低；post容量几乎不限

get便于分享；post不便于分享

~ 编写Ajax

1.创建ajax对象　　

//创建AJAX对象
var oAjax = null;
if(window.XMLHttpRequest){
//不存在的变量会报错，不存在的属性仅仅是undefined
    oAjax = new XMLHttpRequest();
}else{
    oAjax = new ActiveXObject("Microsoft.XMLHttp");
}

2.跟服务器连接　

　oAjax.open(方法，URL，异步);

3.发送请求

  oAjax.send();　　

4.接收返回

oAjax.onreadystatechange = function(){
    if(oAjax.readyState == 4){
        if(oAjax.status == 200){
            alert(‘成功‘+oAjax.responseText); //获得字符串形式的响应数据
        }else{
            alert(‘失败‘);
        }
    }
};

 

六、运动

var timer = null;
var btn = document.getElementById("btn");

function startMove(){
    clearInterval(timer);//先清定时器，防止定时器叠加
    var odiv = document.getElementById("div");
    timer = setInterval(function(){
        var ispeed = 1;     //设定速度
        if (odiv.offsetLeft >= 300) {//到300距离停止
            clearInterval(timer);
        }else{  //用了else到达位置后不执行
            odiv.style.left = odiv.offsetLeft + ispeed +‘px‘;
        }
            
    },30);
}
btn.onclick = startMove;

运动框架

开始运动时，关闭已有定时器，把运动和停止隔开（if..else）