jQuery实现Ajax

• 目前Web开发形式是后端仅仅提供api接口，那么系统的前端如何得到后端传来的这些数据呢？
• 然后系统前端所填的信息又是如何传递給后端呢？
• 我想最容易易理解的方案那就是通过ajax进行前后端的数据交互，（直接用jQuery库封装好的ajax方法）

ajax都是异步请求的 所以接下去所记录的方法也都是异步进行的

load(url,[data],[callback]) 异步请求载入远程HTML片段并插入至DOM中

• 直接加载HTML页面

$('#abc').load('abc.html')

• 也可以加载HTML片段中某个需要的匹配部分

$('#abc').load('html5/abc.html #abc')

$.getJSON(url,[data],[callback]) 使用一个HTTP GET请求从服务器加载JSON编码的数据

getJSON()是全局jQuery对象的方法，也就是全局函数。
通过url获取JSON数据格式,然后使用回调函数将获取的数据进行后续操作。

$.getJSON('abc.json',function(data){
    console.log(data);
})

$.getScript(url,[callback]) 使用一个HTTP GET请求从服务器加载并执行一个 JavaScript 文件

同getJSON方法一样,也是全局jQuery对象的方法。
有时候初次加载页面是有些js文件未必都是必须的，可以通过这个方法可以用户在操作可以动态灵活的加载所需的js脚本。

$.getScript('abc/abc.js')

$.get(url,[data],[callback]) 使用一个HTTP GET请求从服务器加载数据

get可简单的理解为从服务器获取数据进行之后一系列操作。

$.get('http://www.imooc.com/data/info_f.php',function(data){
    $('#abc').html(data);
})

$.post(url,[callback]) 使用一个HTTP POST 请求从服务器加载数据

而post请求虽说与get请求结构一样但也有一些区别.

• GET方式对传输的数据大小有限制，而POST方式传递的数据量要比GET方式大得多。

$.post("http://www.imooc.com/data/check_f.php",{
    num:$("txtNumber").val()
},function(data){
    console.log(data);
})

• 使用post请求发送序列化表单数据

$.post("test.php", $("#testform").serialize(),function(data){
    alert('发送成功');
});

$.ajax([settings]) 执行一个异步的HTTP（Ajax）的请求

ajax()是功能最强大的请求数据的方法，不仅可以请求数据，也可以向服务器发送数据，也可以进行跨域获取json数据。

$.ajax({
    url:'url'
    type:'post',
    async:true,
    data:data,
    dataType: 'json',
    success:function(data){}
})

$.ajaxSetup[options] 设置全局默认的Ajax默认选项

$.ajaxSetup({
    type:'post',
    async:true,
    dataType: 'json',
})

实际用$.ajax()时 仍然可以将默认选项值覆盖

ajaxStart()和ajaxStop()

$(document).ajaxStart(function() {
   $( "#loading" ).show();
 });
$(document).ajaxStop(function() {
    $( "#loading" ).hide();
});

• ajaxStart()方法用于在Ajax请求发出前触发函数。
• ajaxStop()方法用于在Ajax请求完成后触发函数。

.ajaxSuccess()

• $.ajaxError() Ajax请求出错时注册一个回调处理函数，这是一个Ajax Event。
• $.ajaxuccess() 绑定一个函数当Ajax请求成功完成时执行， 这是一个AjaxEvent。

总结

关于前后端用数据Ajax实现就先到这吧，$.ajax()此方法是最底层的方法并未展，但的确在今后实践生产是用得最多的，get和post 区别也是需要清楚的。