首页 > 代码库 > 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()