首页 > 代码库 > Ajax Step By Step1

Ajax Step By Step1

Ajax 最关键的地方,就是实现异步请求、接受响应及执行回调。

jQuery 对 Ajax 做了大量的封装,不需要去考虑浏览器兼容性, 对于封装的方式,jQuery 采用了三层封装:最底层的封装方法为:$.ajax(),而通过这层封装了第二层有三种方法:.load()、$.get()和$.post(),最高层是$.getScript()和$.getJSON()方法。

第一.【.load()方法】

参数的使用step by step(load 有三个(URL +data+callback) +  type )

 (1)如果想让 Ajax 异步载入一段 HTML 内容,我们只需要一个 HTML 请求的 url 即可。

 

 //HTML   展示的页面(我们可见的部分)
<input type="button" value=http://www.mamicode.com/"异步获取数据"/> 
<div id="box"></div>
//jQuery
 $(input).click(function()
{ 
$(#box).load(test.html); // test.html 是一个url路径 此时仅仅是载入数据
});
 //test.html 内容
<html>
<head>
<body>
    <div>
  <span>我是异步加载数据时需要的内容,我在另一个界面</span>
     </div>
</body>
</head>
</html>

(2)如果是服务器文件。一般不仅需要载入数据(url),还需要向服务器提交数据,那么我们就可以使用第二个可选参数 data。。向服务器提交数据有两种方式:get 和 post。

    (2.1)不传递 data,则默认 get 方式.

 $(input).click(function()
{ 
$(#box).load(test.php?url=www.ww);
 })

//get方式接受的服务器端

     (2.2)传递 data 用来在服务器端做判断

      

$(input).click(function()
{
$(#box).load(test.php,
{ 
url:‘www.www 
});
});
//post 方式接受的 服务器端

注:test.php 是和服务器端交互的路径,可更加自己的要求配置。

(3)Ajax 数据载入完毕之后,就能执行回调函数 callback,也就是第三个参数。

回调函数 也可以传递三个可选参数:

    responseText(请求返回)、

    textStatus(请求状态)、

    XMLHttpRequest (XMLHttpRequest 对象)。

$(input).click(function()
{ $(#box).load(test.php(和服务器交互的路径),
{ 
url:‘www.www 
},function(response,status,xhr)//回调函数
{ 
alert(返回的值为:+response+,状态为:+status +, 状态是:+xhr.statusText);//用于调试查看,在页面上打印出来
 }); 
});

总结:::总结:.load()方法有三个参数::url,data,callback

 

Ajax Step By Step1