Node服务器与AJAX复习第三天

这是我参与更文挑战的第22天，活动详情查看：更文挑战

NodeJS处理POST请求

接口文档

// URL  
/tijiao
携带数据: {
    id:   唯一标识  number
    username:  用户名   string
    password:  密码     string
    sex:     性别       字符串  male female secret
    age:     年龄       number 
    ……
}
// HTTP请求方式
POST
// 返回数据 
{  
   error: 错误代码
   data:  详细数据
   …… 
}

获取POST传递的数据

因为POST请求提交的数据量大。可能无法一次传递完毕。于是NodeJS提供了两个事件：data、end。用于帮助获取数据。

demo:

// data 事件 每当有一次数据传递过来 就触发一次
req.on("data", function(data_chunk) {
	console.log(1);
});
// end 事件  当所有数据都传递完毕 才会触发
req.on("end", function() {
	console.log("数据传递完毕")
})

输出:

data事件中函数的参数data_chunk 表示本次传递过来的数据。

处理POST接收的数据（QueryStrings模块）

接收的数据:

我们如果想要将这些数据存储起来，必然要将该字符串转为对象。

NodeJS已经提供了模块：querystrings 可以处理这种key：value对。

使用方式：

var qs = require("querystring");

处理:

req.on("end", function() {
	var obj = qs.parse(data);
	console.log(obj);
})

结果:

AJAX

简介

AJAX： asynchronous JavaScript and XML 异步的JS和XML。

XML：可拓展标记语言。

前端通过JS发送异步请求得到一个XML数据，偷偷的渲染到页面上。现在，XML在前端已经被JSON取代。 AJAX不是一门新技术。IE5时，就已经出现。

举例XML:

<class name="style1" > 
    <name>ajax学习</name>
    <students length=30>
      <student>
         <name></name>
         <age> </age>
         <sex></sex>
      </student>
       
    </students>
</class>

JSON:

{
   "name": "ajax学习",
   "students": [
       {
          "name": ,
          "age": ,
          "sex"
       }
   ]
}

体验AJAX

网易邮箱注册：

花瓣网瀑布流：

AJAX初始化

兼容性

现代的高级浏览器，使用的AJAX对象是XMLHttpRequest的实例。

早期微软的IE系列浏览器，使用的对象是ActiveXObject("Microsoft.XMLHttp")的实例。

demo:

/* 通过能力检测 检测浏览器是否具备该能力 */
var xhr = null;
// 如果有ActiveXObject构造函数 就使用它 
if (window.ActiveXObject) {
	  xhr = new ActiveXObject("Microsoft.XMLHttp");
} else if (window.XMLHttpRequest) {
	  xhr = new XMLHttpRequest();
} else {
	console.log("您的浏览器不支持AJAX，请升级");
	return;
}

XHR对象

重要属性:

readyState: 等待状态码 
0: 未初始化
1: 调用了open方法
2: 已经接收到响应头
3: 已经接收了一部分返回内容
4: 接收了全部数据 可以使用了
responseText: 响应文本
status: 本次HTTP请求的状态码
200: 成功
302: 重定向
304: 缓存
404: 资源未找到
500: 服务器内部错误  
     onreadystatechange: 当等待状态码(readystate)发生变化时 会执行的函数
     open方法: 它在原型上，用于打开本次请求
     send方法: 它在原型上，用于发送数据
     setRequestHeader方法: 设置请求头 

open方法

xhr.open(type, url, boolean)调用时，会打开本次链接。
type: 本次HTTP请求的方式。get、post等
url: 本次HTTP请求的URL。可以是相对路径可以是绝对路径
boolean: 本次同步发送还是异步发送。true为异步，false为同步。

send方法

xhr.send(data)调用时，表示发送的正文内容。

data: 请求正文中的数据。

JSON字符串转对象的三种方式

有如下字符串:

var str = {"error":1,"data":"已经被占用"}

转为对象:

var result = JSON.parse(str);

得到的结果:

eval

JSON对象是ECMAScript5添加的，在不支持ES5的浏览器中不能用。

eval是将字符串当代码执行的。它可以转。

demo:

var str = '{"error":1,"data":"已经被占用"}';
var result = eval("(" + str + ")")

Function

这是构造函数，使用方式：最后一个实参是生成的函数的函数体，之前的实参都是生成的函数的形参。

var result = new Function("return " + '{"error":1,"data":"已经被占用"}')();

路径

前端绝对路径

前端的绝对路径中的/开头的写法表示：服务器的根目录

后端绝对路径

后端绝对路径中的/开头的写法表示：盘符根目录

jQuery中的AJAX

发送GET请求

$.get(url, data, callback, type)
	url: URL字符串
	data: 携带的数据 可以是字符串 可以是对象 可以省略
	callback: 回调函数
	type: 回调函数中参数的数据类型

$.get("/checkName", "a=" + this.value, function(data) {
	tips.innerHTML = data.data;
}, "json")

发送POST请求

$.post(url, data, callback, type)
	url: URL字符串
	data: 携带的数据 可以是字符串 可以是对象 可以省略
	callback: 回调函数
	type: 回调函数中参数的数据类型

$.post("/checkName", "a=" + this.value, function(data) {
	tips.innerHTML = data.data;
}, "json")

$.ajax

该方法用于发送任何请求 参数是一个配置对象
$.ajax(option)
	option: 配置对象
type: HTTP请求方式
data: 携带的数据 可字符串可对象可省略
dataType: 返回的数据的类型
success: 成功时的回调函数
failed: 失败时的回调函数
complete: 完成时的回调函数

自己封装AJAX发送函数

index.js:

var ickt = {
	get: function(url, data, callback) {
		// 定义一个字符串
		var str = "";
		if (typeof data === "string") {
			str = data;
		} else if (typeof data === "object") {
			for(var i in data) {
				str += i + "=" + data[i] + "&"
			}
		}
		var xhr = null;
		if (window.XMLHttpRequest) {
			xhr = new XMLHttpRequest();
		} else if (window.ActiveXObject) {
			xhr = new ActiveXObject("Microsoft.XMLHttp");
		} else {
			console.log("不支持AJAX")
			return;
		}
		
		xhr.onreadystatechange = function() {
			if (xhr.readyState === 4) {
				callback(JSON.parse(xhr.responseText))
			}
		}
		xhr.open("get", url + "?" + str  , true);
		xhr.send();
	},
	post: function(url, data, callback) {
		// 初始化XHR
		var xhr = null;
                34// 能力检测
		if (window.XMLHttpRequest) {
			xhr = new XMLHttpRequest();
		} else if(window.ActiveXObject) {
			xhr = new ActiveXObject("Microsoft.XMLHttp");
		} else {
			return;
		}
		// 绑定事件
		xhr.onreadystatechange = function() {
			if (xhr.readyState === 4) {
				callback(JSON.parse(xhr.responseText));
			}
		}
		// 调用open方法
		xhr.open("post", url, true);
		// 设置请求头
		xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded;charset=utf-8");
		// 调用send方法
		xhr.send(data);
	}
}

1 如何封装一串逻辑代码？

答： 把这些代码放在一个函数内

2 data如何实现既可以传递字符串又可以是对象？

答： 在函数内部进行判定 分别操作

3 为什么要将ajax发送的请求头修改？

答： 因为表单出现的早，ajax使用的晚，服务器通常内置处理表单的逻辑。但是无法直接处理ajax。所以，尽可能的将ajax发送的数据伪装成表单。