前端开发之Ajax请求数据

作者: 无意惹东风 | 来源:发表于2017-04-17 16:37 被阅读88次

本文讲述在前端开发过程中涉及到网络数据请求时候的相关内容。以Ajax请求为中心进行展开。

首先、简单的介绍一下什么是Ajax、以及为什么要使用他。
Ajax: Asynchronous JavaScript and XML,简言之就是异步 JavaScript 和 XML。

他可以通过和服务器的交互实现网页中部分信息的更新,这就使得我们在只需要进行少数数据更新的情况下,避免整个网页数据的再次加载,提升了开发性能。

举个例子就是说;现在你要注册一个网站,成为正式用户,然后有一大堆的信息录入表等你填写,这个时候你已经填了好多内容了,有个地方需要你输入验证码,然后呢,你表示看不清楚想要换一张验证码,这个时候,如果用普通的数据刷新请求方式去处理获取新的验证码的话,随之而来的问题就是,验证码虽然刷新了,但是你之前好不容易填写的一堆个人信息也被刷新了,没了,是不是很无语,所以,这种情况下,我们就需要使用Ajax这种部分内容刷新的请求方式去进行数据请求,从而达到更加高效快捷的更新网页内容的效果。

那么、接下来我们就来看看具体的在代码中该如何书写请求。
1.关于适用原生的Ajax进行数据请求。

<button onclick="getDataByAjax()">点击请求数据</button>
<div id="myDiv"></div>
<script type="text/javascript">
function getDataByAjax() {
    var xmlHttp;
    // 设置浏览器兼容-创建 XMLHttpRequest 对象
    if (window.XMLHttpRequest) { 
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlHttp = new XMLHttpRequest();
    } else { 
          // code for IE6, IE5
          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    // onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数
    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) 
        {   
             document.getElementById("myDiv").innerHTML = xmlhttp.responseText; 
        }
    }
     // 设置请求类型(get/post), url, 以及是否为异步请求async
      xmlHttp.open("GET", "你的请求路径-url", true);
      xmlHttp.send(); // 发送请求
}
</script>

以上就是通过原生方式进行Ajax请求数据的方法,其中:
readyState: 存有 XMLHttpRequest 的状态。他有0-4五种取值。0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成、且响应已就绪。
status: 响应状态码(200表示成功,404表示页面未找到)

2.jQuery中使用Ajax请求数据。

           $.ajax({
                type: "get", // 请求类型(get/post)
                url: "你的请求路径-url", 
                async: true, // 是否异步
                dataType: "json", // 设置数据类型
                success: function (data){
                    // 请求成功后的回调方法,进行数据赋值、显示等操作
                },
                error: function (errorMsg){
                    // 请求失败
                    alert("请求失败");
                }
            });

以上就是jQuery中使用Ajax进行数据请求的方式,相比于第一种而言,很显然简洁了许多,但是需要主要dataType这个参数的设置需要和你请求的数据的类型保持一致。

希望我的文章能对大家有所帮助,以上内容,如有不对或不足之处,还望大神不吝指正,十分感谢!

我是姣爷,我在简书,加油。

相关文章

  • 前端开发之Ajax请求数据

    本文讲述在前端开发过程中涉及到网络数据请求时候的相关内容。以Ajax请求为中心进行展开。 首先、简单的介绍一下什么...

  • 2020-06-24

    [toc] Ajax Ajax视图的控制权在前端手上,前端入参data,回调后端返回的数据Ajax四个点,请求ur...

  • vue3+ts项目中使用mockjs

    前后端分离的开发模式,前端需要向后端请求数据(ajax请求),但实际开发过程中,前后端会约定一份接口文档,但前后端...

  • 前端性能优化实践:Ajax请求优化新体验

    说起来ajax,相信诸位都不会陌生 —— 这可是当下前端最火的技术之一。 ajax请求数据,将数据拿到前端页面上,...

  • ajax请求成功回调函数没有执行问题

    如下常见的ajax前端请求,请求成功后success:function(result){ 这里的数据没有执行 }:...

  • 前段到后台

    前端页面ajax请求 URL:前段php页面链接后台数据库 返回数据 前段ajax 的毁掉函数success的参...

  • easyUI之ajax请求单个列数据显示在datagrid中

    效果如下: 前端: Ajax请求数据:注:这里async必须设置为 false,否则请求不到数据。原因如下: as...

  • 2018-12-06 mock.js的使用

    目的 mock.js能够拦截Ajax请求,生成模拟数据进行接口调试,模拟了前后端调试的环境,使得前端开发能够独立于...

  • 【Vue】插件:三、mockjs 安装及使用教程

    生成随机数据,拦截 Ajax 请求前后端分离-让前端攻城师独立于后端进行开发。增加单元测试的真实性-通过随机数据,...

  • Spring Boot实战:Restful API的构建

    在现在的开发流程中,为了最大程度实现前后端的分离,通常后端接口只提供数据接口,由前端通过Ajax请求从后端获取数据...

网友评论

    本文标题:前端开发之Ajax请求数据

    本文链接:https://www.haomeiwen.com/subject/ncbtzttx.html