AJAX笔记

最新推荐文章于 2024-08-12 13:02:56 发布

( ´͈ ⌵ `͈ )σண180

最新推荐文章于 2024-08-12 13:02:56 发布

阅读量113

点赞数 2

分类专栏：笔记文章标签： ajax

本文链接：https://blog.csdn.net/qq_45193294/article/details/118055712

版权

笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

AJAX

1、概念

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）
在 2005年被Jesse James Garrett提出的新术语，
用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。
使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

2、同步请求与异步请求

同步请求：客户端向服务器发送请求–>等待服务器响应–>处理完毕返回，客户端浏览器没有做别的事情。
异步请求：通过事件触发请求–>服务器处理请求–>处理完毕返回，但是客户端浏览器可以接着做别的事情

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jr7l1787-1624091363382)(C:/Users/%E8%88%AA%E8%88%AA/AppData/Roaming/Typora/typora-user-images/image-20210616172654986.png)]

3、原生js实现AJAX的方式

<script>
        //定义方法
        function fun() {
            //发送异步请求
-------------------------------//1、创建核心对象--------------------------------
            var xmlhttp;
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
--------------------------------//2、建立连接-----------------------------------
            /*
            * 参数：
            *   1、请求方式：get，post
            *           *get方式：请求参数在URL后面拼接。send方法为空参
            *           *post方式：请求参数在send方法中定义send(username=tom)
            *   2、请求的url:
            *   3、同步请求或异步请求：true(异步)或false(同步)
            * */
            xmlhttp.open("GET","helloServlet?username=tom",true);
-------------------------------- //3、发送请求----------------------------------
            xmlhttp.send();

--------------------------------//4、接受并处理来自服务器的响应结果-----------------
            /*
            * 获取方式：xmlhttp.responseText
            * 什么时候获取？--->当服务器响应成功后再获取
            * */
            //当xmlhttp对象的就绪状态是否为4，判断status响应状态码是否为200
            xmlhttp.onreadystatechange=function () {
                if(xmlhttp.readyState==4&&xmlhttp.status==200){
                    //获取服务器的响应结果
                    var responseText = xmlhttp.responseText;
                    alert(responseText);
                }
            }

        }
    </script>
</head>
<body>
    <input type="button" value="发送异步请求" onclick="fun();">
    <input type="text" >
</body>

4、JQeury实现方式

1、$.ajax()

回调函数

如果要处理$.ajax()得到的数据，则需要使用回调函数。beforeSend、error、dataFilter、success、complete。

beforeSend 在发送请求之前调用，并且传入一个XMLHttpRequest作为参数。
error 在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象（如果有的话）
dataFilter在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据（可能是处理过的）传递给success回调函数。
success 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。
complete 当请求完成之后调用这个函数，无论成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串。

 语法：jQuery.ajax({键值对})

代码

<script src="js/jquery-3.3.1.min.js"></script>
    <script>
        //定义方法
        function fun() {
            //使用$.ajax()发送异步请求
            $.ajax({
                url:"helloServlet",//请求路径
                type:"POST",//请求方式
               // data:"username=tom&age=23",//请求参数
                data:{"username":"yy","age":19},//请求参数(推荐使用)
                success:function (data) {
                    alert(data);
                },//响应成功后的回调函数
                error:function () {
                    alert("出错啦！！！");
                },//表示如果请求响应出现错误，会执行的回调函数
                dataType:"text"//设置接收到的响应数据的格式
            });
        }
    </script>
</head>
<body>
    <input type="button" value="发送异步请求" onclick="fun();">
</body>

2、$.get()

发送get请求

语法：$.get(url,[data],[callback],[type])

参数：

url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。

代码：

<title>get方式实现ajax</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        function fun() {
            $.get("helloServlet",//url
                {username:"xoxo"},//参数
                function (data) {alert(data);},//回调函数
                "text"//响应结果
            );
        }
    </script>
</head>
<body>
    <input type="button" value="get方式实现异步请求" onclick="fun();">
</body>

3、$.post()

语法：$.post(url, [data], [callback], [type])

参数：

url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。

代码：

<title>post方式实现ajax</title>
<script>
        function fun() {
            $.post("helloServlet",
                {"username":hanghang},
                function (data) {
                    alert(data);
                },
                "text"
            );
        }
    </script>
</head>
<body>
    <input type="button" value="post方式实现ajax" onclick="fun();">
</body>

( ´͈ ⌵ `͈ )σண180

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
6
评论
AJAX笔记

AJAX1、概念Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的
复制链接

扫一扫