AJAX常见面试题

最新推荐文章于 2023-06-11 19:18:08 发布

丫呀nice

最新推荐文章于 2023-06-11 19:18:08 发布

阅读量5.4k

点赞数 13

分类专栏： AJAX

本文链接：https://blog.csdn.net/weixin_46100406/article/details/103874769

版权

AJAX 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

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

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

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

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

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

所有现代的浏览器都支持 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技术

<script>        
//    可以发送不同源地址之间的请求，但无法拿到响应结果
        var script=document.createElement('script');
        script.src='http://localhost/day2/time2.php';
        document.body.appendChild(script);

    //相当于请求回调
    function foo(res) {
        console.log(res);
    }
</script>

• 方法二：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>

<!--
    通过script标签请求一个服务器的JS文件
    通过文件返回的结果是;一段JS代码，作用是调用我们事先定义好的一个函数
    从而将服务器端想要给客服端发过去的数据送给客户端
    -->
</body>
</html>

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

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

200 - 请求成功

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

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

500 - 内部服务器错误

丫呀nice

关注

13
点赞
踩
223

收藏

觉得还不错? 一键收藏
0
评论
AJAX常见面试题

1:什么是ajax？ajax作用是什么？• AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 是一种用于创建快速动态网页的技术• AJAX可以在不刷新整个浏览器页面的情况下，通过与服务器进行少量数据交换，对网页的某一部分进行更新• 用于在Web页面中实现异步数据交互，实现页面局部刷新。• XMLH...
复制链接

扫一扫