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);
                 }
             }
         };
     }
 };