javascript-ajax基础

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

image.png

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

异步：比如我这里有两个函数，第一个函数是进行1到100000000的相加，第二个函数只是单纯输出一句话，而此时我程序中的执行顺序是，先调用第一个函数，在调用第二个函数，这时候我们会发现当我打开页面要有一会的时间页面才会输出第二个函数输出的话，假如我们页面需要大量计算的话，那我们的页面岂不是要很久才会刷新出来，这时你可能说我们把计算的那一部分放在最后去执行呀，那问题又来了，假如我第二个函数需要用到第一个函数计算的结果呢，那么第一个函数就必须放在最前面，那没有办法了么？这里就要用到异步这个词，异步的意思是，当我执行第一个函数的时候，我的后续程序也可以继续执行，当我第一个函数的结果计算出来了，再去通知第二个函数来执行，（这里加法举例会有一个小困惑就是js引擎是单线程，而我所说的异步是让这个加法运算交给后台服务去执行比如java，当运算成功之后再将结果返回前台js，通知运算结果出来了，你可以执行第二个函数了）有一个很好的比喻，“你来找我，我有事情，你可以先去做其他事情，等我忙完了，我通知你”，我们结合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{}
        }
    }     
}

js学习（ECMAScript，DOM，BOM）:https://www.jianshu.com/p/b7136540b379