【速成之路】网页编程必会的Ajax——jQuery实现Ajax（一）

这个昵称我想了20分钟

已于 2022-06-21 14:39:47 修改

阅读量2.3k

点赞数 140

分类专栏：【速成之路】Ajax 文章标签： ajax jquery 五一技术分享

于 2022-05-08 21:55:34 首次发布

本文链接：https://blog.csdn.net/m0_61684063/article/details/124655536

版权

【速成之路】Ajax 专栏收录该内容

7 篇文章 11 订阅

订阅专栏

🎉个人主页：这个昵称我想了20分钟
✨往期专栏: 【速成之路】jQuery
【速成之路】SQLserver

jQuery实现Ajax

$.ajax()方法

jQuery对 JavaScript 代码进行封装，以方便前台代码的编写，其最大优势是解决了浏览器的兼容问题，这也是使用jQuery非常重要的原因。
Ajax的核心是 XMLHttpRequest 对象，而jQuery对Ajax异步操作进行了封装。本节将讲解jQuery实现Ajax的几种常用方式，包括 $.ajax， $.post, $.get。

$.ajax()方法

$.ajax()方法通过HTTP请求加载远程数据，该方法是jQuery底层的Ajax实现。$.ajax()方法返回其创建的 XMLHttpRequest 对象，大多数情况下无须直接操作，除非需要操作不常用的选项，以获得更多的灵活性。$.ajax()方法的调用格式如下所示：

$.ajax({
url:'请求地址',
type:'POST/GET',
data：{ //从客户端发送到服务器的值
数据1:值1，
数据2:值2，
},
dataType:'设置从服务器端返回数据的数据类型',
async:'true|false',
success:function(str){
//Ajax请求成功回调函数的相关操作语句
},
error:function(err){
//Ajax请求失败回调函数
}
});

$.ajax()方法的常用参数说明如下：

(1) url：用于请求数据的地址，默认值是当前网页地址。

(2) type：说明当前Ajax向服务器端发送数据采用get方法还是post方法。get方法会将前端上传的数据直接与地址连接起来，能传输的数据最大为1024B，一般用于查询操作(不会威胁数据库数据)。get方法有缓存问题，会被浏览器缓存起来。post方法比较安全，一般用于新增、删除、修改等操作，传输数据的大小2MB。

(3) data：发送到服务器的数据。该数据将会自动转换为请求字符串格式。GET请求中数据将附加在URL后。如果为数组，jQuery将自动为不同值对应同一个名称。例如，
{foo:[ ‘bar1"，“bar2”]}转换为’foo=bar1&foo=bar2’。

(4)dataType：设置服务器返回数据的数据类型。如果不指定，jQuery将自动根据HTTP包的MIME信息来智能判断，随后服务器端返回的数据会根据这个值解析后，传递给回调函数。该属性的可用值包括以下几种。

“xml”：返回XML文档，可用jQuery处理。
“html”：返回纯文本HTML信息，包含的script标签会在插入DOM时执行。
“script”: 返回纯文本 JavaScript 代码。
“json”：返回JSON数据。
“jsonp”：返回JSONP格式的数据。
“text”：返回纯文本字符串。

(5) asyne：同步与异步标志，默认值是true(异步)。同步时会阻塞程序的运行，请求完成之后才能继续运行脚本代码，异步时请求的过程不会阻塞代码运行。

(6) success：请求成功后所调用的回调函数。该回调函数所带参数主要包括服务器返回数据和返回状态。

(7) error：请求失败后所调用的回调函数。该回调函数所带参数主要包括 XMLHttpRequest 对象错误信息、（可能）捕获的错误对象。

例中jQuery使用$. ajax()方法调用服务器端的文本文件，其在浏览器中的运行结果如图所示。

【例1】

<!DOCTYPE html>
<html>
  <head>
    <title>html</title>
    <script type="text/javascript "src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	<script>
      $(function(){
        $.ajax({
          url:"server.txt",
          success:function(result){
            $("#resultDiv").html(result);
            }
		});
	});
    </script>
   </head>
 <body>
    <div id="resultDiv"></div>
 </body>
</html>

服务器端文本文件server. txt的源代码如下所示：

服务器端文件内容，返回到客户端。

例2使用$. ajax()方法实现上节例1中原生 JavaScript 的用户名验证的功能。读者应该重点理解$.ajax()方法的数据发送方式与服务器端返回数据的处理方法，并对$.ajax()方法的使用方法进行着重分析。服务器端程序仍使用上节例1的服务器端servlet程序AjaxServlet.java。
【例2】

<!DOCTYPE html>
<html>
   <head>
   <title>$.ajax()用户名验证</title>
    <meta http-equiv="content=type"  content="text/html;  charset=UTF-8">
    <script type="text/javascript " src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript ">
        $(function(){
         $("#username").blur(function(){
          $.ajax({
            url:"/hello/AjaxServlet",//调用服务器端程序
            dataType:"text",//设置返回数据是test类型
            data:{"name":$("#username").val()},//设置发送数据“name：值”
            type:"post",//数据提交方式post
            success:function(result){//数据返回成功，result返回数据
               if($.trim(result)=="true"){//$. trim()是删除空格方法
                  $("#display").html("用户名被占用");
                  $("#display").css({color:"white",  background :"red"});
                }
                else
                {
                $("#display").html("用户名可用");
                $("#display").css({color:"green",  background :"white"});
                }
             }
           });
          });
        });
    </script>
    </head>
 <body>
    <form action=""  method="get">
     用户名：
         <input type="text"  id="username"  name="username">
          <span id="display"></span><br>
          <input type="submit"  value="test">
    </form>
  </body>
</html>

在这里插入图片描述

这个昵称我想了20分钟

关注

140
点赞
踩
110

收藏

觉得还不错? 一键收藏
打赏
100
评论
【速成之路】网页编程必会的Ajax——jQuery实现Ajax（一）

🎉个人主页：这个昵称我想了20分钟✨往期专栏: 【速成之路】jQuery 【速成之路】SQLserverjQuery实现Ajax$.ajax()方法 jQuery对 JavaScript 代码进行封装，以方便前台代码的编写，其最大优势是解决了浏览器的兼容问题，这也是使用jQuery非常重要的原因。 Ajax的核心是 XMLHttpRequest 对象，而jQuery对Ajax异步操作进行了封装。本节将讲解jQuery实现Ajax的几种常用方式，包括$.ajax，$.post, .
复制链接

扫一扫