jQuery中的Ajax

来源：互联网发布：一叶随风天下知秋编辑：程序博客网时间：2024/06/10 09:38

一，jQuery中用于发送异步请求的方法

l JQuery 对 Ajax 操作进行了封装

l 在 jQuery 中最底层的方法时 $.ajax()

l 第二层是 load(),$.get() 和 $.post()，主要方法。

l 第三层是 $.getScript() 和 $.getJSON()

（1）load()方法。

load()方法是 jQuery 中最为简单和常用的 Ajax 方法, 能载入远程的HTML 代码并插入到 DOM 中。

它的结构是: load(url[, data][,callback])

程序员只需要使用 jQuery 选择器为 HTML 片段指定目标位置, 然后将要加载的文件的 url 做为参数传递给 load() 方法即可

程序示例：

<body><input type="text" name="username" id="username" /><input type="text" name="password" id="password" /><input type="button" value="发送请求" id="send" /><font color="red"><div id="d1"></div></font></body><script type="text/javascript">$(document).ready(function(){$("#send").click(function(){var json = {username : $("#username").val(),password : $("#password").val()}$("#d1").load("../servlet/DemoServlet",json,function(data,textStatus,XMLHttpRequest){alert(data);});});});</script>

l 传递方式: load() 方法的传递参数根据参数 data 来自动自定. 如果没有参数传递, 采用 GET 方式传递, 否则采用 POST 方式

l 对于必须在加载完才能继续的操作,load() 方法提供了回调函数, 该函数有三个参数: 代表请求返回内容的 data; 代表请求状态的 textStatus 对象(其值可能为: succuss, error, notmodify, timeout 4种)和 XMLHttpRequest 对象

l 方法的返回值是 jQuery。

l 如果只需要加载目标 HTML 页面内的某些元素, 则可以通过 load() 方法的URL 参数来达到目的. 通过 URL 参数指定选择符, 就可以方便的从加载过来的 HTML 文档中选出所需要的内容. load() 方法的 URL 参数的语法结构为 “url selector”(注意: url 和选择器之间有一个空格)

（2）get方法

$.get() 方法使用 GET 方式来进行异步请求. 它的结构是: $.get(url[, data][, callback][, type]);

$.get() 方法的回调函数只有两个参数: data 代表返回的内容, 可以是 XML 文档, JSON 文件, HTML 片段等; textstatus 代表请求状态, 其值可能为: succuss, error, notmodify, timeout4 种.

方法的返回值:XMLHttpRequest对象

$.get() 和$.post() 方法是 jQuery 中的全局函数, 而 find() 等方法都是对 jQuery 对象进行操作的方法

Get方法程序示例：

<body>    <input type="text" name="username" id="username" /><input type="text" name="password" id="password" /><input type="button" value="发送请求" id="but" /><div id="first"></div>  </body>  <script type="text/javascript">  $(function(){var json = {username : $("#username").val(),password : $("#password").val()}$("#but").click(function(){$.get("../servlet/DemoServlet",json,function(data,textStatus){//$("#first").html(data);var $node1 = $(data);$("#first").append($node1);});});});  </script>

（3）post方法

与get方法基本相同，只是将get改为post而已。

程序示例：

<body>    <input type="text" name="username" id="username" /> <br/><input type="text" name="password" id="password" /> <br/><input type="button" value="发送请求" id="but" /><div id="first"></div>  </body>  <script type="text/javascript">  $(function(){$("input[id='but']").click(function(){var json = {username : $("body:first-child").val(),password : $("body:nth-child(2)").val()}$.post("../servlet/DemoServlet",json,function(data,textStatus){var $node1 = $(data);$($("body>div").get(0)).append($node1).css("background-color","pink").css("color","blue").css("width","60px").css("height","100px");});});});  </script>

（4）getScript方法

有时候，在页面初次加载时就取得所需的全部的javascript文件是完全没有必要的。虽然我们可以在需要时，动态创建<script>标签。但这种方式并不理想。

为此，jQuery提供了$.getScript()方法直接加载.js文件，与加载一个HTML片段一样简单方便。

<body> <br/> <p> <input type="button" id="send" value="加载"/> </p><div  class="comment">已有评论：</div> <div id="resText" > </div>  </body>  <script language="JavaScript">   $(function(){        $('#send').click(function() {             $.getScript('test.js');        });   })  </script>

<body> <br/> <p> <input type="button" id="send" value="加载"/> </p><div  class="comment">已有评论：</div> <div id="resText" > </div>  </body>  <script language="JavaScript">   $(function(){        $('#send').click(function() {             $.getScript('test.js',function(){ $('#resText').html(html); });        });   })  </script>

（5）getJSON方法

含义与getScript相同，是引入*.json文件的方法，*.json文件可以看作一个文本文件，但是里面的内容必须是json格式，有格式要求。

<body> <br/> <p> <input type="button" id="send" value="加载"/> </p><div  class="comment">已有评论：</div> <div id="resText" > </div>  </body>  <script language="JavaScript">   $(function(){        $('#send').click(function() {             $.getJSON('test.json', function(data) {                 $('#resText').empty(); var html = ''; $.each( data  , function(commentIndex, comment) { html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>';  }) $('#resText').html(html);            })       })   })  </script>

（6）ajax方法

使用的是key/value来配置信息，符合json格式。例如：

$.ajax({url:"get.jsp",type:"post",async:true,data:json,success:function(data,textStatus){alert(data);},error:function(XMLHttpRequest,textStatus,errorThrown){alert("请求出错啦。。。");}});

主要参数：

二，实现跨域请求

域名：（英语：Domain Name），又称网域、网域名称，是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置）。

跨域：两个不同域名之间的通信，称之为跨域。例如：http://www.baidu.com和http://www.sina.com.cn。

jQuery如何实现跨域请求？使用JSONP形式实现跨域。

l 什么是JSONP

JSONP（JSON with Padding）是数据交换格式 JSON 的一种“使用模式”，可以让网页从别的网域要资料。

（1）跨域请求实现方式：

由于同源策略，一般来说位于 server.example.com 的网页无法与不是 server.example.com 的服务器沟通，而 HTML 的 <script> 元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。

（2）测试跨域请求

互联网上是不允许跨域请求的，即不允许服务器请求服务器。我们通过测试可以知道，互联网是允许一个服务器向另一个服务器发送请求信息的，但是不允许另一个服务器响应。

测试方式：通过MyEclipse+Tomcat

1，准备工作：建立一个工程，编写一个jsp文件作为请求端，再编写一个servlet，作为服务端，并使二者能够产生通信。编译之后，这个servlet的.class文件就在WEB-INF下的classes目录中了。

2,在tomcat根目录下有个webapps目录，这个文件里的ROOT文件是Tomcat的默认主页。我们也模拟tomcat建立默认主页。在tomcat的根目录下建立一个baidu文件夹，再建立一个sina文件夹，来模拟百度请求新浪的情形。但我们知道webapps不是tomcat的根目录，ROOT才是，所以我们同样需要在baidu和sina文件夹下分别建立ROOT文件夹，将工程建立在ROOT文件夹下，ROOT才是根目录。

3，然后在tomcat的配置文件server.xml文件中配置<host>，将baidu和sina都配制成主机。

4,最后将第一步的jsp文件放在baidu的ROOT下，作为请求方，将第一步的WEB-INF文件夹拷贝到sina的ROOT文件夹中，作为服务端。

5，在浏览器中测试。

三，序列化元素

l 在客户端与服务器端进行通信时，常常需要将客户端浏览器中的内容发送至服务器端进行处理。如果需要发送的内容较少时，处理比较方便。但在真实项目中，往往需要处理的数据内容很复杂。jQuery提供了相应的方法帮助开发者解决这个问题。

l serialize()方法

该方法作用于一个jQuery对象，可以将DOM元素内容序列化为字符串。方便客户端发送请求。

l serializeArray()方法

该方法作用于一个jQuery对象，可以将DOM元素内容序列化为JSON数据格式。

注：此方法返回的是JSON对象而非JSON字符串。

四，jQuery加载并解析XML

JQuery 可以通过 $.get() 或 $.post() 方法来加载 xml.

JQuery 解析 XML 与解析 DOM 一样, 可以使用 find(), children() 等函数来解析和用 each() 方法来进行遍历。