面试题二十:Ajax 原理是什么?ajax 是如何实现的?-Qui-Note

Ajax全称:

Async Javascript and XML,翻译后就是异步的JavaScript 和XML,可以在不重选加载页面的情况下,与服务器交换数据,并实现部分页面更新。

Ajax原理:

通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用JavaScript来操作DOM而更新页面。

Ajax实现过程:

1.新建 一个 XmlHttpRequest 实例化对象;

const xhr = new XmlHttpRequest();

2.通过 XmlHttpRequest 对象的open()方法连接服务器;

xhr.open(method,url,[async]...)

3.通过 XmlHttpRequest 对象的send()方法传递数据至服务器;

xhr.send([body])

4.通过 XMLHttpRequest 对象提供的 onreadystatechange 事件监听服务器通信状态;
readyState五个状态:

  • 0 —— 未连接
  • 1 —— 已打开
  • 2 —— 已获取响应头
  • 3 —— 正在下载
  • 4 —— 传输结束

5.根据服务器返回的状态及数据,处理更新页面。

Ajax封装:

function ajax(options){
// 创建xhr实例
const xhr = new XMLHttpRequest();

//初始化参数内容
options = options || {} ;
options.type = (options.type || 'GET').toUpperCase();
options.dataType = options.dataType || 'json';
const params = options.data;

//发送请求
if( options.type === 'GET' ){
	xhr.open('GET',options.url+'?'+params,true);
	xhr.send(null);
}else if(options.type === 'POST'){
	xhr.open('POST',options.url,true);
	xhr.send(params)
}

//接收请求
xhr.onreadystatechange = function(){
	if(xhr.readyState === 4){
		if(xhr.status>=200 && xhr.status<300){
			options.success && options.success(xhr.responseText,xhr.responseXML);
		}else{
			options.fail && options.fail(status)
		}
	}
}

}

Ajax使用:

ajax({
    type:'get/post',
    dataType:'json',
    url:'',
    data:'',
    success:function(text){
        console.log(text)
	},
	fail: function(status){
		console.log(status)
	}
})