Ajax Step By Step1
Posted 与你在巅峰相会
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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
以上是关于Ajax Step By Step1的主要内容，如果未能解决你的问题，请参考以下文章
GAN Step By Step -- Step1 GAN介绍
GAN Step By Step -- Step1 GAN介绍