🎉个人主页：
✨往期专栏:
jQuery实现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请求失败回调函数}});- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
$.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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
服务器端文本文件server. txt的源代码如下所示：
服务器端文件内容，返回到客户端。- 1
例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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39