关于ajax异步访问数据的问题_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异步访问数据内容请搜索真格学网以前的文章或继续浏览下面的相关文章希望大家以后多多支持真格学网!

您可能感兴趣的文章:layui实现数据分页功能(ajax异步)layui实现数据表格table分页功能(ajax异步)关于Ajax异步请求后台数据进行动态分页功能jquery ajax异步提交表单数据的方法AJAX Servlet实现数据异步交互的方法vue.js 表格分页ajax 异步加载数据

  • 本文相关:
  • 使用ajax局部更新razor页面的实例代码
  • ajax suggest类似google的搜索提示效果
  • 5款ajax 文件上传控件
  • ajax实现从后台拿数据显示在html前端的方法
  • 往xml中更新节点的实例代码
  • 用ajax实现在单击事件下加载一个div层的脚本
  • 发布三个ajax相关的函数,包括无刷新提交表单等
  • js ajax加载时的进度条代码
  • 关于ajax跨域问题及解决方案详析
  • ajax开始准备篇
  • 如何实现ajax异步请求,要访问数据库的那种
  • ASP.NET C# AJAX 异步处理数据的问题
  • 兄弟姐妹们,谁有抓取ajax异步返回数据的经验? - PHP进阶讨论
  • 使用ajax异步提交,使用post,能否访问到页面上的表单值?
  • 用jQuery的AJax实现异步访问、异步加载
  • (IE浏览器)jsp中用ajax异步加载数据,页面显示成功,数据也显示了...
  • Ajax异步访问的四个步骤是那四个步骤?
  • 关于ajaxfileupload异步上传的一些问题
  • 关于ASP+ajax异步修改的问题
  • ajax能异步访问根路径外的xml文件么?比如我的xml要放到weba...
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全javascriptasp.netphp编程ajax相关正则表达式asp编程jsp编程编程10000问css/htmlflex脚本加解密web2.0xml/rss网页编辑器相关技巧安全相关网页播放器其它综合dart首页layui实现数据分页功能(ajax异步)layui实现数据表格table分页功能(ajax异步)关于ajax异步请求后台数据进行动态分页功能jquery ajax异步提交表单数据的方法ajax servlet实现数据异步交互的方法vue.js 表格分页ajax 异步加载数据使用ajax局部更新razor页面的实例代码ajax suggest类似google的搜索提示效果5款ajax 文件上传控件ajax实现从后台拿数据显示在html前端的方法往xml中更新节点的实例代码用ajax实现在单击事件下加载一个div层的脚本发布三个ajax相关的函数,包括无刷新提交表单等js ajax加载时的进度条代码关于ajax跨域问题及解决方案详析ajax开始准备篇jquery ajax 向后台传递数组参数ajax readystate的五种状态详解jquery实现ajax定时刷新局部页面ajax中的async属性值之同步和异步ajax传递多个参数具体实现ajax获取数据然后显示在页面的实ajax获取数据中文乱码问题最简单jquery ajax中使用serialize()方自己动手打造ajax图片上传(网上没ajax 缓存问题的两种解决方法(ieajax通过xml异步提交的方法实现从数据库获php ajax post的使用实例代码ajax对xml信息的接收和处理操作实例分析详解ajax +jtemplate实现动态分页ajax判断后端返回的数据是否为null的方法ajax动态为a标签href赋值不执行跳转的原因ajax实现数据的增删改查操作详解【java后利用ajax实现鼠标悬浮获取值的代码ajax 上传图片并预览的简单实现ajax实现简单实时验证功能
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved