AJAX

XMLHttpRequest对象

AJAX的原理就是通过XMLHttpRequest对象向服务器发起异步请求。现在一般主流的浏览器都支持该对象，不过早期的IE5、6只支持ActiveXObject。所以，我们需要做出兼容

var xmlhttp = null;
if(window.XMLHttpRequest){
    xmlhttp = new XMLHttpRequest();
}else{
    xmlhttp = new ActiveObject('Microsoft.XMLHTTP');
}

该对象的方法

方法	描述
abort()	取消当前响应，关闭连接并且结束任何未决的网络活动。此方法将会把readyState状态值重置为0
getAllResponseHeaders()	把HTTP响应头部作为未解析的字符串返回。如果readyState值小于3，则返回null；否则返回服务器发送的所有HTTP响应的头部。
getResponseHeader()	返回 指定 的HTTP响应头部的值
open()	初始化HTTP请求参数，如URL和请求方法(下面会说明具体参数)，但是不发送请求
send()	发送HTTP请求，使用传递给open()方法的参数
setRequestHeader()	向一个打开但未发送（即使用了open但未使用send）的请求设置或添加HTTP请求

这里需要注意的是，当使用POST请求时，必须要设置请求头

其中open()方法的参数

open( method,url,async,username,password )

参数	描述
method	可以是GET、POST、PUT、DELETE或者HEAD
url	我们请求的地址
async	是否请求为异步，默认为true(异步)
username和password为可选	为URL所需授权提供认证资格

XMLHttpRequest对象的属性和事件

属性或事件	描述
readyState属性	HTTP请求的状态。当一个XMLHttpRequest对象被初次创建时，这个属性的值从0开始，直到接受到完整的HTTP响应，这个值增加到4。
onreadystatechange事件	每次readyState的值改变的时候，都可以调用这个句柄函数。值得注意的是，当readyState为3时，他可能调用多次。因为当readyState为3时，是一个持续接受数据的过程。
status属性	由服务器返回的HTTP状态码，如200表示成功
statusText属性	status返回了与状态码对应的状态名称。例如当状态为200时，能么将会返回“OK”
responseXML属性	对请求的响应，解析为XML并作为Document对象返回。
responseText属性	到目前为止，从服务器接收到的响应体（具体数据）

这上面中，readyState尤为重要，因为上面所介绍的属性或事件都有readyState的参与，readyState的状态值如下

状态值	名称	描述
0	Uninitialized	初始化状态.XMLHttpRequest对象已创建或已被abort()方法重置
1	Open	open()方法已被调用，但是send()方法未被调用。即请求还没有被发送
2	Send	send()方法已被调用，HTTP请求已发送到Web服务器。此时请求已发送
3	Receiving	所有响应头部已经被接收到。响应体（即数据）已被接受到，但还未完成。因为数据接收是一段过程
4	Loaded	HTTP响应已被完全接收。即从服务器传来的数据已全部接收完毕。

---

ajax实例

ajax方法封装

function Ajax(){
	// 创建ajax对象
    let ajax = new Object();
    
    // 做出兼容
    ajax.createServer = function(){
        var xmlRequest = false;
        if(window.XMLHttpRequest){
            xmlRequest = new XMLHttpRequest();
        }else if(window.ActiveXObject){
            xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");
        }
        return xmlRequest;
    };
    
    // 建立回调函数
    ajax.changeFunction = function( callback){
        if(ajax.xmlRequest.readyState == 4 && ajax.xmlRequest.status == 200){
            callback(ajax.xmlRequest.responseText);
        }
    };
    
    // 封装get方法
    ajax.get = function(url,callback,async){
        // 设置回调
        if(!callback){
            alert('请传入回调函数');
        }else{
            ajax.xmlRequest.onreadystatechange = ajax.changeFunction;   
        }
        // 打开设置请求
        ajax.xmlRequest.open('GET',url,async);
        // 发送请求
        ajax.xmlRequest.send();
    };

    // 封装POST方法
    ajax.post = function(url,callback,string,async){
        //处理要向服务器提交的参数
        if(typeof string == 'object'){
            var str = '';
            try{
                for(let i in string){
                    //把JSON对象转化为name = Tom & age = 19的形式
                    str += i + '=' + string[i] + '&';
                }
                // 将最后的 '&' 删除
                string = str.substr(0,str.length-1);
            }catch(err){
                // 如果中途报错，证明传入的参数的格式不对
                alert('请传入正确的参数格式！');
            }
        }
        // 设置回调
        if(!callback){
            alert('请传入回调函数');
        }else{
            ajax.xmlRequest.onreadystatechange = ajax.changeFunction;   
        }
        // 打开设置请求
        ajax.xmlRequest.open('GET',url,async);
        //设置请求头,post方法中，这一步骤是必须的
        ajax.xmlRequest.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        // 发送请求
        ajax.xmlRequest.send(string);
    }
    ajax.xmlRequest = ajax.createServer();
    // 返回ajax对象
    return ajax;
}

// 调用封装的AJAX
Ajax().get('xxx/index',callback,true);

express （基于node的框架）后台代码

使用express作为服务端，因为语法前端都看得懂
路由分离

//app.js
...
var back = require('../xxx/back');
app.use('/index',back);  //将请求转发给back.js文件处理

//back.js
var express = require('express');
var router = express.Router();

app.get('/',function(req,res,next){
    res.send('访问后台成功！');
});

// 假如前端发送名字和城市过来后台
app.post('/',function(req,res,next){
    res.json({name:req.name,city:req.city}); 
});

//这里GET到的路径，是剔除了index后的路径。如果这里的路径再加上index的话，那么前端访问将是xxx/index/index

关于express中res返回数据给前端的方法

方法	描述
send()	返回文本数据
json()	返回JSON数据
render()	返回模板文件(即HTML页面)

关于express中req获取前端发送过来的参数

① 对于GET请求发送来的参数，用req.query;获取参数

console.log(req.query)

② 对于POST请求发送来的参数，用req.body;获取参数

console.log(req.body);