雅荷心语博客
00:00/00:00
这次我们主要说说常用的三种Ajax方法,
1,get方法,主要是用get方式获取数据,参数通过地址栏传输,
特点:
GET请求能够被缓存
GET请求会保存在浏览器的浏览记录中
以GET请求的URL能够保存为浏览器书签
GET请求有长度限制
GET请求主要用以获取数据
我理解的是: get方式参数在地址栏传输,有长度限制,可以直接看到的,有一定的安全隐患,适合简单地数据查询,不适合用作比如登录等等的操作
2,post方式
特点:post方式:通过post方式获取,以post形式发送数据
特点：
POST请求不能被缓存下来
POST请求不会保存在浏览器浏览记录中
以POST请求的URL无法保存为浏览器书签
POST请求没有长度限制
我所理解的是,post方式因为数据不会显示在地址栏中，也不会缓存下来或保存在浏览记录中，所以看POST求情比GET请求安全，是常用的ajax传输方式.
3,ajax方式
特点:
适合于各种场景下的ajax传输方式,
可以定义各种传输状态,参数较多,比较复杂呢
我所理解的是,ajax方式相对于post方式传输更为复杂,但是使用场景广泛,比如我们需要在ajax发送之前或者之后定义一些操作,或者ajax发送成功或者失败后进行操作,都可以使用此方式,例如 我们数据加载较多,我们需要让用户看到 “加载中…”这样的提示文字,就可以在ajax发送之前的beforeSend方法中定义
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<input type="button" value="get方式" id="get"> <input type="button" value="post方式" id="post"> <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script> <script src="http://cdn.he29.com/layer/layer.js"></script> <!-- //弹窗控件 --> <script type="text/javascript"> var host = 'http://4orzfdkze1.proxy.qqbrowser.cc/demo'; //定义全局域名 </script> <!-- 第一种,get方式, --> <script type="text/javascript"> /*get方式*/ function get(){ // $.get('后台地址', function(data) {}); 这是固定格式 $.get(host+'/getData.php?type=get', function(data) { //host+'/getData.php';是访问我电脑上固定的一个php文件.data是我返回给你的内容 layer.msg(data);//把后台返回给你的内容弹出 }); } $('#post').click(function() { // $.post('/path/to/file', {param1: 'value1'}, function(data, textStatus, xhr) { // /*optional stuff to do after success */ // }); 固定格式, {param1: 'value1'}是前端需要发送给后台的数据,json格式,例如我需要发送:名字:姗,年龄:23, $.post(host+'/getData.php?type=post', {name:'3',age:23}, function(data) { console.log(data); }); }); /*Ajax 传输方式*/ $.ajax({ url: host+'/getData.php?type=post', //发送的地址 type: 'default GET (Other values: POST)', //传输方式,例如:post dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',//传输类型,例如:json data: {param1: 'value1'},//数据 例如 {name:'3',age:23} success:function(data){ //成功以后 console.log(data); } }) .done(function() { console.log("success"); }) .fail(function() { console.log("error"); }) .always(function() { console.log("complete"); }); /*状态对照表http://www.cnblogs.com/tylerdonet/p/3520862.html*/ </script> |
