AJAX前后端分离

前后端分离处理
前端------（数据）-----服务端----（数据）-----前端-----动态改变页面的内容

json
1、JSON（JavaScript Object Notation）以纯文本结构组织所要传送的数据，
数据内容包括字符串、数字、数组和对象等，由于JSON易读以及纯文本格式的特性，
可以非常容易地与其他程序进行沟通与数据交换。
2、JSON的数据结构通过大括号、中括号、逗号和冒号来组织数据，
冒号（键：值）：
一个键值（key）对应一个值（value），字符串部分要用双引号来表示
“姓名”:“小陈” 、 “英文”:75 、 “数学”:80
大括号（对象）：
对象代表的是一系列“键：值”的集合，注意点：“键”一定要声明成字符串，也就是一定要加上“双引号”
{“姓名”:”小陈”,”英文”:75,”数学”:80}
中括号（数组）：
数组内可以存放数字、文字、布尔值、数组、对象等变量，无论是同时存放同一种性质的变量，
或是混合使用都可以，同样以逗号隔开每个变量。
3、json遍历
for in 关键字
for ( 变量 in 对象){//执行语句}

JSON字符串: var str1 = ‘{ “name”: “cxh”, “sex”: “man” }’;
4、JSON字符串转换为JSON对象
var obj = eval(’(’ + str + ‘)’);或者：var obj = JSON.parse(str); (常用)
5、JSON对象转JSON字符串
var last=JSON.stringify(obj);

AJAX简介
AJAX:Asynchronous JavaScript + XML:
向服务器请求额外的数据而无须卸载页面(即刷新)，会带来更好的用户体验
虽然Ajax中的x代表的是XML，但Ajax通信和数据格式无关，也就是说这种技术不一定使用XML。
Ajax技术核心是XMLHttpRequest对象(简称XHR)
IE7+、Firefox、Opera、Chrome和Safari都支持原生的XHR对象，
在这些浏览器中创建XHR对象可以直接实例化XMLHttpRequest即可。
–var xhr = new XMLHttpRequest();

XMLHttpRequest标准又分为Level 1和Level 2。
XMLHttpRequest Level 1主要存在以下缺点：
受同源策略的限制，不能发送跨域请求；
不能发送二进制文件（如图片、视频、音频等），只能发送纯文本数据；
在发送和获取数据的过程中，无法实时获取进度信息，只能判断是否完成；
Level 2对Level 1 进行了改进，XMLHttpRequest Level 2中新增了以下功能：
可以发送跨域请求，在服务端允许的情况下；
支持发送和接收二进制数据；
新增formData对象，支持发送表单数据；
发送和获取数据时，可以获取进度信息；
可以设置请求的超时时间；

XMLhttpRequest
1、新建XMLHttpRequest对象
var request=new XMLHttpRequest();
IE 7以下 var request=new ActiveXObject(“Microsoft.XMLHTTP”);
2、打开要发送的地址通道。
request.open(“GET”,地址，同步/异步)；
3、给XMLHttpRequest对象增加侦听器，用来侦听各种情况，包括各种链接状态
request.addEventListener(“load”,侦听函数)发送数据给打开的地址，
4、如果没有要发送的内容直接send（）
request.send();

var xhr=new XMLHttpRequest();
xhr.addEventListener("load",loadHandler);
xhr.open("POST","http://10.9.23.238:3002");
xhr.send("a=20&b=30");
function loadHandler(e) {
    console.log(this.response);
}

GET和POST
1、在Ajax使用的过程中，GET的使用频率要比POST高
2、GET 请求是最常见的请求类型，最常用于向服务器查询某些信息。必要时，
可以将查询字符串参数追加到URL的末尾，以便提交给服务器。
通过 URL 后的问号给服务器传递键值对数据，服务器接收到返回响应数据。
特殊字符传参产生的问题可以使用 encodeURIComponent()进行编码处理
3、POST 请求可以包含非常多的数据，我们在使用表单提交的时候，很多就是使用的 POST 传输方式。
xhr.open(‘post’, ‘demo.php’, true);
而发送 POST 请求的数据，不会跟在 URL 的尾巴上，而是通过 send()方法向服务器提 交数据。
xhr.send(‘name=Lee&age=100’);
一般来说，向服务器发送 POST 请求由于解析机制的原因，需要进行特别的处理。
因为 POST 请求和 Web 表单提交是不同的，需要使用 XHR 来模仿表单提交。
xhr.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);
PS：从性能上来讲 POST 请求比 GET 请求消耗更多一些，用相同数据比较，GET 最多 比 POST 快两倍。

服务器端（需要开启notejs,并且写在js文件中，js文件开启服务）
decodeURIComponent();//解析URL编码格式
encodeURIComponent();//转换为URL编码格式

当页面请求为get时

  var http=require("http")//加载http.js文件
    var str=require("querystring")//处理字符串的一个方法对象
    var server=httpCreateServer(serverHandle)，
    //创建服务，当服务器接收到客户端请求时执行回调函数。
    server.listen(3001,"10.9.23.143",listenHandle)//监听服务是否开启，
        //参数一为自定义端口，客户端请求服务的端口和这个端口一致。
        而且此端口不能被其他服务占用。
        //参数二为服务器所在ip地址。参数三为监听服务是否开启的监听事件函数，
        当服务器开启式执行，
      
          //即打开服务器就执行。
    //serverHandle中的两个参数，req是客户端请求发给服务器的请求对象，
    //res是服务器发给客户端的结果对象
    function serverHandle(req,res){
        //客户端请求数据过程中执行下面的函数
        req.on("data",function(_data){
        //_data参数用来接收客户端发过来的请求数据过程
           
        })
        
        //当所有的客户端请求数据接受完毕才执行下面的函数。
        req.on("end",function(){
        //头部写入信息，第一个参数200是告诉客户端收到请求信息并已处理
        //第二个参数是一个对象，写入请求头信息，包括字符编码格式，允许的跨域请求。
        res.writeHead(200,{"content-type":"text/html;charset=utf-8",
        "Access-Control-Allow-Origin":"*"})
        var obj=str.parse(req.url.split("?")[1])//将地址栏？后面的内容转换为对象
        obj.a++
        res.write(obj.a.tostring())//将处理的数据返回给客户端，必须是字符串
        res.end()//发送给客户端过程结束。
    })
}
function listenHandle(e){
    console.log("已开启服务")
}

当页面请求为post时，过程与get请求服务基本一致，不同点在于请求的数据处理方式不同。
get请求时，数据在地址栏，post请求时，数据在请求的过程中接受，即在req.on过程中接受参数data传递过来的数据。

var http=require("http")
var str=require("querystring")//处理字符串的一个方法对象
var server=httpCreateServer(serverHandle)
server.listen(3001,"10.9.23.143",listenHandle)//监听服务是否开启
function serverHandle(req,res){
    var data=""
    req.on("data",function(_data){
    //客户端请求数据传输过程中执行的函数，_data参数接收数据。
        data=_data
        //获取客户端请求服务发过来的数据。即客户端发送请求的字符串数据。
    })
    req.on("end",function(){
        res.writeHand(200,{"content-type":"text/html","chares.writeHead(200,charset=utf-8",
        "Access-Control-Allow-Origin":"*"})
        var obj=str.parse(data)
        var num=Number(obj.a)+Number(obj.b)
        res.write(num.toString())
        res.end()
    })
}
function listenHandle(e){
    console.log("已开启服务")
}

AJAX方法
open
通过XMLHttpRequest ,你可以很容易的取回一个URL上的资源数据. 尽管名字里有XML,
但 XMLHttpRequest 可以取回所有类型的数据资源，并不局限于XML。
而且除了HTTP ,它还支持file 和 ftp 协议.
因此不要局限于网络通信，他同样也可以做当前服务中的文件调用
Open方法的参数主要包括

DOMString method,
DOMString url,
optional boolean async,
optional DOMString user,
optional DOMString password
method:
GET：通过URL地址栏中使用？后面的内容用&连接产生，显示出来
POST：通过二进制流数据发送到服务端，隐藏发送，
这个POST和form表单POST不一样
PUT
DELETE
DELETE
URL
如果地址是http协议的，如果需要端口号必须加上端口号。
url地址是一个比较强大的内容，如果给服务器传参不需要加密的话，可以通过url来进行传参，通常传参的方法是
协议://域名（IP）:端口号/端口号下面的文件路径?（GET）参数1=参数值1&参数2=参数值2…
协议:http://,https://,file://(相对地址，不增加协议),ftp://
客户端的域名和端口号如果与服务端的域名或者端口有一个不相同时
都需要跨域访问。
async 异步 默认值是true
当使用同步时，可以不用侦听通信事件，直接在send后调用就可以
但是因为同步的原因如果一旦出现加载异常或者加载失败，将会报错
因此在ajax通信中尽量不要使用同步
用户名和密码 现在一般用于ftp通信中使用

http头部
content-length(POST请求)
getResponseHeader获取头部指定的属性值
getAllResponseHeaders 获取所有头部属性
setRequestHeader 设置头部属性，必须在open以后，send以前写入
请求头信息中，普通的页面访问可以发送COOKIE，但是ajax不能发送cookie
当需要cookie时，获取cookie然后包装后发给服务器

abort() 方法将终止请求，如果该请求已被发出。当一个请求被终止，
它的 readyState 属性将被置为0（ UNSENT ），但是并不触发 readystatechange 事件。

send()
发送请求. 如果该请求是异步模式(默认),该方法会立刻返回. 相反,如果请求是同步模式,
则直到请求的响应完全接受以后,该方法才会返回.
注意: 所有相关的事件绑定必须在调用send()方法之前进行.

 void send();
    void send(ArrayBuffer data);类型化数组
    void send(Blob data);二进制大对象，是一个可以存储二进制文件的容器。
    void send(Document data); 文档对象
    void send(DOMString? data); 文本数据
        void send(FormData data); 数据对象，可以直接封装内容
 FormData
     var formData = new FormData();
      formData.append("username", "EricXie");
      formData.append("age", "30");
      formData.append("sex", "men");
      request.send(formData);

readyState
UNSENT：XMLHttpRequest 代理已被创建， 但尚未调用 open() 方法。
OPENED：open() 方法已经被触发。在这个状态中，可以通过 setRequestHeader() 方法来设置请求的头部，
可以调用 send() 方法来发起请求。
HEADERS_RECEIVED：send() 方法已经被调用，响应头也已经被接收。
LOADING：响应体部分正在被接收。如果 responseType 属性是“text”或空字符串，
responseText 将会在载入的过程中拥有部分响应数据。
DONE：请求操作已经完成。这意味着数据传输已经彻底完成或失败。

事件
超时事件:
当进度由于预定时间到期而终止时，会触发timeout 事件。
request.addEventListener(“timeout”,timeoutHandler);
loadstart
当程序开始加载时，loadstart 事件将被触发。也适用于 和 元素.
loaded 已加载、total 总计数据
loadend
当一个资源加载进度停止时 (例如，在已经分派“错误”，“中止”或“加载”之后)，触发loadend事件。
这适用于例如 XMLHttpRequest调用, 以及或元素的内容。
loaded 已加载、total 总计数据
Progress
进度事件会被触发用来指示一个操作正在进行中。
loaded 当前加载字节
total 总字节
abort:当一个资源的加载已中止时，将触发abort事件。
error:当一个资源加载失败时会触发error事件。
load:当一个资源及其依赖资源已完成加载时，将触发load事件。
timeout:当进度由于预定时间到期而终止时，会触发timeout 事件
request.timeout = 2000;
一个无符号长整型数，代表着一个请求在被自动终止前所消耗的毫秒数。
默认值为 0，意味着没有超时。超时并不应该用在一个 document environment
中的同步 XMLHttpRequests 请求中，否则将会抛出一个 InvalidAccessError 类型的错误。
当超时发生， timeout 事件将会被触发。
必须设置在open以后，send之前。
readystatechange
当一个文档的 readyState 属性发生更改时，readystatechange 事件会被触发。
状态主要分

 1、 信息  100-101
 2、成功  200-206
 3、重定向  300-307
 4、客户端错误 400-417
 5、服务器错误  500-505

AJAX跨域
1、jsonp跨域
起始JSONP并不是通过AJAX实现，而是通过script标签的加入。我们知道通常在标签中src指向地址时，
是可以直接通过的，而不需要考虑跨域，
注：script标签src中？后面必须得有回调函数，否则客户端和服务端无法数据交流。

var script=document.createElement("script");
script.src="http://localhost:3007/server.js?fn=callback&time="+new Date().getTime();
document.body.appendChild(script);
function callback(str) {
    console.log(str);
} 

node.js中语句

var obj=qs.parse(req.url.split("?")[1]);
        res.writeHead(200,{"content-type":"text/plane;charset=utf-8"});
        var str=obj.fn+"('你好')";
        //注意这里，这是调用这个函数内容。通过发送给服务端这个字符串，
         //调用了客户端的函数
        res.write(str);
        res.end();

百度搜索提示jsonp接口
script.src = “https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?
wd=&json=1&p=3&sid=22084_1436_13548_21120_22036_22073&req=2&csor=0&cb=callback”;
2、cors跨域解决
在服务器端处理，客户端不处理
res.writeHead(200,{“Content-Type”:“text/plain”,“Access-Control-Allow-Origin”:""});
头部消息中加入"Access-Control-Allow-Origin":""，表示任何域可以访问。如果需要指定域，
就改成对应的地址或域名就可以了
3、websocket解决

promise：通过promise封装AJAX

function ajax(type,url,arg) {//类型（POST、GET），地址，数据。
    return new Promise(function (res,rej) {
        var xhr;
        try {
            xhr=new XMLHttpRequest();
        }catch(e) {
            xhr=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xhr.num=0;
        xhr.onreadystatechange=function (e) {
            if(xhr.readyState===4 && xhr.status===200){
                xhr.onreadystatechange=null;
                res(xhr.response);
            }
            if(xhr.readyState===4 && xhr.status!==200){
                xhr.onreadystatechange=null;
                rej("数据通信有错误");
            }
        };
        xhr.function (e) {
            xhr.null;
            rej("数据通信错误");
        };
        var str="";
        if(typeof arg==="object"){
            for(var key in arg){
                str+=key+"="+arg[key]+"&";
            }
            str=str.slice(0,-1);
        }else{
            str=arg;
        }
        var sendStr="";
        if(type.toLowerCase()==="post"){
            sendStr=str;
            str="";
        }
        xhr.open(type,url+"?"+str);
        xhr.timeout=5000;
        xhr.ontimeout=function (e) {
            xhr.abort();//终止发送
            xhr.num++;
            if(xhr.num>2){
                xhr.ontimeout=null;
                rej("访问失败");
                return;
            }
            xhr.open(type,url+"?"+str);
            xhr.send(sendStr);
        };
        xhr.send(sendStr);
    })
}



ajax("POST","http://10.9.23.238:3002","a=10&b=20").then(function (res) {
    console.log(res);
},function (rej) {
    console.log(rej);
})

HTTP状态码
1XX：信息状态码

 100 Continue 继续，一般在发送post请求时， 
 已发送了http header之后服务端将返回此信息，
     表示确认，之后发送具体参数信息;

2XX：成功状态码

 200 OK 正常返回信息
    201 Created 请求成功并且服务器创建了新的资源
    202 Accepted 服务器已接受请求，但尚未处理

3XX：重定向

   301 Moved Permanently 请求的网页已永久移动到新位置。
    302 Found 临时性重定向。
    303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。
    304 Not Modified 自从上次请求后，请求的网页未修改过。

4XX：客户端错误

400 Bad Request 服务器无法理解请求的格式， 客户端不应当尝试再次使用相同的内容发起请求。
401 Unauthorized 请求未授权。
403 Forbidden 禁止访问。
404 Not Found 找不到如何与 URI 相匹配的资源。

5XX: 服务器错误

   500 Internal Server Error 最常见的服务器端错误。
    503 Service Unavailable 服务器端暂时无法处理请求 （可能是过载或维护）。