AJAX前後端インタラクティブ原理（3）

3.HTTPサーバ

3.3。プレ関連知識

1 URLとは何ですか？

ユニフォームリソースロケータは場所からインターネット上で利用可能なリソースの一種であり、アクセス方法は単純で、彼は標準が、インターネット上のリソースのアドレスであると述べました。インターネット上の各ファイルには、固有のURLを持っている、それが含まれている情報は、ファイルブラウザの場所を示すと、彼らはそれをどのように扱います

2 URLコンテンツが含まれています

URLの形式はこれです：http://nodeing.com/cloud/search?q=htmlれ、HTTP：//表現協定、nodeing.comはドメイン名を表し、/雲/検索はルートを示し、後者の数は、クエリと呼ばれていますか？文字列は、80のデフォルト値があり、ポートは、彼は、ドメイン名の後に追加する必要がありますhttp://nodeing.com:80/

2.1モード/プロトコル（スキーム）：それはオープンにファイルを処理する方法をブラウザに指示します。最も一般的なモデルでは、プロトコルが、我々は両側がルールを遵守する必要があることを通常の合意プロトコルは、異なるプロトコルが異なる持っているかを理解するネットワーク、アクセスするために使用することができるハイパーテキスト転送プロトコル（HTTPと略記ハイパーテキスト転送プロトコル）であります制約、インターネット上で使用されるこれらのプロトコルは同じで、2台のコンピュータ間通信、あなたが特定の物事を達成するために、同じプロトコルに従う、異なるプロトコル（ルール）を使用することができ、例えば、我々は、ハイパーテキスト転送プロトコル（HTTPを使用しました）を使用しているネットワークアクセス、FTPプロトコル、ファイル転送プロトコルを使用する場合、短い中などのTelnetプロトコル、リモート接続プロトコル、限り、あなたは彼らがオンラインに従わなければならないルールがあることを覚えています

2.2ドメイン名/ IPアドレス：インターネットのIPアドレスが最初にすべてのお互いのアドレスを知っているべきではありません、あなたはあなたが誰かの送信急行を与えていることを想像し、家の数に相当しているのですか？IPアドレスは、IPアドレスはこれです、家の番号の形式の役割です：192.168.1.123、インターネット何千ものIPアドレス、あなたは間違いなく覚えていないことができない限り、あなたは、各サイトのIPアドレスを覚えて手放す場合そのため、ドメイン名とIP間のマッピングがある、天才である、あなたがドメイン名を登録するには行くことができ、お使いのコンピュータ（サーバ）のIPアドレスは、例えば、結合：baidu.com <===> 119.75.217.109/、私たちは、IP気にしないので、唯一のいくつかの人気のあるサイトにアクセスすることができ、ドメイン名を覚えておく必要がある、これは、ドメイン名とIP、および役割の関係は、

2.3ポート：コンピュータは家と見られている場合ここでは、ポートについて話しているが、プロトコルポートを意味し、その後、ポートは家のポートドアで、IPアドレスが65536（2 ^ 16）ヶ月あり、これらのポートは、私たちは家の各ポートドアを見てきているので、0から65535までの範囲、ポート番号でマークされ、あなたが想像できる、庁舎内で、様々なサービスウィンドウの様々ながあり、部署の様々な、各部署に提供異なるインテリジェントサービスが同じトークンので、コンピューター上のこれらのポートは、サービスをも提供することができ、また異なっているされても、サービスにアクセスしたい例えば、仕事のための正しいポートを見つける必要があります：httpサービスデフォルトはポート80で、デフォルトのポートは21 FTPプロトコル、デフォルトポートTelnetプロトコルは、HTTPSプロトコル等、443のデフォルトのポート23であります

2.4ファイルのパス/ファイル名：Webサイトは、ファイルサーバのフォルダとファイルの上に配置され、本質的には、リソースファイルのパスとファイル名を、アクセスすることをパートIVのURL、我々はウェブサイトのディレクトリを開発の多くを持っています我々は1台のサーバー（インターネット上のリモートコンピュータ）上で、当社の先進のウェブサイトを展開している、実際には、それが特定のディレクトリには、当社のウェブサイトを開発することである：およびファイルは、例えば、私たちが書くのさまざまな機能があります、もしこのようなそのディレクトリ：

我们要访问到这个目录下的图片文件怎么访问呢？我们假设这台服务器的域名就是http://nodeing.com, 那么意味着我们在浏览器中输入http://nodeing.com 这个地址的时候就能够访问到这个文件夹了，这个目录我们称为网站跟目录，这个目录下 还有其他的目录和文件， 这个时候我们要访问图片的话我们需要 这样写： http://nodeing.com/img/html_logo.png， 在域名后面加的内容img/html_logo.png就是目录和文件的路径

2.5 查询字符串：当我们要想服务器发送数据请求的时候，我们可以把数据加在问号后面以一定的格式发送到后台，例如：http://nodeing.com/cloud/search?q=html， 其中q = html 表示发送到后台的数据，这个我们会在表单发送数据的时候详细的操作实践

3.2.http模块是什么

通常一台电脑作为服务器，需要安装相应的服务器软件来提供服务，例如，常用的服务器软件有Aphche、Nginx、IIS，他们会响应前端的请求，根据不同的请求做不同的事情，而在node中你不需要单独去安装这些服务器软件，可以直接使用内置的http模块来实现简单的服务器，所以简单的说，http模块就是node内置的提供http服务的模块

3.3.创建一个http服务器

下面我们就创建一个http服务器程序来体验一下它到底是做什么的？

index.js文件中，写入下面代码：

//引入http模块
var http = require('http');
//创建一个服务实例
var app = http.createServer(function (req, res) {
    res.write("hello world");
    res.end();
});
// 设置监听端口
app.listen(3000);

接下来，在你的浏览器中输入,http://localhost:3000 查看效果

如果你不明白localhost怎么回事，别着急，我们下面深入的讲讲

1 当用户在浏览器输入网址的时候，首先会去查找本地的hosts文件，在这个文件中去看看有没有域名和ip地址的映射（对应关系）关系，如果有就直接访问这个ip地址对应的电脑，如果没有接着往下找 注意： window系统的本地hosts文件位置在 C:\Windows\System32\drivers\etc目录下 ， mac系统本地hosts文件在 /etc 目录下 下面是hosts文件内容

##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1   localhost
255.255.255.255 broadcasthost
::1             localhost
# 后面的这些都是自己配置的
127.0.0.1       www.cdx.com
127.0.0.1       location.cdx.com
127.0.0.1       test.yii.com
127.0.0.1       admin.yii.com

从这个文件中我们发现有一个localhost名字对应着127.0.0.1，这就是域名和ip的对应关系，所以我们在浏览器中输入http://localhsot:3000 就相当于我们输入了http://127.0.0.1:3000, 这里的127.0.0.1比较特殊，它是本机的ip回环地址，你可以粗暴的理解为只有是在你自己电脑上输入这个地址，那么就是指访问自己电脑

2 当这个本地的hosts文件中，并没有记录你访问的域名和ip的对应关系，那么就会去DNS服务器上找，DNS是域名解析系统，根据你的域名解析对应的ip地址，一般来说DNS配置正确，你访问的这个网站能正常提供服务，那么你输入域名都是能访问到网站的

3.4.获取get方式的数据

1 根据请求，返回不同的页面

//引入http模块
var http = require('http');
//创建一个服务实例
var app = http.createServer(function (req, res) {
    res.setHeader("content-type", "text/plain;charset=utf-8");
    //req 表示请求对象 一些请求信息会放在这个对象下
    //res 表示响应对象 一些响应的信息会放在这个对象下
    //一次http请求 会有一次响应
    //req.url记录了请求的路径，我们可以打印出来看看
    console.log(req.url);
    //根据不同的请求，做不同的事情
    if(req.url === '/'){
      res.write("欢迎来到网站首页");
      res.end();
    }else if(req.url === '/login'){
      res.write("欢迎来到登录页面");
      res.end();
    }else if(req.url === '/register'){
      res.write("欢迎来到注册页面");
      res.end();
    }else if(req.url === '/admin'){
      res.write("欢迎来到后台管理页面");
      res.end();
    }else{
      res.write("404 你找的页面飞了");
      res.end();
    }

});
// 设置监听端口
app.listen(3000);

2 返回一个html网页

index.html文件内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="/login" method="get" id="form">
    用户名: <input type="text"  name="username"/>
    密码： <input type="text" name="password" />
    <input type="submit"  value="登录" id="btn">
</form>
</body>
</html>

index.js文件内容

//引入fs模块，用来处理文件
var  fs = require('fs');
//引入http模块
var http = require('http');
//创建一个服务实例
var app = http.createServer(function (req, res) {
    if(req.url === '/login'){
      fs.readFile('./index.html', 'utf-8', function (err, data) {
        res.setHeader("content-type", "text/html;charset=utf-8");
        if(!err){
          res.write(data);
          res.end();
        }
      })
    }
});
// 设置监听端口
app.listen(3000);

运行index.js文件，在浏览器输入http://localhost:300/login 查看效果

3 url模块和querystring模块的使用

//引入url模块， 把url字符串解析成对象
var url = require('url');
//url字符串
var url_str = 'http://nodeing.com/search/?q=html';
//url字符串被解析成了对象
var urlObj = url.parse(url_str);
console.log(urlObj);
//从对象中获取查询字符串   query: 'q=html',
var query_str = urlObj.query;
//把查询字符串解析成对象
// 引入queryString模块
var queryString = require('querystring');
var queryObj = queryString.parse(query_str)
console.log(queryObj);
//取出html字符串
console.log(queryObj.q)

4 修改表单提交路径，发送数据到后台并且把发送的数据打印出来

index.html需要修改的内容

//把原来action改为 /user_login
<form action="/user_login" method="get" id="form">

index.js中的内容

//引入fs模块，用来处理文件
var  fs = require('fs');
// 引入url模块 可以把url解析成对象
var url = require('url');
// 引入querystring模块，可以把q=html这种查询字符串转换成对象
var queryString = require('querystring');
//引入http模块
var http = require('http');
//创建一个服务实例
var app = http.createServer(function (req, res) {
    //用url模块，把请求的url解析成对象
    var urlObj = url.parse(req.url);
    //打印出来看看是啥？
    console.log(urlObj);
    if(urlObj.pathname === '/login'){
      fs.readFile('./index.html', 'utf-8', function (err, data) {
        res.setHeader("content-type", "text/html;charset=utf-8");
        if(!err){
          res.write(data);
          res.end();
        }
      })
    }
    //如果请求的是 /user_login 就返回查询字符串
    if(urlObj.pathname === '/user_login'){
      //把这种格式 q=html 转换成 {q: 'html'}
      var query_obj = queryString.parse(urlObj.query);
      //打印出来
      console.log(query_obj);
      //返回查询字符串
      res.write(urlObj.query);
      res.end();
    }
});
// 设置监听端口
app.listen(3000);

3.5.获取post方式提交的数据

post方式提交的数据，在后端获取的方式不一样，需要监听两个事件，data和end，当请求发送数据会触发data事件，当数据接收完成会触发end事件，具体代码如下

//引入fs模块，用来处理文件
var  fs = require('fs');
// 引入url模块 可以把url解析成对象
var url = require('url');
// 引入querystring模块，可以把q=html这种查询字符串转换成对象
var queryString = require('querystring');
//引入http模块
var http = require('http');
//创建一个服务实例
var app = http.createServer(function (req, res) {
    //用url模块，把请求的url解析成对象
    var urlObj = url.parse(req.url);
    //打印出来看看是啥？
    console.log(urlObj);
    if(urlObj.pathname === '/login'){
      fs.readFile('./index.html', 'utf-8', function (err, data) {
        res.setHeader("content-type", "text/html;charset=utf-8");
        if(!err){
          res.write(data);
          res.end();
        }
      })
    }
    //如果请求的是 /user_login 就返回查询字符串
    if(urlObj.pathname === '/user_login' && req.method === 'POST'){
      var postData = '';
      req.on('data', function (datachunk) {
          postData += datachunk
      });
      req.on('end', function () {
        //返回查询字符串
        res.write(postData);
        res.end();
      });

    }
});
// 设置监听端口
app.listen(3000);

注意： 你需要把index.html中到请求方式改成post

//把method 改成post
<form action="/user_login" method="post" id="form">

螺钉课堂视频课程地址：http://edu.nodeing.com