🎉个人主页：这个昵称我想了20分钟
✨往期专栏: 【速成之路】jQuery
【速成之路】SQLserver
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请求失败回调函数}});
$.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】
<!DOCTYPEhtml><html><head><title>html</title><scripttype="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><divid="resultDiv"></div></body></html>
服务器端文本文件server. txt的源代码如下所示：
服务器端文件内容，返回到客户端。
例2使用
$. ajax()
方法实现上节例1中原生 JavaScript 的用户名验证的功能。读者应该重点理解
$.ajax()
方法的数据发送方式与服务器端返回数据的处理方法，并对
$.ajax()
方法的使用方法进行着重分析。服务器端程序仍使用上节例1的服务器端servlet程序AjaxServlet.java。
【例2】
<!DOCTYPEhtml><html><head><title>$.ajax()用户名验证</title><metahttp-equiv="content=type"content="text/html; charset=UTF-8"><scripttype="text/javascript "src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><scripttype="text/javascript ">$(function(){$("#username").blur(function(){
$.ajax({url:"/hello/AjaxServlet",//调用服务器端程序dataType:"text",//设置返回数据是test类型data:{"name":$("#username").val()},//设置发送数据“name：值”type:"post",//数据提交方式postsuccess: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><formaction=""method="get">
用户名：
<inputtype="text"id="username"name="username"><spanid="display"></span><br><inputtype="submit"value="test"></form></body></html>
版权归原作者 这个昵称我想了20分钟 所有， 如有侵权，请联系我们删除。