jQuery实现Ajax

起因

如今的Web形式是后端仅仅提供api接口,那么系统的前端如何得到后端传来的这些数据呢?然后系统前端所填的信息又是如何传递給后端呢?
我想最易理解的方案那就是通过ajax进行前后端的数据交互,嘻嘻嘻嘻,直接用jQuery库封装好的ajax方法,可以说是一种快速生产的方式.
ajax都是异步请求的,所以接下去所记录的方法也都是异步进行的.

ajax方法

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

这些HTML片段可以没有<html>、<head>、<body>,只包含最基本的代码

$('#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请求完成后触发函数。

`$.ajaxError()`和`$.ajaxSuccess()`

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

总结

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

jQuery实现Ajax

起因

ajax方法

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

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

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

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

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

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

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

`ajaxStart()`和`ajaxStop()`

`$.ajaxError()`和`$.ajaxSuccess()`

总结

hellowpl

引用和评论

jQuery实现Ajax

起因

ajax方法

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

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

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

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

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

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

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

ajaxStart()和ajaxStop()

$.ajaxError()和$.ajaxSuccess()

总结

hellowpl

引用和评论

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

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

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

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

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

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

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

`ajaxStart()`和`ajaxStop()`

`$.ajaxError()`和`$.ajaxSuccess()`