jQuery的Ajax初识

1. 什么是Ajax？

Ajax是“Asynchronous Javascript And XML(异步Javascript和XML)”的缩写， 是指一种创建交互式网页应用的网站开发技术。

Ajax不是一种新的编程语言， 而是一种用于创建更好、更快以及交互性更强的web应用程序的技术。

它是一套综合了多项技术的浏览器端网页开发技术。这些技术包括Javascript、 XHTML和CSS、DOM、XML和XMLHttpRequ。

Ajax可以在不重新加载整个页面的情况下， 与服务器交换数据。这种异步交互的方式， 使用户单击后， 不必刷新页面也能获取新数据。 使用Ajax， 用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。

1.1  Ajax原理

通过XTML和CSS来实现页面， 表达信息。

通过浏览器的XmlHttpRequest(Ajax引擎)对象， 来向服务器发送异步请求， 并接收服务器的响应数据， 然后用javascript来操作DOM， 实现动态局部刷新。

1.2 Ajax的优点和不足之处。

优点：

　　使用Ajax的最大优点， 就是能在不更新整个页面的前提下维护数据。

　　这使得web应用程序更为迅捷地响应用户动作， 并避免了在网络上发送那些没有改变的HTML代码信息。

　　1. 减轻服务器负担， 按需要获得数据。

　　2. 无刷新更新页面， 减少用户的实际和心理的等待时间。

　　3. 更好的用户体验。

　　4. 减轻宽带的负担。

　　5. 主流浏览器支持。

不足：

　　1. Ajax的程序必须测试针对各个浏览器的兼容性。

　　2. Ajax更新页面内容的时候并没有刷新整个页面， 因此， 网页的后退功能是失效的。

　　3. 对搜索引擎支持不好。

1.3  Ajax实现过程

　　第一步： Javascript监听浏览器网页事件（例如：点击， 提交， 更改等）。

　　第二步： 由Javascrip创建Ajax引擎对象。

　　第三步： 通过Ajax引擎对象发出请求。

　　第四步： Ajax引擎等待并且接收服务器的响应内容

　　第五步： Javascript再从“Ajax引擎对象”中获取响应内容， 并且通过DOM改变网页界面显示效果。

2. jQuery的load()方法

jQuery load()方法是简单但强大的AJax方法。

load() 方法从服务器加载数据， 并把返回的数据放入被选元素中。

语法：

$("selector").load(URL, data, callback);

第一种情况：

 

$("#btn").click(function(){
 
     //只传一个URL， 表示在id为new-projectsd的元素加载index.html
　　$("#new-projects").load("./index.html")
 
})

 

第二种情况：

$("btn").click(function () {
      // 只传一个URL， 导入的index.html文件含有多个传递参数， 类似于： index/html?name=yang&age=12
      $("#new-projects").load("./index.html", {"name": "yang", "age":12});
 });

第三种情况：

 

$("btn").click(function () {
           // 如果加载成功，则会执行回调函数
           $("#new-projects").load("./index.html", {"name": "yang", "age":12}, function () {
               alert("load执行成功!");
           });
});

 

3. jQuery的getJSON方法

jQuery的Ajax中使用getJSON()方法， 异步加载JSON格式数据。

获取服务器中的数据， 并对数据进行解析， 显示到页面中。

语法：

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

参数(url):  为请求加载json格式文件的服务器地址。

参数(data):  可选， 为请求时发送的数据。

参数(callback): 为数据请求成功后执行的函数。

 

        $.getJSON("./data/getJSON.json", function (data) {
            var str="";     //初始化保存内容变量
            $.each(data, function (index, ele) {
                $("ul").append("<li>"+ele.name+"</li>>")
            })
        })

 

4. jQuery的$.get()方法

语法：

　$.get(URL, callback);

　参数(URL): 必选， 规定请求的路径。

　参数(callback): 数据请求成功后执行的函数。

　作用：通过HTTP GET请求从服务器上请求数据。

        $.get("./data/getJSON.json", function (data, status) {
            console.log(status);
        })

5. jQuery的post()方法

语法：

$.post(URL, data, callback);

参数(URL)： 必选， 规定请求的路径。

参数(data)： 可选， 连同请求发送的数据。

参数(callback)：可选， 数据请求成功后执行的函数。

作用： 以POST方式向服务器发送数据， 服务器接收到数据之后， 进行处理， 并将处理结果返回页面。

        $.post("/index", {name: "zhang"}, function (data, status) {
            console.log(status);
        })