jQuery-Ajax（详解）

之前在思维导图中介绍过集中请求Ajax的方法，但是只是匆匆说过，最近看了一本书，觉得介绍的比较详细，这里结合笔者自己的想法，重新弥补一下。之前写过的文章也会不断的改善更新。欢迎提意见。

捕获.PNG

安装Web环境

Ajax方法需要与Web服务器端进行交互，需要有环境才可正常使用，安装环境的工具包有很多，可以选择自行下载。笔者使用的是Apache。

jQuery中的Ajax

在jQuery中，$.Ajax()方法属于最底层的方法，第2层是load()，$.get()，和$.post()，第3层是$.getScript()和$.getJSON()方法。

一、 load( ) 方法

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

参数解释

捕获.PNG

1.1 应用

1.1.1首先构建一个被load（）方法加载并追加到HTML文件，名字为xi.html，html代码如下：

<ul>
    <li>《慢慢来，一切都来得及》</li>
    <li>《你的孤独虽败犹荣》</li>
    <li>《你只是看上去很努力》</li>
    <li>《JavaScript从入门到放弃》</li>
</ul>
<div>你筛选出来的元素</div>

1.1.2然后再新建一个空白页面，用来追加的HTML内容，HTML代码如下：

<h3>你最喜欢读什么书？</h3>
<p id="cont"></p>
<button>点击</button>

1.1.3接下来就是编写Jquery代码了，等DOM加载完毕之后，通过单击按钮来调用load（）方法，然后将xi.html的内容加载到id=“cont”的元素里。
jQuery代码如下：

$("button").click(function(){
    $("#cont").load("xi.html")//单击时将xi.html的内容加载到页面上
    })
})

运行结果：

GIF.gif

1.2筛选载入的HTML文档

上面的例子是将xi.html页面中的内容都加载到id为“cont”的元素里，如果只要加载页面内的某些内容，可以使用load（URL selector）方法的URL参数来达到目的。

注意：URL和选择器之间有一个空格。

例如只需要加载xi.html的li元素中内容，可以使用如下代码：

$("button").click(function(){
    $("#cont").load("xi.html li");
})

运行结果：

GIF.gif

1.3传递方式

load（）方法传递方式根据参数data来自动指定。如果没有参数传递，则采用get方式，反之，则自动转换为post方式。

$("button").click(function(){
    $("#cont").load("xi.html li"，{name:"rain"，age"18"}，function（）{
   //code....
  });
})

1.4 回调参数

对于必须在加载完成后才能继续的操作，load（）方法提供了回调函数（callback），该函数有3个参数，分别代表“请求返回的内容”，“请求状态”，“XMLHttpRequest对象”，代码如下：

$("#cont").load("xi.html li"，function（responseText，textStates，XMLHttpRequest）{
   //responseText：请求返回的内容
   //textStates：请求状态：success   error  notmodified  timeout4种
   //XMLHttpRequest：XMLHttpRequest对象
  });

注意：在load（）方法中，无论Ajax请求是否成功，只要请求完成。回调函数就被触发。

二、 $.get( ) 方法和$.post（）方法

load（）通常是从web服务器上获取静态的数据文件，如果需要专递一些参数给服务器中的页面，可以使用 $.get( ) 方法和$.post（）方法（或$.ajax()方法）

2.1 $.get( ) 方法

结构
$.get( url，[ data ]，[ callback ]，[ type ])
参数解释

捕获.PNG

2.1.1 应用

下面是一段评论页面的HTML代码，通过该段代码来介绍$.get（）方法的使用。

<p><h3>评论</h3></p>
<p>姓名:<input type="text" name="" id="name"></p>
<p>内容:<textarea id="cont"></textarea></p>
<button>发表留言</button>
<hr>
<h3>已有评论</h3>
<div id="msg"></div>

该段代码生成的页面

捕获.PNG

将姓名和内容填写好后，就可以提交评论了。

确定请求的URl地址
$("button").click(function(){$.get("get_html.php"，data参数，回调函数})
提交之前，将姓名和内容的值作为参数data传递给后台

$("button").click(function(){$.get("get_html.php"，
   {"username":$("#name").val()，"content":$("#cont").val()}，
   回调函数）
})

如果服务器结构到传递的data数据并成功返回，那么就可以通过回调函数将返回的数据显示到页面上
$.get()方法的回调函数只有两个参数，

function(){
  //data：返回的内容，可以是XML文档，json文件，XHML片段等等
  //textStatus：请求状态：success  error  notmodified timeout4种
}

data参数代表请求返回的内容，textStatus参数代表请求状态，而且回调含税只有当数据成功（success）后才能被调用

$("button").click(function(){$.get("get_html.php",{"username":$("#name").val(),"content":$("#cont").val()},function(data,textStatus,fn){
        if(textStatus=="success"){
            $(data).appendTo("#msg")
        }
    },
    "html"
    );
})

运行结果

GIF.gif

2.2 $.post( ) 方法

它与$.get( )方法的结构和使用方式都相同，不过之间仍然有一下区别

2.2.1get与post区别

1.post的安全性高于get；如果以get方式请求，请求参数会拼接到url后面，安全性性低，以post方式请求，请求参数会包裹在请求体中，安全性更高

2.数量区别：get方式传输的数据量小，规定不能超过2kb，post方式请求数据量大，没有限制。

3.传输速度：get的传输速度高于post

因为使用方法相同，因此只要改变jQuery函数，就可以将程序在GET请求和POST请求之间切换

$("button").click(function(){$.post("get_html.php",{"username":$("#name").val(),"content":$("#cont").val()},
   function(data,textStatus,fn){
        if(textStatus=="success"){
            $(data).appendTo("#msg")
        }
    },
    "html"
    );
})

运行结果和GET一样。

三、 $.getScript( ) 方法和$.getJson（）方法

3.1 $.getScript( )方法

有时候，在页面出息加载时就获取所需的全部JavaScript文件是完全没有必要的，可以在需要的时候直接加载。jQuery提供了 $.getScript( )方法来直接加载js文件，与加载一个HTML片段一样简单方便，并且不需要对JavaScript文件进行处理，JavaScript文件会自动执行。

3.1.1结构
$.getScript( url , fn )
url：请求地址
fn：回调函数

3.2.1应用
新建一个basejs.js文件，随机生成颜色的函数，代码如下

function randomColor(){
    var str="0123456789abcdef";
    var color = "#";
    for (var i = 0; i < 6; i++) {
        color+=str[ Math.floor( Math.random()*str.length)];
    };
    return color;
}

当我们点击按钮时加载js文件，给body添加颜色
jQuery代码如下

$("button").click(function(){
    $.getScript("basejs.js",function(){
        $("body").click(function(){
            $(this).css("background-color",randomColor())
        })
    })
})

运行结果

GIF.gif

3.2 $.getJson( )方法

$.getJson( )方法用于加载JSON文件，与$.getScript( )方法的用法相同
$.getJSON( url，回调函数})
当点击加载时，页面上看不到任何效果，虽然函数加载了JSON文件，但是并没有告知JavaScript对返回的数据如何处理，为此，所以在回调函数里我们可以处理返回的数据
通常我们需要遍历我们得到的数据，虽然这里我们可以使用传统的for循环，但是我们也可以通过$.each()，可以用来遍历对象和数组，$.each()函数是以一个数组或者对象为第1个参数，以一个回调函数作为第2个参数，回调函数拥有两个参数，第1个为对象的成员或者数组的下标，第2个位对应变量或内容

$(function(){
  $("button").click(function(){
    $.getJSON( "text.json" , function( data ){
       $.each( data ， function（index，comment）{
         处理数据...
      }
    })
  })
})

四、 $.Ajax（）方法

前面用到的$.load()，$.get()，$.post()，$.getScript()，$.getJSON()这些方法，都是基于$.ajax()方法构建的，$.ajax()是jQuery最底层的Ajax实现，因为可以用来代替前面的所有方法。

所以如果除了上面，还需要编写一下复杂的Ajax程序，那么就要用$.ajax()，$.ajax()不仅能实现与$.load()，$.get()，$.post()同样的功能，而且还可以设定beforeSend（提交前回调函数）、error（请求失败后处理）、success（请求成功后处理）、complete（请求完成后处理）回调函数，通过设定这些回调函数，可以给用户更多的Ajax提示信息，另外，还有一些参数可以设置Ajax请求的超时时间或者页面的“最后更改”状态。

之前的文章里面有说过$.Ajax（）方法。
这里不再赘述，直接引之前的例子

$.ajax({
url：请求地址
type:"get | post | put | delete " 默认是get,
data:请求参数 {"id":"123","pwd":"123456"},
dataType:请求数据类型"html | text | json | xml | script | jsonp ",
success:function(data,dataTextStatus,jqxhr){ },//请求成功时error:function(jqxhr,textStatus,error)//请求失败时
})


$.ajax({
    url:"tom.php",
    type:"get",
    dataType:"text",
    success:function(data,textStatus,jqxhr){
        console.log("__成功__");
        console.log(data);
        console.log(textStatus);
        console.log(jqxhr);
        console.log("______");
    },
    error:function(jqxhr,textStatus,error){
        console.log("__失败__");
        console.log(error);
        console.log(textStatus);
        console.log(jqxhr);
        console.log("******");  
    
    }
})

番外篇1

以下引用《锋利的JQuery》

Ajax的优势

1、不需任何浏览器插件
不需任何浏览器插件，就可以被大多数浏览器所支持，用户只需要允许JavaScript在浏览器上执行即可。

2、优秀的用户体验。
最大的优点，能在不刷新整个页面的前提下更新数据，这使得Web应用程序能迅速回应用户的操作。

3、提高Web程序的性能
与传统模式相比，Ajax模式在性能上最大区别就是在于传输数据的方式，在传统模式中，数据提交是通过表单（from）来实现的，而数据获取的是靠全面刷新网页来说获取整页的内容，Ajax的模式只是通过XMLHttpRequest对象来向服务器端提交需要提交的数据，即按需发送。

4、减轻服务器和宽带的负担
Ajax的工作的原理相当于在用户和服务器之间加了一个中间层，是用户操作与服务器响应异步化，他在客户端创建Ajax引擎，把传统方式下的一些服务器负担的工作转移到客户端，便于客户端资源来处理，减轻服务器和宽带的负担。

Ajax的缺点

1、浏览器对XMLHttpRequest对象的支持度不足
Ajax的不足之一首先来自于浏览器，IE5.0及以后的版本才支持XMLHttpRequest对象（现阶段大部分客户端都在IE6以上），Mozilla，Netscape等浏览器支持XMLHttpRequest则更在其后，为了使得Ajax应用能在各个浏览器中正常运行，程序员必须花费大量的精力编码以兼顾各个浏览器之间的差别，来让Aajx应用能更好的兼容各个浏览器。

2、破坏浏览器前进、后退按钮的正常功能
在Ajax中，前进和后退按钮的功能都会失效，虽然可以通过一定的方法（添加锚点）来使用户可以使用前进和后退按钮，但相对于传统的方式却麻烦了很多，对于用户而言，他们经常会碰到这种状况，当点击一个按钮触发一个Ajax交互后又觉得不想这样做，接着就去习惯性的单击后退按钮，结果发生了最不愿意看到的结果，浏览器后退到先前的一个页面，通过Ajax交互得到的内容完全消失了。

3、对搜索引擎的支持不足
通常搜索引擎都是通过爬虫来对互联网上的数以亿计的海量数据进行搜索整理的，然而爬虫程序现在还不能理解那些奇怪的JavaScript代码和因此引起的页面内容的变化，这使得应用Ajax的站点在网络推广上相对于传统站点处于劣势。

4、开发和调试工具的缺乏
JavaScript是Ajax的重要组成部分，在目前，由于缺少很好的JavaScript开发和调试工具，使很多Web开发者对于JavaScript望而生畏，这对于编写Ajax代码就更加苦难了，勇士，目前许多Web开发者已经习惯使用可视化的工具，对于亲自编写代码有畏惧感，着她在一定程度上影响了大家对Ajax的应用。

番外篇2

jQuery中的Ajax全局事件

jQuery简化Ajax操作不仅体现在调用Ajax方法和处理响应方面，而且还体现在对调用Ajax方法过程中的HTTP请求的控制，通过jQuery提供的一些自定义全局函数，能够为各种与Ajax相关的事件注册回调函数。

例如
当Ajax请求时，会触发ajaxStart（）方法回调函数

当Ajax请求结束时，会触发ajaxStop（）方法的回调函数

这些都是全局函数，因此无论创建他们的代码位于何处，只要有Ajax请求时，就会触发他们。

比如，如果图片加载速度比较慢，可以给用户一些提示信息，常用的提示信息“加载中...”,代码如下

<div id="loading>加载中...</div>

然后用css控制元素隐藏，当Ajax请求开始的时候，用来提示用户正在进行，当Ajax请求结束后，将此元素隐藏。代码如下

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

这样一来，在Ajax请求过程中，只要图片还未加载完，就会一直显示“加载中...”的提示信息，看似很简单的一个改进，确极大的改善用户的体验。
如果页面中还有其他地方也是用Ajax，该提示信息仍然有效，因为他是全局的。
jQuery的Ajax全局事件还有几个方法，也可以在使用Ajax方法的过程中为其带来方便。

捕获.PNG
捕获.PNG

这篇文章还真的挺耗时。伸懒腰~

累了么，讲个笑话把！

给老婆发了一个520元的红包后加发一句话：“我爱你”。
过了一会儿老婆回发了一个5.20元的红包，也附加一句话：“我爱你，比你的还多一点！”

任何时候不要吝啬你的赞美，喜欢就点赞咯~

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,080评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,422评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,630评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,554评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,662评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,856评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,014评论 3赞 408
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,752评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,212评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,541评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,687评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,347评论 4赞 331
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,973评论 3赞 315
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,777评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,006评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,406评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,576评论 2赞 349

推荐阅读更多精彩内容

  • jQuery笔记总结篇
    原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    程序员poetry阅读 16,639评论 18赞 503
  • Ajax的运用
    AJAX 原生js操作ajax 1.创建XMLHttpRequest对象 var xhr = new XMLHtt...
    碧玉含香阅读 3,184评论 0赞 7
  • jQuery基础——Ajax应用与常用插件
    第1章 jQuery实现Ajax应用 1-1 使用load()方法异步请求数据 使用load()方法通过Ajax请...
    mo默22阅读 1,695评论 1赞 9
  • JQuery
    1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,167评论 0赞 1
  • JQuery
    1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,330评论 0赞 2