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 由于服务器过载或维护导致无法完成请求

posted on 2014-12-16 10:23 Q星ZX 阅读(112) 评论(0) 编辑收藏举报

刷新页面返回顶部

星生

导航

公告

Ajax(1) load()

load(url, [data], [callback]方法：