js手写ajax
AJAX 的全称是异步的 Javascript 和 XML(Asynchronous Javascript And XML) ,是一种创建快速动态的技术,通过在后台与服务器进行少量数据交互,实现网页的异步更新,在不重新加载整个界面的情况下,做到网页的部分刷新;
AJAX 的交互模型( AJAX 的过程)
1.用户发出异步请求;?
2.创建 XMLHttpRequest 对象;
3.告诉 XMLHttpRequest 对象哪个函数会处理 XMLHttpRequest 对象状态的改变,为此要把对象的 onReadyStateChange属性设置为响应该事件的JavaScript 函数的引用
4.创建请求,用 open 方法指定是 get 还是 post ,是否异步, url 地址;
5.发送请求, send 方法
6.接收结果并分析
7.实现刷新
?
同步:脚本会停留并等待服务器发送回复然后再继续
异步:脚本允许页面继续其进程并处理可能的回复
?
跨域问题的解决
1.使用 document.domain+iframe 解决跨子域问题
2.使用 window.name
3.使用 flash
4.使用 iframe+location.hash
5.使用 html5 的 postMessage ;
6.使用 jsonp (创建动态 script )
ajax实现代码
function ajaxEve (options) { var opt1 = { url: '', type: 'get', data: {}, success: function () {}, error: function () {}, }; var opt = Object.assign({},opt1, options); if (opt.url) { var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); var data = opt.data, url = opt.url, type = opt.type.toUpperCase(), dataArr = []; for (var k in data) { dataArr.push(k + '=' + data[k]); } if (type === 'GET') { url = url + '?' + dataArr.join('&'); xhr.open(type, url.replace(/\?$/g, ''), true); xhr.send(); } if (type === 'POST') { xhr.open(type, url, true); xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); xhr.send(dataArr.join('&')); } xhr.onload = function () { if (xhr.status === 200 || xhr.status === 304) { var res; if (opt.success && opt.success instanceof Function) { res = xhr.responseText; if (typeof res ==== 'string') { res = JSON.parse(res); opt.success.call(xhr, res); } } } else { if (opt.error && opt.error instanceof Function) { opt.error.call(xhr, res); } } }; } };