javascript-ajax基础

AJAX 是一种使用于创立快速动态网页的技术。通过在后端与服务器进行一些数据交换，AJAX 可以使网页实现异步升级。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行升级(特点：1.进行一些数据交换，2.异步升级，3.网页内容局部升级)。
初识ajax的时候，会有点点难度，其实最好是对前后端有一个系统全面的理解在了解ajax就会容易很多，这里我们利使用百度如下图来解释一下上面的三个特点

image.png

其实我们知道，当我们提交表单数据到后端的的时候，后端接到数据进行操作之后，返回一个新页面来应答，这里是整个页面刷新的，而上图当我们在百度页面输入ajax的字段的时候，百度的输入框会根据我们输入的内容来返回搜索的词条”ajax提交form表单，ajax教程…等”，但是整个页面都停留在最初进入的页面没有动过，而这个效果就是ajax完成的也就是局部刷新的（局部就是我红色框的部分），由于局部刷新，所以交换的数据也是相对一些，接下来我们讲异步。

异步：比方我这里有两个函数，第一个函数是进行1到100000000的相加，第二个函数只是单纯输出一句话，而此时我程序中的执行顺序是，先调使用第一个函数，在调使用第二个函数，这时候我们会发现当我打开页面要有一会的时间页面才会输出第二个函数输出的话，如果我们页面需要大量计算的话，那我们的页面岂不是要很久才会刷新出来，这时你可能说我们把计算的那一部分放在最后去执行呀，那问题又来了，如果我第二个函数需要使用到第一个函数计算的结果呢，那么第一个函数就必需放在最前面，那没有办法了么？这里就要使用到异步这个词，异步的意思是，当我执行第一个函数的时候，我的后续程序也可以继续执行，当我第一个函数的结果计算出来了，再去通知第二个函数来执行，有一个很好的比喻，“你来找我，我有事情，你可以先去做其余事情，等我忙完了，我通知你”，我们结合ajax请求的代码讲一下

function createXHR(){    /*除ie之外的浏览器创立xmlhttprequest的方法 */    if(window.XMLHttpRequest){        var OAjax = new XMLHttpRequest();      }else{        /*ie*/        var OAjax = new ActiveXObject();      }      /*ajax.txt?t="+new Date.getTime()及时升级，以免浏览器缓存之前返回的内容 */      OAjax.open("post","ajax.txt?t="+new Date().getTime,"true");      /*这里就是异步开始的地方，当我们把请求数据发送到后端的时候，我们的浏览器即可以向下执行其余的任务了，       而根据状态变化我们可以顺利拿到后端返回的数据，而后通知前端需要该数据的那个函数可以执行了（回调函数），      我没有写那个函数，我直接使用的alert(p)*/     OAjax.send();     OAjax.onreadystatechange = function(){       /* readyState(0:为初始化，还没有调使用open方法 1:以调使用send方法，正在发送请求 2:send方法完成，浏览器已收到一律响应的内容          3:浏览器正在解析响应的原始内容解析成浏览器可读的格式 4:响应内容解析完成，可以被浏览器调使用) 无论服务器能否正确返回都会经历这四个状态，所以我们还需要判断能否正确返回状态码200 */        if(OAjax.readyState == 4){            if(OAjax.status == 200){ /*浏览器成功读取服务器的文件 */             /* alert(typeof OAjax.responseText) */            var p = JSON.parse(OAjax.responseText);            /*responseText为服务器返会的数据 为字符串类型，为了我们操作数据方便，我们将它转换成json对象*/             alert(p)            }else{}        }    }     }