• 在线客服

  • 扫描二维码
    下载博学谷APP

  • 扫描二维码
    关注博学谷微信公众号

  • 意见反馈

原创 Ajax Web数据交互方式有什么作用?怎么用?

发布时间:2022-01-07 13:57:06 浏览 2438 来源:博学谷 作者:小谷

    Ajax Web数据交互方式有什么作用?怎么用?Ajax 技术发送http请求获取后台服务器数据,Ajax的简写方式可以使用$.get和$.post方法来完成。AJAX 是开发者利器:不刷新页面更新网页;在页面加载后从服务器请求数据;在页面加载后从服务器接收数据;在后台向服务器发送数据。

    Ajax Web数据交互方式

    学习目标:能够知道Ajax的作用

    1. Ajax是什么?

    Ajax 是Asynchronous JavaScript and XML的简写,Ajax一个前后台配合的技术,它可以让 javascript 发送异步的 http 请求,与后台通信进行数据的获取,Ajax 最大的优点是实现局部刷新,Ajax可以发送http请求,当获取到后台数据的时候更新页面显示数据实现局部刷新,在这里大家只需要记住,当前端页面想和后台服务器进行数据交互就可以使用Ajax了。

    这里提示一下大家, 在html页面使用Ajax需要在web服务器环境下运行, 一般向自己的web服务器发送Ajax请求。

    2. Ajax的使用方法介绍

    jquery将它封装成了一个方法$.Ajax(),我们可以直接用这个方法来执行Ajax请求。

    示例代码:

    <script>
        $.ajax({
        // 1.url 请求地址
        url:'http://t.weather.sojson.com/api/weather/city/101010100',
        // 2.type 请求方式,默认是'GET',常用的还有'POST'
        type:'GET',
        // 3.dataType 设置返回的数据格式,常用的是'json'格式
        dataType:'JSON',
        // 4.data 设置发送给服务器的数据, 没有参数不需要设置// 5.success 设置请求成功后的回调函数
        success:function (response) {
            console.log(response);    
        },
        // 6.error 设置请求失败后的回调函数
        error:function () {
            alert("请求失败,请稍后再试!");
        },
        // 7.async 设置是否异步,默认值是'true',表示异步,一般不用写
        async:true
    });
    </script>

    Ajax方法的参数说明:

    1.url 请求地址

    2.type 请求方式,默认是'GET',常用的还有'POST'

    3.dataType 设置返回的数据格式,常用的是'json'格式

    4.data 设置发送给服务器的数据,没有参数不需要设置

    5.success 设置请求成功后的回调函数

    6.error 设置请求失败后的回调函数

    7.async 设置是否异步,默认值是'true',表示异步,一般不用写

    8.同步和异步说明

    同步是一个Ajax请求完成另外一个才可以请求,需要等待上一个Ajax请求完成,好比线程同步。

    异步是多个Ajax同时请求,不需要等待其它Ajax请求完成, 好比线程异步。

    Ajax的简写方式:

    $.Ajax按照请求方式可以简写成$.get或者$.post方式

    Ajax简写方式的示例代码:

     <script>
        $(function(){
            /*
             1. url 请求地址
             2. data 设置发送给服务器的数据, 没有参数不需要设置
             3. success 设置请求成功后的回调函数
             4. dataType 设置返回的数据格式,常用的是'json'格式, 默认智能判断数据格式
            */ 
            $.get("http://t.weather.sojson.com/api/weather/city/101010100", function(dat,status){
                console.log(dat);
                console.log(status);
                alert(dat);
            }).error(function(){
                alert("网络异常");
            });
    
            /*
             1. url 请求地址
             2. data 设置发送给服务器的数据, 没有参数不需要设置
             3. success 设置请求成功后的回调函数
             4. dataType 设置返回的数据格式,常用的是'json'格式, 默认智能判断数据格式
            */ 
            $.post("test.php", {"func": "getNameAndTime"}, function(data){
                alert(data.name); 
                console.log(data.time); 
            }, "json").error(function(){
                alert("网络异常");
            }); 
        });
    
    
    </script>

    $.get和$.post方法的参数说明:

    $.get(url,data,success(data, status, xhr),dataType).error(func)

    $.post(url,data,success(data, status, xhr),dataType).error(func)

    1.url 请求地址

    2.data 设置发送给服务器的数据,没有参数不需要设置

    3.success 设置请求成功后的回调函数

    data 请求的结果数据

    status 请求的状态信息, 比如: "success"

    xhr 底层发送http请求XMLHttpRequest对象

    4.dataType 设置返回的数据格式

    "xml"

    "html"

    "text"

    "json"

    5.error 表示错误异常处理

    func 错误异常回调函数

    3. 小结

    Ajax是发送http请求获取后台服务器数据的技术;Ajax的简写方式可以使用$.get和$.post方法来完成。

    申请免费试学名额    

在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!

上一篇: 事件代理如何使用?代码怎么写? 下一篇: JSON数据交换格式有几种?分别是什么?

相关推荐 更多

热门文章

  • 前端是什么
  • 前端开发的工作职责
  • 前端开发需要会什么?先掌握这三大核心关键技术
  • 前端开发的工作方向有哪些?
  • 简历加分-4步写出HR想要的简历
  • 程序员如何突击面试?两大招带你拿下面试官
  • 程序员面试技巧
  • 架构师的厉害之处竟然是这……
  • 架构师书籍推荐
  • 懂了这些,才能成为架构师
  • 查看更多

扫描二维码,了解更多信息

博学谷二维码