妙味JS学习记录(二)

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

五、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)

原文地址:https://www.cnblogs.com/anqwjoe/p/8659230.html

时间: 2024-10-13 22:33:38

妙味JS学习记录(二)的相关文章

vue.js 学习记录(二)

原文连接:http://www.cnblogs.com/keepfool/p/5625583.html 组件 #注册组件 Vue.component('my-component', { // 选项 }) 组件在注册之后,便可以在父实例的模块中以自定义元素 <my-component></my-component> 的形式使用.要确保在初始化根实例 之前 注册了组件: <!DOCTYPE html> <html> <body> <div id

Windows API 编程学习记录&lt;二&gt;

恩,开始写Windows API编程第二节吧. 上次介绍了几个关于Windows API编程最基本的概念,但是如果只是看这些概念,估计还是对Windows API不是很了解.这节我们就使用Windows API 让大家来了解下Windows API的用法. 第一个介绍的Windows API 当然是最经典的MessageBox,这个API 的作用就是在电脑上显示一个对话框,我们先来看看这个API的定义吧: int WINAPI MessageBox(HWND hWnd, LPCTSTR lpTe

Spring Boot学习记录(二)--thymeleaf模板

Spring Boot学习记录(二)–thymeleaf模板 标签(空格分隔): spring-boot 自从来公司后都没用过jsp当界面渲染了,因为前后端分离不是很好,反而模板引擎用的比较多,thymeleaf最大的优势后缀为html,就是只需要浏览器就可以展现页面了,还有就是thymeleaf可以很好的和spring集成.下面开始学习. 1.引入依赖 maven中直接引入 <dependency> <groupId>org.springframework.boot</gr

Backbone.js学习之二

经历一段自我修炼,终于领悟到Backbone.js的关键知识点,也发现了原来MVC可以在前端这样梦幻的发挥,Backbone.js确实是一个很有魅力的前端MVC框架. 练就一门技术,需要有扎实的功底,从这点,开始认真研究Backbone.js的一些最基本的操作,以便我日后学习能更上一层楼.那就切入主题: 什么是mvc? 简单的理解就是:模型(models),视图(views),控制器(collections).通过视图把浏览器的网址传给控制器,控制器对网址进行解析,然后去模型层获取数据,模型层将

妙味js预热课程(一)

2016年5月24日(妙味课堂js预热课程-2笔记)一.前言 1.window.onload(事件):是在页面加载完成以后来执行一个功能: 如 window.onload=function(){ alert(“a”) } 这是一个匿名函数,因为在function后面括号前面没有名字: 即在页面加载完成以后弹出一个警告框! 2.如何提取行间事件: 3.为什么一定要用到onload? 二.主要内容 1.收缩展开菜单——if判断 如果菜单已经是显示的,把菜单隐藏: 如果菜单已经是隐藏的,把菜单显示.

妙味js预热课程(二)

一.js简易日历 1.innerHTML的使用: a:设置内容并为其加样式: <input id="txt1" type="text" /> <input id="btn1" type="button" value="设置文字" /> <div id="div1"></div> <style> #div1{width:200px

JS学习记录(补充二)

循环变量<html lang="en"> <head> <meta charset="UTF-8"> <title>循环变量</title> </head> <body> <script> /*1+2+3+...10*/ var i = 1; //循环变量的定义 var sum = 0; while (i <= 10) { //循环变量的判断 if (i % 2 =

关于js作用域总结,对妙味视频学习的总结

主要理解以下四条 1,预编译 查找 var function 2.,逐行解析,表达式会改变预编译的值 3.作用域链 4.每次到一个新的作用域链重复一1,2两个过程: eg.1 alert(a);    //function fn2(){var a =10} ,预编译 var a =1; alert(a);    //1;表达式改变a function fn1(){ var a = 11;} alert(a);    //1; 函数块不会改变a的值 var a =2; alert(a);    /

js学习记录

比较运算符 当我们对Number做比较时,可以通过比较运算符得到一个布尔值: 2 > 5; // false 5 >= 2; // true 7 == 7; // true 实际上,JavaScript允许对任意数据类型做比较: false == 0; // true false === 0; // false 要特别注意相等运算符==.JavaScript在设计时,有两种比较运算符: 第一种是==比较,它会自动转换数据类型再比较,很多时候,会得到非常诡异的结果: 第二种是===比较,它不会自