Ajax系列二-现代化的Ajax

核心–XMLHttpRequest对象，一个专门的HTTP请求工具

使用XMLHttpRequest做Ajax请求：

如何创建该对象

标准` new XMLHttpRequest()`
低版本`IE(678)`，`new ActiveXObject('Microsoft.XMLHTTP')`;新的`jQuery`已经抛弃IE6，**程序员不应该去迁就用户的坏习惯，有时候需要逼用户改变习惯。**

1
2
3
4
5
6
7
8
9
10
11
function createXHR(){
	var xhr = null;
	if(window.XMLHttpRequest){
		xhr = new XMLHttpRequest();
	} else if(window.ActiveXObject){
		xhr = new ActiveXObject('Microsoft.XMLHTTP');
	} else{
		console.log('你的浏览器很奇怪。');
	}
	return xhr;
}

利用XHR发送请求来请求后台服务器资源

分析HTTP协议，请求需明确几个因素:
　　　1)请求方法：GET/POST/PUT/DELETE/HEAD
　　　2)请求哪个资源(URL)
　　　3)同步方式–同步/异步

如何得到请求返回结果

1
2
3
4
5
6
7
8
9
10
11
function vote(){
	//1. 制造xhr
	var xhr = createXHR();
	//2. 打开连接
	xhr.open('GET', './05-ajaxvote.php', true/false);
	//3. 发送请求
	xhr.send(null);
	//4. 测试同步异步的差异,改true/false
	//alert(xhr.responseText);
	//为避免误会用
	alert('123');
more >>

展开全文 >>

Ajax系列一-远古时代

题按–在真正的Ajax出现之前，是怎么实现类似效果的。

这几天断断续续的看完了ajax和http相关的教程，查询了Wikipedia相关资料，接下来几天，整理一下。

投票需求：要求无刷新投票，并且不允许使用XMLHttpRequest对象
分析：在XHR对象没有流行之前，已经有无刷新这种效果的要求

方法一： HTTP协议204 No Content

原理：利用http 204 No Content 状态码,浏览器不会跳转

前端：

1
2
3
4
5
6
<body>
    <div>
        <p><img width=300 height=400 src="lin.jpg"></p>
        <p><a href="vote.php">vote</a></p>
    </div>
</body>

后端：

1
2
3
4
5
6
7
8
9
10
<?php 
$votenum = file_get_contents("./vote.txt");
if ($votenum == null) {
    $votenum = 0;
}
$votenum += 1;
file_put_contents('./vote.txt', $votenum);
//利用HTTP协议的204特性
header('HTTP/1.1 204 No Content');
 ?>
more >>

展开全文 >>

判断非手机登陆，做一次提醒

需求

项目的网站时做的手机网页，但是没有考虑到自适应pc端，只是在chrome中固定了手机屏幕大小，所以在pc端查看会很丑，布局是乱的；但是重写又很麻烦，所以有必要做一下提醒，让用户手动将网页缩小到手机屏幕大小。

用到

非手机检验和cookie记录

方法

这段代码是使用了cookie来控制的

  1. 使用cookie让浏览器记住页面已经打开过一次，当前页面刷新不会弹出提醒。
  2. 浏览器一旦关闭，保存这个记录的cookie文件将被删除。重新打开浏览器弹出窗口会再次出现，从而确保了在原有的窗口基础上只打开一次。

判断非手机登陆方式

1
2
if (!/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent))
	alert("为了提高体验效果，请把页面缩小成手机屏幕大小。\n谢谢合作！");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<script type="text/javascript">
	try{
		var alertmessage="为了提高体验效果，请把页面缩小成手机屏幕大小。\n谢谢合作！";
		var once_per_session=1
		function get_cookie(Name) {
		  var search = Name + "="
		  var returnvalue = "";
		  if (document.cookie.length > 0) {
			offset = document.cookie.indexOf(search)
			if (offset != -1) {
			  offset += search.length;
			  end = document.cookie.indexOf(";", offset);
			  if (end == -1)
				 end = document.cookie.length;
			 	 returnvalue=unescape(document.cookie.substring(offset, end))
			  }
		   	}
		 	return returnvalue;
		}
		function alertornot(){
			if (get_cookie('alerted')==''){
		        loadalert();
				document.cookie="alerted=yes";
			}
		}
		function loadalert(){
			if (!/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent))
				alert(alertmessage);
		}
		if (once_per_session==0)
			loadalert();
		else
			alertornot();
	} catch(e)
	{
		alert(e);
	}
</script>

展开全文 >>

nodejs学习记录

《Node.js开发指南》

学习nodejs有一段时间了，基本的概念已经有了大概的了解。《Node.js开发指南》进行到第五章-使用Nodejs进行web开发，实现一个微博系统。
前面看书一直断断续续，前段时间只能晚上在宿舍看一会，没有系统性，虽然勉强看完了前面四章节的基础知识，但还不能说会了。希望通过这个小系统的练习，对nodejs有更深入的理解。

微博系统主要功能

1.路由控制
2.页面模板
3.数据库访问
4.用户注册
5.登陆
6.用户会话

主要技术点：

1.Express框架
2.MVC设计模式
3.ejs模板引擎
4.MongoDB数据库

more >>

展开全文 >>

HTML5学习记录

一个问题想了很久，HTML5为什么会比HTML高端很多。在那些地方做了巨大改变。

这个方向是没错的，重视现有行业重要技术的同时，关注新技术。

高洛峰2015版 HTML5视频教程
HTML5_form新特性

属性名 说明
form 可书写在页面任何位置，只要给该元素制定一个form属性，属性值为该表单id即可，给页面元素添加样式更方便
formaction 可以给所有的提交按钮增加不同的formaction属性，点击不同的按钮，将表单提交到不同的页面
formmethod 对每个表单元素分别指定不同提交方法
placeholder text、textarea提示文字
autofocus 自动获取光标焦点
list 在页面中的datalist元素(HTML5新增)配合，list属性值就是datalist的id，中间选择值用option。类似select，输入值存在的时候就会提示，不存在就手动输入
autocomplete HTML5之前，谁都可以看见输入的值，存在安全隐患。可以指定”on”,”off”和””三种值，不指定时使用浏览器默认
more >>

展开全文 >>

jQuery学习记录

onload/ready，模拟jQuery方法

window.onload只能注册一次，后面覆盖前面，$(document).ready可注册多次;
onload要等所有DOM元素创建完毕，图片、css加载完毕后才促发，而ready则是DOM创建好之后即被促发，这样提高了网页响应速度。

模拟jQuery方法

1
2
3
4
5
6
7
(function()
        {
            var $ = function(id){
            return document.getElementById(id);
        }
        window.$ = window.jQuery = $;
        })();

模拟了一个id获取的jQuery方法，$做window的一级方法，即全局方法。

more >>

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true