原生发送`AJAX`请求

原生发送AJAX请求

1.XMLHttpRequest对象是ajax的基础,XMLHttpRequest 用于与服务器交换数据。
2.ajax请求过程：创建XMLHttpRequest对象、连接服务器、发送请求、接受相响应数据。

测试get类型的Ajax请求

// 1.创建一个XMLHttpRequest对象
var xml = new XMLHttpRequest();
// 2.绑定XMLHttpRequest对象状态发生变化的监听回调
xml.onreadyStatechange = function(){
// 表示数据完全接受完毕
if(xml.readyState ===4){
    // 表示服务器响应成功
    if(xml.status === 200){
	    // 得到响应返回的数据
	    xml.responseTest;
	    }
    }
}
// 3.创建http请求
xml.open('GET','/test/get?name=koke');
// 4.发送http请求
xml.send();

测试post类型的Ajax请求

if(xml.readyState === 4 && xml.status === 200)
// 创建http请求
xml.open('POST','test/post/q');
// 在使用post方法时，必须添加请求头
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 发送请求携带参数
xml.send('username=keke');

问题:反复多次发送ajax请求，会出现bug
解决方法：使用abort拦截ajax请求

var xml = null;
if(xml === null){ // 判断用户是不是第一次发送请求
xml = new XMLHttpRequest();
else{ // 已经存在了ajax请求，不是第一次请求了，请求还没有结束
	xml.abort();  // 拦截最新的请求
	}
}

使用JSONP解决跨域问题

JSONP借助了script标签节点跨域访问/获取的特性。JSONP实现跨域请求的原理简单的说，就是动态创建<script>标签，然后利用<script>的src不受同源策略约束来跨域获取数据。

1. 动态创建script标签
function createScript(scr){
    var script = document.createElement('script');
    script.setAttribute('type','text/javascript');
    script.src = src;
    document.body.appendChild(script)
    };
    2. 触发点击事件，发送跨域请求
    click=function(){
	    var url = 'http://localhose:3000/ajax/test?callback=getDatas'+'&'+username;
	    createScript(url);
	    }
	    3.具体的功能函数，从后台获取到的数据
	    getDatas(data){
		    data就是跨域请求后得到的数据
		    }
		    ？callback=函数名，跨域的书写形式，callback是标识，后台调用这个函数，并传递数据。