image.png

同源

image.png
这些站点是同源，没有办法分服务器
image.png
四个，可以不在一个服务器上

image.png
image.png
200 304都是成功的

事件

image.png
最好别用，因为这个兼容性不好，是2.0的

image.png

超时

image.png
兼容性不好

超时写法

  1.   //原生post请求
  2.         var xhr,
  3.         t=null;
  4.         if (window.XMLHttpRequest) {//判断XMLHttpRequest对象是否存在
  5.             xhr = new XMLHttpRequest();
  6.         } else {
  7.             xhr = new ActiveXObject('Microsoft.XMLHTTP');//ie5/ie6兼容
  8.         }
  9.         // console.log(xhr.readyState);
  12.         // xhr.onload=function(){
  13.         //     console.log('load');
  14.         // }
  15.         // xhr.onerror=function(){
  16.         //     console.log('error');
  17.         // }
  18.         // xhr.onabort=function(){
  19.         //     console.log('abort')
  20.         // }
  21.         // xhr.onloadend=function(){
  22.         //     console.log('loadend');
  23.         // }
  25.         // xhr.ontimeout=function(){
  26.         //     xhr.abort();
  27.         //     xhr=null;
  28.         // }
  30.         //得到数据，get请求，地址，true异步请求
  31.         xhr.open('POST', 'http://localhost/network/class7/server/get_courses.php?status=1', true);
  32.         xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  34.         // xhr.timeout=30000;
  35.         xhr.send('status=1&flag=2');//发送
  37.         //响应
  38.         xhr.onreadystatechange = function () {
  39.             if (xhr.readyState === 4 && xhr.status === 200) {
  40.                 // console.log(JSON.parse(xhr.responseText));//返回JSON数据
  42.                 clearTimeout(t);
  43.                 t=null;
  44.             }
  45.         }
  48.         t= setTimeout(function() {
  49.             xhr.abort();
  50.             clearTimeout(t);
  51.             t=null;
  52.             xhr=null;
  54.         },30000)

ajax封装

加上了超时功能

  2.                var $ = (function () {
  3.             //三元运算符 相当于if else
  4.             var o = window.XMLHttpRequest ?
  5.                 new XMLHttpRequest :
  6.                 new ActiveXObject('Microsoft.XMLHTTP'),
  7.                 t=null;
  9.                 //判断浏览器是否支持ajax请求
  10.             if (!o) {
  11.                 return new Error('您的浏览器不支持异步发起HTTP请求');
  12.             }
  13.             function _doAjax(opt) {
  14.                 console.log(opt);
  16.                 var opt = opt || {},//如果不存在opt，就给它弄个对象，默认值，||后面的是默认值
  17.                     type = (opt.type || 'GET').toUpperCase(),
  19.                     // async = opt.async || true,
  20.                     async = ''+opt.async==='false'?false : true,
  22.                     url = opt.url,
  23.                     data = opt.data || null,
  24.                     timeout=opt.timeout||30000,
  25.                     error = opt.error || function () { },
  26.                     success = opt.success || function () { },
  27.                     complete = opt.complete || function () { };
  29.                     //处理没有传url的情况
  30.                 if (!url) {
  31.                     throw new Error('您没有填写URL');
  32.                 }
  34.                 o.onreadystatechange = function () {
  36.                      // if(o.readyState === 4&&o.status===200){
  37.                     //     success(JSON.parse(o.responseText));
  38.                     // }
  40.                   //判断200 4太草率了 因为304也有可能 200 304都能成立
  41.                     if (o.readyState === 4) {
  42.                         if (o.readyState >= 200 && o.status < 300 || o.status === 304) {
  43.                             success(JSON.parse(o.responseText));
  44.                         }
  45.                     }
  46.                     if (o.status === 404) {
  47.                         error();
  48.                     }
  49.                     complete();
  50.                     clearTimeout(t);
  51.                     t=null;
  52.                     o=null;
  53.                 }
  55.                 o.open(type, url, async);
  56.                 //如果type是POST，执行后面语句
  57.                 type === 'POST' && o.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  58.                 o.send(type === 'GET' ? null : formatDatas(data));
  60.                 t=setTimeout(function(){
  61.                     complete()
  62.                     o.abort();
  63.                     clearTimeout(t);
  64.                     t=null;
  65.                     o=null;
  66.                 },timeout);
  67.             }
  69.             //把服务器传送的json格式的数据转换成  xx&xx&xx
  70.             function formatDatas(obj) {
  71.                 var str = '';
  72.                 for (var key in obj) {
  73.                     str += key += '=' + obj[key] + '&';
  74.                 }
  75.                 //把最后一个&去掉
  76.                 return str.replace(/&$/, '');
  77.             }
  79.             return {
  80.                 ajax: function (opt) {
  81.                     _doAjax(opt);
  82.                 },
  83.                 post: function (url, data, callback) {
  84.                     _doAjax({
  85.                         type: 'POST',
  86.                         url: url,
  87.                         data: data,
  88.                         success: callback
  89.                     });
  90.                 },
  91.                 get: function (url, callback) {
  92.                     _doAjax({
  93.                         type: 'GET',
  94.                         url: url,
  95.                         success: callback
  96.                     })
  97.                 }
  98.             }
  99.         })();
  100.         // 原生ajax调用方法
  101.         $.ajax({
  102.             type: 'POST',
  103.             url: 'http://localhost/network/class7/server/get_courses.php',
  104.             data: {
  105.                 status: 1,
  106.                 flag: 2 //假参数 后端不接收此字段
  107.             },
  108.             success: function (data) {
  109.                 console.log(data);
  110.             }
  111.         });
  112.         $.post('http://localhost/network/class7/server/get_courses.php', {
  113.             status: 1,
  114.             flag: 2
  115.         }, function (data) {
  116.             console.log(data);
  117.         });
  118.         $.get('http://localhost/network/class7/server/get_courses.php?status=1&flag=2', function (data) {
  119.             console.log(data);
  120.         })

ajax异步同步

异步

  1.         var datas=null;
  2.         $.ajax({
  3.             url:'http://localhost/network/class7/server/get_courses.php',
  4.             type: 'POST',
  5.             data:{
  6.                 status:1,
  7.                 flag:2
  8.             },
  9.             async:true,
  10.             success:function(data) {
  11.                 console.log(1)//这是异步的 success中的console与全局顺序执行是同时进行的 比全局慢
  12.                 datas=data;
  13.             }
  14.         })
  15.         console.log(2);//与下面的console一样是同步的
  16.         console.log('datas:'+datas);

image.png
是同时进行的，console.log(2)进行的快，所以先打印 ，哪个console.log先完成就打印哪个，success中的最后完成
success与

同步

  1.        var datas=null;
  2.         $.ajax({
  3.             url:'http://localhost/network/class7/server/get_courses.php',
  4.             type: 'POST',
  5.             data:{
  6.                 status:1,
  7.                 flag:2
  8.             },
  9.             async:false,
  10.             success:function(data) {
  11.                 console.log(1)//这是异步的 success中的console与全局顺序执行是同时进行的 比全局慢
  12.                 datas=data;
  13.             }
  14.         })
  15.         console.log(2);//与下面的console一样是同步的
  16.         console.log('datas:'+datas);

阻塞后续程序的运行
image.png

image.png
image.png

image.png
可以多配置，但也可以不配置那么多

ajax封装

自己封装的小，库大，页面的体积大

  1.   var $ = (function () {
  3.         function _doAjax(opt) {
  4.             console.log(opt);
  7.             //得在调用ajax时，新建对象，而不是只有一个对象，要不然两次共用一个对象，应该不同的请求用不同的对象，不能两次都用一个对象
  8.             //三元运算符 相当于if else
  9.             var o = window.XMLHttpRequest ?
  10.                 new XMLHttpRequest() :
  11.                 new ActiveXObject('Microsoft.XMLHTTP'),
  12.                 t = null;
  13.             //得new对象
  15.             //判断浏览器是否支持ajax请求
  16.             if (!o) {
  17.                 return new Error('您的浏览器不支持异步发起HTTP请求');
  18.             }
  20.             var opt = opt || {},//如果不存在opt，就给它弄个对象，默认值，||后面的是默认值
  21.                 type = (opt.type || 'GET').toUpperCase(),
  22.                 // async = opt.async || true,
  23.                 async = '' + opt.async === 'false' ? false : true,
  24.                 dataType = opt.dataType || 'JSON',
  25.                 url = opt.url,
  26.                 data = opt.data || null,
  27.                 timeout = opt.timeout || 30000,
  28.                 error = opt.error || function () { },
  29.                 success = opt.success || function () { },
  30.                 complete = opt.complete || function () { };
  32.             //处理没有传url的情况
  33.             if (!url) {
  34.                 throw new Error('您没有填写URL');
  35.             }
  37.             o.onreadystatechange = function () {
  39.                 // if(o.readyState === 4&&o.status===200){
  40.                 //     success(JSON.parse(o.responseText));
  41.                 // }
  43.                 //判断200 4太草率了 因为304也有可能 200 304都能成立
  44.                 if (o.readyState === 4) {
  45.                     if ((o.readyState >= 200 && o.status < 300) || o.status === 304) {
  46.                         // success(JSON.parse(o.responseText));
  47.                         switch (dataType.toUpperCase()) {
  48.                             case 'JSON':
  49.                                 success(JSON.parse(o.responseText));
  50.                                 break;
  51.                             case 'TEXT':
  52.                                 success(o.responseText);
  53.                                 break;
  54.                             case 'XML':
  55.                                 success(o.responseXML);
  57.                                 break;
  58.                             default:
  59.                                 success(JSON.parse(o.responseText))
  60.                         }
  61.                     } else {
  62.                         error()
  63.                     }
  64.                     complete();
  65.                     clearTimeout(t);
  66.                     t = null;
  67.                     o = null;
  68.                 }
  69.                 // if (o.status === 404) {
  70.                 //     error();
  71.                 // }
  73.             }
  75.             o.open(type, url, async);
  76.             //如果type是POST，执行后面语句
  77.             type === 'POST' && o.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  78.             o.send(type === 'GET' ? null : formatDatas(data));
  80.             t=setTimeout(function(){
  81.                 o.abort();
  82.                 clearTimeout(t);
  83.                 t=null;
  84.                 o=null;
  85.                 // complete()
  86.                 throw new Error('This request has been timeout for'+url);//下面的不执行
  88.             },timeout);
  89.         }
  91.         //把服务器传送的json格式的数据转换成  xx&xx&xx
  92.         function formatDatas(obj) {
  93.             var str = '';
  94.             for (var key in obj) {
  95.                 str += key += '=' + obj[key] + '&';
  96.             }
  97.             //把最后一个&去掉
  98.             return str.replace(/&$/, '');
  99.         }
  101.         return {
  102.             ajax: function (opt) {
  103.                 _doAjax(opt);
  104.             },
  105.             post: function (url, data, callback) {
  106.                 _doAjax({
  107.                     type: 'POST',
  108.                     url: url,
  109.                     data: data,
  110.                     success: callback
  111.                 });
  112.             },
  113.             get: function (url, callback) {
  114.                 _doAjax({
  115.                     type: 'GET',
  116.                     url: url,
  117.                     success: callback
  118.                 })
  119.             }
  120.         }
  121.     })();