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

不知道爲何,,,,代碼看起來很是難看,,,,,

寫了好多,,,,若是有人看到這裏,,,不勝感激,,,,本人學疏才淺,,,必然有不少錯誤,,,若是能指正,,,萬分感謝,,,

另外本人餓着肚子,,,,,若是有重慶的人,,,,而且手邊正好有一份能餬口的工做,,,,不勝感激