ajax node一对一聊天室,Ajax+Node.js前后端交互最佳入门实践(05)

5.ajax简介

5.1.什么是ajax

Asynchronous JavaScript and XML ,异步的javascript和XML

5.2.使用ajax有什么用

数据交互，可以从服务器获取到数据，也可以从前台把数据发送到后台服务器

5.3.如何使用ajax

5.3.1 ajax程序流程

ajax技术就相当于使用js引擎去模拟浏览器提交的行为，试想一下，如果要去访问一个网页要经历几个步骤？

1、打开浏览器

2、输入网址

3、回车提交 发送请求

4、等待服务器响应 返回内容

ajax技术使用js引擎去发送数据实际上也有以上几个步骤。

举个栗子： index.html代码

Title

获取数据

var oBtn = document.getElementById('btn');

var oBox = document.getElementById('box');

oBtn.onclick = function () {

var xhr = new XMLHttpRequest();

xhr.open('get', '/getdata', true);

xhr.send();

xhr.onreadystatechange = function () {

if(xhr.readyState === 4 && xhr.status === 200){

oBox.innerText = xhr.responseText;

}

}

}

下面是服务器端index.js代码：

var http = require('http');

var url = require('url');

var fs = require('fs');

var app = http.createServer(function (req, res) {

res.setHeader('content-type', 'text/html;charset=utf-8');

var url_obj = url.parse(req.url);

if(url_obj.pathname === '/'){

fs.readFile('./index.html','utf-8', function (err, data) {

if(!err){

res.write(data);

res.end();

}

})

}

// 处理ajax请求

if(url_obj.pathname === '/getdata'){

res.write('hello world');

res.end();

}

});

app.listen(3000);