Web前端学习:jQuery基础 · 小终结【异步处理AJAX】

简介: Web前端学习:jQuery基础 · 小终结【异步处理AJAX】

一、AJAX介绍


ajax技术的目的是让javascript发送http请求,与后台通信,获取数据和信息。


ajax技术的原理是实例化xmlhttp对象,使用此对象与后台通信。


ajax通信的过程不会影响后续javascript的执行,从而实现异步。



AJAX处理过程

abb22ed9996048c491855ab888e72fe0.png



二、AJAX请求


$.ajax({
    url: '/change_data ', //请求路径
    type: 'GET', //请求类型 get 或 post
    dataType: 'json ' , //要返回的数据格式,json,text,html
    data: { 'code ' : 300268} //发送给服务器的数据,参数
    success : function(dat){ //成功的时候返回的数据
        alert(dat.name) ;
    },
    error : function(){ //失败的时候提示的一个内容 XMLHttpRequest 错误信息 捕获的错误对象
    alert('服务器超时﹐请重试! ');
    }
});



代码演示


案例一 :获取txt文本内容,通过页面窗口弹出


先在使用的html文件下,创建一个text.txt文本文件,并在里面写入内容

d01648fd2e064946bc5956a0a8daf343.png


获取text.txt文件的内容并通过窗口弹出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.10.2.min.js"></script>
    <script>
        $(function () {
            $.ajax({
                url:"test.txt",//请求路径
                type:"get",//请求类型 get post
                datatype: "text",//要返回的数据格式,json,text,html
                // data:"",//发送给服务器的数据,参数
                success:function (result,status) {//成功的时候返回的数据
                    // result服务器返回给我们的数据
                    // status描述状态的字符串
                    alert(result) //将返回的数据通过窗口弹出
                },
            })
        })
    </script>
</head>
<body>
</body>
</html>


运行结果


78279a766378462ab468dede3bb023a3.png


案例二:返回json数据


  • 首先,修改txt文本中的内容


aae6f22458834a74b53e1b2be6074d5e.png


获取json数据中的name值,并通过窗口弹出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.10.2.min.js"></script>
    <script>
        $(function () {
            $.ajax({
                url:"test.txt",//请求路径
                type:"get",//请求类型 get post
                datatype: "json",//要返回的数据格式,json,text,html
                // data:"",//发送给服务器的数据,参数
                success:function (result,status) {//成功的时候返回的数据
                    // result服务器返回给我们的数据
                    // status描述状态的字符串
                    alert(data["name"]);
                },
                error:function () {//失败的时候提示的一个内容 XMLHttpRequest 错误信息 捕获的错误对象
                    alert("连接服务器超时");
                }
            })
        })
    </script>
</head>
<body>
</body>
</html>


运行结果

d406452e36724cd68fceb50509c7e2c7.png


运行后我们可以看到,窗口弹出了一个undefined,这是怎么回事呢?


这是因为result返回的是json数据,转换成json对象才可以获取到值

  • 于是我们通过将json数据转换成json对象
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.10.2.min.js"></script>
    <script>
        $(function () {
            $.ajax({
                url:"test.txt",//请求路径
                type:"get",//请求类型 get post
                datatype: "json",//要返回的数据格式,json,text,html
                // data:"",//发送给服务器的数据,参数
                success:function (result,status) {//成功的时候返回的数据
                    // result服务器返回给我们的数据
                    // status描述状态的字符串
                    var data = eval("("+result+")");//eval()就是把json数据转换成json对象
                    alert(data.name);
                },
                error:function () {//失败的时候提示的一个内容 XMLHttpRequest 错误信息 捕获的错误对象
                    alert("连接服务器超时");
                }
            })
        })
    </script>
</head>
<body>
</body>
</html>


运行结果

0e224ffcdb2d4e288f178e32a50263af.png



相关文章
N..
|
29天前
|
XML JSON 前端开发
jQuery实现Ajax
jQuery实现Ajax
N..
18 1
|
2月前
|
前端开发 JavaScript 开发者
从零开始学习前端开发
前端开发是目前互联网行业中最为热门的职业之一。本文将介绍从零开始学习前端开发所需的基础知识和技能,包括HTML、CSS、JavaScript等方面的内容,并提供了一些实践性的建议和学习资源,帮助初学者快速入门。
78 1
|
3月前
|
前端开发 JavaScript
从零开始学习前端开发
前端开发是当前最热门的技术之一。本文将从零开始,详细介绍前端开发的基础知识和实践技巧,为初学者提供全面的学习指南。
30 0
|
3月前
|
设计模式 前端开发 算法
No210.精选前端面试题,享受每天的挑战和学习
No210.精选前端面试题,享受每天的挑战和学习
No210.精选前端面试题,享受每天的挑战和学习
|
3月前
|
消息中间件 缓存 前端开发
No209.精选前端面试题,享受每天的挑战和学习
No209.精选前端面试题,享受每天的挑战和学习
No209.精选前端面试题,享受每天的挑战和学习
|
3月前
|
前端开发 JavaScript Java
No208.精选前端面试题,享受每天的挑战和学习
No208.精选前端面试题,享受每天的挑战和学习
No208.精选前端面试题,享受每天的挑战和学习
|
2月前
|
存储 开发框架 前端开发
从零开始学习前端开发
前端开发是现代互联网应用程序开发中不可或缺的一部分。本文将带您从零开始学习前端开发,包括HTML、CSS和JavaScript等核心技术,以及常见的开发框架和工具。
|
3月前
|
Web App开发 前端开发 JavaScript
从零开始学习前端开发
在当今数字化时代,前端开发人员的需求越来越高。本文将介绍从零开始学习前端开发所需学习的技能和工具,以及如何将这些知识应用到实际项目中。
|
3月前
|
前端开发 JavaScript 开发工具
从零开始学习前端开发技术
随着互联网的快速发展,前端开发成为了一个备受关注的职业。本文将从零开始介绍前端开发所需的基础知识和技能,并重点介绍常用的HTML、CSS和JavaScript语言,帮助初学者快速入门前端开发。
36 0
|
3月前
|
存储 JSON 前端开发
No206.精选前端面试题,享受每天的挑战和学习
No206.精选前端面试题,享受每天的挑战和学习
No206.精选前端面试题,享受每天的挑战和学习