AJAX常见面试题

红太狼 2023-06-28 04:54 15阅读 0赞

# 1:什么是ajax？ajax作用是什么？ #

• AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。  
AJAX 是一种用于创建快速动态网页的技术

• AJAX可以在不刷新整个浏览器页面的情况下，通过与服务器进行少量数据交换，对网页的某一部分进行更新

• 用于在Web页面中实现异步数据交互，实现页面局部刷新。

• XMLHttpRequest 对象用于在后台，与服务器交换数据，他可以：

1.  在不重新加载页面的情况下更新网页
2.  在页面已加载后从服务器请求数据
3.  在页面已加载后从服务器接收数据
4.  在后台向服务器发送数据

所有现代的浏览器都支持 XMLHttpRequest 对象。

# 2.AJAX的优缺点？ #

• **AJAX的最大特点**:页面局部刷新

• **ajax的缺点**:

1、ajax不支持浏览器back按钮(要实现ajax下的前后退功能成本较大)。

2、安全问题: AJAX暴露了与服务器交互的细节。

3、对搜索引擎的支持比较弱。

4、破坏了程序的异常机制。

• 有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

# 3:原生js ajax请求有几个步骤？分别是什么 #

简述ajax的过程：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>02.XMLHttpRequest兼容性问题</title>
    </head>
    <body>
    
        <h2>AJAX</h2>
        <button type="button" onclick="loadXMLDoc()">请求数据</button>
        <div id="myDiv"></div>
    
    <script>
        function loadXMLDoc() { 
            var xmlhttp;
            if(XMLHttpRequest){ 
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else{ 
                // code for IE6, IE5
                xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
            }
            xmlhttp.open('GET','get.asp?t='+Math.random(),true);//true异步通信
    // xmlhttp.open('POST','get.asp',true);
            
    		xmlhttp.setRequestHeader("content-Type","applicaion/x-www-form-urlencoded");//设置http头信息 
    		
            xmlhttp.onreadystatechange=function () { 
                if(xmlhttp.readyState==4&&xmlhttp.status==200)//请求完成并且成功返回
                { 
                    document.getElementById('myDiv').innerHTML=xmlhttp.responseText;
                    //xmlhttp.responseText没有输出
                }
            };
    		xmlhttp.send();
            
        }
    
    
    </script>
    </body>
    </html>

# 4.AJAX的几种请求方式？以及他们的优缺点？ #

• 常见的请求方式有：get请求和post请求

• get一般用来进行查询操作，url地址有长度限制，请求的参数都暴露在url地址当中，如果传递中文参数，需要自己进行编码操作，安全性较低。

• post请求方式主要用来提交数据，没有数据长度的限制，提交的数据内容存在于http请求体中，数据不会暴漏在url地址中。

• post请求方式相对get请求方式来说要安全一些，但是速度慢

## 在以下情况中，请使用 POST 请求： ##

（1）无法使用缓存文件（更新服务器上的文件或数据库）  
（2）向服务器发送大量数据（POST 没有数据量限制）  
（3）发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

# 5.ajax请求时，如何解析json数据 #

使用eval() 或者JSON.parse() 鉴于安全性考虑，推荐使用==JSON.parse()==更靠谱，对数据的安全性更好。

# 6:什么情况造成跨域？如何解决？ #

• 同源策略：不同源地址之间，默认不能相互发送AJAX请求（同源策略是一种安全协议）

• 不同源地址需要相互发送请求，就会有跨域问题

• 协议，域名，端口号有一个不同就是不同源

## 解决方法： ##

• 首先要说明的是：不同源地址之间如果需要相互请求，必须服务端和客服端配合才能完成

• **方法一**：  
通过动态创建script标签，然后通过标签的src属性获取js文件中的js脚本，该脚本的内容是一个函数调用，参数就是服务器返回的数据，为了处理这些返回的数据，需要事先在页面定义好回调函数，本质上使用的并不是ajax技术

• **方法二**：JSONP，使用src属性，只能解决get跨域

（解释jsonp的原理，以及为什么不是真正的ajax）  
首先，Jsonp并不是类似json是一种数据格式，而是用来解决跨域获取数据的一种解决方案

**JSONP原理**：利用script标签中的src属性实现跨域，然后在服务端输出JSON数据或者是JS数据，并执行回调函数

**注意：因为所有的src属性和href属性都不受同源策略限制。可以请求第三方服务器数据内容。**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>13.JSONP</title>
    </head>
    <body>
    
    <script>
        function myonload(data) { 
            console.log(data);
        }
    </script>
    
    <script src="http://localhost/day2/data.js"></script>
    
    
    </body>
    </html>

• **方法二**：需要服务端设置  
Access-Control-Allow-Origin: \* //允许所有域名访问，或者  
Access-Control-Allow-Origin: http://a.com //只允许所有域名访问

# 7、http常见的状态码有那些？分别代表是什么意思？ #

200 - 请求成功

301 - 资源（网页等）被永久转移到其它URL

404 - 请求的资源（网页等）不存在

500 - 内部服务器错误