MyException - 我的异常网
当前位置:我的异常网» jQuery » 深入了解ajax系列第九篇——jQuery中的ajax

深入了解ajax系列第九篇——jQuery中的ajax

www.MyException.Cn  网友分享于:2013-04-21  浏览:0次
深入理解ajax系列第九篇——jQuery中的ajax

前面的话

  jQuery提供了一些日常开发中需要的快捷操作,例如load、ajax、get和post等,使用jQuery开发ajax将变得极其简单。这样开发人员就可以将程序开发集中在业务和用户体验上,而不需要理会那么繁琐的XMLHTTPRequest对象。jQuery对ajax操作进行了封装,在jQuery中$.ajax()属性最底层的方法,第2层是load()、$.get()$.post()方法,第3层是$.getScript()$.getJSON()方法。下面将详细介绍jQuery中的ajax

 

load()

  load()方法是jQuery中最简单和常用的ajax方法,使用load()方法通过ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中

【调用格式】

  load()方法的调用格式为如下所示,参数url为加载服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数

load(url,[data],[callback])

【载入HTML文档】

$('#result').load('ajax/test.html');

  [注意]如果选择器没有匹配的元素,如document不包含id="result"的元素,这个Ajax请求将不会被发送出去

<!-- 当前页面-->
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<style>
h6{margin:4px;}
p{margin: 0;}
</style>

<body>
<input type="button" id="send" value="ajax获取">   
<div class="comment">已有评论:</div>
<div id="resText"></div>
<script>
$(function(){
    $('#send').click(function(){
        $('#resText').load('ajaxjQueryLoad.html')
    })
})
</script>

<!-- 要载入的页面 -->
<div class="comment">
    <h6>张三:</h6>
    <p class="para">沙发.</p>
</div>
<div class="comment">
    <h6>李四:</h6>
    <p class="para">板凳.</p>
</div>
<div class="comment">
    <h6>王五:</h6>
    <p class="para">地板.</p>
</div>

【部分载入】

  如果url参数的字符串中包含一个或多个空格,那么第一个空格后面的内容,会被当成是jQuery的选择器,从而决定应该加载返回结果中的哪部分内容

$('#result').load('ajax/test.html #container');

  当这种方法执行, 它将检索ajax/test.html返回的页面内容,jQuery会获取ID为container元素的内容,并且插入到ID为result元素,而其他未被检索到的元素将被废弃

$(function(){
    $('#send').click(function(){
        $('#resText').load('ajaxjQueryLoad.html .para')
    })
})

【传递方式】

  load()方法默认使用GET方式,如果data参数提供一个对象,那么使用POST方式

//无参数传递,则是GET方式
$('#resText').load('tset.php')

//有参数传递,则是POST方式
 $('#resText').load('tset.php',{name:'rain',age:'22'})

【回调函数】

  如果提供了"complete"回调函数,它将在函数处理完之后,并且HTML已经被插入完时被调用。回调函数会在每个匹配的元素上被调用一次,并且this始终指向当前正在处理的DOM元素

  回调函数有3个参数,分别代表请求返回的内容、请求状态和XMLHTTPRequest对象

$('#result').load('ajax/test.html',function(responseText,textStatus,XMLHTTPRequest) {
  //responseText :请求返回的内容
  //testStatus: success、error、notmodified、timeout四种
  //XMLHTTPRequest: XMLHTTPRequest对象
});
<style>
h6{margin:4px;}
p{margin: 0;}
#test{border:1px solid black;}
</style>

<input type="button" id="send" value="ajax获取">   
<div class="comment">已有评论:</div>
<div id="resText"></div>
<div id="test"></div>
<script>
$(function(){
    $('#send').click(function(){
        $('#resText').load('ajaxjQueryLoad.html .para',function(a,b,c){
            $('#test').html('responseText:' + a + '<br>textStatus:' + b + '<br>XMLHTTPRequest:' + c);
        })
    })
})
</script>

 

getJSON()

  getJSON()方法使用一个HTTP GET请求从服务器加载JSON编码的数据

【调用格式】

  getJSON()方法的调用格式如下。其中,url参数为请求加载json格式文件的服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数

$.getJSON(url,[data],[callback])

  getJSON()方法相当于以下ajax()方法的缩写

$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: success
});

【回调函数】

  回调函数中的第一个参数表示返回的数据

$.getJSON('test.json',function(data){
    //data :返回的数据
})

  一般地,使用each()方法,来构建DOM结构

<input id="btnShow" type="button" value="加载" />
<div id="result"></div>
<script>
$('#btnShow').click(function(){
    var $this = $(this);
    var $html = '';
    $.getJSON('sport.json',function(data){
        $this.attr('disabled','true');
        $.each(data,function(index,sport){
            $html += '<div>' + sport["name"] + '</div>';
        });
        $('#result').html($html);
    })
})
</script>

  json文件如下

[{ 
  "name": "足球"
},{ 
  "name": "散步"
},{ 
  "name": "篮球"
},{ 
  "name": "乒乓球"
},{ 
  "name": "骑自行车"
}]

 

getScript()

  getScript()方法使用一个HTTP GET请求从服务器加载并执行一个javascript文件

  getScript()方法调用格式如下,参数url为服务器请求地址,可选项callback参数为请求成功后执行的回调函数

$.getScript(url,[callback])

  相当于一个Ajax函数的缩写

$.ajax({
  url: url,
  dataType: "script",
  success: success
});
<input id="btnShow" type="button" value="加载" />
<div id="result"></div>
<script>
$('#btnShow').click(function(){
    var $this = $(this);
    $.getScript('sport.js',function(){
        $this.attr('disabled','true');
        $('#result').html($html);
    })
})
</script>

  js文件如下

var data = [{
    "name": "足球"
}, {
    "name": "散步"
}, {
    "name": "篮球"
}, {
    "name": "乒乓球"
}, {
    "name": "骑自行车"
}];
var $html = '';
$.each(data, function (index, sport) {
     $html += "<div>" + sport["name"] + "</div>";
});

 

get()

  get()方法使用一个HTTP GET请求从服务器加载数据

【调用格式】

  get()方法的调用格式如下所示,url表示一个包含发送请求的URL字符串;data表示发送给服务器的字符串或Key/value键值对;success(data, textStatus, jqXHR)表示当请求成功后执行的回调函数;dataType表示从服务器返回的预期的数据类型。默认:智能猜测(xml, json, script, 或 html)

jQuery.get( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )

  相当于一个ajax功能的缩写

$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

【使用参数】

  通过get()方法发送给服务器的key/value数据会作为查询字符串最终附加到URL中

<form action="#" id="form1">
    <p>评论:</p>
    <p>姓名:<input type="text" name="username" id="username"></p>
    <p>内容:<textarea  name="content" id="content" rows="2" cols="20"></textarea></p>
    <p><input type="button" id="send" value="提交"></p>
</form>
<div class="comment">已有评论:
    <div id="resText"></div>
</div>
<script>
$('#send').click(function(){
    $.get('jqGet.php',{
        username:$('#username').val(),
        content:$('#content').val()
    },function(data){
        //
    })
})
</script>

【回调函数】

function(data,textStatus){
    //data: 返回的内容,可能是XML、JSON、HTML、JS
    //textStatus: success、error、notmodified、timeout四种
}

【数据格式】

  1、HTML片段

function(data,textStatus){
    $('#resText').html(data);
}

  2、XML文档

function(data,textStatus){
    var username = $(data).find('comment').attr('username');
    var content = $(data).find('comment content').text();
    var txtHtml = "<div class='comment'><h6>" + username + ":</h6><p class='para'>" + content + "</p></div>";
    $('#resText').html(txtHtml);
}

  3、JSON 

function(data,textStatus){
    var username = data.username;
    var content =  data.content;
    var txtHtml = "<div class='comment'><h6>" + username + ":</h6><p class='para'>" + content + "</p></div>";
    $('#resText').html(txtHtml);
}
<!-- 前端页面 -->
<select id="num">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<button id="send">测试</button>
<div id="result"></div>
<script>
$('#send').click(function(){
    $.get('jqRequest.php',{
        num: $('#num').val()
    },function(data){
        $('#result').html('您选择的数字' + $('#num').val() + '' + data)
    })
})
</script>

<!-- 后端页面 -->
<?php 
$num = $_REQUEST['num'];
if($num % 2 == 0){
    echo '偶数';
}else{
    echo '奇数';
}
?>

 

post()

  post()方法使用一个HTTP POST 请求从服务器加载数据

jQuery.post( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )

  相当于一个 Ajax 函数的简写形式

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType
});
<!-- 前端页面 -->
<select id="num">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<button id="send">测试</button>
<div id="result"></div>
<script>
$('#send').click(function(){
    $.post('jqRequest.php',{
        num: $('#num').val()
    },function(data){
        $('#result').html('您选择的数字' + $('#num').val() + '' + data)
    })
})
</script>

<!-- 后端页面 -->
<?php 
$num = $_REQUEST['num'];
if($num % 2 == 0){
    echo '偶数';
}else{
    echo '奇数';
}
?>

  post()方法和get()方法的结构和使用方式都相同。但要注意的是,当load()方法带有数据参数传递时,会使用POST方式发送请求

 

序列化

  当一个表单中字段较多,表单元素较复杂时,就需要一种方法来简化提取表单内部控件的值的操作,这一行为通常叫序列化,jQuery提供了param()、serialize()和serialzeArray()这三个方法

【param()】

  param(obj)方法用来创建一个数组或对象序列化的字符串,适用于一个URL地址查询字符串或Ajax请求

console.log($.param({ width:1680, height:1050 }));//'width=1680&height=1050'

【serialize()】

  serialize()方法将用作提交的表单元素的值编译成字符串

  [注意]serialize()方法的一个额外好处是会自动对键值对儿中的特殊字符进行编码

<form>
  <select name="single">
    <option>Single</option>
    <option>Single2</option>
  </select>
  <br />
  <select name="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select>
  <br/>
  <input type="checkbox" name="check" value="check1" id="ch1"/>
 
  <label for="ch1">check1</label>
 
  <input type="checkbox" name="check" value="check2" checked="checked" id="ch2"/>
 
  <label for="ch2">check2</label>
  <br />
  <input type="radio" name="radio" value="radio1" checked="checked" id="r1"/>
 
  <label for="r1">radio1</label>
  <input type="radio" name="radio" value="radio2" id="r2"/>
 
  <label for="r2">radio2</label>
</form>
<p><tt id="results"></tt></p>
<script>
    function showValues() {
      $("#results").text($("form").serialize());
    }
    $(":checkbox, :radio").click(showValues);
    $("select").change(showValues);
    showValues();
</script>

【serializeArray()】

  serializeArray()方法将用作提交的表单元素的值编译成拥有name和value对象组成的数组,即json格式的数据。例如[ { name: a value: 1 }, { name: b value: 2 },...]

<form>
  <div><input type="text" name="a" value="1" id="a" /></div>
  <div><input type="text" name="b" value="2" id="b" /></div>
  <div><input type="hidden" name="c" value="3" id="c" /></div>
  <div>
    <textarea name="d" rows="8" cols="40">4</textarea>
  </div>
  <div><select name="e">
    <option value="5" selected="selected">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
  </select></div>
  <div>
    <input type="checkbox" name="f" value="8" id="f" />
  </div>
  <div>
    <input type="submit" name="g" value="Submit" id="g" />
  </div>
</form>
<script>
$('form').submit(function() {
  console.log($(this).serializeArray());
  return false;
});
</script>

  结果如下 

[
  {
    name: "a",
    value: "1"
  },
  {
    name: "b",
    value: "2"
  },
  {
    name: "c",
    value: "3"
  },
  {
    name: "d",
    value: "4"
  },
  {
    name: "e",
    value: "5"
  }
]

  该对象可以使用each()函数对数据进行迭代输出

$dataArr = $('form').serializeArray();
$html = '';
$.each($dataArr,function(i,data){
    $html += data.name + ':' + data.value + ';';
})
console.log($html);//a:1;b:2;c:3;d:4;e:5;

 

ajax()

  前面介绍的load()、get()、post()、getScript()、getJSON()等方法都是基于ajax()方法实现的

  ajax()方法是最底层、功能最强大的请求服务器数据的方法,它不仅可以获取服务器返回的数据,还能向服务器发送请求并传递数值,它的调用格式如下:

$.ajax([settings])

  其中参数settings为发送ajax请求时的配置对象,在该对象中,url表示服务器请求的路径,data为请求时传递的数据,dataType为服务器返回的数据类型,success为请求成功的执行的回调函数,type为发送数据请求的方式,默认为get  

  常用参数如下所示

名称                         值/描述
async                       布尔值,表示请求是否异步处理。默认是 true。
beforeSend(xhr)             发送请求前运行的函数。
cache                       布尔值,表示浏览器是否缓存被请求页面。默认是 true。
complete(xhr,status)        请求完成时运行的函数(在请求成功或失败之后均调用,即在success和error函数之后)
contentType                 发送数据时使用的内容类型。默认是"application/x-www-form-urlencoded"
context                     为所有 AJAX 相关的回调函数规定 "this" 值。
data                        规定要发送到服务器的数据。
dataFilter(data,type)       用于处理 XMLHttpRequest 原始响应数据的函数。
dataType                    预期的服务器响应的数据类型。
error(xhr,status,error)     如果请求失败要运行的函数。
global                      布尔值,规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。
ifModified                  布尔值,规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。
jsonp                       在一个 jsonp 中重写回调函数的字符串。
jsonpCallback               在一个 jsonp 中规定回调函数的名称。
password                    规定在 HTTP 访问认证请求中使用的密码。
processData                 布尔值,规定通过请求发送的数据是否转换为查询字符串。默认是 true。
scriptCharset               规定请求的字符集。
success(result,status,xhr)  当请求成功时运行的函数。
timeout                     设置本地的请求超时时间(以毫秒计)。
traditional                 布尔值,规定是否使用参数序列化的传统样式。
type                        规定请求的类型(GET 或 POST)。
url                         规定发送请求的 URL。默认是当前页面。
username                    规定在 HTTP 访问认证请求中使用的用户名。
xhr                         用于创建 XMLHttpRequest 对象的函数。
<!-- 前端页面 -->
<select id="num">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<button id="send">测试</button>
<div id="result"></div>
<script>
$('#send').click(function(){
    $.ajax({
      url:'jqRequest.php',
      type:'POST',
      data:{
        num:$('#num').val()
      },
      success:function(data){
        $('#result').html('您选择的数字' + $('#num').val() + '是' + data);
      }
    })
})
</script> 

<!-- 后端页面 -->
<?php 
$num = $_REQUEST['num'];
if($num % 2 == 0){
    echo '偶数';
}else{
    echo '奇数';
}
?>

全局事件

  jQuery简化ajax操作不仅体现在调用ajax方法和处理响应方面,而且还体现在对调用ajax方法的过程中的HTTP请求的控制。通过jQuery提供的一些自定义全局函数,能够为各种与ajax相关的事件注册回调函数。例如,当ajax请求开始时,会触发ajaxStart()方法的回调函数;当ajax请求结束时,会触发ajaxStop()的回调函数。这些方法都是全局的方法,因此无论创建它们的代码位于何处,只要有ajax请求发生,就会触发它们

【ajaxSetup()】

  ajaxSetup()方法为以后要用到的Ajax请求设置默认的值,设置完成后,后面的Ajax请求将不需要再添加这些选项值,它的调用格式为:

$.ajaxSetup([options])

  例如,设置 AJAX 请求默认地址为 "/xmlhttp/",用 POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数

$.ajaxSetup({
   url: "/xmlhttp/",
   type: "POST"
 
});
$.ajax({ data: myData });

  如果想让某个ajax请求不受ajaxSetup()方法的影响,可以在使用ajax()方法时,将参数中的global设置为false

$.ajaxSetup({
   url: "/xmlhttp/",
   type: "POST"
 
});
$.ajax({
  global:false,
  url:"test",
  type:'GET'
})

【ajaxStart()和ajaxStop()】

  ajaxStart()和ajaxStop()方法是绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数,ajaxStop()方法用于在Ajax请求完成后触发函数。它们的调用格式为

$(selector).ajaxStart(function())
$(selector).ajaxStop(function())

  [注意]从 jQuery 1.8 开始, ajaxStart()和ajaxStop()方法只能绑定到 document元素

  例如,读取远程网站的图片速度可能会比较慢,如果在加载的过程中,不给用户提供一些提示和反馈信息,很容易让用户误认为按钮单击无用,使用户对网站失去信心。这时,ajaxStart()和ajaxStop()方法就派上用场了

<!-- 前端页面 -->
<select id="num">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<button id="send">测试</button>
<div id="result"></div>
<script>
$(document).ajaxStart(function(){
    $('#test').show()
}).ajaxStop(function(){
    $('#test').hide();
});
$('#send').click(function(){
    $.ajax({
      url:'jqRequest.php',
      type:'POST',
      data:{
        num:$('#num').val()
      },
      success:function(data){
        $('#result').html('您选择的数字' + $('#num').val() + '是' + data);
      }
    })
})
</script> 

<!-- 后端页面 -->
<?php 
$num = $_REQUEST['num'];
if($num % 2 == 0){
    echo '偶数';
}else{
    echo '奇数';
}
?>

 

2楼码农.新生代
写的很详细,很适合我这种新手菜鸟读,谢谢
1楼桐舟共济
非常全面,通俗易懂

文章评论

看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
如何成为一名黑客
如何成为一名黑客
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
为什么程序员都是夜猫子
为什么程序员都是夜猫子
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
总结2014中国互联网十大段子
总结2014中国互联网十大段子
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
编程语言是女人
编程语言是女人
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
旅行,写作,编程
旅行,写作,编程
我是如何打败拖延症的
我是如何打败拖延症的
那些争议最大的编程观点
那些争议最大的编程观点
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
程序员应该关注的一些事儿
程序员应该关注的一些事儿
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
我的丈夫是个程序员
我的丈夫是个程序员
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
代码女神横空出世
代码女神横空出世
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
程序员和编码员之间的区别
程序员和编码员之间的区别
一个程序员的时间管理
一个程序员的时间管理
Java程序员必看电影
Java程序员必看电影
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
程序员必看的十大电影
程序员必看的十大电影
程序员的鄙视链
程序员的鄙视链
 程序员的样子
程序员的样子
10个调试和排错的小建议
10个调试和排错的小建议
中美印日四国程序员比较
中美印日四国程序员比较
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
漫画:程序员的工作
漫画:程序员的工作
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
每天工作4小时的程序员
每天工作4小时的程序员
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有