JavaScript（04-1）AJAX & PROMISE

AJAX

一、基本使用

1、概念

• Ajax 即 Asynchronous Javascript And XML（异步 JavaScript 和 XML）；
• 一般的情况是一次http请求对应一个页面，ajax 要实现的就是在页面不跳转的情况下发送请求、获取数据、实现网页局部刷新

1.eval（str）可以将 str 解析为 js 执行；
2.浏览器缓存是根据 url 进行缓存的，变更 url 可以阻止浏览器的缓存；
3.js 的变量与属性：使用未定义的变量会报错；使用未定义的属性仅仅是 undefine，不会报错；

2、原理

XHR对象

• 一般情况下请求的发送和响应的接受都是由浏览器完成，AJAX将这个过程交给了XHR对象
• XHR对象重要的属性：readyState、onreadystatechange、status、statusText

简单封装

• 发送请求：注意 get 和 post 请求发送的差异
• 接受响应：responseText、responseXML（xml的解析和html的解析类似，XHR对象内置了解析器）
• AJAX请求的几种状态说明：

0：未初始化，还未调用 open 方法；
1：载入，已调用 send 方法，正在发送去请求；
2：载入完成，send 方法完成，收到所有的响应内容；
3：解析，解析响应内容；
4：完成，解析完成，可以在客户端使用了；

function myAjax(method,url,data,async,sucFn,faiFn){
   
    //get ajax obj
    if(window.XMLHttpRequest)
    {
   
        var oAjax=new XMLHttpRequest();
    }
    else
    {
   
        var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
    }
    //state listener
    oAjax.onreadystatechange=function ()
    {
   
        if(oAjax.readyState==4)    
        {
   
            if(oAjax.status==200)
            {
   
                if(sucFn){
   
                    sucFn(oAjax);
                }
            }
            else
            {
   
                if(faiFn){
   
                    faiFn(oAjax);
                }
            }
        }
    };
    //connection check method
    if(method.toUpperCase() == "GET"){
   
        oAjax.open(method, url+(data ? '?'+data : ''), async);
        oAjax.send(data);
    }else if(method.toUpperCase() == "POST"){
   
        oAjax.open(method, url, async);
        oAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded");  
        oAjax.send(data);
    }   
}

二、安全限制

• 出于安全原因 ajax 不允许 跨域访问，这意味着ajax请求的资源需和当前的页面在一个服务器上
• 严格限制的话需要域名相同、协议相同、端口相同

1、JSONP跨域请求

• 最常用的就是使用 JSONP，实现的原理就是利用了浏览器允许跨域引用JavaScript资源的特性
• JSONP 有个限制，只能用GET请求，并且要求返回JavaScript
• JSONP 本质就是添加一个 script 节点进行跨域请求，通过 js 回调函数的参数获取请求的数据
• 示例代码中需要注意 url 中的 callback 参数，回调函数中的 data 就是我们通过JSONP请求到的数据
• 请求相应的API返回的数据原本的样子是这样的_ntes_quote_callback({.........}),，实际上是一个js函数，这也是jsonp的限制，通过与我们定义的回调函数的自动匹配将真正需要的数据传入了回调函数的参数里面

<div id="test-jsonp"></div>

<script>
    function refreshPrice