初学Ajax(一)

以下文字根据李炎恢——jQuery教程整理而成。

Ajax全称为：“Asynchronous JavaScript and XML”（异步JavaScript和XML），它并不是JavaScript的一种单一技术，而是利用了一系列交互式网页应用相关的技术所形成的结合体。使用Ajax，我们可以无刷新状态更新页面，并且实现异步提交，提升了用户体验。

Ajax概述

Ajax这个概念是由Jesse James Garrett在2005年发明的。它本身不是单一技术，是一串技术的集合，主要有：

JavaScript，通过用户或其他与浏览器相关事件捕获交互行为
XMLHttpRequest对象，通过这个对象可以在不中断其它浏览器任务的情况下向服务器发送请求
服务器上的文件，以XML、HTML或JSON格式保存文本数据
其它JavaScript，解释来自服务器的数据（比如PHP从MySQL获取的数据）并将其呈现到页面上

由于Ajax包含众多特性，优势与不足也非常明显。优势主要以下几点：

不需要插件支持（一般浏览器且默认开启JavaScript即可）
用户体验极佳（不刷新页面即可获取可更新的数据）
提升Web程序的性能（在传递数据方面做到按需发送，不必整体提交）
减轻服务器和带宽的负担（将服务器的一些操作转移到客户端）

而Ajax的不足有以下几点：

不同版本的浏览器对XMLHttpRequest对象支持度不足(比如IE5之前)
前进、后退的功能被破坏（因为Ajax永远在当前页，不会记住前后页面）
搜索引擎的支持度不够（因为搜索引擎爬虫还不能理解JS引起变化数据的内容）
开发调试工具缺乏（相对于其他语言的工具集来说，JS或Ajax调试开发少的可怜）

异步和同步

使用Ajax最关键的地方，就是实现异步请求、接受响应及执行回调。那么异步与同步有什么区别呢？我们普通的Web程序开发基本都是同步的，意为执行一段程序才能执行下一段，类似电话中的通话，一个电话接完才能接听下个电话；而异步可以同时执行多条任务，感觉有多条线路，类似于短信，不会因为看一条短信而停止接受另一条短信。Ajax也可以使用同步模式执行，但同步的模式属于阻塞模式，这样会导致多条线路执行时又必须一条一条执行，会让Web页面出现假死状态，所以，一般Ajax大部分采用异步模式。

load方法

jQuery对Ajax做了大量的封装，我们使用起来也较为方便，不需要去考虑浏览器兼容性。对于封装的方式，jQuery采用了三层封装：最底层的封装方法为：$.ajax()，而通过这层封装了第二层，有三种方法：.load()、$.get()和$.post()，最高层是$.getScript()和$.getJSON()方法。

.load()方法可以传递三个参数：url(必须，请求html文件的url地址，参数类型为String)、data(可选，发送的key/value数据，参数类型为Object)、callback(可选，成功或失败的回调函数，参数类型为函数Function)。

如果想让Ajax异步载入一段HTML内容，我们只需要一个HTML请求的url即可。

Ajax.html代码如下：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Ajax</title>

    <script type="text/javascript" src="jquery-1.12.3.js"></script>

    <script type="text/javascript" src="demo.js"></script>

    <link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

    <input type="button" value="异步加载数据" />

    <div id="box">

    </div>

</body>

</html>

要异步加载的数据，test.html：

<span class="title">瓢城web俱乐部</span>

<span class="url">www.ycku.com</span>

jQuery代码：

$("input").click(function() {

    $("#box").load("test.html");

});

如果想对载入的HTML进行筛选，那么只要在url参数后面跟着一个选择器即可。

$("input").click(function() {

    $("#box").load("test.html .url"); //带选择器的url

});

如果是服务器文件，比如.php(妈的，没学过啊)。一般不仅需要载入数据，还需要向服务器提交数据，那么我们就可以使用第二个可选参数data。向服务器提交数据有两种方式：get和post。

$("input").click(function() {

    $("#box").load("test.php?url=ycku"); //不传递data，则默认get方式

});

get方式接受的PHP(没学过php，这是一个问题)

<?php

    if($_GET['url'] == 'ycku') {

        echo "瓢城Web俱乐部";

    } else {

        echo "木有！";

    }

?>

$("input").click(function() {

    $("#box").load("test.php", {  //传递data，则为post方式

        url:"ycku"

    });

});

post方式接受的PHP：

<?php

    if($_POST['url'] == 'ycku') {

        echo "瓢城Web俱乐部";

    } else {

        echo "木有！";

    }

?>

在Ajax数据载入完毕之后，就能执行回调函数callback，也就是第三个参数。回调函数也可以传递三个可选参数：responseText（请求返回）、textStatus（请求状态)、 XMLHttpRequest（XMLHttpRequest 对象）。

jQuery代码如下：

$("input").click(function() {

    $("#box").load("test.php", {

        url:"ycku"

    }, function(response, status, xhr) {

        // alert(response); //返回响应

        // $("#box").html(response+"123");

        // alert(status);

        // if(status == "success") {

        //     alert("成功后的处理");

        // }

        // alert(xhr.responseText); // xhr.responseText等价于response

        // alert(xhr.responseXML); //undefined

        // alert(xhr.status); //200

        alert(xhr.statusText); //OK

    });

});

注意：status得到的值，如果成功返回数据则为：success，否则为：error。XMLHttpRequest对象属于JavaScript范畴，可以调用一些属性如下：

属性名	说明
responseText	作为响应主体被返回的文本
responseXML	如果响应主体内容类型是“text/xml”或“applicaton/xml”，则返回包含响应数据的XML DOM文档
status	响应的HTTP状态
statusText	HTTP状态的说明

如果成功返回数据，那么xhr对象的statusText属性则返回'OK'字符串。除了'OK'的状态字符串，statusText属性还提供了一系列其他的值，如下：

HTTP状态码	状态字符串	说明
200	OK	服务器成功返回了页面
400	Bad Request	语法错误导致服务器不识别
401	Unauthorized	请求需要用户认证
404	Not found	指定的URL在服务器上找不到
500	Internal Server Error	服务器遇到意外错误，无法完成请求
503	ServiceUnavailable	由于服务器过载或维护导致无法完成请求

相关文章