AJAX

最新推荐文章于 2022-06-19 13:50:53 发布

smilecb

最新推荐文章于 2022-06-19 13:50:53 发布

阅读量90

点赞数

分类专栏： javascript Ajax 文章标签： ajax

本文链接：https://blog.csdn.net/m0_45432976/article/details/113356939

版权

javascript 同时被 2 个专栏收录

17 篇文章 4 订阅

订阅专栏

Ajax

1 篇文章 0 订阅

订阅专栏

AJAX

1.概念：ASynchronous JavaScript And XML 异步的JavaScript和XML
1.1异步和同步：客户端和服务器端相互通信的基础上
同步：客户端必须等待服务器端的响应，在等待的期间客户端不能做其他的操作
异步：客户端不需要等待服务器端的响应，在服务器请求的过程中，客户端可以进行其他的操作
Ajax是一种在无需加载整个网页的情况下，能够更新部分网页的技术，通过后台与服务器进行少量的数据交换，Ajax可以使网页实现异步更新，这意味着在不更新整个页面的情况下，对网页的某部分进行更新
传统的网页（不使用Ajax）如果需要更新内容，必须重新加载整个网页
实现方式

原生js实现(已过时)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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.请求方式 post get
                   get方式    请求参数的URL后面拼接 send方法为空参
                   post方式   请求参数在send方法中定义
                2.请求的URL
                3.同步或异步请求 true（异步）或false（同步
             */
            xmlhttp.open("GET","demo1?username=tom",true);
            //3.发送请求
            xmlhttp.send();
            //接受并处理来自服务器的响应结果
            xmlhttp.onreadystatechange=function () {
                console.log("xmlHttp"+xmlhttp.readyState+' '+"xmlhttp"+xmlhttp.status)
               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>
</html>

2.jQuery实现方式
1.$.ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <script src="js/jquery-3.5.1.min.js"></script>
    <script>
        function fun() {
           $.ajax(
               {
                   url:"demo1",
                   type:"POST",
                   data: {username:"zhangsan",age:"13"},
                   success:function (data) {//如果请求响应成功，则会执行相关的函数
                       console.log(data)
                   },
                   error:function () {//如果请求响应出现错误，则会执行相关的函数
                     alert("信息出错")
                   },
                   dataType:"text"//设置数据类型 通常有xml,html,script,text,json
               }
           )
        }
    </script>
</head>
<body>
<input type="button" value="异步请求" onclick="fun()">
<br>
<input type="text">
</body>
</html>

2.$.get()：发送get请求
语法 $.get(url,[data],[callback],[type])
参数：

        url:请求路径
        data:请求数据
        callback:回调函数
        type:响应结果的类型

  function fun()
        {
            $.get("demo1",{username:"zhangsan",age:"12"},function (data) {
             console.log(data)
            })
        }