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="异步获取数据"/>

<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