首页 > 代码库 > Ajax(1) load()
Ajax(1) load()
Ajax:Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 不是新的编程语言,是技术的集合;主要技术有:javaScript、XMLHttpRequest、...。
AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。
load(url, [data], [callback]方法:
url:待装入 HTML 网页网址。
data:发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。
callback:载入成功时回调函数。
例一:
1 index.html: 2 <input type="button" value="异步获取数据" /><br /> 3 <b>jQuery Links:</b> 4 <ul id="links"></ul> 5 6 7 8 js: 9 10 $(function(){11 $(‘input‘).click(function () {12 13 //$(‘#links‘).load(‘test.htm‘); //加载且显示了test.htm中的全部内容14 $(‘#links‘).load(‘test.htm #one‘);//加载了test.htm中的全部内容,但只显示id=one下的内容15 }); 18 });19 20 21 test.htm:22 <li id="one">Test web one</li>23 <li id="two">Test web two</li>
例二:(传参)
$(function(){ $(‘input‘).click(function () { $(‘#links‘).load(‘test.jsp‘,{
url:‘html/head.jsp‘, //以键值对的形式传参,post方式
title:‘com.mju‘
}); }); });
例三:(回调函数)
$(function(){
$(‘input‘).click(function () {
$(‘#links‘).load(
‘test.jsp‘,
{url:‘html/head.jsp‘},
function (response, status, xhr) { //xhr是XMLHttpRequest 对象
alert(‘返回的值为:‘ + response + ‘,状态为:‘ + status + ‘,状态是:‘ + xhr.statusText);
});
});
});
注意:status 得到的值,如果成功返回数据则为:success,否则为:error。XMLHttpRequest
对象属于JavaScript 范畴,可以调用一些属性如下:
属性名 说明
responseText 作为响应主体被返回的文本
responseXML 如果响应主体内容类型是"text/xml"或"application/xml",则返回包含响应数据的XML DOM 文档
status 响应的HTTP 状态
statusText HTTP 状态的说明
如果成功返回数据,那么xhr 对象的statusText 属性则返回‘OK‘字符串。除了‘OK‘的状态
字符串,statusText 属性还提供了一系列其他的值,如下:
HTTP 状态码状态字符串 说明
200 OK 服务器成功返回了页面
400 Bad Request 语法错误导致服务器不识别
401 Unauthorized 请求需要用户认证
404 Not found 指定的URL 在服务器上找不到
500 Internal Server Error 服务器遇到意外错误,无法完成请求
503 ServiceUnavailable 由于服务器过载或维护导致无法完成请求
Ajax(1) load()