您的位置：首页 > Web前端 > JQuery

jQuery中的Ajax

2013-11-06 11:44 363 查看

一，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() 方法来进行遍历。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航