关于ajax异步访问数据的问题
更新时间：2021年08月27日 17:19:15 作者：轻痕微凉
这篇文章主要介绍了ajax异步访问数据的问题，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
在js中，处理数据固然很快，sososo就能完成所有的数据处理，我们似乎不需要使用异步传输数据
跨洋数据传输就出现了问题，一来2s过去了一回2s过去了，这对于访问者来说，这就是卡
再者 我输入了密码 提示密码错误 于是要重新输入，返回了一个网页 这时候输入的数据就会被清空，非常让人抓狂。
为了解决这个问题ajax孕育而生
Ajax全名Asynchronous JavaScript and XML 名为异步的JavaScript和XML
Ajax使用方式非常简单
1.创建实例 xhttp = new XMLHttpRequest( )
2.发送文件 Xhttp.open("GET","地址","true/false")
3.定义在发送文件后所获取的数据
xhttp.onreadystatechange = function(){}
在完全传输完成的时候
xhttp.readyState就会等于4
xhttp.status就会等于200
这个时候就能在
xhttp.responseText中获取到数据
4.处理数据
xhttp.responseText获得的数据为字符串
要将其变为字典对象
JSON.parse(xhttp.responseText)
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ajax调用内涵段子</title>
<style>
video{
background-color: aquamarine;
}
</style>
<script src="../jquery-3.6.0.js"></script>
<script>
$(document).ready(function () {
xhttp = new XMLHttpRequest();
https = "https://api.apiopen.top/getJoke?page=1&count=2&type=video";
xhttp.onreadystatechange = function(){
if(xhttp.readyState==4&&xhttp.status==200){
$("h1").html(JSON.parse(xhttp.responseText).result[0].text);
}
else{
}
}
$("button").click(function(){
xhttp.open("GET",https,true);
xhttp.send();
})
});
</script>
</head>
<button>点击获取</button>
<h1></h1>
<body>
</body>
</html>
到此这篇关于ajax异步访问数据的文章就介绍到这了,更多相关ajax异步访问数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
因为laravel以post形式提交数据时候需要加{{csrf_field()}}防止跨站攻击,下面通过本文给大家分享lavarel框架中使用ajax提交表单的方法，一起看看吧2016-12-12
这篇文章主要为大家详细介绍了AJAX请求队列的实现代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
下面小编就为大家带来一篇基于fileUpload文件上传带进度条效果的实例(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
本文给大家分享全国天气预报API Ajax 通过城市名获取数据，通过html和js两部分代码实现天气预报效果，输入城市就会出现天气情况，效果非常棒，感兴趣的朋友可以参考下2016-11-11
这篇文章主要为大家分享了Ajax创建简单实例代码，学习Ajax如何创建简单实例，感兴趣的小伙伴们可以参考一下2015-12-12
下面小编就为大家带来一篇AJAX跨域请求数据的四种方法(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
菜鸟蔡之Ajax复习第二篇(JQuery中的load()方法实现Ajax功能)
在上一篇博客中写到的是在传统的Javascript中使用XMLHttpRequest对象异步加载数据的，唉，童鞋.......看到那些代码是不是有点头疼啊!呵呵......2012-11-11
这篇文章主要介绍了Ajax的优点与缺点的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-11-11
这篇文章主要介绍了Ajax基础使用详解，是前后台交互的能⼒ 也就是我们客户端给服务端发送消息的⼯具，以及接受响应的⼯具，本篇就来对ajax基础进行详细讲解,需要的朋友可以参考下2023-05-05
Ajax异步传输想必大家并不陌生吧，下面为大家介绍下与PHP实现交互的示例，大家不要错过2014-01-01
最新评论