ajax常见面试题

什么是ajax

Ajax全称为Asynchronous Javascript+XML(异步JavaScript和XML),是一种技术方案，但并不是一种新技术。它依赖现有的CSS/HTML/JavaScript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。实现了在页面不刷新个情况下和服务器进行数据交互。

如何实现一个ajax请求

原生js

student.json

[
    {
        "name":"小红",
        "grade":"大二"
    },
    {
        "name":"张飞"，
        "grade":"大三"
    }
]
复制代码

ajax.js

//流程模拟用户使用浏览器
//安装浏览器
var xhr=new XMLHttpRequest();

//输入网址
//open()
//第一个参数是请求类型GET/POST
//第二个参数为请求地址
//第三个参数为布尔值，表示异步/同步模式，默认为true,异步
xhr.open("GET","student.json");

//输入enter,开始请求
xhr.send(null);

//处理响应
//readyState代表请求/响应过程中当前活动阶段，有4个值：
//0:未初始化。还未调用open()方法
//1:启动。已经调用open(),还未调用send()
//2:发送。已经调用send(),还未接收到响应
//3:接收。已经接收到部分响应
//4:完成。已经接收到全部响应
xhr.onreadystatechange=function(){
    if(xhr.readyState!=4) return;
    console.log(xhr.responseText);  //json格式
}
复制代码

• 封装一个ajax函数

//参数：options
//url:请求地址,type:请求类型,data:发送的数据,success
function ajax(options){
    var xhr=null;
    var params=formsParams(options.data);
    
    if(window.XMLHttpRequest){
        xhr=new XMLHttpRequest();
    }else {
        xhr=new ActiveXObject("Microsoft.XMLHTTP");  //兼容IE浏览器
    }
    
    if(options.type=="GET"){
        xhr.open("GET",options.url+"?"+params);
        xhr.send(null);
    }else if(options.type="POST"){
        xhr.open("POST",options.url);
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.send(params);
    }
    
    xhr.onreadystatechange=function(){
        if(xhr.state==4&&xhr.status==200){
            options.success(xhr.responseText);
        }
    }
    function formsParams(data){
        var arr=[];
        for(var prop in data){
            arr.push(prop+"="+data[prop]);
        }
        return arr.join("&");
    }
}
复制代码

• 异步与同步
  同步模式下，发送请求后，如果网络请求特别慢，页面就卡住一直等待数据的请求，用户就无法操作。所以要选择异步+监听事件机制。

• xhr.status---http状态码

  1xx:仅在与http服务器连接时使用
  2xx:成功
  3xx:重定向 304：数据没有改变，已经缓存
  4xx:客户端错误
  5xx:服务器错误

• 常用函数
  load:响应完成是调用，即readyState=4时；

jquery

$.ajax({
    url:"student.json",  //请求的地址
    type:"POST", //请求类型
    data:JSON.stringify(data),  //发送的数据
    dataType:json,  //响应的数据格式
    success:function(){   //响应完成且成功回调函数
    },
    error:function(){   //响应完成但失败时的回调函数
    },
})  
  
$.get(url,data,function(data,status,xhr),dataType) //发送get请求
$.post(url,data,function(data,status,xhr),dataType) //发送post请求

复制代码

get与post请求的区别

1. GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给WEB服务器。当然在Ajax请求中，这种区别对用户是不可见的。
2. GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和密码等。在某种情况下，GET方式会带来严重的安全问题。而POST方式相对来说就可以避免这些问题

什么是跨域

跨域问题是由于浏览器为了防止CSRF攻击，避免恶意攻击而带来的风险而采取的同源策略限制。当一个页面中使用XMLHTTPRequest对象发送HTTP请求时（XHR请求），必须保证当前页面和请求的对象是同源的，即协议、域名和端口号要完全一致，否则浏览器就会阻止此跨域请求返回的数据。

解决跨域的方式

• jsonp(只解决get请求跨域)

原理：所有的src和href属性都不受同源策略限制，可以请求第三方服务器的数据内容。
步骤：

1. 动态创建一个script标签
2. src属性设置为接口地址，接口参数必须带一个自定义函数名，请求一个php文件返回一个自定义函数
3. 通过调用自定义函数接收后台返回的数据
   ajax.js

<script>
//去创建一个script标签
var  script = document.createElement("script");
//script的src属性设置接口地址 并带一个callback回调函数名称
script.src = "http://127.0.0.1:8888/index.php?callback=jsonpCallback";
//插入到页面
document.head.appendChild(script);
//通过定义函数名去接收后台返回数据
function jsonpCallback(data){
    //注意  jsonp返回的数据是json对象可以直接使用
    //ajax  取得数据是json字符串需要转换成json对象才可以使用。
}
</script>

//动态创建的script标签会请求到一个自定义函数
<script src="http://127.0.0.1:8888/index.php?callback=jsonpCallback">
    jsonpCallback(data);  //data就是服务器返回的数据
                          //通过调用函数的形式操作数据
<script>
复制代码

• CORS:跨域资源共享
  原理：服务器设置Access-Control-Allow-OriginHTTP响应头之后，浏览器将会允许跨域请求 限制：浏览器需要支持HTML5，可以支持POST，PUT等方法兼容ie9以上
• 搭建代理服务器做转发，让跨域变成同域
• websocket协议
  websocket协议是HTML5的新的协议。它实现了浏览器与服务器的全双工通信，同时也是跨域的一种解决方案。WebSocket和HTTP都是应用层协议，都基于 TCP 协议。但是 WebSocket 是一种双向通信协议，在建立连接之后，WebSocket 的 server 与 client 都能主动向对方发送或接收数据。同时，WebSocket 在建立连接时需要借助 HTTP 协议，连接建立好了之后 client 与 server 之间的双向通信就与 HTTP 无关了。

转载于:https://juejin.im/post/5c91f862e51d45563b623815