ajax

Posted 2020-11-01 悔创阿里-杰克马

ajax:
asychronous javascript And XML,
是指一种创建交互式网页应用的网页开发技术。
交互：这里的交互指客户端和服务器的数据是可以相互传递和使用的。
XML:
一种类似于html的标记语言，可以将数据结构化，XML已被JSON淘汰了。
异步:
异步指程序可以同时执行，同步指程序需要按照顺序执行。

w3c标准：
var xhr = new XMLHttpRequest();
IE标准:
new ActiveXObjcet("Msxml2.XMLHTTP"); //msxml3.0;
new ActiveXObject("Microsoft.XMLHTTP"); //msxml2.6;
语法：
xhr.open("GET/POST",url,true/false);
备注：
open();
第一个参数指请求的发送方式，值为get或者post，建议大写。
第二个参数指请求的url路径。
第三个参数指请求是异步还是同步，如果写true表示异步(默认true)，写false表示同步。
语法：
xhr.send(string);
备注：
如果是get方式发送请求，send()命令中不用写任何参数。
传递的数据可以写在url中，服务器用$_GET["参数名"]接收。
如果是POST方式发送请求，需要设置请求头才能正确把数据传递给后端页面。
xhr.setRequestHeader(‘Content-Type‘，‘application/x-www-form-urlencoded‘);
xhr.send("数据名1=数据值&数据名2=数据值");//服务器用$_POST["参数名"]接收。
W3C建议我们使用get获取数据，使用post发送数据。
但实际上，，无论是get还是post，都即可以发送数据，也可以接收数据。
区别：
get是以url的方式传递数据，而post是以http请求中的body部分来传递数据，所以有种说法说post更安全。
get传递数据时，直接在浏览器地址栏中可以看到，而post可以使用开发者工具中看到。
get传递的数据，中文会被编码或者有可能出现乱码，而post不会。
get在IE下会走缓存(304),而post不会。

POST理论上没有长度的限制，HTTP协议没有对POST进行限制，起限制的是服务器的处理程序的处理能力。
Tomcat默认为2M；IIS默认为4M，也可以通过设置，让POST内容无限大，但要注意服务器和内存能力。

如何接收响应：
异步：
需要通过onreadystatechange监听;
例如：xhr.onreadystatechange = ()=>{};
指如果xhr对象的预备好的状态发生了变化时，触发函数。
同步：
不需要监听，可以直接获取响应 xhr.responseText;
异步时:
需要通过onreadystatechange监听
xhr.onreadystatechange = ()=>
{
if(xhr.readyState===4&&xhr.status===200)
{
//do Something(){};
alert(xhr.responseText);
}
}
请求状态4:响应已完成；您可以获取服务器的响应了。
HTTP状态200：ok，页面正确打开，并的到完整的响应内容。
//========================================
onreadystatechange指本次ajax请求的状态发生改变时所触发的事件
readyState 指请求状态
0：请求未初始化（还没有调用 open()）。
1：请求已经建立，但是还没有发送（还没有调用 send()）。
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
4：响应已完成；您可以获取并使用服务器的响应了。
status 指http状态（常用的http状态码，稍微了解下即可）
200：ok，页面正确打开，并得到完整的响应内容。
301：被请求的资源已永久移动到新位置
302：请求的资源临时从不同的 URI响应请求
304：缓存
404：页面不存在。
500：常指后端代码发生错误
503：由于临时的服务器维护或者过载，服务器当前无法处理请求。
responseText指接收到的响应结果

在使用AJAX时，是需要编写大量代码的，所以我们通常会把AJAX封装成一个函数，使用时直接调用即可。

然后通过回调函数的方式，当响应数据拿到之后，触发该函数。

回调函数解决的是，在异步程序中，想要按照顺序执行代码的方式。即某个异步程序执行完，执行某个函数。

function get(url, fn){
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.send();
    xhr.onreadystatechange = function(){
        if( xhr.readyState==4 && xhr.status==200 ){
            if( fn ){
                fn(xhr.responseText);
            }
        }
    }    
}


function post(url, data, fn){
    var xhr = new XMLHttpRequest();
    xhr.open("POST", url, true);
    xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘);
    xhr.send(data);
    xhr.onreadystatechange = function(){
        if( xhr.readyState==4 && xhr.status==200 ){
            if( fn ){
                fn(xhr.responseText);
            }
        }
    }    
}



var promise_get = url => {
    return new Promise( (succ, err)=>{
        get(url, str=>{
            succ(str);
        });
    } );
}