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();
				}
			}
		});
	}
});

不知道为何,,,,代码看起来很是难看,,,,,

写了好多,,,,若是有人看到这里,,,不胜感激,,,,本人学疏才浅,,,必然有不少错误,,,若是能指正,,,万分感谢,,,

另外本人饿着肚子,,,,,若是有重庆的人,,,,而且手边正好有一份能糊口的工做,,,,不胜感激