前端面试宝典3.2Ajax

最新推荐文章于 2024-07-25 10:06:21 发布

Snowy~

最新推荐文章于 2024-07-25 10:06:21 发布

阅读量91

点赞数

分类专栏：牛客面试宝典文章标签： ajax javascript

本文链接：https://blog.csdn.net/cuixueying521123/article/details/118973444

版权

牛客面试宝典专栏收录该内容

2 篇文章 0 订阅

订阅专栏

3.2Ajax

1.ajax返回的状态

0 未初始化，还没有调用send()方法
1 载入，已调用send()方法，正在发送请求
2 载入完成，send()方法执行完成，已经接收到全部响应内容
3 交互，正在解析响应内容
4 完成，响应内容解析完成，可以在客户端调用了

2.实现一个Ajax

实现Ajax异步交互需要服务器逻辑进行配合，需要完成以下步骤：
1.创建Ajax的核心对象XMLHttpRequest对象
2.通过XMLHttpRequest对象的open() 方法设置请求信息
3.通过XMLHttpRequest对象的send()方法向服务端发送请求（get一般传参null）
4.通过XMLHttpRequest对象的onreadystateChange事件监听通信状态，之后接收并处理服务端响应的数据结果，动态更新HTML页面。

代码

<?php
    echo"我的第一个AJAX请求";
?>

<script>
   function testAjax(){
        var xhr= new XMLHttpRequest();
        xhr.open("get","text.php",true);
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4 && xhr.status==200){
                var resText = xhr.responseText;
                document.getElementById("add").innerHTML=resText;
            }
        }
        xhr.send(null);
    }
</script>

<body>
    <div id="add"></div>
    <button onclick="testAjax()">点击查看请求</button>
</body>

3.如何使多个ajax请求按照某一顺序执行？

在请求中加 async:false ,这样所有的ajax请求就会同步执行，执行顺序就是代码顺序。

4.如何解决ajax跨域问题？

（1）jsonp解决跨域
核心原理使用script标签没有跨域限制的漏洞，动态创建一个script标签，其src属性指向第三方的网址，即可。
（2）CORS（跨域资源共享）
核心原理通过响应头告诉浏览器允许跨域
当使用XMLHttpRequest发送请求时，如果浏览器发现违反了同源策略就会在响应头自动加origin。
后盾接收到请求确定响应后会在Request Header中加入一个属性Access-Control-Allow-Origin,之后判断响应中的Access-Control-Allow-Origin值是否和当前地址相同，匹配成功继续处理，否则报错。
（3）前端发送请求，经过代理，请求需要的服务器资源（使用node.js代理即可）

5.写出原生Ajax

var xhr= new XMLHttpRequest();
xhr.open("get","text.php",true);
xhr.send(null);
xhr.onreadystatechange=function(){
    if(xhr.readyState==4 && xhr.status==200){
         console.log(xhr.responseText)
    }
}

扩展-Ajax作用？

Ajax能够在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容，实现局部更新。

6.Fetch与Ajax相比，优缺点？

扩展-Fetch

ES6新增了一种HTTP数据请求的方式，就是fetch，它和XMLHttpRequest有许多相似的功能，但是相比XMLHttpRequest，fetch更具可扩展性和高效性。

1.ajax请求数据

var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'json';

xhr.onload = function() {
  console.log(xhr.response);
};

xhr.onerror = function() {
  console.log("Oops, error");
};

xhr.send();

缺点：jQuery整个项目太大，单纯使用ajax引入不合理，采用个性化打包不能享受CDN服务。（CDN：内容分发网络）

2.fetch请求数据

fetch(url)
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(e => console.log("Oops, error", e))

优点：fetch更为简洁，而且fetch请求属于promise结构，直接使用.then方法处理回调数据，出错时，执行catch方法，还可以避免回调地狱的问题。
缺点：只对网络请求报错，默认不带cookie，不能原生检测请求的进度。

扩展-ajax，axios，fetch比较？优缺点？

axios请求数据

axios({
    method: 'post',
    url: '/user/12345',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

优点：从node.js创建http请求，支持promise API

Snowy~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端面试宝典3.2Ajax

3.2Ajax1.ajax返回的状态0 未初始化，还没有调用send()方法1 载入，已调用send()方法，正在发送请求2 载入完成，send()方法执行完成，已经接收到全部响应内容3 交互，正在解析响应内容4 完成，响应内容解析完成，可以在客户端调用了2.实现一个Ajax实现Ajax异步交互需要服务器逻辑进行配合，需要完成以下步骤：1.创建Ajax的核心对象XMLHttpRequest对象2.通过XMLHttpRequest对象的open() 方法设置请求信息3.通过XMLHttp
复制链接

扫一扫

专栏目录