6.XMLHttpRequest对象
XMLHttpRequest 是一个 API，它为客户端提供了在客户端和服务器之间传输数据的功能。它提供了一个通过 URL 来获取数据的简单方式，并且不会使整个页面刷新。这使得网页只更新一部分页面而不会打扰到用户。XMLHttpRequest 在 AJAX 中被大量使用。
6.1.创建XMLHttpRequest对象
6.1.1 XMLHttpRequest兼容性问题
XMLHttpRequest在ie6以下是以插件的形式来使用的，没有内置在浏览器中，所以在ie6以下不能通过new XMLHttpRequest的形式来使用，在ie下可以通过new ActiveObject("Microsoft.XMLHTTP")来使用,因此，可以写出这样：
var xhr = null; if(window.XMLHttpRequest){ //标准模式下 ???xhr = new XMLHttpRequest(); }else{//ie6以下走这里 ???xhr = new ActiveXobject(‘Microsoft.XMLHTTP‘); }
在很多地方也通过异常处理的形式来处理兼容。try...catch...finally语句语法结构：
try{ ???//尝试着执行这段代码 如果有错就执行catch里面的代码}catch(e){ ???//try里面的错误信息都会被存放在 参数e里面}finally{ ???//不管是否有错最终都要执行这段代码 通常这里都不写 只是 try ?catch的组合}try{ ???sdfs; ???alert(1);}catch(e){ ???alert(2);}finally{ ???alert(3)}//执行结果 先弹2 再弹3 ??try里面的语句报错
ajax对象兼容性写法：
var xhr = null ;try{//标准下不会报错 执行这里的代码 ???xhr = new XMLHttpRequest();}catch(e){ ???ed //ie下try里面的语句错误 执行这里的代码}
6.2.open 方法
open方法和表单提交数据很相似
表单提交数据： ???action: 数据提交的地址，如果不写，默认提交到当前页面 ???method： 数据提交的方式，有get和post两种方式，默认使用get方式，url长度有限制，所以不要通过 ???get方式传递过长的数据，post方式理论上没有长度限制，但是可以通过修改配置文件设置长度 ???enctype: 提交数据的格式，默认提交数据格式为：enctype="application/x-www-form-urlencoded"open方法语法：
xhr.open("get","01.txt",true);xhr为创建好的ajax对象第一个参数： 打开方式，这里的打开方式跟表单差不多，有get和post两种方式，相当于method第二个参数： 打开的地址，这里就相当于表单里的acthion属性第三个参数： 是否异步 ????????????同步：阻塞模式，当前一条代码会影响后面代码执行 ????????????异步：非阻塞模式，前面的 代码不会影响后面代码的执行6.3.发送和获取数据
通过send方法发送数据，通过监听readystatechange事件来获取数据
//发送请求---->相当于点击回车键发送的过程 ???xhr.send(); ???//监听请求状态--->发送以后等待返回数据，网站展现出来 ???xhr.onreadystatechange = function(){ ???????if(xhr.readyState == 4 && xhr.status == 200){ ???????????alert(xhr.responseText); ???????} ???}
responseText: 服务器返回的数据会存放到ajax对象的一个responseText属性中 readyState：表示ajax的工作状态，一共有5个状态
???????????状态0: 表示ajax对象创建成功（初始化），但是还没有调用open方法 ???????????状态1:表示已调用send方法，正在发送数据（载入数据） ???????????状态2:send方法发送完成，已经收到响应内容（载入完成） ???????????状态3:表示正在解析内容（解析）（注：收到响应内容后，还需要解析内容） ???????????状态4:响应内容解析完成，可以使用数据了（注：状态为4的时候说明所有流程已经完成，拿到数据了）onreadyStatechang：这个事件用来监听ajax工作状态的，可能会被触发多次，表示当状态发生改变的时候被触发
status: 表示服务器的状态码
通过以上几个属性的了解后，ajax获取数据时的容错处理可以写成这样：
xhr.onreadystatechange = function(){ ???if(xhr.readyState == 4 ){ ???????if(xhr.status == 200){ ???????????alert(xhr.responseText); ???????}else{ ???????????alert("出错了:"+xhr.status); ???????} ???} }
6.4.带数据情况的处理
get方式发送数据，数据是放在url地址里面发送过去的，在ajax中也通过这种形式传送数据
//创建ajax对象 ---->相当于打开浏览器 ???var xhr = new XMLHttpRequest(); ???//打开要获取文件的地址---->相当于输入网址 ???xhr.open(‘get‘,‘/getData?username=xiaoqiang&age=19‘,true); ???//发送请求---->相当于点击回车键发送的过程 ???xhr.send(); ???//监听请求状态--->发送以后等待返回数据，网站展现出来 ???xhr.onreadystatechange = function(){ ???????if(xhr.readyState == 4 && xhr.status == 200){ ???????????alert(xhr.responseText); ???????} ???}
注意： 通过get方式发送请求在ie下会出现两个问题，第一个就是缓存问题 第二就是乱码问题，需要通过encodeURI()进行转码发送
post方式发送请求数据，数据是放在请求体里面传送过去的，在ajax中，数据放在send方法中传送过去，并且要设置请求头的类型
//创建ajax对象 ---->相当于打开浏览器 ???var xhr = new XMLHttpRequest(); ???//打开要获取文件的地址---->相当于输入网址 ???xhr.open(‘post‘,‘/getData‘,true); ???//发送请求---->相当于点击回车键发送的过程 ???xhr.setRequestHeader("content-type","application/x-www-form-urlencoded"); ???xhr.send(‘username=xiaoqiang&age=19‘); ???//监听请求状态--->发送以后等待返回数据，网站展现出来 ???xhr.onreadystatechange = function(){ ???????if(xhr.readyState == 4 && xhr.status == 200){ ???????????alert(xhr.responseText); ???????} ???}
举个栗子： 1 ajax版用户登录认证
login.html文件内容
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.msg{ ???????????color: red; ???????} ???</style></head><body><form action=""> ???用户名: <input type="text" id="username"> <span class="msg"></span><br /> ???密码: <input type="password" id="password"> <br /> ???<input type="button" value="登录" id="btn"></form><script> ???var oBtn = document.getElementById("btn"); ???var oUser = document.getElementById(‘username‘); ???var oPass = document.getElementById(‘password‘); ???var oSpan = document.getElementsByClassName(‘msg‘)[0]; ???oBtn.onclick = function () { ???????var xhr = null; ???????try { ?????????xhr = new XMLHttpRequest(); ???????}catch(e){ ?????????xhr = new ActiveXobject(‘Microsoft.XMLHTTP‘); ???????} ???????xhr.open(‘post‘, ‘/login‘, true); ???????xhr.setRequestHeader(‘content-type‘, ‘application/x-www-form-urlencoded‘); ???????xhr.send(‘username=‘+oUser.value+‘&password=‘+oPass.value); ???????xhr.onreadystatechange = function () { ????????????if(xhr.status === 200 && xhr.readyState === 4){ ???????????????var obj = JSON.parse(xhr.responseText); ???????????????if(obj.status === 0){ ?????????????????alert(obj.message); ?????????????????window.location.href = ‘http://nodeing.com‘; ???????????????}else{ ?????????????????oSpan.innerHTML = obj.message; ???????????????} ????????????} ???????} ???}</script></body></html>
服务器端index.js中的代码
var http = require(‘http‘);var url = require(‘url‘);var fs = require(‘fs‘);var querystring = require(‘querystring‘);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 === ‘/login‘ && req.method===‘GET‘){ ???fs.readFile(‘./login.html‘,‘utf-8‘, function (err, data) { ?????if(!err){ ???????res.write(data); ???????res.end(); ?????} ???}) ?} ?// 处理ajax请求 ?if(url_obj.pathname === ‘/login‘ && req.method === ‘POST‘){ ???console.log(1); ???var post_data = ‘‘; ???req.on(‘data‘, function (chunk) { ?????post_data += chunk; ???}); ???req.on(‘end‘, function () { ??????var post_obj = querystring.parse(post_data); ??????if(post_obj.username === ‘admin‘ && post_obj.password === ‘123456‘){ ????????res.write(‘{"status":0, "message":"登录成功"}‘); ??????}else{ ????????res.write(‘{"status":1, "message":"用户名或者密码错误"}‘); ??????} ?????res.end(); ???}) ?}});app.listen(3000);
2 获取后台数据
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<script type="text/javascript"> ???????????window.onload = function(){ ???????????????var oBtn = document.getElementById("btn"); ???????????????oBtn.onclick = function(){ ???????????????????//创建ajax对象 ???????????????????var xhr = null; ???????????????????try{ ????????????????????????xhr = new XMLHttpRequest(); ???????????????????}catch(e){ ????????????????????????xhr = new ActiveXobject(‘Microsoft.XMLHTTP‘); ???????????????????} ???????????????????//打开要获取文件的地址 ???????????????????xhr.open(‘get‘,‘/getdata‘,true); ???????????????????//发送请求 ???????????????????xhr.send(); ???????????????????//alert(xhr.responseText); ???????????????????//监听请求状态 ???????????????????xhr.onreadystatechange = function(){ ???????????????????????if(xhr.readyState == 4 && xhr.status==200){ ????????????????????????????var data = JSON.parse(xhr.responseText); ????????????????????????????var oUl = document.getElementById(‘ul1‘); ????????????????????????????for(var i=0;i<data.length;i++){ ?????????????????????????????????var oli = document.createElement(‘li‘); ?????????????????????????????????oli.innerHTML = data[i].title+‘[‘+data[i].time+‘]‘; ?????????????????????????????????oUl.appendChild(oli); ????????????????????????????} ???????????????????????} ????????????????????} ???????????????} ???????????} ???????</script> ???</head> ???<body> ???????<input type="button" id="btn" value="获取数据" /> ???????<ul id="ul1"> ????????</ul> ???</body></html>
app.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‘){ ???var arr = ‘[‘ + ???????‘{"title":"习大大出席国家科学技术奖励大会1","time":"‘+new Date().toLocaleDateString()+‘"},‘ + ???????‘{"title":"习大大出席国家科学技术奖励大会2","time":"‘+new Date().toLocaleDateString()+‘"},‘ + ???????‘{"title":"习大大出席国家科学技术奖励大会3","time":"‘+new Date().toLocaleDateString()+‘"},‘ + ???????‘{"title":"习大大出席国家科学技术奖励大会4","time":"‘+new Date().toLocaleDateString()+‘"}‘ + ???????‘]‘; ???res.write(arr); ???res.end(); ?}});app.listen(3000);
Ajax+Node.js前后端交互最佳入门实践(06)
原文地址：https://www.cnblogs.com/nodeing/p/8809071.html