ajax是异步JavaScript和xml的简称。

一. ajax补白

优势 不足(不一定是不足)
不需要任何插件(但需要浏览器支持js) XMLHttpRequest对象在不同浏览器下有差异
优秀的用户体验——不需要重复加载页面 破坏了浏览器前进后退的功能
提高了程序性能 搜索引擎不友好
把一部分负担有服务器端转移到客户端 开发难度大

ajax最重要的核心是XMLHttpRequest对象

1.XMLHttpRequest对象的属性和方法

从分析一个ajax.js开始

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
function ajax(url, fnSucc, fnFaild){
    var oBtn=document.getElementById('btn1');
  
    oBtn.onclick=function(){
        var oAjax=null;
        if(window.XMLHttpRequest){
            oAjax=new XMLHttpRequest();
        }else{
            oAjax=new ActiveXObject("Microsoft.XMLHTTP");
        };
          
        oAjax.open('GET','url',true);
          
        oAjax.send();
  
        oAjax.onreadystatechange=function(){
            if(oAjax.readyState==4){
  
                if(oAjax.status==200){
                    fnSucc(oAjax.responseText);
                }else{
                    if(fnFaild){
                        fnFaild();
                    }
                      
                }
           }
        }
    }
}

ajax函数中三个参数分别是文本文件路径、接受成功时执行的函数,接收失败时执行的函数。

属性/方法/事件

描述 实例 备注
1.readyState readyState标识了当前对象的状态。    
0 已创建 readyState但1未初始化    
1 已调用open()方法,准备发送    
2 已通过send()发送,但未收到响应    
3 正在接收    
4 完成响应    
2.responseText 接收到的文本内容   只有readyState值为4时,才收到完整的响应信息
3.responseXML 描述被 XMLHttpRequest解析后的XML文档属性    
4.status http状态码 oAjax.status==200表示响应正确 readyState为3或4时才能访问。
5.statusText

状态码文本   readyState为3或4时才能访问。
6.onreadystatechange(事件) 每当readyState被改变时,都会触发onreadystatechange事件    
7.open() 有5个参数 oAjax.open('GET','url',true);  
method 发送请求的方法
GET,POST,PUT,DELATE,HEAD
  要求大写
uri 指定把请求发送到对应的URI    
acynic 是否异步,默认为true   当为true时send()方法才能被调用
username和password 服务器验证访问状况    
8.send() 发送数据   没有open(),就没有send()。也就是说:readyState必须为1前提,才能调用。
9.abort() 暂停接收或发送, XMLHttpRequest对象回归初始化状态。    
10.setRequestHeader() 请求头部信息   readyState为1时才能调用
11.getResponseHeader() 检索响应的头部值   readyState为3或4是才能调用。否则得到null
测试ajax需要在本地搭建服务器。

【例6.1】JavaScript实现ajax最简单的例子

单击按钮,从服务器取回“Hello Ajax!”文本。
1
2
<input id="btn1" type="button" value="提交ajax请求"/>
    <div id="resText" style="width:300px;height:300px;border:1px solid #ccc;"></div>

把ajax.js引入到文件中。编写如下ajax代码

1
2
3
4
5
6
7
8
9
10
window.onload=function(){
    var oBtn=document.getElementById('btn1');
    var oTxt=document.getElementById('resText');
 
    oBtn.onclick=function(){
        ajax('hello.txt',function (str){
            oTxt.innerHTML=str;
        })
    }
}

由fnSucc(oAjax.responseText);可得知,获取的str是文件的文本。

二. jQuery和ajax

jQuery中的ajax方法

1.load()方法

载入远程 HTML 文件代码并插入至 DOM 中。默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。参数如下:

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

url是一个字符串,描述服务器端的地址;data(可选)是发送到服务器的key/value数据;callback(可选)是请求完成时的回调函数——无论成功还是失败。

【例6.2】构建一个html文档。点击按钮后加载到页面知指定区域。

(1)载入html文档。

继沿用例6.1的html框架,同时另构造一个hello.html文档

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
</head>
<body>
    <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>
</body>
</html>
1
2
3
4
5
$(function(){
    $('#btn1').click(function(){
        $('#resText').load('hello.html');
    })
})

大大减少了代码量

(2)筛选加载内容

hello.html的内容太冗余了。可以使用load(‘文档路径 选择器’),比如我只要para的内容可以

1
$('#comment').load('hello.html .para')

注意:原来html1的样式不会被代入resText中。

(3)传递

默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。

(4)回调函数

加载完成后继续执行的函数。有三个参数

1
2
3
4
5
function(resposeText,textStatus,XMLRequest){
resposeText//请求返回的内容
textStatus//请求状态:success/error/notmodified/timout4种
XMLRequest//XMLRequest对象
}

2. $.get()和$.post()方法

load只是获取静态的数据文件。

(1)$.get()

API给出的解释是:

通过远程 HTTP GET 请求载入信息。

这是一个可以替代复杂 $.ajax 简单的 GET 请求功能。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。

结构是

1
$.get(url,[data],[callback],[type])

url:待载入页面的URL地址

data:待发送 Key/value 参数。

callback:载入成功时才可以调用的回调函数。包括2个参数——

1
2
3
4
function(data,textStatus){
//data:返回的内容可以是XML,JSON,HTML文档(片段)等等
//textStatus:请求状态
}

type:返回内容格式,xml, html, script, json, text, _default。

【例6.3】

编写html文档模拟一个发评论的布局

1
2
3
4
5
6
7
8
<form id="form1">
    <div class="comment">已有评论</div>
    <div id="resText" style="width:300px;height:400px; border:1px solid #ccc;"></div>
    <p>评论</p>
    <p>昵称<input type="text" name="username" id="username"></p>
    <p>内容<textarea name="content" id="content" rows="2" cols="20"></textarea>
    <p><input type="button" id="send" value="提交"/></p>
</form>

用jQuery实现之。

有三种文件可以获取

a. 获取html片段

在index根目录下需要一个get1.php。用html的方式取值。

1
2
3
4
<?php
    header("Content-Type:text/html; charset=utf-8");
    echo "<div class='comment'><h6>{$_REQUEST['username']}:</h6><p class='para'>{$_REQUEST['content']}</p></div>";
?>

jq

1
2
3
4
5
6
7
8
9
10
$(function(){
    $('#send').click(function(){
        $.get('get1.php',{
            username:$('#username').val(),
            content:$('#content').val()
        },function (data,status){
            $('#resText').html(data);
        })
    })
})

b. 获取xml数据

在根目录下放一个get2.php。xml可以用类似html的方法取值

1
2
3
4
5
6
7
8
9
<?php
    header("Content-Type:text/xml; charset=utf-8");
    echo "<?xml version='1.0' encoding='utf-8'?>".
         "<comments>".
         "<comment username='{$_REQUEST['username'] }' >".
         "<content>{$_REQUEST['content']}</content>".
         "</comment>".
         "</comments>";
?>

获取方法:把内容提取出来组合成一段html代码!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(function(){
    $('#send').click(function(){
        $.get('get2.php',{
            username:$('#username').val(),
            content:$('#content').val()
        },function (data,status){
            var username=$(data).find('comment').attr('username');//获取get2.php的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);
        })
    })
})

获取较为麻烦,xml文件也较大,但是应用范围较广。

c.json文件

json有相对较好的可读性。调取方法和原生JavaScript的数组差不多。比如

1
2
var arr={a:5,b:12,c:13};
alert(arr.b)//输出12

再如get3.php:

1
2
3
4
<?php
    header("Content-Type:text/html; charset=utf-8");
    echo "{ \"username\" : \"{$_REQUEST['username']}\" , \"content\" : \"{$_REQUEST['content']}\"}"
?>

jq

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(function(){
    $('#send').click(function(){
        $.get('get3.php',{
            username:$('#username').val(),
            content:$('#content').val()
        },function (data,textStatus){
            var username=data.username;//获取get3.php的username
            var content=data.content;//获取get3.php的content。
            var txtHtml='<div class="comment"><h6>'+username+':</h6><p class="para">'+content+'</p></div>';
 
            $('#resText').html(txtHtml);
        },'json');//$.get()的第四个参数设置为'json'
    })
})

但是,json对程序规范性要求非常严格。

以上三例的效果如下

(2)$.post()方法

$.post()方法结构和使用方法都和$.get()相同。区别在于

get方法——把数据放到网址来获取——安全性特别差但是便于分享。历史记录都可以看。——会缓存

如果用post方法,——把数据放到URL以外的地方来提交——适合用户注册——安全性一般。

url不可能太长,get方式的容量很低(不大于2k)。post的url是几乎无限的。——不缓存。

注意到php文档中都有这样一句话:

1
$_REQUEST['xxx']

其实,get和post都可以使用$_REQUEST['xxx']来获取对象。

回到load()方法的参数传递,默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。那么可以直接这样写:

1
2
3
4
5
6
7
8
$(function(){
    $('#send').click(function(){
        $.load('get3.php',{
            username:$('#username').val(),
            content:$('#content').val()
        },fn();
    })
})

默认就是post。

3. getScript()和getJson()方法。

(1)getScript()

情景:有时候,打开一个页面加载全部js是没必要的。比如qq空间。某些特效是到用时才触发。

对策:动态创建JavaScript标签。可以用DOM的方法创建,比如

1
$('<script>............</script>')

但getScript()方法更理想。把例6.3的js.js改为test.js,重新建一个js.js,让test.js默认不加载,当鼠标移到按钮上时加载。在js.js写:

1
2
3
4
5
$(function(){
    $('#send').mouseover(function(){
        $.getScript('js/test.js');
    })
})

用起来和原来的没区别。但是这个test.js是之后加载的。在header区也看不到test.js的引入。
只是加载好像没什么意思,getScript()还提供了回调函数,比如说,

1
2
3
4
5
6
  $("#go").click(function(){
    $(".block").animate( { backgroundColor: 'pink' }, 1000)
      .animate( { backgroundColor: 'blue' }, 1000);
  });
});

加载对应插件,可以在回调函数中使用相对应的方法。

(2)getJson()

用于加载json文件,用法和getScript相同。

写一个test.json文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
[
  {
    "username": "张三",
    "content": "沙发."
  },
  {
    "username": "李四",
    "content": "板凳."
  },
  {
    "username": "王五",
    "content": "地板."
  }
]

要展现这个Jason的内容,回调函数应该怎么写呢?

思路:

$.each()通用例遍方法,可用于例遍对象和数组。

不同于例遍 jQuery 对象的 $().each() 方法,此方法可用于例遍任何对象。第一个参数是操作对象,第二个参数是个回调函数。

回调函数又拥有两个参数:第一个为对象的成员或数组的索引,第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false,其它返回值将被忽略。

举个栗子

1
2
3
$.each( [0,1,2], function(i, n){
  alert( "Item #" + i + ": " + n );
});

输出

这样,数组[0,1,2]的对应成员就被显示出来了。

读取json可以用$.each(对象,回调函数(成员索引,对应索引内容))。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(function(){
        $('#send').click(function() {
             $.getJSON('js/test.json', function(data) {
                 $('#resText').empty();
                  var html = '';
                  $.each( data  , function(commentIndex, comment) {
                    /*$.each表示遍历这个json,参数data是返回的数据本体,第二个参数是个回调函数
                    第二个回调函数function(commentIndex, comment)中,commentIndex表示数组的索引,第二个表示对应的内容*/
                      html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>';
                  })
                 $('#resText').html(html);
            })
       })
   })

点击之后可以在#resText中显示对应内容。

再进一步:通过jsonp形式的回调函数来加载其它网站的json数据。比如说从被墙图片网站中获取4张汽车类别的最新图片:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
   $(function(){
     $('#send').click(function() {
                   function(data){
                       $.each(data.items, function( i,item ){
                             $("<img class='para'/> ").attr("src", item.media.m ).appendTo("#resText");
                             if ( i == 3 ) {
                                 return false;
                             }
                       });
                  }
         );
    })
})

此例需要FQ。

4. $.ajax()方法

最底层的方法。一个参数是用来发送请求的url,另有一个请求参数——settings。settings包含了丰富的信息。以value/key的形式存在。

jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性。在此仅举一个实例展现之。参数详情见api文档。此处不过多深入。

获取一个text.js并加载

1
2
3
4
5
$.ajax({
  type: "GET",
  url: "test.js",
  dataType: "script"
});

5.序列化元素

(1)$.serialize()方法

回到提交评论的例子。通过

1
2
3
4
5
6
7
8
9
10
$(function(){
    $('#send').click(function(){
        $.get('get1.php',{
            username:$('#username').val(),
            content:$('#content').val()
        },function (data,status){
            $('#resText').html(data);
        })
    })
})

来获取用户名及评论内容。serialize()可以使序列表表格内容转化为字符串。

1
2
3
4
5
6
7
$(function(){
    $('#send').click(function(){
        $.get('get1.php',$('#form1').serialize(),function (data,textStatus){
            $('#resText').html(data);
        })
    })
})

在此例中,data变成了字符串。

(2)$.serializeArray()方法

序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。

'''注意''',此方法返回的是JSON对象而非JSON字符串。需要使用插件或者第三方库进行字符串化操作。

返回的JSON对象是由一个对象数组组成的,其中每个对象包含一个或两个名值对——name参数和value参数(如果value不为空的话)。

(3)$.param()方法

1
2
3
var params = { width:1680, height:1050 };
    var str = jQuery.param(params);
    $("#results").text(str);

输出结果为

width=1680&height=1050

 

6.jQuery中的ajax全局事件。

一个栗子:读取远程数据时,加载可能会比较慢。这时需要一个过渡画面(loading),以全局事件函数作为判断,适时出现。

1
2
3
4
5
$('#loading').ajaxStart(function(){
        $(this).show();
      }).ajaxStop(function(){
        $(this).hide();
      })

【大案例】没有了

原书中ajax聊天室案例在笔者电脑的服务器环境上无法正常运行,也许是配置出了问题。

本章看起来相当头疼,因为涉及了较多后端知识,书的编排基本遵照api文档。案例,怎么说呢,也是相当的旧。笔者在使用时旁敲侧击了很多不属于本书方法。这也是本系列文章的主要特征吧。

但是,有些旧案例还是以学习思想方法为主。所以能敲的还是要敲的。日后知识长进,还是要更新。

最后小结本章学到的东西,当然只是自己的理解

(1)ajax最重要是从数据库读取返回数据,弄明白原生参数很重要。

(2)jQuery基本的操作方法——

$.load()——载入、筛选、回调

$.get()、$.post()——操作不同类型的数据(xml,html,json)——get和post的区别——最底层的方法当然是$.ajax()——然而现实中用得不多。

选择性地加载数据——getScript;$.getJSON——加载json文件有自己的方法。

序列化元素——通过$.serialize()系列方法迅速转换。

全局事件——应用:加载需要时间,在等待时需要反馈用户适当的提示。

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

第六章 jQuery和ajax应用的更多相关文章

  1. jQuery 第六章 jQuery在Ajax应用

    1.本章目标 ajax 2.ajax 异步刷新技术,我们的网页不需要全部刷新,按需实现局部刷新,上线后台的交互 用户体验好 地图,前台验证,表单提交,修改,查询等等 原生的js和ajax packag ...

  2. 锋利jQuery 学习整理之 第六章 jQuery 与Ajax 的应用

    1.Ajax 的XMLHttpRequest 对象 XMLHttpRequest 是Ajax 的核心,它是Ajax 实现的关键---发送异步请求.接受响应及执行回调都是通过它来完成的.XMLHttpR ...

  3. jQuery系列 第六章 jQuery框架事件处理

    第六章 jQuery框架事件处理 JavaScript以事件驱动来实现页面的交互,其核心是以消息为基础,以事件来驱动.虽然利用传统的JavaScript事件处理方式也能够完成页面交互,但jQuery框 ...

  4. 第6章 jQuery与Ajax的应用

    6.1 Ajax的优势和不足 6.1.1 Ajax的优势 1.不需要插件支持 2.优秀的用户体验 3.提高Web程序的性能 Ajax模式只是通过XMLHttpRequest对象向服务器端提交希望提交的 ...

  5. jQuery笔记(六)jQuery之Ajax

    jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对 ...

  6. 三、jQuery--jQuery基础--jQuery基础课程--第8章 jQuery 实现Ajax应用

    1.使用load()方法异步请求数据 使用load()方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为:load(url,[data],[callback]) ...

  7. 第六章-jQuery

    jQuery的理念是: 写更少的代码, 完成更多的工作 jQuery有两个版本1.x和2.x, 版本2.x不再支持IE678 jQuery最明显的标志就是$, jQuery把所有的功能都封装在了jQu ...

  8. 第六章 jQuery选择器

    jQuery选择器概述: 选择器jQuery基础,在jQuery中,对事件处理,遍历DOM和Ajax操作都依赖于选择器. 什么是jQuery选择器: jQuery选择器拥有良好的浏览器兼容性,不用使用 ...

  9. 第六章 jQuery操作表单

    1.单行文本框的应用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...

随机推荐

  1. Oracle:高效插入大量数据经验之谈

    来源于:http://www.cnblogs.com/liwenzhen238/p/3610518.html 在很多时候,我们会需要对一个表进行插入大量的数据,并且希望在尽可能短的时间内完成该工作,这 ...

  2. Intent传参数

    Intent 是Android 程序中各组件之间进行交互的一种重要方式,它不仅可以指明当前组 件想要执行的动作,还可以在不同组件之间传递数据.Intent 一般可被用于启动活动.启动 服务.以及发送广 ...

  3. Shell配置_配置IP

    1.setup 打开图形化页面 a) 选择网络配置 b) 选择设置配置   c) 选择第一个网卡     2.启动网卡(第一个网卡)      vim /etc/sysconfig/network-s ...

  4. MySql_SQLyog快捷键

    1. SQL格式化 F12 格式化当前行所在的SQL Ctrl+F12    格式化选中的SQL Shift+F12   格式化所有SQL 2. 窗口操作 Ctrl+T 打开一个新的查询窗口 Alt+ ...

  5. nodeJS+express+Jade写一个局域网聊天应用(node基础)

    为了复习一下nodeJS, 而且socketIO这东西听起来就好高端有木有, 而且有人写过了open, 也可以作为自己的参考有木有, 点击下载源代码: express是4.x的版本, 跟以前的配置有些 ...

  6. SurfaceView, TextureView, SurfaceTexture等的区别

    SurfaceView, GLSurfaceView, SurfaceTexture以及TextureView是Android当中名字比较绕,关系又比较密切的几个类.本文基于Android 5.0(L ...

  7. C#-面向对象的三大特性——封装(封装成员变量、封装成员方法)

    封装: 封装就是将数据或函数等集合在一个个的单元中(我们称之为类).被封装的对象通常被称为抽象数据类型. 封装的意义在于保护或者防止代码(数据)被我们无意中破坏. 封装既可以封装成员变量,又可以封装成 ...

  8. mybatis实战教程(mybatis in action),mybatis入门到精通

    转自:http://www.yihaomen.com/article/java/302.htm (读者注:其实这个应该叫做很基础的入门一下下,如果你看过hibernate了那这个就非常的简单) (再加 ...

  9. 【USACO 2.1】Ordered Fractions

    /* TASK: frac1 LANG: C++ URL: http://train.usaco.org/usacoprob2?S=frac1&a=dbgwn5v2WLr SOLVE: 直接枚 ...

  10. 【BZOJ-1576】安全路径Travel Dijkstra + 并查集

    1576: [Usaco2009 Jan]安全路经Travel Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 1044  Solved: 363[Sub ...