前端面试题之 Ajax

谈谈你对 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 请求载入信息
  1. XMLHttpRequest 对象常用属性和常用方法
    - 属性
      - readystate
        
        返回 XMLHTTP 请求的当前状态码
      - state
        
        返回当前请求的 HTTP 状态码
      - statusText
        
        返回 HTTP 状态码对应的文本
    - 方法
      - onreadystatechange
        
        监听 readystate 和 state 状态
- HTTP 请求方法
  - ajax方法：通过 HTTP 请求加载远程数据
  - get方法：通过远程 HTTP GET 请求载入信息
  - post方法：通过远程 HTTP POST 请求载入信息

ajax 请求有哪几个步骤？

共有五个步骤：

创建异步对象
- ```
  var xhr = new XMLHttpRequest();
```

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

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

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

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

设置请求体 send()

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

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

  // 一个成功的响应有两个条件：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';
          }
          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
    - ```
      
```
- 通过修改 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 数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了
- 代码：
  - ```
    
    
    
        Untitled Page
        
        
    
    
    
    
```
- 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);

前端面试题之 Ajax

你可能感兴趣的:(前端面试题之 Ajax)