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);
        })    
原文地址:https://www.cnblogs.com/yang-wei/p/9493566.html