谈谈你对 ajax 的认识？

• Ajax 的全称是 Asynchronous JavaScript and XML 中文名称定义为异步的 JavaScript 和 XML。Ajax 是 Web2.0 技术的核心由多种技术集合而成，使用 Ajax 技术不必刷新整个页面，只需对页面的局部进行更新，可以节省网络带宽，提高页面的加载速度，从而缩短用户等待时间，改善用户体验

• 直白地说，就是没用 AJAX 的网页，你点一个按钮就要刷新一下页面，尽管新页面上只有一行字和当前页面不一样，但你还是要无聊地等待页面刷新。用了 AJAX 之后，你点击，然后页面上的一行字就变化了，页面本身不用刷

• 作用：

  • 通过 Ajax 可以使用 Javascript 语句来调用 XMLHttpRequest 对象，直接与服务器进行通讯，可以在不重载页面的情况下与服务器交换数据

• Ajax 的步骤：

  1. 创建 XMLHttpRequest 对象

     •   var xhr =  new XMLHttpRequest()
       

     • 对于IE早期版本（IE7及以下版本）使用，new ActiveXObject(\"Microsoft.XMLHTTP\")、new ActiveXObject(\"Msxml2.XMLHTTP\") 等方式创建对象
  2. XMLHttpRequest 对象常用属性和常用方法
     • 属性
       • readystate
         • 返回 XMLHTTP 请求的当前状态码
       • state
         • 返回当前请求的 HTTP 状态码
       • statusText
         • 返回 HTTP 状态码对应的文本
     • 方法
       • onreadystatechange
         • 监听 readystate 和 state 状态

• HTTP 请求方法

  • ajax方法：通过 HTTP 请求加载远程数据
  • get方法： 通过远程 HTTP GET 请求载入信息
  • post方法：通过远程 HTTP POST 请求载入信息
  2. XMLHttpRequest 对象常用属性和常用方法
     • 属性
       • readystate
         • 返回 XMLHTTP 请求的当前状态码
       • state
         • 返回当前请求的 HTTP 状态码
       • statusText
         • 返回 HTTP 状态码对应的文本
     • 方法
       • onreadystatechange
         • 监听 readystate 和 state 状态

• HTTP 请求方法

  • ajax方法：通过 HTTP 请求加载远程数据
  • get方法： 通过远程 HTTP GET 请求载入信息
  • post方法：通过远程 HTTP POST 请求载入信息

ajax 请求有哪几个步骤？

• 共有五个步骤：
  1. 创建异步对象

     •   var xhr = new XMLHttpRequest();
       

  2. 设置 请求行 open(请求方式，请求url):

     •   // get请求如果有参数就需要在url后面拼接参数
         // post如果有参数，就在请求体中传递 
         xhr.open("get","validate.php?username="+name)
         xhr.open("post","validate.php");
       

  3. 设置请求（GET方式忽略此步骤）头:setRequestHeader()

     •   // 1.get不需要设置
         // 2.post需要设置请求头：Content-Type:application/x-www-form-urlencoded
         xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
       

  4. 设置请求体 send()

     •   // 1.get的参数在url拼接了，所以不需要在这个函数中设置
         // 2.post的参数在这个函数中设置(如果有参数)
         xhr.send(null) xhr.send("username="+name);
       

  5. 让异步对象接收服务器的响应数据

     •   // 一个成功的响应有两个条件：1.服务器成功响应了 2.异步对象的响应状态为4(数据解析完毕可以使用了)
         xhr.onreadystatechange = function(){ 
             if(xhr.status == 200 && xhr.readyState == 4){ 
                 console.log(xhr.responseText);
         }
       

• ajax-get方式请求案例：

  •   var xhr = new XMLHttpRequest();
      xhr.open("get","validate.php?username="+name);
      xhr.send(null);
      xhr.onreadystatechange = function(){
          if(xhr.status == 200 && xhr.readyState == 4){ 
              console.log(xhr.responseText); 
              document.querySelector(".showmsg").innerHTML = xhr.responseText;
          }
      }
    

• ajax-post方式请求案例：

  •   var xhr = new XMLHttpRequest();
      xhr.open("post","validate.php");
      xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
      xhr.send("username="+name);
      xhr.onreadystatechange = function(){
          // 判断服务器是否响应，判断异步对象的响应状态
          if(xhr.status == 200 && xhr.readyState == 4){
              document.querySelector(".showmsg").innerHTML = xhr.responseText;
          }
      }
    
    

谈一谈对 同源策略 的理解？

• 同源策略
  • 指的是：协议，域名，端口相同
  • 同源策略是一种安全协议，指一段脚本只能读取来自同一来源的窗口和文档的属性
• 同源限制的原因：
  • 比如一个黑客程序，他利用 Iframe 把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过 Javascript 读取到你的表单中 input 中的内容，这样用户名，密码就轻松到手了，同源限制可以避免这种情况的发生

什么是跨域，有哪些方式可以跨域？

• 跨域
  • 指的是跨过同源策略，实现不同域之间进行数据交互的过程叫跨域。
• 跨域的方式
  • 跨域的实现形式主要有 JSONP 方法、CORS方法、降域和 postMessage 等
  • JSONP
    • JSONP 是一种数据调用方式，是解决跨域交互的方法
    • 只能发送 get 请求
    • 网页通过在 script 标签里添加元素，向服务器请求数据，这种做法不受同源政策的限制，服务器收到请求后，把数据放在一个指定的回调数中返回

    •   //1.定义出来函数的appendHtml
        function appendHtml(news){
            var html = '';
            for(var i = 0;i<news.length;i++){
                html +='<li>' +news[i]+'</li>';
            }
            console.log(html)
            $('.news')innerHtml = html;
        }
        //2.创建script标签，src地址执行后端端口，地址的末尾加个参数 callback = appendHtml
        $(".change").addEventListener("click",function(){
            var script=document.createElement("script");
            script.src='http://localhost:8080/getNews?callback=appendHtml';
            document.head.appendChild("script");
            document.head.removeChild("script");
        })
        //3.服务器在收到请求后，解析参数，计算返回数据，输出 appendHtml(data) 字符串
        var www = req.query.callback;
        if(www){
            res.send(www + '(' +JSON.stringify(data)+')');
        }else{
            res.send(data);
        }
        //4.appendHtml(data )会放在 script 标签里面当做 js 来执行，同时调用 appendHtml() 函数,将 data 作为参数
      

  • CORS
    • cross origin resource sharing 跨域资源共享。这是 W3C 的标准，是跨域请求的根本解决方法。相比 JSONP 只能发 get 请求，CORS 允许发任何类型的请求。对于开发者来说 CORS 通信与同源的 ajax 通信没有差别，代码完全一样。浏览器一旦发现 ajax 请求是跨源的，会自动在头部添加 origin 标签，用户无需单独做操作
    • 工作流程：
      1. 当使用XMLHttpRequest发送请求时，浏览器会检测到不符合同源策略，于是会加一个请求头origin
      2. 后台确认符合策略时，会在返回的数据里添加一个响应头access-control-allow-origin
      3. 浏览器判断该响应头中是否有origin值，如果有则接收数据。如果没有，则直接驳回。我们无法拿到数据

    •   $('.change').addEventListener('click', function () {
            var xhr = new XMLHttpRequest();
            xhr.open('get', 'http://b.jrg.com:8080/getNews', true);
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    appendHtml(JSON.parse(xhr.responseText));
                }
            };
            window.xhr = xhr
        });
        //如果有则浏览器会处理响应，我们就可以拿到响应数据，
        res.header("Access-Control-Allow-Origin", "http://a.jrg.com:8080");
        //res.header("Access-Control-Allow-Origin", "*");
      

  • 降域
    • 如果在域名 a.jrg.com 通过 js 操作 b.jrg.com 将会报错：浏览器阻止访问不同源的 iframe

    •   <iframe src="http://b.jrg.com:8080/b.html" frameborder="0" ></iframe>
      

    • 通过修改 document.domain 来跨域操纵页面上的 iframe，这样就能达到我们的目标，让他们实现跨域交互,document.domain = "jrg.com"
  • Post Message
    • 降域实现跨域通信时要求两个域属于同一个父级域名。而 post message 没有这个限制。一个页面向另一个页面发送 postmessage 消息，如果接收方愿意接收的话(通过 message 语句监听)，那么就实现了通信
    • 主页面 a.html 向 ifame 页面 b.html 加入 postMessage 信息

      •   $('.main input').addEventListener('input', function(){
              console.log(this.value);
              window.frames[0].postMessage(this.value, '*');
          });
          $('.main input').value = e.data;
          console.log(e.data);
          });
        

    • iframe 页面 b.html 向父页面 a.htm 加入 postmessage信息

      •   $('#input').addEventListener('input', function(){
              window.parent.postMessage(this.value, '*');
          });
          window.addEventListener('message',function(e) {
              $('#input').value = e.data;
              console.log(e.data);
          });
        

JSONP 的实现原理是什么？

• JSONP 产生的原因：
  • 因为 Ajax 直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web 服务、WCF，只要是跨域请求，一律不准。但是在 Web 页面上调用 js 文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有 src 这个属性的标签都拥有跨域的能力，比如 <\script> 、 <\img> 、 <\iframe> ）
• JSONP 的实现原理：
  • web 客户端通过与调用脚本一模一样的方式，来调用跨域服务器上动态生成的js格式文件（一般以 JSON 为后缀），显而易见，服务器之所以要动态生成 JSON 文件，目的就在于把客户端需要的数据装入进去，客户端在对 JSON 文件调用成功之后，也就获得了自己所需的数据，剩下的就是按照自己需求进行处理和展现了，这种获取远程数据的方式看起来非常像 AJAX，但其实并不一样
  • 为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作 JSONP，该协议的一个要点就是允许用户传递一个 callback 参数给服务端，然后服务端返回数据时会将这 callback 参数作为函数名来包裹住 JSON 数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了
• 代码：

  •   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml" >
      <head>
          <title>Untitled Page</title>
          <script type="text/javascript" src=jquery.min.js"></script>
          <script type="text/javascript">
              jQuery(document).ready(function(){ 
                  $.ajax({
                      type: "get",
                      async: false,
                      url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
                      dataType: "jsonp",
                      jsonp: "callback", //传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
                      jsonpCallback:"flightHandler", //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
                      success: function(json){
                          alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。');
                      },
                      error: function(){
                          alert('fail');
                      }
                  });
              });
          </script>
      </head>
      <body>
      </body>
      </html>
    

• ajax 与 jsonp 的异同:
  • 相同
    • ajax 和 jsonp 这两种技术在调用方式上"看起来"很像，目的也一样，都是请求一个 url，然后把服务器返回的数据进行处理，因此 jquery 和 ext 等框架都把 jsonp 作为 ajax 的一种形式进行了封装
  • 不同
    • ajax 和 jsonp 其实本质上是不同的东西。ajax 的核心是通过 XmlHttpRequest 获取非本页内容，而 jsonp 的核心则是动态添加

手写一个原生 ajax 请求

•   const xhr = new XMLHttpRequest();
    // 注意这里其实是可以用四三个参数的，
    // true表示异步请求
    // false表示同步请求，
    xhr.open('GET', 'http://www.zhengshengliang.com:9999/'); 
  
    xhr.onreadystatechange = () => {
        if (xhr.readyState === 4) { // 注意readyState大写
            console.log('请求都相应完毕了');
            if (xhr.status >= 200 && xhr.status < 300) {
                console.log('相应成功');
                const res = xhr.responseText; // 你才返回对象，你全家才返回对象 作为http的第四部分，返回的永远是字符串
                console.log(typeof res); // "string"
      
                let obj = window.JSON.parse(res);
            } else if (xhr.status >= 400) {
                console.log('相应失败');
            }
        }
    }
  
    xhr.ontimeout = (e) => {
        alert('请求超时了');
    }
  
    xhr.timeout = 3000; // 3000ms超时
    xhr.send();
  
    // 若为异步(true)，则先打印1，后打印请求内容
    // 若为同步(false)，则先打印请求内容，后打印1
    console.log(1);