js学习笔记(新手)
先和服务器创建连接
var chat = new EventSource("/chat"); //这里的字符串无关紧要,,只是做一个标识表示这个请求
服务器端接受请求后响应
server.on("request", function(request, response) {
var url = require('url').parse(request.url); //解析请求的url
if (url.pathname == '/chat') {
response.writeHead(200, {'Content-Type': 'text/event-stream'}); //非常重要
response.write("data: Connected\n\n"); //响应数据
//响应数据要"data: "开头
//如果连接关闭
request.connection.on("end", function() {
response.end();
});
}
客户端监听响应
chat.onmessage = function(event) {
var msg = event.data;
console.log(msg);
}
补充:
服务器端的监听请求和响应
server.on("request", function(request, response) { //监听是否有请求到达此服务器
//我也不知道为什么要解析
var url = require('url').parse(request.url);
//如果请求方法是post,另外我查过了method是方法的意思
if (request.method == "POST") {
var body = "";
//从请求主体获取数据,,chunk就是数据
request.on("data", function(chunk) {
body += chunk;
}
//数据获取完毕,在服务器的控制台输出获取到的信息
request.on("end", function() {
console.log("body: " + body);
}
//设置响应的头(类型,编码什么的)
response.writeHead(200, {"Content-Type": "text/html"}); //200是成功的意思,,后面是类型
//响应的主体,,好像只能响应字符串
response.write("request OK");
//响应完毕
response.end();
}
else if (request.mathod == "GET") {
//如果是get请求
//this your code
//什么判断文件类型啊,,文件内容啊,,文件能不能打开啊
}
});
以上是nodejs
以下记录一下客户端的请求:
XMLHttpRequest的用法:
新建一个请求对象,,因为请求有很多方法,,所以做成一个对象
var request = new XMLHttpRequest(); //用的构造函数
选择一个请求方法,,有很多,,常用的就只有 post 和 get
request.open("GET", "http:www.baidu.****/****"); //第一个参数是方法,,第二个参数是url就是目标地址
//要注意的是虽然方法小写也没什么关系,,但是大家都是大写,,那就大写好了
request.open("POST", "*****");
这里可以设置请求的头类型什么的,,但是一般都会自动设置,,所以跳过
设置回调函数,,有很多作用,,比如下载的进度,,比如请求成功后能做什么,,
request.onreadystatechange(function() {
//如果请求完成,,并且响应也成功接受
if (request.readyState == 4 && request.status == 200) { //第一个是请求的状态,,第二个是响应的状态
//调用响应的消息
console.log(request.responseText);
}
}
注意,,非常重要的一点来了,,前面所有的都是设置这个请求的属性,,,并没有发送请求,,所以现在发送
request.send(null); //GET 并不用附带什么数据,,但是并不是说不能
request.send("hello node"); //好像只可以发送字符串,,当然字符串变量也是可以的
这就是XMLHttpRequest的使用方法了
下面说一下JSONP:
原理很简单,,就是使用script调用外部文件那一套,,不过是在代码中调用并执行而已
甚至来说最重要的是服务器响应的内容,,而不是客户端的请求内容
首先先设置一个url,,因为这次没有send方法了,,不能发随意发送数据了,,就需要url带上一些信息来证明这是一个特殊的请求
var url = "http://127.0.0.1:8000/js/my.js"; //自己服务器上的文件
function getJsonp(data) { //回调函数,,响应完成后执行
console.log(data); //这么调用其实是错误的,,但是data就是my.js文件里的内容
}
url += "?jsonp=" + "getJsonp"; //在末尾添加这样一段文本,,可以在服务器端找到
然后新建一个script文档元素,,设置url,,并插入文档的任意位置
var script = document.createElement('script');
script.src = url; //在这里就发送请求了,,还响应了
document.body.appendChild(script); //插进后面,,污,,这里就调用了script里面的内容
这个方法的服务器端配合:
var http = require('http');
var fs = require('fs');
var server = new http.Server();
server.listen(8000);
server.on("request", function(request, response) {
var url = require('url').parse(request.url);
if (request.method == "GET") {
//读取url里面的文件名
var filename = url.pathname.substring(1);
var type;
//判断要get的文件类型
//这里简化了,,,有很多类型的
switch(filename.substring(filename.lastIndexOf(".") + 1)) {
case "html": type = "text/html; charset=utf-8"; break;
case "js": type = "application/javascript; charset=utf-8"; break;
}
fs.readFile(filename, function(err, content) {
if (err) {
//如果发生错误云云
response.write(err.message);
response.end();
}
else {
response.writeHead(200, {"Content-Type": type});
if (url.query) {
//如果这个属性有数据的话,,,就是刚才设置的尾部接收到了
response.write(url.query.substring(url.query.indexOf('=') + 1) + "(" + content + ")");
//将刚才的尾部设置为函数调用,,返回响应
response.end();
}
else {
//正常响应
response.write(content);
response.end();
}
}
});
}
});
不知道为什么,,,,代码看起来非常难看,,,,,
写了好多,,,,如果有人看到这里,,,不胜感激,,,,本人学疏才浅,,,必然有很多错误,,,如果能指正,,,万分感谢,,,
另外本人饿着肚子,,,,,如果有重庆的人,,,,并且手边正好有一份能糊口的工作,,,,不胜感激