Ajax系列三-探讨XHR及POST数据

#Ajax系列三-深度探讨XHR及POST数据
Ajax异步原理

相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

ajax状态码

排序 时间 状态码
0 XHR对象刚创建 0
1 open建立连接成功 1
2 接收头信息完毕 2
3 接收body信息完毕 3
4 成功,结束后 4

ajax的好处就是不阻塞后面代码的执行。

more >>

展开全文 >>

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 >>

展开全文 >>

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