[转]ajax访问Node服务器

前言：node算是入了个门。现在终于有个服务器。以前只写过SSH框架的Java后台下，前台使用jQuery交互。但是纯原生怎么写呢？

demo需求

既然是demo先从最简单的。书写一个表单提交页面。从前台input提交到后台，接收输出到浏览器。后台将收到的数据再展示到前台output中。

双向的数据传输demo。demo虽小，五脏俱全。

新建工程

idea开发。新建基础模版。

前台页面index.html

页面实现如下：

前台代码：

<h3>请填写下表</h3>
<form>
    <label>姓名：<input type="text" id="name" name="name" value="zyd317"></label>
<br><br>
    <input type="submit" value="提交">
<br><br>
    您的姓名是：<output id="output"></output>
</form>
<script>
    var name = document.getElementById("name").value;
    var output = document.getElementById("output");
    //alert(name);
    var xhr = new XMLHttpRequest();
    xhr.open("get","http://localhost:8888/?name="+name,true);//把数据传到哪里？
    xhr.onreadystatechange=function () {
        if(xhr.readyState==4){
            if(xhr.status>=200&&xhr.status<300||xhr.status==304){
                console.log("您的名字是："+xhr.responseText);//从服务器得到的反馈文本
                output.innerHTML=xhr.responseText;

            }
        }
    };
    //xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xhr.send();//表单必须要要格式化
</script>

node.js代码

var http = require("http");//获取http模块
    function onRequest(req,res) {//定义服务器监听得到响应的函数
        var text = req.url.toString().split("=")[1];
        console.log("result-----------"+req.url.toString());
        console.log("text-----------"+text);
        res.writeHead(200,{"Content-Type":"text/plain","Access-Control-Allow-Origin":"http://localhost:63342"});
        res.write(text);//相当于页面的responseText
        res.end();
    }
http.createServer(onRequest).listen(8888, function () {//createServer可以传入两个参数(req,res)
    console.log("listening................");
});

原文件