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